Challenge Statement
Gousto is a recipe box provider whose mission is to become the nation’s favourite way to eat dinner. With a changing menu of 100 recipes to choose from each week, it is important for customers to easily find meals that appeal to the tastes and needs of their household. As the menu continued to scale, it was becoming evident that the digital recipe cards were no longer fit for purpose.
Auditing the Current Card
It was clear that the composition of the current digital recipe card had reached saturation point. Despite individual elements (calories, cook time and options available) holding value to customers, the card was morphing into a frankenstein, with a tag bolted on here and a banner tacked on there. It had reached its local maxima. To know where to focus efforts, I began by auditing the current card and flagging known issues.
Poor hierarchy of information
1: There’s limited hierarchy between all the different type styles, with most pieces of information displayed either in the same size or weight. This makes it difficult to read the card in a logical order.
2: Some recipes use premium ingredients, therefore cost a bit more. This is handled in a smaller font size and popped in the last available space on the card.
3: There’s so much information crammed into this format that the recipe title often becomes truncated. This is far from ideal when we know from customer research that image and title are key decision drivers when choosing recipes.
Distracting and ambiguous elements
4: A distracting banner sits on top of any recipes that allow the customer to swap an ingredient. This applies to roughly a third of the menu each week and creates a prominent stripe effect.
5: Tapping on this chevron lets the customer swap an ingredient, which is ambiguous iconography that relies on learnt behaviour.
Underserved imagery
6: The calorie flag obstructs the image, and the image plays a big part in decision making according to customers.
7: Customer research suggests imagery is extremely important when choosing recipes. The thumbnail-style composition on the left doesn't allow for the image to do any of the heavy lifting. The layout should be prioritising the image of the recipe, when in reality it treats the image as an equal to a lot of the information shown.
Impractical ways to surface information
8: These are campaign and category tags, which distract from the recipe title in their current placement and have little rationale behind their allocated colours. These assigned colours are also problematic in dark mode.
9: The circular cook time format has been problematic since the addition of slow-cooker recipes to the menu, which typically take at least 3 hours to cook.
10: The format of the card with image left and text right means it is sadly not accessible. This means those using larger font sizes or screen readers will struggle to read recipe titles.
Mapping Customer Benefits & Gathering Insights
Once I'd audited existing pain points, I listed the customer benefits involved in a recipe card re-design. These included:
- Having a better understanding of why a recipe is relevant for me
- Knowing why I should (or shouldn't) order a particular recipe
- The ability to quickly and easily review and move on
- To be drawn in by the visual appeal of a recipe
- To help me make a more informed decision
To further strengthen the case for a re-design, I then triangulated relevant data points and insights and found:
Customer research
After talking to many customers across years of working on the digital menu, it transpired that image and title are key decision factors when choosing.
Behavioural data
70% customers add directly from the menu (as opposed to viewing the details page), which suggests menu-based improvements will drive the most impact.
Dietary stats
1/3 of Gousto customers have dietary requirements (e.g. Gluten-Free). It's impossible to know at a glance if recipes are suitable for these customers.
Supporting literature
It takes 13 milliseconds for your brain to process an image. This stresses the importance of utilising our striking food photography to its full potential.
Forming a Hypothesis
After observing the pain points and existing insights listed above, my product manager and I formed the following hypothesis to help focus design exploration:
We believe that...
The current display and composition of the digital recipe cards is creating a sub-optimal browsing experience for customers.
So if we...
1. Show more of what we know customers love (image and recipe title)
2. Improve the hierarchy and scannability of the information shown to better aid accessibility
3. Add dietary requirement based information that helps customers feel confident they can eat that recipe at a glance
Then we will see...
1. Increased customer satisfaction when browsing the menu, leading to;
2. An increase in customers adding recipes
Benchmarking & Initial Exploration
With a well defined hypothesis in place, I collected examples from across the industry to better understand how others handled displaying item cards. It became clear that most food-based competitors usually showcased their imagery in a full-screen format, whilst companies with a larger library of items prioritised getting multiple products in view at once.
With that in mind, I got to work exploring different ideas whilst specifically considering the Gousto menu.
Reviewing item cards from various competitors including Tesco, Getir, Zalando, Uber Eats, ASOS, Hello Fresh, Ticket Master, YouTube, Deliveroo and Just Eat.
Exploring multiple different compositions and different ways to handle information 🥗
Collaborating Cross-Discipline
At this point in the process I collaborated with the brand and creative team who gave feedback on how to refine concepts to fit the look and feel of the brand as well as ‘Goustify’ the cards. This involved subtle but effective touches such as matching the corner radius of the tags to the curves of the Gousto logo.
Following the shapes of the Gousto logo and injecting this into the tags above the recipe title 🏷️
Considering accessibility
Alongside syncing up with the brand team, I was in constant communication with software engineering throughout the design process to understand the feasibility of different concepts, as well as whether each design would satisfy accessibility guidelines.
Moving the recipe titles underneath the image provided unlimited space for dynamic font sizes as well as a more logical sequence for VoiceOver, which then influenced the prioritised concept.
Prioritised design in both light and dark mode 🌝🌚
Mapping Risky Assumptions
After designing a concept that I believed best met the hypothesis, I mapped the risky assumptions tied to the design and used these to help us shape user research. Each assumption was given a score based on impact and likelihood to determine its level of risk. The top scorers were then prioritised for user testing.
The right hand column was colour coded to help see riskiest assumptions at a glance 🚨
User Research
I tested the design by conducting an unmoderated comparative study with 30 non-Gousto users to eliminate bias. Half the users saw the control design first and were asked to complete tasks and questions. The other half saw the new design first and completed the same tasks and questions.
Users found imagery, recipe title, dietary information and cooking time easier to spot in the new design compared to the control. This result validated the design, moving it to be built as an A/B test on iOS.
A snippet from the recipe card revamp user research summary. These pages show detail around specific tasks and results to help validate each assumption ✅
Performance and Impact
The recipe card revamp was my team's most commercially successful result to date. Re-designing the recipe card generated over £1.4m in profit for the company. Customers continuously gave positive feedback on the re-design with strong themes around:
a) Clearer pictures helping with the browsing and choosing process
b) Seeing dietary requirements for a recipe at a glance helping with the choosing process
After productionising on iOS, the recipe cards were then designed and built for both responsive web and Android to make sure the menu looked consistent cross-platform.
Next Steps & Involvement
By analysing both quantitative and qualitative insights, we have a strong hypothesis that by re-designing the recipe cards and making more of the image and title, we tapped into the customer's system 1 brain, making recipes more appealing. With this in mind, next steps will be to ideate on ways to make even more of the image to push recipe appeal to its limits.
Involvement: Lead designer throughout whole process. Close collaboration with Sam Sharif (Product Manager) and the engineering team responsible for building and maintaining the Gousto menu.
