Role
Heuristic Evaluation
Information Architecture
User Journey Mapping
Wireframing
Team
4 UI/UX Designers
Timeline
5 weeks
Tools
Figma
Figjam
Overview
Based in Colombia, Protego helps companies recover revenue from chargebacks. They help their clients get back up to 40% of their lost sales by automating the chargeback dispute process, saving their clients time on chargeback management with no fixed fees.
They are looking for their employee dashboard (back office platform) to be redesigned to:
help better communicate the chargeback dispute process with their clients
organize all information regarding their clients in a clear way
establish a more vibrant experience when going through case files for clients
Problem
Protego is unsatisfied with their current employee platform as the UX of the product is too difficult to go through. Also the color of the UI needs to provide a more delightful experience to the user.
Solution
My team has been given the opportunity to create an employee platform that Protego can use to go through all their client information with having a UI that matches with the company's brand.
Initial Kickoff call
The team had an initial call with the client going over the current version of the platform and what they were looking for with the redesign, giving us the opportunity to thoroughly understand how the platform should function.
Client needs
Pages that the client requests for the back office platform
Chargebacks page --> showing details of each chargeback case that can be viewed through various filters
Reports page --> giving an analysis of chargeback disputes based on card brand, currency, bank, and date
Customers page --> showing the list of clients that Protego has and can go through their case histories
Also, the current platform was in dark mode, which the client requested for that be to changed
Who are we designing for?
The audience that would be using this back office would of course be the Protego employees going over all the chargeback cases!
Heuristic Evaluation Findings
The first thing I did was a heuristic evaluation to assess the current platform's use of Jakob Nielsen's heuristic principles. Some of the issues that I found included:
Recognition rather than Recall - Filters should be visible to users
Aesthetic and Minimalistic Design - This is not legible
Flexibility & Efficiency of Use - In the current "Chargeback Details" page, each detail comes on a separate page, making it hard for the user to see and compare all the information for the same chargeback
Aesthetic & Minimalistic Design - Current colors don't pass color contrast accessibility
User Stories
Now that the Heuristic Evaluation confirmed the client's initial request of having a more color accessible, user friendly experience on the platform, we categorized user stories to help figure out the fundamental requirements of the project. Throughout the design process, the team referred to the user stories to make sure we covered everything.
As a Protego employee, I want to be able to:
Sitemap
I made a sitemap to organize the main peices of information as to where the user would see it on the screen. This sitemap acts as a precursor to visualizing the user's journey through the platform.
example user journey
Sketches
Now that the information architecture was settled, It was time to start drawing some sketches. This was to get a first glimpse of how the UI would be structured on the platform. Also the team is keeping in mind the most important features that the client requested
Mid fidelity wireframes
In greyscale, the team was able to demonstrate to the client the progress of each page that we made rapid wireframes for. After a few iterations, the team was able to make design choices that improved the user's experience to complete user goals that were given from the user stories.
Style Guide
It's important to note that the colors were used to provide a more accessible experience with regards to WCAG standards while being on brand with Protego's logo that was provided to the team.
High Fidelity Wireframes
With the Style guide implemented into the UI, we can fully create the vibrant, colorful UI that the client was looking for. The main flows that were designed represents the chargebacks page, reports page, and customers page per the client's request.
Before
After
small glimpse of annotations
The client likes the work, now what?
As the projects is nearing its end, I created annotations so that the developer can understand how the platform is supposed to function, with padding notes and style notes the developer can have an easier time translating the designs that the team made into code.