The Challenge:

Meal planning websites have notoriously low conversion rates. Our goal was to build a new website that reflected the light and fresh feel of the brand and squeeze out every point of conversion possible

Design Skills Used

UX Design // Branding

Role:

Lead Designer

Research

Quick Fresh was a brand new company with no presence in the market and no customer base. So for this project our research relied heavily on competitor research. We started by diving deep into Hello Fresh, Marley Spoon, Blue Apron, Fresh N' Lean, Factor 75 and many more, learning about where people were already spending their meal planning dollars. Afterall people don’t need more than one meal planning service so where are those market dollars being spent and how can we stand out from that?

Content Architecture

From my research and the product  goals laid out by management I started to design the user flow through the information and make rough sketches for what their experience would be. 

Low Fidelity Designs

I created these to start to gather internal feedback on the project. I created wireframes, sample messaging and short examples of what a user journey would feel like. Then I took those wireframes to internal teams to get feedback, asking them to perform a task on the wireframe website and watching how they went about completing that task. I also specifically collaborated with the development team to ensure the design was buildable without being overly expensive.

The user would select between LowCal and Keto
We offered 3 different serving sizes of meals this is where they would then select their portion size.
They would then need to select when they wanted their food delivered
Next we would display what meals they could choose from
This page was for the user to review their selection and make any changes if necessary.

Style Guide

With no style guide or design system to work from I had to start by creating those boundaries to work inside
View Project
Checkout Design System

High Fidelity Designs

Using the content architecture, design system, wireframes, and internal feedback I mocked up what the actual design would look  like illustrating how the user would flow through the conversion path. I also spec’d out the development needs for each page and handed it off to development to build.

What we learned is that most people want to decide how many meals they want first.
Then giving the user a more simple question they were more willing to answer the more complicated question next
We then need the user to select which meal type to select, that we know which meals to show them.
Then the user needed a simple way to select all their meals for the week.
This page was for the user to review their selection and make any changes if necessary.

Insights After It Was Released

Using Hot Jar, Google Analytics and studying conversion data we were able to optimize the user experience. Here are just 2 examples of what we did.

Optimization #1

Our original design focused the user decision being between whether they wanted a Low Cal or Keto meal plan. But through watching them actually interact with the page we learned their first click was the menu page, they instead wanted to know what our food looked like. We were able to improve our bounce rate and ultimately increase our conversion rate by changing the focus of our page from educating them on the meal plan types to connecting with them through the appeal of our food.

Optimization #2

We offered coaching as an add on to meal plans, hoping it would improve retention of customers. What we actually learned is the page we were offering coaching is actually the page that had the largest drop out rate. It was confusing users rather than motivating them. So by removing that page all together and instead offering that service after they had completed their meal plan purchase we were able to bump up conversion rate by 1%. 

Nature's Sunshine

UX // Web Design