EattoEvolve
Website Redesign
Feb 2021 - Jun 2021
The Client
EattoEvolve is a subscription-based meal plan service offering healthy pre-made meals delivered right to their customer's door.

The Objective
Create an updated user experience for their customers, navigating them through their sales flow. The UX must communicate the meal selection and customization process as well as translate to mobile as 70% of the user base placed orders with their phones.

The Solution
Maintain their existing brand identity while building out a multi-step process for the user to better understand the options available to them.

Create a robust design system library for the team to use for future additions to their service.
Desktop Menu Mockuo

"Nothing about this subscription website has worked so far...including trying to update meals today."

-Unsatisfied Customer

"Maybe you can make a tutorial on how to keep up with ordering, billing, pausing, delivery dates, ect. It gets so confusing."

-Unsatisfied Customer

"When I press "Get Started" it brought me to a page without pictures/meals and it wanted me to add a Chefs Choice Meal Plan?"

-Unsatisfied Customer

EattoEvolve Userflow Map

Addressing the Userflow

As an introduction to the project, a user flow and rough site map were provided by the client to give a direction and organizational structure to their sales flow.

Opportunities
Two separate websites

The company had two separate websites to direct local and nationwide traffic. Either website had a different layout, sales flow, and UI. This led to customers being confused if they shopped between the two and there was little to no brand cohesion. It was imperative to merge the two.

With their target demographic being 30-35 year-old mothers, keeping a lighter theme while helping define the step-by-step process aided in the new designs.
‍

Defining meal options

EattoEvolve is unique in that it focuses on dietary needs and plans for its customer base. A clear way to differentiate between Meal Plans, ordering A La Carte, as well as the diets available was their core business model.
‍

Upsale and Retension

What does it look like for a customer once they've selected their plan? How can you make it so customers will return to their subscriptions and be interested in newer meals or add-ons?

EattoEvolve Old Websites Mockup
The Competition

Before starting any wireframes or UI element, I took some time to evaluate the existing competition to recognize any patterns that appear across each service. What was found was a majority of competitors limit the amount of information present on each step, similar to that of an onboarding flow for a service. A stepper UI element helped guide users through the flow and pills or tags were used to bring attention to weekly deals or newer menu items to call out to the customer.

EattoEvolve Mobile WireframesEattoEvolve Desktop Wireframes
EattoEvolve Design System
Building a Design System

As I started the process of translating into high-fidelity designs, an established design kit helped maintain consistency in the look and feel of the website for both desktop and mobile.

A design system helped the development and marketing team understand how and why I chose to implement certain components over others.

Desktop and Mobile Mockup of EattoEvolve Website
The Results

The goal was to improve the visual look and feel of the website while helping increase the conversion rate. 30+ pages were created, as well as, branded illustrations to communicate the meal plans and increase brand value.

Desktop Meal Detail Mockup
EattoEvolve Profile Screen
EattoEvolve Cart Screen
Mobile High Fidelity Screen StatesHigh Fidelity MockupEattoEvolve Desktop Screen States
Key Takeaways

Communication is key. Establishing a time in which you can consistently meet and talk through problems and potential solutions was imperative to keep the project prioritized and on track.

I quickly recognized what was feasible to complete in the allotted time given by the client. There were elements of the flow that I wish I was able to include in the designs, but the client wished to keep things to a minimum to meet their deadline.

If I Had More Time

Use Google Analytics to review and study patterns that arose after the new launch to see if there were any suggestions or improvements I could give to the team.

Review and read over customer satisfaction reviews on Hotjar as a way to verify my design decisions for certain touch points of the sales flow.

Implement lesser prioritized features to the website that were mentioned at the beginning of the project.