Really, these apps are the product of many mini-projects over a three year span. I'll focus here on recipe selection in the context of a meal kit subscription, and how this experience evolved into a larger marketplace of products. I'll then discuss the how the style guide and design system were managed as a part of a larger visual eco-system.
You’re a woman somewhere between the ages of 28 and 50, and somewhere along the way, you've realized that you can no longer eat like a college kid, and neither can your husband (yes, you usually have a husband or partner, and may have one or two kids as well). You have grown up a bit beyond the diet crazes, and both have started listening to your bodies, which has led you to a personalized diet somewhere between paleo and keto. You feel great, and you’ve lost some weight. Heck, your kids are even eating healthier too. But you keep falling into a rut, cooking the same thing, and it’s almost impossible to organize your week so that you have good, healthy dinners on the table every day. Getting the fresh ingredients required for this kind of eating is just too much of a headache, and so you often end up ordering takeout anyway.
If you don’t already know, a meal kit is a box of ingredients with a recipe that is shipped to your door. No food waste, and high quality cuisine make it worth it for those who can afford it. Sun Basket differentiates itself with a focus on healthy eating, and high quality organic ingredients. It also has, in my opinion, the best and most variant recipes in the space.
But the meal kit business is an enormous challenge. Packing roughly 80,000 customized boxes per week anywhere in the country from multiple distribution centers requires an incredibly complex web of interlocking dependencies of logistics, weather, supply/demand, the user interface, and a constant push to expand. Also, we're talking about food here. There's nothing more important to people. If the user expects to start cooking, and one ingredient is array, they… let's just say our users are extremely passionate. Sun Basket absolutely crushes these challenges day in, day out, and I'm very proud of all the work I've done there.
2016: 3 Recipe Subscription
When I arrived in 2016, Sun Basket was a simple meal kit with a web-only interface, whereby the user signs up for a subscription and select 2-4 recipes per week from a list of 12. The goal was to keep users from leaving, and to try to get them to skip weeks as seldomly as possible.
I was hired by Sun Basket July of 2016 to produce the Sun Basket iPhone app. Mobile apps are ideal for products that require constant engagement. Having Sun Basket on the user’s home screen was an obvious solution to keeping customers and reducing skip, assumptions that would later be born out by subsequent data.
I first looked at how and when users were making their selections; whether on a large desktop, or mobile web, what time of day, whether they would return many times to re-edit during the week, and whether they would set a number of weeks at once. I also watched users interacting with the app in person, as well as reviewing a lot of hot-jar recordings of interactions, just to get as much information about the user experience without any preconceptions.
One distinct learning I came away with was that the photos were very important to scanning, selecting, and general engagement. Users would often react with their stomachs. The typical eye movement is to be bouncing back and forth between title and image. Fortunately, the Sun Basket photography is the best in class. At that time there were a significant (I recall about 25%) of menu edits occurring on mobile web. But at that time, the design kept the images quite small when viewing on mobile. It became clear that we needed to test whether using a larger photo on the mobile app would have a positive impact.
We also found that users fell into three distinct types: planners, tweakers, and set it and forget its. Planners liked to arrange multiple weeks in advance. Tweakers reacted week by week, and would often tweak a week multiple times, and ‘set it and forget’ users like to just let the boxes arrive based on their meal plan without much customization.
Sun Basket Desktop before the Mobile App
The First Iteration Sun Basket Mobile Recipe Selection
The challenge was to combine the comparative ability to see the items the user has in their basket, with the immersive photographic experience of larger recipe tiles. We decided to evolve the web experience with some solutions that would allow us to build a mobile app with patters similar enough to make for a consistent experience when users switch between platforms.
Use checks instead of numbers across mobile and desktop.
Use an ‘edit mode’. The user can choose to scroll a series of larger recipe tiles before entering into edit mode. Once in edit mode, they can see more recipes on the screen at once, and even dip down below the minimum before hitting ‘save’.
For organizers have a schedule tab with a vertical list of upcoming weeks so that the user can easily compare weeks, and manage skipping. Keeping skipping off of the main menu screen.
We realized that we didn't want to allow the user to skip right on the menu screen, and test adding this feature to see what impact it would have at a later time. We were assuming that adding this feature would have too negative an impact on the skip rate, an assumption that was born out with subsequent testing. It was very important to allow them to easily move from week to week. And so across the top, the primary navigation is to tap or horizontally swipe from week to week.
The first Sun Basket Mobile App Design with edit mode.
Ultimately, this ability to swipe sideways to access different weeks seemed very natural, and was very popular with our users. We later found that users who customized more tended to skip less, and that the more we successfully pulled users into a week to engage, the less likely they would be to skip a week. And so we tested a flow whereby when the user saves a week, then the app automatically takes them to the next week. Surprisingly, users didn't find this annoying, and it resulted in a small, but significant reduction in skips.
2019: Sun Basket Marketplace, and a shift in UX
A lot of changes happened to Sun Basket in the subsequent two years, the most significant of which was to add Marketplace, set of 150 additional products that the user could add on to their order. And so we began testing into changing the subscription model altogether, allowing a minimum box value instead of a minimum number of recipes, and even testing allowing users to order a box a la carte, without a subscription. The most significant change to the UX becomes a change to the primary left/right swipe navigation from weeks to different aisles of our virtual supermarket.
There are many changes to this design. The addition of all those new products necessitated a cart (the button in the top right corner). The cart then fulfills the need to offer the user an easy way to get a higher comparative view of everything ordered, retaining the immersive large image view of the recipes that encourages ordering. We still kept the schedule page, because we determined that adding the ability to skip from the menu page would increase skip too much. (You may notice that Colors and typefaces have also evolved at this point, a part of a larger branding revision that we undertook during this time).
In order to get a clear test of retaining a 2 recipe minimum requirement against just having a minimum $ requirement (and allow no dinners if needed), we also removed the edit mode which required a careful reworking of the experience, and careful user testing.
Marketplace proves to be a success
In the end, the addition of Market items, in the context of the changes to this UI added $2.50 in average order value each week ($1.90 from 3rd Party Items, and $0.60 from Sun Basket Kitchen eg Salads/Dips/Sauces). Our weekly orders would fluctuate, but based on a mean of 50,000 orders per week, this is a $6.5M annual run rate,or $125K/Week in additional Gross Revenue.
On average, 10% of orders each week contained at least one 3rd party Marketplace item, while 4-5% contain a Sun Basket kitchen add on.
43% of active users have ordered an add-on, 27% have ordered 2 or more times.
Of those who have trialed an add-on, 55% repurchased (ordered again).
Branding Guidelines and Design System
While at Sun Basket, I co-directed all design for the company along with another designer who was responsible for the web app. Together we maintained a clearly defined identity that spanned application UX, advertising and video, print elements such as the weekly recipe book and direct mail, and packaging. I would do Design myself across all these contexts, and at other times would review and direct other designers and contractors. For a period we brought in a Creative Director for marketing initiatives. I maintained brand standards specs to act as baseline guidelines for fonts, color, and logo usage across these variant applications.
Larger branding questions were a collaborative process. In early 2019 the Marketing department initiated a review of the Sun Basket brand, how we were targeting customers, and a review of the brand attributes we were aiming to capture. We identified a shift in personality that the company should make. I led an initiative to audit the state of our visual identity, how we looked in relation to other similar companies in our space, and to review whether we needed to make any changes.
And so as these changes would occur along the way I would need to implement these changes to our mobile apps. Designs were done in Sketch, and the designs, style guide, and a library of components was delivered using Zeplin, which allowed me to maintain consistency amidst this change. Our styles had to be tight, because sections of the app, such as recipe pages used web views, and so the web development had to use the same standards as the mobile.