Cooking Recipe App Design

recipe app sketchesrecipe app ux wireframes

recipe app ui design

Cooking Recipe
App Design

Personal cooking companion app for a cook-at-home food delivery service

Background

Answering the age old question, “What’s for dinner?’ MyFoodBag is a nationwide food delivery service that sends pre-portioned fresh meal ingredients with healthy recipes to New Zealand families every week.

Challenge

MyFoodBag approached our team to develop a recipe app that would make the home cooking experience more accessible for their customers. The app would provide access to their extensive library of recipes, subscription management, reminders and also generate new leads for the company.

Target Audience

Our targets were middle-class households that are pressed for time but still want to feel good about preparing healthy meals for their family.

The user groups and personas ranged from working-mothers cooking for 5 to health-conscious Gen Ys cooking for 1, but in particular, based on their existing customer database it was largely women between ages of 25-44 who were foodies and enjoy travel.

_

UX Approach

Streamline decision making

Putting the users first and understanding that their motivation/need at the point of engagement were to save themselves time planning on what to cook each night; one of our core focus was on helping the user streamline their decision making process by designing quick and smart filters that actually matter to them. Some of these were:

  • Speed of preparation
  • Cuisine categories
  • No. of people
  • Taste-buds

The full social food experience

It’s evident that what we eat and how we eat is becoming a more social experience than ever before, thus it was important that we explored ways to utilize the social media integrations and designed a flow of photo/recipe sharing that would cater to the full social food experience expanding beyond the app

  • In-app photo sharing with tagging of recipe names/links to initiate a more active engagement with user’s social circles
  • Social integration with Facebook, Twitter etc allows for seamless sharing to the user’s existing social circle.

Navigation Hierarchy

The core engagement for the user is in the discovery and learning of recipes, thus the navigational hierarchy was crucial in the design of these screens. Segmented controls were implemented to allow for a seamless transition for the user to walk through a recipe from beginning to end. Everything from ingredients preparation, nutritional values, step by step instructions to educational videos specific for that recipe.

Personalizing the experience & accessibility

The ‘Favourites’ feature allowed the user to build a more personalized experience, with the ability to create their very own recipe collection and add more variety to their repertoire of cooking.

However, we had to take in the technical consideration of accessibility. The challenge here was to find a balance between accessing the extensive library of recipes and not bloat the storage and size of the app on the user’s device. Working closely with the developers, our solution was to keep the user’s interest as priority, and allow offline storage of only favourited recipes relevant to the user, and give them easy access to those recipes anytime, anywhere.

_

UI Approach

Visual hierarchy

Treatment of the content was really important in the visual design of the app, as the nature of a recipe app was very content heavy with instructional text and imagery.

Main emphasis on the design was to keep to a simplistic and clean layout with ample negative space; allowing the well-executed imagery and typography to shine.

Typography

It was equally important for us to maintain the persona and tone of voice of the brand, so great detail was paid to carrying over the use of the 2 typefaces, Futura Maxi and Archer to prevent the content from dehumanizing/sterilizing the experience in a digital platform.

Team @ Sushmobile

Grace T – UX UI
David L – UX UI 
Chee Y- iOS Developer
Denis F – Android Developer
Alina T – Business Analyst
Lilly L – Project Manager

My Responsibilities

Idea generation
UX Wireframe Prototyping
High Fidelity UI Prototyping 
Client discussion/ presentation/ demo/ walk through
Working closely with developers and testers

Platforms

iOS
Check it out on the App store

Android
Check it out on the Play store

Note: App colour changes with calendar seasons

Skills: UX & UI