top of page
PREPARE - App-8.png
Prepare phone welcome page. The Prepare fork and knife logo upon a soft yellow and gold background with a very light dotted cross hatch pattern.
Prepare app home page. Search bar at top of page followed by quick links to recipe categories (seasonal recipes, classic, drinks, and desserts). Beneath that is a pinned recipes and recently updated recipe sections.

PROJECT

PREPARE: A Recipe App

ROLE

Lead UX Designer, from conception to delivery

DURATION

2022, 6 Months

PROCESS DECK

LOW-FIDELITY PROTOTYPE

HIGH-FIDELITY PROTOTYPE

PREPARE:

A TRAINING SITE

hero card 2a.png

PROJECT VISION

PREPARE: A Recipe App, was created specifically for the restaurant, bakery, café, and bar industries, to break accessibility barriers and support the needs of line cooks, chefs, bakers, bartenders, new hires, etc., during their chaotic and busy shifts.

PROBLEMS

  1. Busy schedule doesn't leave time to step away without falling behind.

  2. Language barriers between front and back of house regarding how an item is made. Also, general recipe inconsistency.

  3. Turnover from disorganization and poor training.

  4. Recipe books are old, not updated, sticky/gross, hard to find, or non-existent.

RESEARCH CONDUCTED & INSIGHTS

Qualitative research was key. I conducted interviews, competitive audits, a survey, empathetic storyboards, and eventually multiple usability studies to identify the needs of my target users, which are: line cooks, chefs, bakers, bartenders, new hires, etc. At the start of the project, I assumed I’d need to create an app where users can quickly find recipes but I learned so much more.

Research confirmed the idea of finding recipes quickly since users expressed having a limited amount of time to search for recipes. It also revealed the difficulty of working in hot and messy environments, how word-of-mouth recipes being inconsistent, how there's high turnover because poor training, and language barriers.
 

COMPETITIVE ANALYSIS

I've researched several competing companies. None were true direct competitors since the app I've created would be found in restaurants, bars, bakeries, cafés, and the like--not for at home personal use. But while conducting interviews, I came to learn that if a chef was not able to get clear recipe directions, one option would be to search online on platforms open to the public.

Gaps:

  • Too many features

  • Minimal or no accessibility options

    • Minimal language options or just english

  • Not much diversity

  • No ability to customize

 

Opportunities:

  • Allow users to customize homepage to fit their accessibility, dietary, and other personal needs

  • Have a search function with filtering options so users can find exactly what they want

  • Be clear and concise with directions/navigation

  • Take the least amount of clicks to get the information they want

THE JOURNEY

The insights gained from research, easily created the journey of a user searching for a "Seasonal Meal," as quickly as possible.

User Journey map for case study Prepare: a recipe app.
PREPARE - App-5.png

PAPER WIREFRAMES

TO DIGITAL WIREFRAMES

To save paper, I used an illustration program to draw my paper wireframes. Brainstorming and creating in this way made it easier to visualize what my digital wireframes could potentially look like.  These visuals helped to determine what areas I needed to improve upon. I dedicated a lot of time iterating on intuitive icons and easy navigation before remembering what generation phone screen I was designing for. From there, I need I had to tweak the layout to accommodate for the screen size.

 

View PREPARE's Low-Fidelity Prototype.

Paper wireframes (phone screen layout sketches) for case study Prepare: a recipe app.
Wire flow (low-fidelity wire frames) for Prepare: a recipe app.

ITERATION & USABILITY FINDINGS

The prototype was created with the idea that there'd be one interface all users would interact with and those in managerial positions can update and add recipes when necessary.

 

After creating a prototype based on my low-fidelity wireframes, I created a 17 question participant screener survey to gather a diverse range of users to test my prototype. Although the participants were baristas, former bartenders, sous chefs, restaurant owners, and those in between, they had common pain points and issues with the food and drink industry in general. Between the screener and the two rounds of moderated usability studies, all feedback gave me actionable insights.

View PREPARE'S High-Fidelity Prototype.

Low-Fidelity digital wireframe for Prepare: a recipe app. Wireframes shows home page layout. Shapes and lines are used in place of images and text.
Prepare app usability study 1 (home). Navigation and search bar at top of page followed by  pinned recipes, quick links to recipe categories (seasonal, traditional, drinks, and desserts), then recently updated recipe sections.
Prepare app's home page for usability study 2. Search bar at top of page followed by quick links to recipe categories (seasonal recipes, classic, drinks, and desserts). Beneath that is a pinned recipes and recently updated recipe sections.
Low-Fidelity wireframe dish page for Prepare.
Recipe app's quick view of dish for usability study 1. Navigation and search bar at top of page followed by  "quick view" page of dish. Dish title at the top and beneath that is an image of the dish, ingredients, focus button, toggle images off button, and directions.
Prepare app's sangria recipe page for usability study 2. A hero image of the finished recipe beneath the recipe title, followed by 3 buttons: Focus View, Images ON, and Allergen & Nutrition Facts. Beneath that, Ingredients, cook time, tools, and cooking steps with images.
hero card 2a.png

PROBLEM #1: TURN OVER

There’s high turnover in this industry because of poor training due to lack of time and or care. Workers are not always confident in their task and are afraid to ask for help.

Gathering this insight allowed me to pivot in my design choices. Before, only managers could log in. Now, individuals can log in and pin recipes they need help with most.

PROBLEM #2: ACCESSIBILITY

In house recipe books are old, not updated, sticky/gross, hard to find, or non-existent and unless the establishment is diversely owned, are only in english. English is not the first language for a lot of cooks and chefs.

PROBLEM #3: TIME & WORK FLOW

In house recipe books are old, not updated, sticky/gross, hard to find, or non-existent and unless the establishment is diversely owned, are only in english. English is not the first language for a lot of cooks and chefs.

PROBLEM #4: INCONSISTENCY

If a recipe book is not updated, hard to find, or non-existent, cooks and chefs tend to search the internet or ask each other how something is made. Because of this, there is a greater chance for inconsistency.

Users now have a platform that allows them to pin recipes, be notified of updated recipes, and customers can confidently purchase the same dish twice, knowing it'll be the same as before.

home page English and Spanish.png
PREPARE - App-5.png

TAKEAWAYS

Although I've been designing for many years this was the first time I've ever created an app. I thoroughly enjoyed the process and was able to realize skills I have always had but never had the chance to use. When I set out to design a recipe app, I truly didn't know what I was getting into. I probably was hungry at the time I decided on this prompt.

What surprised me was my lack of patience. I was so eager to continue the project that waiting on participant responses to emails made me a bit antsy--especially because their feedback was the most important part of the process. I can't design with the user in mind without their input. But next time, I'll know what to expect and can plan accordingly.

 

This project helped me to dig deeper as a designer, define ideas and elements that I couldn't put names to before because I was self-taught, and most importantly help others. I wanted to created an app that would make people more confident in themselves which would have a positive domino effect throughout the industry. Designing with accessibility in mind felt like second nature to me because of my writing background with championing diverse stories and being a sensitivity reader for underrepresented characters that share the same culture and experiences as me.

VIEW Case Study Process.

google logo.png
Coursera-Logo.png
bottom of page