Creating the HelloFresh
Home Screen
Context
HelloFresh's digital platform allows customers to control their subscriptions, manage their weekly deliveries, and, most importantly, choose what's in their box.
Some product configuration is defined during the checkout process (box size, delivery information, payment method, and dietary preferences). HelloFresh pre-selects meals for the following weeks, but customers can return to the apps to modify those selections.
Our main goal was to redesign the previous dashboard and give customers a better summary of actions, offerings, and a glimpse of what's happening in their accounts (discounts, delivery notifications, etc.).
Team
We assembled a small but senior cross-functional team to allow us to move faster during project ideation and implementation. We ran weekly update meetings to report progress to stakeholders.
Main stakeholders:
VP of Mobile (project sponsor)
VP of Product
Retention Tribes' Product Directors
Me as Design lead
2 Designers from retention teams
Design Systems Designer
UX Researcher
iOS and Android Engineers
Product analyst
Research
What do customers want to see?
To answer that question, we researched customers within the defined segmentation. The main research questions were:
How well do our business goals align with our user's goals throughout the customer lifecycle?
System: What potential actions CAN our users accomplish?
User: What possible tasks do these users WANT to accomplish
Business: What possible tasks SHOULD our users perform?
How can we provide an experience to satisfy our users' needs throughout the customer life cycle?
Are they able to accomplish these actions Successfully, Quickly, and Happily?
The UX Research team then interviewed several business stakeholders to gather their perceptions on actions that customers should perform within our platform. With that information in hand (in the form of a list of activities), they conducted a card-sorting exercise with customers.
The third and last step was to plot the top actions — both business- and user-focused — into an impact matrix, guiding us on what to build.
Prioritized action list with business and user scores
Impact matrix showing opportunity areas
The Plan
This project was developed under the then Mobile tribe and not as a part of any product teams. This meant we had more time to investigate the problem through several rounds of research and iterations.
Product ideation and implementation process
User segmentation
HelloFresh has different statuses and sub-statuses where customers can be at any given time. A project requirement was that we would adjust the information on the home screen accordingly. To cater to the complexity, the designs would have to be based on flexible components that would be changed to the journey moment.
We decided to target Active and Canceled customers' segments for this experiment since they represented the most significant opportunity area.
User segmentation mapping
First pass on low fidelity content blocking. Focus on week's meals visualisation.
Usability testing
The UX Research team supported us again in running usability tests with our prototypes. They've analyzed 234 videos that led to ~70 improvement recommendations. Key insights:
Next step: running an A/B test
Since we were introducing many changes to the Home Screen, the approach was to run a test with a small percentage of our customers having the new designs as a variation and the old dashboard as the control version.
Test duration: 3 months
Cohort: ~350k active and canceled customers
A/B test results summary
Home users cancel less but skip more (also unskip more afterwards) -> net zero direct impact
There is almost no difference (positive or negative) in any monitored engagement metrics
Home users send significantly more referrals -> possible indirect positive financial impact
Roll-out
With the overall positive result of the experiment, it was decided for a full roll-out for all 13 markets. I've run a final task list to consider the project done:
Request translations for 7 languages.
Prepare guidelines for the Home Screen banner component. A vital feature of this design is that we build a flexible banner system where markets would be able to change its visual parameters (color, image, and layout) and also its position and behavior (dismissible/fixed and campaign duration).
Prepare documentation for the Design Systems components.
Adjust designs and prepare assets for Android.
Conclusion
The Home Screen project was pretty complex in its scope. We spent ~6 months from initial discussions and research to full roll-out.
It was exciting to be inserted into the mobile development team and to explore the possibilities of a dashboard experience more freely.
As part of rolling this feature out, I've handed over this work to Designers responsible for other product domains, allowing them to explore the space and develop it further. It was a very satisfying process of witnessing them pushing their own metrics because their features now had a better significant exposure in the front-facing app experience.
Learnings
The value of a centralized action point area
We learned about how to streamline our customers' experience within our apps. And at the same time, we created real estate for other teams to promote deals, communicate with customers, and, most importantly, allow critical actions such as skipping a particular week or checking their upcoming box's meals.
The side benefits of our experimentation endeavor
One significant learning was that customers wanted us to simplify the screen further and focus on showing more weeks in advance with the new simplified UI. This sparked many discussions around our app experience and ignited a new project that will allow us to rethink our interactions and connect our meal selection with standard mental models such as e-commerce and food ordering service patterns.
Although unintended, the new home screen opened a new world of possibilities and unblocked conversations around a more customer-centered approach.
