Checkout process
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 checkout process is confusing; data revealed there was a large fallout rate entering and during checkout. The checkout process 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 checkout process to be designed and developed in-house.
Product development life cycle
Brainstorm
Get to know your audience's pain points and generate ideas to solve the problems
User flow before re-design
Checkout process 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
Checkout process 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
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.
Pain points
-
High drop-off in the beginning of checkout process
-
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 checking out too soon
-
Checkout 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 checkout process into logical categories
-
Provide more information about the product before pushing the user to checkout
-
Provide transparency around fees
-
Remove duplicate pages and design and develope all of the shopping and checkout experiences 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 checkout process. Below are the two focused personas that make up a majority of the audience and also who Frontier aspires to attract.
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
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.
Re-designed user flow from homepage to checkout
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
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.
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
Select Final Designs
