Compt (Student Project)

Compt is a perk management and rewards software that promotes inclusivity, belonging, and personalization. Whether you want to increase the breadth of perk offerings, offer something for everyone (hello inclusion!), consolidate existing perks into one powerful platform, or streamline your perks administration process.

The Team:

Duration: Three weeks

My Roles: UX/UI Designer, UX Researcher

Team: Three Designers

My design team partnered with Compt to deliver a more fun and delightful user experience. 

Working with two other UX Designers using the Double Diamond method, we kicked off our project by meeting with our stakeholder at Compt to get an overview of the company, the users, and the product. The goal of the stakeholder was to add “fun and delight” to the existing product and try to bring more engagement to what seems like a tedious task (i.e. submit a claim receipt for reimbursement).

Task Analysis

We completed a task analysis to review the existing product and documented things we noted about the UX. Things we liked about that app that we wanted to try and keep were, the different ways to submit claims and the functionality to select from your available stipends.

Comparative Analysis

We also did ran a comparative analysis. We compared brands such as Mail Chimp, Thrive, Benepass, Gusto, and BlueBoard among others. From this research, our team found that there was use of

• Clear and fun language

• Engaging imagery

• Error recognition

• Recognition of a “boring” task (i.e. setting up mail campaigns or submitting payment reimbursements)

• Easy to comprehend navigation.

User Recruitment

Partnering with our client stakeholder, we began to recruit existing Compt users to participate in user interviews. We had some difficulty finding users that had either, used the Compt platform frequently, or two, didn’t respond to our inquiry. As a result, we knew we had to be agile, so we decided to leverage our networks to find users that we’re like our target audience to do some early round usability testing of the existing product. This felt out of place in our process, but this allowed to still collect meaningful feedback about the app and focus more on the UI visuals and existing UX. Below is a screen capture for the Summary page of the original UI that we tested, along with screen captures of other aspects of the UI.

We combined User Interviews (5) with Usability Testing (6) with a total of eleven participants. I helped leading some of this early UX research by interviewing five of the eleven participants.

Affinity Mapping

Finding users to interview was challenging. We were able to interview 5 participants who were current Compt users. We took our notes and then moved into Affinity Mapping, generating following “I statements” and common themes.

• I need to know what happens when I run out of time

• I like having stipends

• I think the UI can be improved

• I appreciate how simple and straightforward Compt is

• I feel like my company cares about me

• I prefer to use my desktop over other devices when accessing Compt

• I need a better way to submit my receipts

• I like detail reports

Persona

Our persona was Kristin, a Product Manager who has been working remotely since the covid-19 pandemic started. She has received stipends from her employer, allowing her to spend money on different perks, such as health and wellness, her dog, or on coffee and snacks.

Problem Statement

Kristin needs to stay engaged with the stipend platform setup by her company, so that she can submit her receipts and get reimbursed.

MoSCoW Method

Using the MoSCoW prioritization method, our team determined what to focus on for the MVP, defining what the app Must have, Should have, Could have, and Won’t have.

User Flows

Below is the user flow for Kristen as she navigates the Compt platform. Through user research, we found that the existing flow of the Compt platform was actually pretty smooth and easy for people to follow, so we decided to not change it and kept it as part of the re-design.

Design Studio

We came up with several paper sketches as part of our design studio. I chose to focus on making layout changes to the summary page, creating some additional data features to the page, and adding a success modal once the user successfully completes submitting a claim.

Low-Fi Wireframes

I was responsible for the Summary page, which I re-named ‘My Perks’. The idea behind the re-naming was to try and give the page a more personable nature on top of a summary of information the user had available. The My Perks page featured a progress circle indicating how many days left the user has to spend their stipend money, as well as, information about the total amount they were gifted, the amount spent, and how much money they have left. This was a feature that was missing in the original version of the Summary page and users were left to manually do the calculations themselves. I decided to make a two-column layout for the perk categories available within each stipend. I also added a small on-boarding feature, point out different aspects of the UI and what they could do on the platform.

Hi-Fi Wireframes

Usability Testing

We had a total of 12 usability participants for the updated designs, with four participants in three rounds of testing — low-fi, mid-fi, and hi-fi.

Testing Scenario: You are a Compt user and have just been gifted a stipend from your company to apply towards perk benefits.

Overview of Main Tasks:

• Submit a claim for a commute

• Submit a claim for a cellphone bill

• Edit your claim information and amount

Low-Fi Results:

• Users found that there was too much scrolling on the claim form and we changed the form layout as a result.

• Users made mistakes when attempting to submit claims, so we added error states for required fields.

Mid-Fi Results:

• Most uses found the Compt brand green color ratio hard to read, so exchanged it for a dark accessible color to make things more readable.

• We added perk icons to the stipend selection screen to make it more clear what the user had available to them when selecting their stipend.

Hi-Fi Results:

• Users found the progress circle on the My Perks page slightly confusing, so we adjusted the days lefts to make it more clear how much time they had to spend their stipend money.

Solution Statement

By adding to the Compt Employee Platform, Kristin will be more engaged by the fun and delightful nature of the platform while being reimbursed for her perks benefits.

Figma Prototype

Here’s a link to the Figma Prototype if you want to see it in action.

Future Iterations

No design is ever complete and so here are some future iterations that we would have liked to get implemented:

• Add a short on-boarding video in place of the Hopscotch API product tour.

• Make the app more accessible with regards to the color ratios. The Compt brand colors were not accessible and this was a challenge we didn’t have time to tackle fully. While we did address some of the issues, this is an area I really wish we would have given more consideration towards.

• Give companies the ability to edit perk category descriptions and make the platform more customizable.

• Make the progress circle change color based on days left to use stipends. This was valuable feedback we received from usability testing, but did not have time to implement in the designs.

• Make the new design mobile responsive. We only had three weeks for this project and our stakeholder wanted us to focus on the desktop experience, as Google Analytics told us that the majority of users were on desktops, likely because of COVID-19 and working remotely from home.