Terafina Progress Bar
Client | Terafina
Terafina provides an omnichannel, cloud-based, sales platform to mid-market financial institutions.
When I joined the design team working with Terafina, two of my colleagues had just completed a two week sprint that consisted of conducting usability tests to determine the user pain points on the Terafina online application form and had delivered a number of design suggestions based off of the data collected from the study.
Questions that the usability test addressed:
- Why are so many users dropping off within the first section (About You)?
- How do users feel about the online application process?
- Is it understandable?
- Is it trustworthy?
- Redesign the existing progress bar to better indicate progress and to provide feedback.
- Make the input boxes larger (easier for mobile & tablet users to tap on).
- Change the documents & disclosure links to open a modal window instead of a new tab.
- Provide more information through the use of tooltips.
We focused on improving the progress bar.
Users did not feel progression through the application based off of feedback from the existing progress bar. The first section (About You) contained several subpages that weren't included in the progress bar. After filling out the first three pages of the form, users saw that they were still on the first step, got frustrated and exited the application.
The purpose of this sprint was to redesign the progress bar so it would be easily implementable for the different forms that the Terafina platform offers and so that it fulfills the following user needs that the existing progress bar fails to fulfill: movement, reward, and clarity.
MOVEMENT: The user needs to feel a forward progression as s/he moves through the application.
REWARD: The user needs positive reinforcement as s/he moves through the application to encourage continued participation.
CLARITY: The user needs to understand where s/he is in the application process and how many steps remain.
UI SKETCHES - 1 DAY
Each team member (myself and two other colleagues) individually sketched out progress bar ideas. We then regrouped and narrowed the options down by discussing if the option met the sprint objectives.
PROTOTYPE + TEST
Three progress bar options met the objectives:
Option 1: Fixed Footer Progress Bar
Option 2: Circle Progress Bar
Option 3: Original Progress Bar + Percentage Completed Hybrid
We created tapable prototypes for each option and conducted preliminary user studies to be able to offer the best informed design suggestion.
According to the results of our prototype tests, Option 2 yielded the most favorable results. Although this was the case, we did not believe that we landed on the design that best resolved the business and user needs.
This was communicated to the in-house Terafina team and we concluded the best course of action was to iterate on Option 2 (Circle Progress Bar) and Option 3 (Percentage Complete).
We created mockups for the two options that we wanted to test further and discussed them with the in-house Terafina team.
Option 1: The Circle Progress Bar
Option 2: The Expandable Menu/The Lefthand Navigation
Another design idea was brought up during our collaboration by a member of the in-house Terafina team that my colleagues and I hadn't considered. This suggestion seemed to fulfill all the user and business needs so we added this option to our prototype & test roster. Option 3 is featured below.
Option 3: The Ferrari Page Inspired Bar
PROTOTYPE & TEST
My team created interactive prototypes for each progress bar option using Webflow.
Determining how to run the usability test proved challenging. My colleagues and I wanted to know if A/B testing the prototypes was the best way to go about testing the effectiveness of the designs and if so, how to do it without introducing bias.
After consulting with UX designers in the industry, and based off of our limited resources, we determined that the best course of action was to test each option individually. In this manner, we performed 3-5 user studies on each progress bar option. To ensure that the tested prototype met the established user needs, we created a chart and filled it out accordingly. Below are our results:
The results of our prototype tests indicated that out of the three designs, Option 3 was the only option that effectively addressed all the user needs.
Based off the results of our prototype testing, our team suggested the implementation of progress bar Option 3.
The Terafina development team is currently implementing the suggested progress bar design.