Recipe Hero

Recipe Hero

INTRO

INTRO

CLIENT

Zain Masood - Owner


PROJECT
iOS Application 

CONTRIBUTORS
Courtney Leonard - Design Director

Zain Masood - Owner
Ajay Singh Dhangar - Developer

 

MY ROLE

Lead UX/UI Designer 

CONSTRAINTS 
Two weeks

No access to API

THE PROBLEM 

Many people struggle with finding recipes with ingredients they actually have. They have two options, go and buy more ingredients, or search through the endless recipe list for one they can make right there and then.

THE SOLUTION

Develop an app that allows users to create a digital pantry to find recipes they can make today.

THE GOALS

  • Design an iOS application
  • Develop branding based on company values and core message
  • Develop the user experience and feature set based on research and customer feedback
  • Design UI based on research and usability testing
  • Handoff design and assets to developers
RH Banner-min

RESEARCH

RESEARCH

Research

METHODOLOGIES

Stakeholder Interviews
User Surveys

FINDINGS

  • International users - different measurement systems
  • Religious & healthy dietary restrictions
  • Different household sizes
  • Difficulty having to scroll up and down to see ingredients and directions
Pie Charts-2

DEFINE

DEFINE

RH Discover 3

INSIGHT

  • International users - different measurement systems
  • Religious & healthy dietary restrictions
  • Different household sizes
  • Difficulty having to scroll up and down to see ingredients and directions
Arrows 1

FEATURE

  • Measurement preferences 
  • Dietary preferences
  • Adjustable serving size (+/-)
  • Tabs (ingredients, direction, reviews)

DESIGN

DESIGN

SKETCHES

Recipe Hero Sketch 1

WIREFRAMES

RH Wireframes

BRANDING

 

Branding 2-1
Branding 2-2

MOCKUP

 

Mockup 1
  • International users
  • Religious or Health-related Dietary Preferences
Mockup 2
  • Adjustable serving size (+/-)
  • Add to Shopping List
  • Tabs for easy switching
  • Adjustable serving size (+/-)
  • Add to Shopping List
  • Tabs for easy switching

TEST

TEST

RH Test copy

PROTOTYPE/USABILITY TESTING

Using my high-fidelity mockup, Skype, and Invision, I created a working prototype of my app and asked participants to perform a number of tasks in a user flow to analyze the success or failure of the user experience. I took notes while I observed participants complete tasks and observed where the user eased or struggled while using the app. Some of test findings include:

  • The average total success rate is 92%.
  • Overall user flow was successful.
  • Rating a recipe saw a 75% failure rate.
Affinity Map

AFFINITY MAP

I used the notes from the usability testing to create an Affinity Map and found several repeating problems participants faced. Some of those problems include:

  • Add multiple ingredients quickly
  • Rate or Comment, shouldn’t have to be both.
  • Add personal notes
  • Success Messages

ITERATE

ITERATE

SECOND ITERATION

Utilizing the insight from my usability testing and affinity maps, I reiterated my mockup and added new screens, refined my UI, and improved on my user experience. I also viewed the application using a mobile device and found several areas where readability was low due to font size, weight, and color and adjusted accordingly.

Mockup 3
  • Add multiple ingredients
  • Rate OR Comment!
Mockup 4
  • Add Personal Notes - Ingredients & Directions tab
  • Success Messages

PROTOTYPE

I conducted an additional usability test this time by asking participants to complete a recipe in Recipe Hero and found a number of problems. I added, edited, and deleted a number of different elements and screens including missed user flow screens, important success messages, and unnecessary elements.

You can go through the prototype to the right or on a separate window by clicking here.

FINAL MOCKUP

Combining the wireframes and style guides I developed a high-fidelity mockup which was used during my Usability testing.

RH Artboard

HANDOFF

HANDOFF

RH User Flow

HANDOFF

Using a combination of several tools I provided the developer with everything he needs to develop the app easily. Throughout the entire process I worked closely with the dev team and the owner on a smooth project completion.

TOOLS

  • InVision - Inspect
  • Marvel - Prototyping
  • Skype & Email - communication
  • Annotated comps
  • Downloadable Assets

UPDATE

UPDATE

Over the course of several months I worked closely with the developer and owner to put out v1. Unfortunately due to difficulties in finding the right API, the release has been postponed until an appropriate API is available from 3rd party source. I continue to keep in contact with the other stakeholders and still excited to get Recipe Hero in the hands of people around the world.

Other Works

SpredfastMajor Feature Release

ClinimedResponsive Redesign

InVisionFeature Addon (Case Study)

ZeitWebsite + Branding (Case Study)

© 2018 AHMED SABER