Green Chef is a 3 year old startup. In the early days, users could only perform limited actions on Green Chef– see their meals for upcoming weeks and skip or order a box. The user engagement on the platform was low (by design) and a web experience sufficed for users to manage their plans. Over the last year, we have been adding more and more functionality in forms of customizations, flexible ordering and multiple menu options and the user engagement on the platform has been steadily going up.
We reached a tipping point where the product team wanted to look ahead what the future of the digital experience could look like.
Brewing user interest
Over the last year, we started hearing increasing requests from users through user surveys and feedback from our customer support team about the need for a mobile app. Our consumers had used a mobile app for some of our competing products and became one of our top requests.
Heating competitive landscape
Green-Chef is a subscription based meal-kit delivery service which offers pre-portioned ingredients to cook your own meals. We overlap with 3 separate industries of grocery delivery, restaurant delivery and other broad kit-based subscription services.
I evaluated the digital experience of 20+ services across these overlapping industries. I mapped out the mobile presence for these services, and the result for eye-opening for both me and the product team.
Meal-kit industry is a crowded landscape with 10+ products with a similar product. The two ways to stand out of the pack is based on meal quality and service quality.
To provide a premium experience, is one of the core values for Green Chef. This premium experience was lacking in our digital offering, as we lagged behind our competitors in providing a mobile app.
I was in the perfect place to identify this growing need and opportunity; with an ear to the user feedback, awareness of the competitive landscape and knowledge and influence over our product roadmap. I created a product vision deck and presented to the team. Working with my product partners we got this on the roadmap.
Over the past 2 months, I am leading the product design for the new mobile app.
The user journey on Green Chef can be classified into two key stages– pre-sign up (user acquisition) and post sign up (user retention).
This comprises of the initial Discovery phase. A user learns about Green Chef through friends, search or through advertising and lands on greenchef.com. The landing pages guide user about our product offering and inspire them to sign up and order their first box with Green Chef.
This comprises of the Plan and Cook phase. The user can browse menus and plan meals for 5 upcoming weeks. They can choose to order, cancel or modify their orders based on their preferences.
Once the box of recipes arrive home, they cook dinner using the menu cards and pre-proportioned ingredients.
The purpose of launching a mobile experience is not to replicate the web experience. What's key is to identify the individual strengths of each platform and have a focussed experience for each.
Web is great for discovery of a service and marketing pages geared towards learning about a service and getting signed-up. You can't expect a user to install an app for subscription service like Green Chef to learn what's it about.
Mobile is great for creating rich immersive experiences when cooking. People use social and camera apps on mobile. Notifications can remind people at key moments. The goal was to prioritze features which leverage the mobile platform.
It was clear from research that Green Chef was absent during the final and most critical phase in the user journey. Once a Green Chef box arrived home, users had to defer to a paper recipe card and the digital experience was completely absent. A mobile app would be the missing piece of the puzzle.
Drilling deeper into user behavior and the steps in this phase of the journey, it became evident that this phase encompassed two key activities.
Cook: The actual activity of cooking the meal
Celebrate: Users felt proud of their creations, and loved to take photos and share on social platforms like Instagram, Facebook, etc.
Thus, we arrived on the journey to focus on for the mobile app.
Plan > Cook > Celebrate.
Working with the product team I identified 5 key areas for our mobile experience. One thing that we were all very clear about was we didn’t want to just replicate the web experience on the mobile app, but rather capitalize on the strengths of the mobile platform and support unique journeys only possible on mobile.
Apart from supporting order management which is a key user journey across platforms, two experiences unique to mobile we decided to focus on was the cooking experience and social/community.
I expanded the key phases in the user journey into the sub-tasks performed in each phase and enumerated all the attributes and actions associated with each task.
Using the IA above, I started sketching on paper, trying to visualize different sections of the app and how information will be laid out in each of the sections. I used these sketches to share with the team and get some feedback on the initial explorations.
After few iterations, once the structure started crystallizing, I started created wireframes for the main sections of the app.
Plan / Order management
Cook / View upcoming orders
Recipe detail page
Step-by-step cooking mode
Rate / Review recipes
Social / Camera mode
Color plays an important role for visually coding the recipes people receive every week. A box generally has 3 recipes– each recipe coded by a unique color. Users use this color to identify the ingredients to use for a given recipe.
It was essential to carry this color system to the representation of the recipes within the app.
I chose to embrace the color system within the UI, using a dynamic color scheme for all the recipe screens. At all times the color reinforces which recipe you are cooking.
Planning upcoming orders is a core task that has to be accessible across platforms. The current mobile web flow offered a good starting point for this section.
A key aspect of the design on web that users loved was getting an overview of ordered and skipped weeks from the tabs. I adapted this affordance on mobile with green or red "status dots" in the week tabs.
The Cook tab lets you browse the recipes for this week and start cooking. When a order arrives, users get a stack of 3 recipe cards in the box. This "stack of cards" affordance is what I tried to carry into the UI.
In future, users can choose to cook either with the app or recipe card or both, and the transition between the two mediums should be seamless. The color and the content accessible is the same.
New uncooked recipe
Review invitation state
Completed review state
New box arriving soon
Reminder to place order
No orders this week
When you tap on a recipe you see details of the recipe like time, calories/serving, ingredients and overview of steps. This screen Corresponding to the overview page in the physical
Details page - default
Details page - scrolled up
This was the most challenging feature in the entire app. The cooking mode had to be designed for a unique context where the user would be in the kitchen, with their phone laid on the counter.
The design had to be glanceable with immersive video and big text rather than expecting to user to see small details.
The idea was to give users an immersive video experience extending the premium experience beyond quality ingredients and flavorful recipes to digital platform.
Cooking mode provides a hands-off cooking experience with voice control feature, making it easy to navigate through the recipe while they are actually cooking on the side.
Step resolve state
When people create new and elaborate recipes with Green Chef, it gives them a sense of pride and lot of times they post pictures on Instagram, Facebook and other platforms. This social sharing and word-of-mouth is also extremely important for organic reach for Green Chef.
This experience aims to meet user at the exact moment of their cooking journey and help them take a beautiful shot to share with the world.
The benefit of creating a in-app camera experience is that we can offer contextual stickers like the name of the recipe, and more features tailored to food photography.
This is a perfect opportunity for delight.
Camera - portrait mode
Camera - Square more
Edit photo - Stickers
Edit photo - Filters
Edit photo - Smart crop
Share your creation