Project Background

Fast Fit (the client) is a Colorado Springs meal prep company. With everything made fresh every day, they proudly serve healthy, affordable, ready-to-eat meals to a wide range of local customers.

Growth has been steady, but never exponential. The marketing manager at Fast Fit reached out and explained how they are struggling with capturing new customers online. The client wanted a redesign of their website to increase conversion.

Assumptions

Before jumping into anything, we first took a look at the web traffic data and user data. Fast Fit runs various ads effectively targeting their user groups. The website has consistent traffic. However, the bounce rate is high and the online order conversion rate is low, leading us to the following assumptions:

From the client
‍
We assume that the current homepage of the website displays too much information which is distracting to users

From the client
‍
We assume that the current “page visit to purchase” path is too long that we lose customers along the way

From the designer
‍
We assume that there is a gap between the expected user flow and the actual user flow, which is causing confusion

My Approach

To identify the exact problem to solve for the client, and to define the scope of work for this project, I began with a series of research.

After our assumptions were validated, and specific user pains were uncovered, I prioritized and determined the next steps together with the client.

Deliverables

Interactive Prototype

Desktop/laptop high-fidelity prototype for online order flow
Mobile high-fidelity prototype for online order flow

UX Research

Research analysis (see full report)
Affinity map
User journey map

Interactive Design

Online order task flow redesign
Responsive wireframes

User Research

The interview focused on goal alignment, making sure the website is not missing anything to target the users.

The usability test focused on uncovering problems with the existing flow.
‍
Through the interviews, we learned what users truly care about when it comes to food, and uncovered how effective their current solutions are to help achieve their goals.

The goals and pains revealed by the interview match how Fast Fit presents its products, proving website content relevancy is not the cause for low conversion rate.

Read Full Report

However, the last two assumptions about the user journey are validated through usability testing. Major confusion arose when users tried to go through the online ordering process which caused a lot of friction and an overall unpleasant experience.

Confusion 1 - Unexpected "View Menu" Flow

When users first open the homepage, they want to get an idea of what Fast Fit offers. They expect to see prices and details. Instead, the page shows "Menu for One Time Order" with no explanation.

Confusion 2 - Signup Before Adding Meals to Order

When menu items are displayed with a CTA action button (Click Here To Place Order), users expected to be able to click and add meals to their order. Instead, the menu lacks interaction, and once the CTA button is clicked, users are asked to sign up.

Users, especially new, want to be able to explore product offering details and price points before they make any decisions. Behaviors observed during the usability testings revealed this pattern.

All interview participants complained about the lack of explanation or guidance in the flow. They simply don’t know where to click to get the information they are looking for, nor do they expect to commit (sign up) before even knowing what meals they can choose or what "One Time Order" means.

Emani, event sales
‍‍
I clicked "View Menu" first to get an idea of what they (Fast Fit) offer.

Shawn, full-time student
‍
It (the "View Menu" page) doesn't explain what the "One Time Order" is or what the other options are.

Michael, urban planning
‍‍
I want to click the card to add meals (to cart), I want to be able to click without consequences.

Claire, graphic designer
‍
This is my first time using this site, I want to just order and try the food right away, not like this (signing up first).

Define the Problem to Solve

Based on the usability test results, an Affinity Map is created to reveal specific issues with the old online ordering flow. Afterward, each issue was ranked by its implementation difficulty and impact level of each issue using a priority matrix.

As a UX designer, respecting the user journey is the first step of designing with empathy. It was up to me to convince my client to invest in the seemingly more complicated solution in order to really see improvements in conversion rate.

The User Journey Map based on the research analysis demonstrated how users expect to go through the online ordering process. The client realized how the current experience does not match users' expectations and agreed that the online order flow is the main cause of the low conversion rate.

The client and I had a discussion to determine the next steps. Given the time and resource constraints, I split the tasks into two phases.

Phase 1 - Online Order Flow Redesign

Redesign online ordering task flow based on the user journey map
Create wireframes based on the new task flow
Add a progress bar to flow
Create necessary screens for an interactive prototype

Phase 2 - Homepage Update

Navigation redesign (fewer items)
Hero page redesign
Add categories to meals
Add "Featured Meals" section on homepage
Redesign "How It Works" to explain the process before users get into the online order flow

Although restructuring the homepage and adding sections to help users navigate the order process are comparetively easier tasks to achieve, they don’t solve the fundamental problem in the online order flow.

From Sketches to Prototypes

The goal of designing a new online ordering flow is to create steps that follow users’ expectations while offering them guidance to complete the task of ordering their desired meals.

I started with the progress bar, I want users to instantly understand what to expect once the online ordering process starts. Once the progress bar is set up, I created each screen with the feedback from the research in mind.

Choose Order Type & Meals

Both one-time and subscription order types are clearly explained.

Users can add desired meals to their order, and bulk discounts will be added too. Filters are added to reduce scrolling time.

Choose Delivery Options & Review Order

Users can choose deliery or pickup before checkout starts, giving them more opportunity to click and make changes without any consequences.
‍
Review order with a summary and a breakdown before checkout starts.

Check Out Without Signing Up First

Users can check out and complete their order without any interruption or committing to an order before they are sure.

The checkout flow now features a dynamic order summary card which reflects discounts.

An option was added to allow returning customers to log in and skip filling out personal information.

High-Fidelity Screens

The wireframes were created using a desktop/laptop frame because the issues identified during the usability testing occurred in a desktop/laptop setting. Using the same environment allows me to better empathize with the users and fix the problems accordingly.

High-fidelity screens were first created for deskp/laptop. Here are some before and afters.

Interactive Prototypes

After the screens and prototypes for the desktop/laptop version were created, I worked on optimizing the mobile version. The client needed a responsive design because their web traffic is predominantly from mobile devices. A prototype for mobile was created and handed over to the client too.

The final deliverables are interactive prototypes for both desktop/laptop and mobile.

Final Thoughts

The new flow needs to be implemented by the client and its efficacy A/B tested. Fast Fit is planning to introduce the new flow once the homepage improvements are done. We expect to see a much more guided and easy-to-use website once all changes are implemented.

Online Order Flow Redesign For Fast Fit

Assumptions

My Approach

Deliverables