PaymentWorks

PaymentWorks

PaymentWorks

SaaS Vendor Management

SaaS Vendor Management

SaaS Vendor Management

PaymentWorks

PaymentWorks

PaymentWorks

Research/ UX Design/ UI Design

Research/ UX Design/ UI Design

Research/ UX Design/ UI Design

PaymentWorks is an enterprise-level B2B vendor management platform designed for the easy onboarding and management of numerous vendor accounts. This redesign idea came to me in June 2023, when I had to make a vendor account with Columbia University to receive a grant payment.


Frustrations with PaymentWorks existing design and onboarding process led to this focused redesign.

Services

Services

Services

UX Design. UI Design

Research

UX Design. UI Design

Research

UX Design.

UI Design

Research

Tools

Tools

Tools

Figma

Figma

Figma

Team

Team

Team

Aiman Mimiko


Aiman Mimiko


Aiman Mimiko

Timeline

Timeline

Timeline

4 Weeks


4 Weeks


4 Weeks


Platform

Platform

Platform

SaaS website

SaaS website

SaaS website

Background

In June 2023, myself and 6 other friends created PaymentWorks Vendor profiles through Columbia University to collect award money. We found that the platform suffered from a dated product experience.

Interviews

Interviewed a cross section of vendors through Columbia University, collating the data, I narrowed my focus towards making the website more user friendly and actionable.

Market Analysis

I explored other SaaS vendor management websites in order

to understand both how they function, and how to improve PaymentWorks’ UX, and update its current “aero” design aesthetic.

I explored other SaaS vendor management websites in order to understand both how they function, and how to improve PaymentWorks’ UX, and update its current “aero” design aesthetic.

I explored other SaaS vendor management websites in order to understand both how they function, and how to improve PaymentWorks’ UX, and update its current “aero” design aesthetic.

Live PaymentWorks Design as of October 2023

Ideation and Prototyping

Multiple rounds of sketching and wireframing helped to ideate solutions to bring financial data to the forefront, make vendor onboarding states more apparent, and simplify the usability of the onboarding messaging suite.

Design Evolution

Design Evolution

Current Design

Current Design

Current Design

Classic in its current state, with its Windows Aero design aesthetic that has withstood the test of time. It lacks rich data visualization, nor does it adhere to usability standards.

PaymentWorks Reimagined

PaymentWorks Reimagined

PaymentWorks Reimagined

Data-forward with an accessible introduction of colored elements and states to help users keep on top of their vendors in the most efficient and clear way possible.

Dashboard

Dashboard

Vendors

Vendors

Messages

Messages

Dashboard

Dashboard

I approached the redesign of this page with the goal of bringing vendor and financial data to the forefront with improved data visualization. Making it more actionable for the user and avoiding confusion in hierarchy.

Spend Dashboard

To help keep your eye on the prize

Quickbar

A header providing page-specific quick actions

Graph Tooltip

Reaffirming the intention to keep data accessible

Data Controls

Edit or change the displayed graphs to best fit a user's needs

Pending Vendors

Keep an eye on vendors during your onboarding process

Sidebar

For a cleaner look, and easy navigation

Vendors

Vendors

With a focus on decluttering the existing interface, my redesign for the vendor page introduces color to the vendor list to help reduce visual fatigue while also making onboarding states more apparent and actionable.

Pinned Vendors

Actionable cards to speed up workflow.

Additional Actions

Shown on hover and selected items to reduce visual clutter.

Processing States

Colored states to keep information scannable

Messages

Messages

Redesigned to cut down on the confusion and visual chaos of the older design by using color, elevation and opacity to clearly demarcate states and focus attention on what is most important. Inspiration taken from popular email and messaging platforms.

Contact Cards

For ease navigating to vendor and coworker profiles

Message Window

Built on a chat paradigm to help encourage shorter, to-the-point communication

Context Tools

Taken from details found in messages

Quickbar

Accelerate communication with coworkers and vendors


Design System

Design System

My PaymentWorks redesign focused on visual clarity and efficiency; with a flexible library of components created to maintain both visual cohesion and provide speedy implementation by the developers.

Inria Sans

Inria Sans

The sole font used in all Headers, navigation and components - with monospace numbers for data visualization.

My PaymentWorks redesign focused on visual clarity and efficiency; with a flexible library of components created to maintain both visual cohesion and provide speedy implementation by the developers.

Inria Sans

Inria Sans

The sole font used in all Headers, navigation and components - with monospace numbers for data visualization.

PaymentWorks

PaymentWorks

SaaS Vendor Management

Interested in working together?

© Morounfolu - Aiman Mimiko

Interested in working together?

© Morounfolu - Aiman Mimiko

Interested in working together?

© Morounfolu - Aiman Mimiko