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
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
DEFINE
INSIGHT
Different measurement systems
Religious & healthy dietary restrictions
Different household sizes
Difficulty having to scroll up and down to see ingredients and directions
FEATURE
Measurement preferences
Dietary preferences
Adjustable serving size (+/-)
Tabs (ingredients, direction, reviews)
DESIGN
SKETCHES
WIREFRAMES
BRANDING
MOCKUP
International users
Religious or Health-related Dietary Preferences
Adjustable serving size (+/-)
Add to Shopping List
Tabs for easy switching
TEST
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
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.
Add multiple ingredients
Rate OR Comment!
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.
HANDOFF
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
Email: ahmed.saber@icloud.com
LinkedIn: ahmedsaber