UX|UI Designer
Team: Mads Motush & Angela Pak
Role: UX researcher, Product Designer & Presenter
Tools: Figma, Pen & Paper
Timeline: 2 Weeks
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
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.
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.
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.
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
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
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
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
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
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
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
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
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
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.
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