Empathize
Define
Ideate
Prototype
Test
These are the steps of Design Thinking: a set of cognitive, strategic and practical procedures used by UX designers. The steps that are grayed out will not be covered in this case study.
Description
Adding in a delivery feature to a recipe kit bookmarking app.
Overview
Freshly Chopped is a recipe kit bookmarking app. They are having issues with returning users so they asked us to incorporate delivery of the recipe kits into the app.
The purpose of this project was to add delivery to a pre-existing app (you can find the Figma file for the original app here). The ask was for users to be able to continue bookmarking recipes as they had done previously, but also give them the option to order the meal kits as well. Part of the ask was for users to be able to generate a grocery list in the app as well if they wanted to buy the ingredients for a recipe kit themselves.
Problem statement
Freshly Chopped wanted to find a way to include delivery in their app to increase return users, without losing the users who wanted to keep using it as a bookmarking app.
How might we design a simple and engaging user experience to encourage busy users to make our app their top choice for meal kits, recipes and grocery delivery?
Additional details
We were provided with 2 primary personas, and after analyzing them, we opted to keep the “busy mom” persona who we named Georgia. We also slightly changed the primary persona: our research showed that the users who would be using this app are busy and would be using the app more for convenience and time-saving reasons.
We were a team of four for this project, fully remote. We stayed in contact via Facebook, used Miro for brainstorming and shared files, and have a shared Figma file for creating our wireframes. We all participated in each step of the process, but I would say I excelled in the following areas:
- Project management: ensure the team had a clear idea of what needed to be done by when.
- Figma person: helped the team refine the Figma file while retaining the style of the existing app.
- Presentation creator: developed the core of the presentation to ensure we presented our ideas in a clear and concise way.
This project had a short timeframe of 4 weeks. Our research wasn’t as in-depth as we would have liked for that reason, but nonetheless we were able to develop the Freshly Chopped app in a very cool way.
Overview of steps taken
- Reviewed data from client
- Initial assumptions
- Competitive analysis
- User interviews
- Refined persona
- Empathy map
- Journey map
- Storyboard
- User flow
- Crazy 8s
- Low fidelity wireframes
- User testing (4 users, in class, bias)
- Medium fidelity wireframes
- User tests (4 users, script)
- Final medium fidelity prototype
Full case study
For this project, we started by reviewing the data and personas supplied to us by Freshly Chopped. We wrote down some of our initial assumptions, including:
- To order groceries on a recipe app, there would need to be some sort of motivation to do so (loyalty points, discounts, etc).
- Ordering groceries online, users must be able to customize quality (example for meat, ability to get organic or local).
- Users ordering groceries are likely to be health conscious (going to the gym/counting macros etc).
- Busy users buy groceries online.
- Users lack trust of other people picking their produce due to being wary of the quality.
- Users like to cook and share recipes with others.
We started some competitive analysis to see what our biggest competitors were doing. We did competitive analysis on 8 competitors (each person working on this project did 2 companies). In each case, we wrote down their strengths, weaknesses, great design features, and opportunities for us. We color coded our analysis to be sure we could keep track of what comments applied to which competitor.
Competitive analysis insights gained:
While doing our competitive analysis, we found it was frustrating to not be able to see much information about what these apps were offering without first creating an account. We also found the quotes and testimonials from users were popular for users who didn’t already know the brand.
Following this, we re-reviewed the data provided to us by Freshly Chopped. From here, we developed a script to interview users to find out more about how we could solve the problem. We ran 4 user interviews of busy people in the 30s. We all took notes of the feedback we received, and compiled the information together into a master empathy map.
The user interviews gave us a lot of information about how people feel about recipe kits, bookmarking apps, and groceries. We used the information to refine our primary persona, as well as to build a journey map, a storyboard (which allows us to consider and communicate a sequence of states), and a user flow (how a user would move through our app).
Persona insights gained:
Following our user interviews, we found that our persona needed some refining. Our research showed that the users who would be using this app are busy and would be using the app more for convenience and time-saving reasons.
Journey map insights gained:
A journey map helps to see the steps Georgia would take to learn about and download our app. Our journey map showed us that we needed to showcase from the start how much our app has to offer. We also realized that users wanted to be inspired.
The user flow was particularly helpful to see how we could integrate the delivery feature into the app as seamlessly as possible. We highlighted the new screens in gray so that we knew the scope of work we had to design for.
At this point, we were able to review our initial assumptions to see what had been validated (or invalidated). The assumptions that were validated were:
- Ordering groceries online, users must be able to customize quality (example for meat, ability to get organic or local).
- Busy users buy groceries online.
- Users lack trust of other people picking their produce due to being wary of the quality.
- Users like to cook and share recipes with others.
Now that we understand more about our users, we started ideating. We began with crazy 8s, a brainstorming tool where you come up with 8 ideas in 8 minutes. After brainstorming, we individually created low fidelity paper wireframes. We compared our designs as a team to find that we had very similar ideas. We turned our low fidelity wireframes into medium fidelity wireframes: because Freshly Chopped already had a brand style, it was straightforward to add additional parts to the app.
We ran a total of 3 user tests.
For the first test, we interviewed 4 participants. We walked them through the app and asked for feedback on what they liked/disliked so that we could improve.
Our second user test was in-class with 4 participants which we recognize is bias since the testing was done on fellow UX designers.
For our third user test, we asked 4 participants survey questions and asked them to do actions to measure success rates. For example, we asked users to add a meal kit to their cart. For this test, we took scores and watched users attempt the prompts.
success rate when asking user to add a meal kit to their cart
of ecommerce traffic are mobile users
trust rate for consistent branding
Usability test script
- How much more likely are you to purchase from an app that has both meal kits and grocery shopping option?
- Scale of 1-10 (1 = no way, 10 = very likely)
- How much more likely are you to order meal kits through an app than a website?
- Scale of 1-10 (1 = no way, 10 = very likely)
- Previously through the app we weren’t able to order meal kits nor grocery. On a Scale of 1-10 (1 = no way, 10 = very likely), how much more likely will you buy through the app then if it was only available on a website?
- If the app didn’t have a meal kit and grocery option would you have visited the website to verify this option?
- Scale of 1-10 (1 = no way, 10 = very likely)
- Would you trust a company that’s inconsistent between the app and website?
- Scale of 1-10 (1 = no way, 10 = very likely)
- Now that the app is consistent with the website would you trust them more?
- Scale of 1-10 (1 = no way, 10 = very likely)
- Looking at this app, what do you think of the designing process?
- On a Scale of 1-10 (1 = terrible, 10 = amazing), how would you rate it?
- Please show me what you’d do to edit your grocery list.
- Please show me what you’d do to order a meal kit/add a meal kit to cart
- Rate this ordering experience on a scale of Scale of 1-10 (1 = terrible, 10 = amazing)
The big idea
The ask for this project was to add the ability for users to have recipe kits delivered. Our user interviews showed us that people don’t feel great about meal kits. Of those we talked to, they would much rather be able to choose their groceries themselves.
Our secondary research confirmed this: we found that only 3% of the population is committed to using a meal kit service. 69% of Canadians have never even tried one. Since the beginning of the pandemic, ordering groceries online has boomed: 49% of Canadians are ordering their groceries online.
Based on these insights, we decided to design a delivery feature but also to add a grocery shop to the app.
Cool thing
We added a “What’s in your fridge” feature that allowed users to enter some key ingredients that they had on hand to see recipe kits that included those ingredients. This allowed users to user items that were already in their fridge, thus avoiding waste – one of the key pain points for why users didn’t like recipe kits.