OverviewUser ResearchCompetitive AnalysisIdeationUsability TestingPrototypesMoving Forward
Finli
During a three-week sprint, we created a class marketplace for our fintech client's mobile app. We made user-informed design decisions while moving a desktop feature to mobile.
feature addition
mobile

Project Overview

Experience

User Research
User Flows
Low-High Fidelity Wireframing
Prototyping
Client Work

Deliverables

High-Fidelity Mobile Prototype
Research Compilation
User Flow

Design Tools

Figma
Asana
Miro

duration

3 weeks

Team

Jessica Truong
Dave Brackenbury

Role

UX/UI Designer
Project Manager

Background

Finli is a Los Angeles-based fintech company centered around a payment processing software for family-oriented and neighborhood small businesses. Since a lot of small businesses struggle to keep their finances in order and lose money in doing so, Finli's mission is to help owners keep track of their invoices so they can spend their time running their businesses.

Scope

Finli recently added a class marketplace to their desktop website in an effort to help advertise some of their small business clientele to class takers. We were brought on to research the functionality of this desktop marketplace and to funnel our findings into a marketplace addition for their mobile app.

Solution

We created a brand new class marketplace flow for Finli's existing mobile app. After extensive user research and testing, we were able to discover user pain points in the current desktop marketplace and define opportunities to include features and information users wanted when looking for a class. We integrated our findings into our prototype and iterated with two rounds of usability testing before delivering a high fidelity interactive prototype to our client.

User Research

User Interviews & Task Analysis

We started our process with user interviews to gain insight on users and what they needed from a class marketplace. Our stakeholders wanted us to keep the focus on users who would be using the Finli mobile app for themselves and on parents who were on the app for their children.

We conducted 5 user interviews with parents and class takers to see what their class seeking process looked like and gathered some key insights. We also had our users go through Finli's desktop marketplace and collected feedback.
100% of users want to thoroughly research a class before enrolling
80% of users stated that the current marketplace has issues listing relevant information
60% users currently have and continue to want a convenient way reserve their classes
The information users wanted was difficult to find or not available

Survey Data

After creating a general flow of our mobile marketplace and getting started on some early iterations of our wireframes, we realized we needed to collect more robust data about the information users found important for enrolling and reserving class times. We had a list of criteria generated from our user interviews so we included that in our subsequent survey and asked users to tell us what information they found important.

What information is important before reserving?

Fig. 2: We asked users what criteria were important to users when it came to making a reservation for a class.
Fig. 3: 60% of class takers said they wanted to see class requirements prior to reserving a class to feel more prepared.
This information helped guide us in creating wireframes for the class description page, the class listing page and the reservation pages. Some takeaways we kept in mind as we moved from the desktop marketplace to the mobile one were as follows:
  • Cost is top of mind to our users and they want to see it early in the enrollment process
  • The number of available spots in a class is important to our users (especially during a global pandemic)
  • Users feel more prepared for a class when knowing about class requirements (class materials, prerequisites, level, etc)

Target Users

We created two personas based on our extensive user research:
  • Kiara: a mom on Finli who wants to research, reserve, and pay for virtual classes for herself and her daughter Sam
  • Justin: a fitness enthusiast looking for a new gym through Finli's marketplace
Kiara
Justin

Competitive Analysis

Reservation & Checkout

Since our client wanted us to create a new flow for the reservation and checkout processes, we spent a lot of time discussing what that might look like. We researched other popular class taking websites to see what competing apps were doing. Some apps that we inspired by were ClassPass and Mindbody.
ClassPass
ClassPass had a straightforward calendar listing class times, dates, durations, instructor and class names.
MINDBODY
When we wanted to streamline our joint checkout and reservation process, we emulated Mindybody's ability to collect reservation, payment, and contact info on one page.

Ideation

Initial Sketches

We started off quickly sketching out some of our ideas on a potential flow for our mobile marketplace. Our goal was to identify a layout for some of our pages moving forward.

Brand Guidelines

Though Finli had an existing style-guide, our point of contact encouraged us to explore a new aesthetic for our prototype. Since they were planning on updating the current app's UI anyway, our only constraints were to stick to Finli's color palette and typeface.

Mid-Fidelity Wireframing

Moving onto Figma after our user interviews and our initial sketches, we began with creating a class listing page, a class description page, and a class schedule. At this stage in our design process we hadn't collected survey data yet, but we did include information users found important during our user interviews.

Users wanted to know about instructor credibility and the reviews from the class, so we included that information at the top of our wireframes. Users also wanted a short description directly under the title before a more detailed one. Lastly, location was important to the users we interviewed as well as the duration and time of the class.

Usability Testing

User Pain Points

After we finished our mid-fidelity prototype, we moved forward to usability tests. We wanted to put the functionality of our mobile class marketplace to the test and see what users thought about the process. We gained valuable feedback about the pain points users were experiencing with our prototype.

100% of users found our reservation and checkout process confusing.

Users weren't sure about who was enrolling throughout most of the checkout process and they weren't sure whether their reservation was being held or not while inputting credit card information.

We streamlined the reservation and checkout process.

‍Going from 7 screens to 4 we were able to preserve information that users were losing track of before, cutting down on time and confusion.

Information users needed was either not listed or was listed in a confusing manner.

Users pointed out that the way time slots were listed on the product description made it seem like it was an all day class. They also questioned the experience fee (3/3 users) and how they would be able to differentiate between classes for adults and children.

We broke up the time slots for classes, added a filter option for kid vs. adult classes, and created a pop up explaining the experience fee.

We were able to clearly list out start/end times with a class duration on the class description page. We also created a filter which we hadn't built out yet. Lastly, we created a pop up for users that wondered what the experience fee was.

Interactive Prototypes

Kiara

Kiara will be booking a virtual art therapy class for herself and Sam.
‍When Kiara first signed up for this class, she wanted to be extra sure the instructor and class checked out. On the class description page, we clearly listed the information Kiara wanted to know about: cost, time and date, duration, instructor information, and requirements. Since she wants to reserve a class for herself and her daughter, being able to do both at the same time helps her save time.

Justin

Justin will be finding a new HIIT class and enrolling while creating a reservation.
This flow showcases our streamlined joint reservation and check out process. Since cost is important to Justin, it's great that its listed clearly on the class description page. Additionally, since Justin plans on attending these classes in person, he is happy he can see the number of students in the class he will be attending as well as the location of the studio since he doesn't want to drive too out of his way after work.

Moving forward

Lessons Learned

During this project, I learned...

It's Never too Late to Research

We found ourselves with mid-fidelity wireframes not knowing enough about what users wanted to see first. At this point we decided to send out a survey and synthesized the data after the first iteration of our prototype. It was well worth it as it led us to make user-centered design decisions.

Balance Working for Stakeholders & Users

I learned how to work towards client goals while addressing user expectations. We made sure we thoroughly prepared for meetings with data to back our design decisions. Luckily, our stakeholders trusted our research and were happy with the decisions we suggested.

View More of My Work

Google DocsFinliVissersDaily UIs