iOS App Design

Recipe Hero

INTRO

COMPANY
Recipe Hero
PROJECT
iOS App Design
MY ROLE
Lead UX/UI Designer
CONTRIBUTORS
Courtney Leonard - Design Mentor
Zan Masood - Owner
Ajay Singh Dhangar - Developer
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.

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

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

RH Discover 3

INSIGHT

  • 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

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

TEST

RH Test copy

USABILITY TEST

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

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.

FINAL MOCKUP

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

RH Artboard

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

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.

Contact

© Ahmed Saber 2021
UX Designer