Terafina Progress Bar

Sprint 1


Client | Terafina

Terafina provides an omnichannel, cloud-based, sales platform to mid-market financial institutions.


Backstory

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?

Design Suggestions:

  • 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.

This Sprint

We focused on improving the progress bar.


Problem

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 existing progress bar divides the About You section into three subsections that appear underneath the main bar.

 

The existing progress bar divides the About You section into three subsections that appear underneath the main bar.


Objective

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.


Process

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). 

 

ITERATE

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.  

 

FINAL SUGGESTION

Based off the results of our prototype testing, our team suggested the implementation of progress bar Option 3. 


Next Steps

The Terafina development team is currently implementing the suggested progress bar design.