Frontier User Buy Flow

BF_Customize1_Mobile.png
BF_Checkout1_Mobile.png
BF_Confirm_Mobile.png
BF_Streaming1_Mobile.png

Overview

The goal of this project is to create an easy way for the user to intuitively complete the checkout process, in order to better obtain new customers.

Problem

The current buy flow process is confusing; data revealed there was a large fallout rate entering and during the buy flow. The buy flow is also outsourced so there is little control over it's design and development.

Solution

Updated universal navigation to be used throughout the entire site and a new buy flow to be designed and developed in-house.

Product development life cycle

Design-Process-03.png

Brainstorm

Get to know your audience's pain points and generate ideas to solve the problems

Customer flow before re-design

BUY FLOW B4.jpg

Buy flow funnel drop-off

  • Highest drop-off rate at 60.7%, occured on the 'Contact' page

  • Second highest drop-off rate at 60.5%, occured on the 'Address' page

  • Sensitive information: social security number, and home address are entered on these pages

  • Heatmaps provide click confusion around areas with pricing

  • According to journey mapping software, there is not a clear path users take

DropoutRate_Desktop.png

Buy flow page comparison

  • Frustration was highest on the 'Offer' and 'Order' pages

  • The 'Address' page had the lowest Engagement and Technical scores

  • The 'Contact' page provided the least friction for visitors

  • Wait times were longest on the 'Address' page

PageCompare_Desktop.png

User research on existing site

Performed an unmoderated click test with 50 participants in our target demographic, who purchased an internet plan. Participants were asked to rank if they received enough information in the categories related to their purchase. Below are the total averages.

BF_Brainstorm_UserResearch_Desktop.jpg

Pain points

  • High drop-off in the beginning of the buy flow

  • Users spend a lot of time waiting for technical issues or not getting the proper feedback

  • The user can't spend time shopping internet plans but is rushed into the buy flow too soon

  • Buy flow steps group illogical information together

  • Limited options to add-on more than one product to shopping cart

  • Users want more information about pricing

  • Duplicate pages cause confusion, as not all experiences are streamlined

Insights

  • Inform user that data is being transferred securely and that their credit score will not be impacted.

  • Improve data transfer to decrease wait times

  • Create simple and effective animations to load while user is waiting

  • Simplify buy flow process into logical categories

  • Provide more information about the product before pushing the user into the buy flow

  • Provide transparency around fees

  • Remove duplicate pages and design and develope all of the shopping and buy flow experience in-house

Define

Goals, scope, and audience

Goal

Customers should easily get from homepage all the way through to checkout with confidence that they chose the right product.

Personas

Based on Qualtrics browsing data, we are able to focus on the main users of the buy flow process. Below are the two focused personas that make up a majority of the audience and also who Frontier aspires to attract.

Vincent Franco.png

User Journey's

Based on moderated user interviews, usability testing, and customer feedback, we were able to create their journey's to emphasize their pain points

Journey Map – Vincent – 3 1.png

Scope

Create universal navigation to be used throughout the entire site and a new checkout process to be designed and developed in-house. This requires the redesign of many pages.

Design

Create sitemap, wireframes, and prototype the design

Sitemap

Based on multiple open and closed card sorts, the following sitemap was created. It includes the addition of the 'Why Frontier' section and also categories within each main menu item.

Frame 51.png

Re-designed customer flow from homepage to buy flow

BUY FLOW After.jpg

This project focuses on the buy flow experience; customizing plan, checking out, and confirmation of order. For re-design of the shop/homepage flow see Pre-checkout flow project.

Wireframes

Web 1366 – 6.jpg
iPhone 6, 7, 8, SE – 5.jpg
Web 1366 – 7.jpg
iPhone 6, 7, 8, SE – 6.jpg
Web 1366 – 8.jpg
iPhone 6, 7, 8, SE – 7.jpg
Web 1366 – 9.jpg
iPhone 6, 7, 8, SE – 8.jpg
Web 1366 – 10.jpg
iPhone 6, 7, 8, SE – 9.jpg
Web 1366 – 11.jpg
iPhone 6, 7, 8, SE – 10.jpg
Web 1366 – 12.jpg
iPhone 6, 7, 8, SE – 11.jpg
Web 1366 – 14.jpg
iPhone 6, 7, 8, SE – 13.jpg

Test

With users and internal stakeholders to eliminate friction

User research

In order to benchmark the starting point and to also continually improve the design, the same test was performed multiple times. Starting with the existing site, see the results above, then on the wireframes, and on various iterations of the prototype. The test used 50 participants in our target demographic, who purchased an internet plan. Participants were asked to rank if they received enough information in the categories related to their purchase. Below are the total averages on the final design.

BF_Test_UserResearch_Desktop.jpg

With the expanded shopping experience it was also important to test the longer flow to make sure it was logical

86%

of participants thought the number of pages was appropriate

87%

thought the main action was clear on each page in order to progress in the flow

Launch

Go live! Share your design with the public

Final Designs

BF_Customize1_Desktop.png
BF_Customize1_Mobile.png
BF_Checkout1_Mobile.png
BF_Checkout1_Desktop.png
BF_Confirm_Desktop.png
BF_Confirm_Mobile.png
BF_Streaming2_Mobile.png
BF_Streaming2_Desktop.png