top of page

The Shopping Experience

Frontier's pre-checkout flow


Frontier has embarked on a rebrand, which involves a site-wide redesign. Most importantly the homepage and shopping experience. The goal of this project is to help users understand the best product for them and to make it easy for the user to find their way to the checkout process.


Current shopping experience is confusing; user testing revealed there is not enough product information available. The shopping pages are also outsourced so there is little control over it's design and development.


Update universal navigation to be used throughout the entire site. Redesign homepage and shopping pages that will be designed and developed in-house.

Product development life cycle



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


User shop flow before re-design

Homepage flow data

Based on site visitors who started on the homepage. Data was collected over a 6 month period.

Frame 6102.png

The most common path prospect users take starting from the Homepage is:
Homepage > Buy flow (checkout) > Exit site (without purchasing)

Product (shop) pages flow data

Based on site visitors who landed on the product pages. Data was collected over a 6 month period. Collected data regardless of starting point, used to track how visitors were getting to the product pages.

Frame 6103.png

When visiting the shop pages, most users start from the Homepage:
Homepage > Product Pages > Buy flow (checkout)

The user that visit the product pages are much more likely to enter the buy flow and purchase

Homepage scroll and click data


of homepage visitors scroll past the hero


of homepage clicks occur above the fold


of clicks occur in navigation and promo banner not in hero


of clicks occur in hero main button

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.

User research on existig site

Pain points

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

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

  • Limited options to view products other than internet

  • Users want more information about charges and pricing

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


  • Create a better shopping experience; provide more product information before pushing user into the buy flow

  • Provide transparency around fees

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

  • Keep a direct path from homepage to buy flow for the decided user

  • Create a group of TV shopping pages


Goals, scope, and users: who are they and what are their problems?


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


Based on Qualtrics browsing data, we're able to focus on the main users of the buy flow process. This focused persona makes up most of the audience.

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


Create universal navigation to be used throughout the entire site, a new shopping experience for internet and TV, and buy flow to be designed and developed in-house. This requires the redesign of many pages. This project focuses on the shopping experience, for the redesign of the checkout process see Checkout Process project.


Create sitemap, wireframes, and prototype the design


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 user flow from homepage to checkout

This project focuses on the homepage internet and TV shopping experiences. For a re-design of the checkout process see Checkout Process project.

Selection of low fidelity wireframes


Selection of mid fidelity wireframes

Web 1366 – 4.jpg
Web 1366 – 5.jpg


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


of participants thought the number of pages was appropriate


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

AB Tests

The main TV page and YouTube TV were the first to launch (before the re-brand), allowing for initial data to come in and AB tests to be conducted. Each item listed was performed as a single variation with the initial design as the control version.

1. Darken image

Makes text easier to read

2. Button in hero

Drive prospects to purchase internet

3. List out benefits

Easier for users to read

4. Add CTA to chart

Heat maps indicate chart receives many clicks

5. Update image

To be closely related to service and not device


1. Add video reel

Instead of static image

2. Speak to price-cut

Instead of money saved, and include price in hero

3. Remove new and current customer cards

Not receiving many clicks and actions can be achieved elsewhere

4. More direct CTA

Change to "Get Frontier Internet" throughout page


Go live! Share your design with the public

Final Designs

After multiple usability tests, clicks tests, analyzing click data, AB tests, and a company-wide re-brand, the following designs were decided on



Internet pages

1 Gig Mobile.png
1 Gig Desktop.png

TV pages

Designed to show individual features, and also part of the Frontier brand

Main TV page
YouTube TV page
Apple TV
Streaming services
bottom of page