hero image.png

Team: Mads Motush & Angela Pak

Role: UX researcher, Product Designer & Presenter

Tools: Figma, Pen & Paper

Timeline: 2 Weeks

screen mockups.png

About:

We preformed a heuristic evaluation of the HelloFresh App. After doing so, we redesigned the application to better suit the needs of HelloFresh Customers and created a design system to assist future design teams & create a consistent system. 

Process

Analysis

Frame 2.png

Phase 1: Evaluation

After rifling through the HelloFresh app, my partner Angela and I came to an agreement of a task flow we wanted to work with. From here, we were able to get a better focus of what we wanted to fix.

We were also able to create our persona, Sarah. She was based on the following criteria:

- 20 something year old trying to eat healthy

- in a Junior position and not looking to break the bank

- Often busy and can't spend that much time on making food

The task flow we'd create would also help us in both empathizing with the customer and to help us get a better understanding of the process a customer takes through the app and where the problems might lie. 

Task Flow - Mads.png

Heuristic Criteria 

We would utilize Neilson and Norman's Heuristics for usability and accessibility to figure out what exactly made the HelloFresh app so unusable and perhaps contribute to the high user drop off rate after one week of using their product. 

heuristics.png

Evaluation Scale

We would utilize this evaluation scale to measure the success and usability of the HelloFresh product based on Nielson and Norman Group's heuristics for usability. 

Urgency Scale.png

We'd also utilize this urgency scale in order to help us select the most pressing problems and set our priorities straight.

Redesign

Phase 2: Makeover time!

After performing and presenting an analysis for usability of the HF app, it was time for us to make good on our word. We'd then go on to redesign the application with the following changes to the product pages:

1. Landing Page

The home page of the HelloFresh App was very overwhelming from a user perspective. It included a moving video and a bunch of CTA's that were overwhelming to our user Sarah.

Problem:

- too many CTA's are overwhelming for the consumer 

- language between "let's get started" and "view our plans" was confusing to the user-- what's the difference?

- moving screen was too busy and made it hard to read

Solution:

- Removed redundant CTA's and clarified language

- Removed moving background in place of something fun and more accessible

Design change landing 1.png

2. Select Order

The registration page for the app was confusing as it Sarah didn't realize there was more to see and also had unclear language.

Problem:

- Sarah was unsure what the "family friendly" label meant? Not Too spicy? Kid approved? Easy to make?

-- lack of affordance to signify additional content below the CTA

Solution:

- clarified language to indicate "family friendly" actually meant "fast and easy to make" by changing it to "quick fixes"

- additional page created to ensure customers get all information

register 1.png

3. Registration Page

The registration page for the app had way too much information for one page which was confusing for Sarah.

-  too much small text that was tedious to read and confusing to look at

-- lack of affordance to signify additional content below the CTA

Problem:

Solution:

- creation of easy to consume bullet points that explain the information

- Split up content onto a second page so that Sarah can see all the information that's important 

design change landing 2.png

4. Addition of New Modal

Customers weren't shown what meal options they could have with HelloFresh. This was off-putting and confusing to Sarah.

- There was no pricing information about the product 

- Sarah had no idea what types of food she could expect from HelloFresh

Problem:

Solution:

- created new modal with options to select meals before being asked to pay for the product

New Modal.png

5. Pricing

The prices weren't explained very clearly at the beginning of the page. Sarah was shocked to see how much she was spending at HelloFresh at the end of her journey and backed out.

-  pricing was unclear, price per portion wasn't thoroughly explained

Problem:

Solution:

- added a clearer breakdown of the price earlier on the task flow

Plan cost.png

6. Email Correction

Before my changes, the HelloFresh App informed the user of their mistake but made no efforts to correct it.

Problem:

-  no suggestions for improvement/ how to correct the error

Solution:

- added suggestions for corrections to make the registration process easier for the customer

Email Correction.png

7. Address Registration

The HelloFresh app's address registration form fell below the CTA and Sarah wasn't able to figure out why she wasn't allowed to continue registering. 

Problem:

- no affordance to signify additional content below the CTA

Solution:

- created new page for additional content so that Sarah doesn't miss any of the information given to her by the app 

address.png

8. Delivery Preferences

The HelloFresh app's address registration form fell below the CTA and Sarah was missing out on the ability to request specific instructions for delivery.

Problem:

- no affordance to signify additional content

- Delivery icon unrelated to the action of delivery

Solution:

- created new page for additional content as not to overwhelm and confuse the customer 

- updated icon to coincide with deliveries being no contact 

delivery preferences.png

9. Checkout

Before my edits, the first time the customer saw the price was at this point. It was jarring to Sarah because HelloFresh totes itself as being so affordable-- she wasn't expecting the price to be so high.

Problem:

- lack of information about price for the customer, Sarah is shocked when she sees how high the price is 

Solution:

- added more information earlier on in the taskflow along with reiterating the prices at the checkout page

Checkout.png

Organize

Phase 3: Design System

It was now time for my partner and I to go our separate ways to flex our organizational muscles. I created a design system in order to convey the elements that other designers could utilize to create consistent brand and style elements to increase accessibility of the HelloFresh product. 

Buttons.png
assets.png
Color Styles.png

Conclusion

Next Steps & Reflection

The next steps for the HelloFresh App are to:

- further improve the design consistency of the style guide

- perform user tests on the current product 

- research competitor apps for inspiration