Kevin Hanst
UI/UX Designer

Role

  • Heuristic Evaluation

  • Information Architecture

  • User Journey Mapping

  • Wireframing

Team

4 UI/UX Designers

Timeline

5 weeks

Tools

  • Figma

  • Figjam

Protego

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.

Discover
Protego

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!

Protego

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:

  1. Recognition rather than Recall - Filters should be visible to users

  2. Aesthetic and Minimalistic Design - This is not legible

Protego
  1. 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

  2. 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:

Ideate
Protego

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.

Protego

example user journey

Design
Protego

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.

Protego

Before

Protego

After

Handoff
Protego

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.