Green Chef's Mobile App Experience
For 3 years, Green Chef has been a web-only product. Late 2017, the product reached a defining state when for many factors discussed below we decided to take the plunge into a mobile app. I am responsible for strategy and product design for the first ever mobile app for Green Chef.

This was an exciting opportunity envious unique experiences for a Green Chef user on this new platform.
ASKING THE WHY?

Why mobile? Why now?

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.

My role
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.

LAYING THE GROUND-WORK

The user journey

The user journey on Green Chef can be classified into two key stages– pre-sign up (user acquisition) and post sign up (user retention).

Pre-sign up
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.

Post sign-up
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.

Design for the platform

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
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
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.

Cook phase- Missing piece of the puzzle

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.

DESIGN PROCESS

Prioritization of features

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.

Information Architecture

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.

Wireframes

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

Plan and schedule upcoming deliveries or browse alternate menus for a week.

Cook / View upcoming orders

Once a box is delivered to your doorstep, view recipes for current week.

Recipe detail page

Detailed instructions and ingredients for a recipe. CTA to enter step-by-step mode.

Step-by-step cooking mode

Immersive voice-enabled cooking experience.

Rate / Review recipes

Once you have cooked a recipe, upload a picture and rate/ review it.

Social / Camera mode

A custom camera mode which suggests smart filters, smart crops and stickers like recipe names.

Visual Design

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.

FEATURES

Plan / Order management

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.

Skipped order

Scheduled order

Upcoming orders

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.

Detailed breakdown

New uncooked recipe

Card for every new recipe this week.

Review invitation state

Once you have finished cooking a recipe, the card resolves into compete state. Add a photo, rate, review and share.

Completed review state

State once you add a recipe.

New box arriving soon

Contextual reminder when your box is just about to arrive. A push notification will also be sent.

Reminder to place order

A contextual reminder before cut-off date, to order your meals.

No orders this week

Screen state, when no meals were ordered this week.

Recipe details page

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

Animated walkthrough

Detailed breakdown

Details page - default

Details page - scrolled up

Immersive cooking mode

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.

Detailed breakdown

Step-by-step cooking

Each step plays with video and audio, and the directions are written in big fonts to be easily readable from a distance.

Step resolve state

Once the video for a step is over, it resolves to show controls. User can swipe to next step, or play again.

Finish cooking

Once all the steps are over and the dish is plated, user gets an option to add a photo or finish cooking.

Contextual timers

Based on the recipe, user can see recommended timers. All you need to do is press start.

Ingredients list

Check which ingredients are needed in every step.

Voice control

Hands-free cooking possible with voice controls like "Next step", "Go back", "Show ingredients".

Social - Custom photo mode

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.

Detailed breakdown

Camera - portrait mode

Click a photo or choose a photo from gallery.

Camera - Square more

Switch between portrait and square mode.

Edit photo - Stickers

Add contextual stickers like the name of the recipe, the menu, hashtags, etc.

Edit photo - Filters

Food themed filters specially designed for food photography.

Edit photo - Smart crop

Suggested crops to make your photos Instagram-worthy. Green Chef helps you cook and take great photos too.

Share your creation

Share photo on social media. A description for Twitter or Instagram gets copied to clipboard.

MORE WORK