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.).

By providing a better navigation and information structure, customers would more easily find what they’re looking for and perform critical actions they want to do. In return, this would improve app engagement and better connect customers to our brand resulting in a higher cohort ROI.

By providing a better navigation and information structure, customers would more easily find what they’re looking for and perform critical actions they want to do. In return, this would improve app engagement and better connect customers to our brand resulting in a higher cohort ROI.

By providing a better navigation and information structure, customers would more easily find what they’re looking for and perform critical actions they want to do. In return, this would improve app engagement and better connect customers to our brand resulting in a higher cohort ROI.

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

Research informed the new page's

information architecture

Research informed the new page's

information architecture

Research informed the new page's

information architecture

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.


Second pass. Weeks are better represented. Exploring other key actions + notification system.

Experimenting with a more diverse content and adding images to assess the visual weight.

Samples of wireframing stages

First pass on low fidelity content blocking. Focus on week's meals visualisation.


Second pass. Weeks are better represented. Exploring other key actions + notification system.

Experimenting with a more diverse content and adding images to assess the visual weight.

Samples of wireframing stages

First pass on low fidelity content blocking. Focus on week's meals visualisation.


Second pass. Weeks are better represented. Exploring other key actions + notification system.

Experimenting with a more diverse content and adding images to assess the visual weight.

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:

Users preferred the visuals and experience of the new home screen

Users preferred the visuals and experience of the new home screen

Users preferred the visuals and experience of the new home screen

Participants rated the usability of the old home screen higher than the new one. This may be due to familiarity and learnability issues

Participants rated the usability of the old home screen higher than the new one. This may be due to familiarity and learnability issues

Participants rated the usability of the old home screen higher than the new one. This may be due to familiarity and learnability issues

Users liked the visual overview of weeks and could easily interact with them. They wanted to see more weeks on the new home screen

Users liked the visual overview of weeks and could easily interact with them. They wanted to see more weeks on the new home screen

Users liked the visual overview of weeks and could easily interact with them. They wanted to see more weeks on the new home screen

Users were quickly able to discover and interact with the banners on the home screen.

Users were quickly able to discover and interact with the banners on the home screen.

Users were quickly able to discover and interact with the banners on the home screen.

Users would prefer more consistency and differentiation in information presentation

Users would prefer more consistency and differentiation in information presentation

Users would prefer more consistency and differentiation in information presentation

There are some unintuitive interactions and discoverability issues throughout the app

There are some unintuitive interactions and discoverability issues throughout the app

There are some unintuitive interactions and discoverability issues throughout the app

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.

Contact

Based in

🇩🇪 Berlin/Germany

Phone/Whatsapp

+49 0174 7815236

Email

minasdesign@gmail.com

Social

Work experience

2022 (current)

Senior Product Design Manager @ Moonfare

2018-2022

Product Design Manager @ HelloFresh

Now reading

Contact

Based in

🇩🇪 Berlin/Germany

Phone/Whatsapp

+49 0174 7815236

Email

minasdesign@gmail.com

Social

Work experience

2022 (current)

Senior Product Design Manager @ Moonfare

2018-2022

Product Design Manager @ HelloFresh

Now reading

Contact

Based in

🇩🇪 Berlin/Germany

Phone/Whatsapp

+49 0174 7815236

Email

minasdesign@gmail.com

Social

Work experience

2022 (current)

Senior Product Design Manager @ Moonfare

2018-2022

Product Design Manager @ HelloFresh

Now reading