How Gousto made it easier to choose recipes by redesigning their digital recipe cards
It takes 13 milliseconds for your brain to process an image. That’s 7 times faster than you can process taste, 30 times faster than you can blink your eye, and 737 times faster than Usain Bolt’s 100m world record.
Our squad kept this statistic in mind when spending time reflecting on the features and labels attached to our recipe cards. Whilst we know each element holds value to our customers, we’d noticed the recipe card as a whole was growing into a frankenstein, with a tag bolted on here and a banner tacked on there. It had reached its local maxima, and that only calls for one thing — a redesign.
The problems with our old recipe card
Despite each piece of information being helpful, the composition had reached saturation point. As you can see below, there were a few issues cropping up:
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 sometimes the title of the recipe becomes truncated — not ideal when we’ve learnt from customers that the recipe title is a key factor in decision-making 😬
Distracting and ambiguous elements
4: A distracting purple banner sitting on top of any recipes that allow the customer to swap an ingredient. This applies to roughly a third of our menu each week therefore creating a prominent and unwanted striped effect.
5: Ah, the ambiguous chevron. Tapping on this allows you to swap an ingredient, which is difficult to guess without any kind of visual or informational scent upfront.
Underserved imagery
6: By flagging calories on recipes, we start obstructing the image. This isn’t good, as we know from countless customer interviews that images play a big part in decision making.
7: If we know from research that imagery is important when choosing, we should be making the most of how we show this as opposed to displaying it in a small thumbnail-style view.
Impractical ways to surface information
8: These are our campaign and category tags, which distract from the recipe title in their current placement and have little rationale behind why they all have allocated colours. These colours are also problematic in dark mode.
9: This is how we display our cooking time, which served us well until we added slow-cooker recipes onto the menu. These recipes typically take hours to cook, and as you can imagine, displaying ‘3hr 15’ is tricky in this circular format.
10: Last but by no means least, the format of the card with image left and text right means it is sadly not accessible in the slightest. Those using larger font sizes or screen readers will struggle.
Oh and if that wasn’t enough to convince you of a redesign, here’s a bonus pain point. It’s impossible to know at a glance whether this recipe is suitable for those who have dietary requirements. This makes up around 37% of our customer base!
How we tackled solving these problems
Once nailing down each pain point, we mapped each one to a customer benefit or behaviour. Our squad had recently conducted customer interviews to learn more about another feature we’d launched at the time, and there were lots of behavioural learnings we could glean to help inform the way we designed our new recipe cards.
Once solidly in the frame of mind of our customers, we rolled up our UI sleeves and went far and wide on exploring how our new recipe card could look and work.
After just a few days, Figma was brimming with different solutions. We’d started honing in on a layout we believed solved for the pain points we’d outlined, but wanted to make sure the recipe card looked on brand too. Our talented creative team were looped into the process who gave excellent pointers on how to ‘Goustify’ the cards further, including matching the corner radius of the tags to the curves of the Gousto logo — a stroke of genius.
The redesigned recipe card now gives careful consideration to the size of the image and subsequent information hierarchy underneath. Customers can immediately eat with their eyes before learning more about the recipe at a glance. The recipe title is given prominence using font size and weight, and we’ve included dietary requirement flags in the top left corner of the image — a position that will rarely encroach on the food itself. Campaign tags are treated with neutral colours in a consistent format to avoid overloading the menu with unnecessary colour, and best of all? The recipe card is accessible to everyone thanks to the information stacking vertically.
We went on to map out the riskiest assumptions tied to the redesign and used these to help us shape our user research. Unsurprisingly, users found imagery, recipe title, dietary info and cooking time easier to spot in the new design compared to the control. This gave us the confidence to get going on building the tiles on iOS as an A/B test.
How did they perform?
This was an extremely successful experiment for the Turnips squad. It led to customers returning to the menu more often, ordering more recipes, and adding more first recipes (for context, 70% of customers drop off before adding their first recipe, so that last one is an important metric for us to move.)
The recipe card redesign was our squad’s most profitable result to date. And it’s not just money that talks either — customers have continuously been giving us their feedback on the redesign, with strong positive themes trickling in around:
a) Having clearer pictures to look at when choosing recipes (One customer even quoted to us how “a picture paints a thousand words” — and they’re not wrong, check the science behind it here).
b) Being able to easily see dietary requirements for a recipe at a glance
What we’re up to next
Of course, upon observing these results we couldn’t wait to productionise the experiment on iOS as well as design and build the new recipe cards cross-platform. You can see them in all their glory on responsive web, with Android closely following their tail in the next few weeks.
The fun doesn’t stop there either. We’ve recently started hypothesising over why we saw such a success. By analysing both quantitative and qualitative insights, we have a strong hypothesis that by redesigning the recipe cards and making more of the image and title, we tapped into our customers system 1 brain, making recipes more appealing.
To double down on this, we’re investigating ways to make the image and title even more enticing, firstly by experimenting with a larger hero card shown on a customer’s top 5 recommendations, a la Netflix.
There’s many avenues we can explore around making recipes on the menu even more appealing to customers. Watch this space for the next set of learnings and how we iterate on them.
Want to learn more about what the Gousto tech team gets up to? Follow our blog to keep up with all the latest news!
