PROJECT

PREPARE: A Training and Recipe Site

ROLE

Lead UX Designer, from conception to delivery

DURATION

2022-2023, 3 Months

PROCESS DECK

PREPARE Site Process

LOW-FIDELITY PROTOTYPE

View Lo-Fi Prepare Site

HIGH-FIDELITY PROTOTYPE

View Hi-Fi Prepare Site

PREPARE:

A RECIPE APP

View Mobile Version

PROJECT VISION

PREPARE is a white label design, created specifically for the restaurant, bakery, café, and bar industries, to break accessibility barriers and to support the needs of line cooks, chefs, bakers, bartenders, new hires, etc., during their chaotic and busy shifts.

PROBLEMS

General recipe inconsistency.
Language barriers between front and back of house regarding how an item is made.
Turnover from disorganization and poor and limited training.
Confidence. Some folx need help with certain recipes after training and want to improve privately.

RESEARCH CONDUCTED

Previous qualitative research included conducted interviews, competitive audits, a survey and additional usability studies to identify the needs of my target users, which are: line cooks, chefs, bakers, bartenders, new hires, etc., who need training.

Those details combined with the information I gathered during the additional round of research (which included users interacting with Prepare’s desktop version) was then applied to Prepare site, which is a native site design.

The additional round of research revealed areas where clarity and flow could use improvements and meet users expectations while interacting with the product. With the site design, it gave me a chance to explore, use the "Remove the Bad" How Might We approach, and build upon the app’s design solutions that addressed the pain points mentioned earlier.

What would a typical training session look like?

What are the user’s current problems that this app can solve?

What common behaviors, experiences, and scenarios my product is trying to address?

What methods of training have users experienced?

What are restaurants needs and frustrations?

What is a day in the life of a chef or line cook?

After conducting a usability study, I gathered key information to form actionable insights around the apps usefulness, navigation, usability, expectations, and more..

Affinity diagram for Prepare Website.png

INSIGHTS

There needs to clearer labels and additional ways to navigate to the pinned recipes page.

An accessibility option to change font size and enlarge the current font size would be valuable.

Include clearer indicators of progress through the training course as well as when a course is complete.

Provide better labels and clearer actionable buttons/navigation.

THE USERS

ROBERTO

Age: 41

Education: Bachelors, Culinary Arts

Hometown: Baltimore, MD

Family: Fiancee, 2 Kids

Occupation: Hiring Manager & Bartender

Roberto is a hiring manager and a bartender at multiple trendy upscale restaurants in LA. He needs to know the bar and kitchen menus completely, but there are no recipe books to reference. If there is a recipe book management doesn’t care to update it and it’s sometimes hard to ask the chefs because some speak another language. He believes some management cares more about making money than supporting their staff.

LADY

Age: 19

Education: High School

Hometown: Stamford, CT

Family: Parents, younger sis

Occupation: Assistant Baker

19-year-old Lady is taking a year break between highschool and college and has picked up a part time job at a busy local bakery. Lady was taught the wholesale basics as a temporary hire, but has since been hired full time. Lady wants to be a baker and decorator, but the bakery is so busy, there’s not much time to teach her additional skills. When advanced decorators do have the time, everyone has a different method and recipe. If customers come in with an on-the-fly request, Lady can’t help them.

MICHE

Age: 30

Education: Masters, Culinary Arts

Hometown: Las Vegas, NV

Family: Partner, 1 Bunny

Occupation: Line Cook

Miche is a librarian and a line cook for an fine dining restaurant. As a cook, long hours are expected. They need to reference a recipe book at least once every shift, especially if they have new or seasonal specials, but it’s hard to search for recipes when 20 or 30 customers arrive at once, they order a bunch of different things, and there’s minimum time to create the dishes. On top of that, their hands will be dirty from cooking. If they do find the time to look at a recipe book, they have to search through three outdated ones.

PREPARE APP

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

At first, I aimed to create a journey based on the "Explore the Opposite" How Might We method to address the turnover and training pain points, by building out the Manager/Owner's POV in the Prepare app. But then I remembered feedback shared by some users explaining how owners or managers aren't always supportive or helpful to their staff. So I switched to the "Remove the Bad" method to allow staff members to control their training with the option to ask for help from their manager, and created the journey map for a Chef's POV.

"PAPER" 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.

I knew that I didn't want users to scroll much or at all for logistical reasons based on my initial research, so the designs account for that. I wasn't sure if a hamburger menu or header with direct navigation links would be best. I waffled because I didn't want to clutter the page or overwhelm the user, but at the same time, allow my users needed less steps to get the information they want.

Paper wireframes (site layout sketches) for website case study Prepare.

THE WIRE FLOW

The wire flow is based on the user journeys created above. These visuals helped to determine what areas I needed to improve on and what was and wasn't needed. I dedicated a lot of time iterating on flow and iterated on additional intuitive icons for the website version.

I decided to create my prototypes in Adobe XD, but realized a lot of the designs and elements that I applied to the app version were easily accessible in Figma. To utilize my time, I switched back to Figma to create the High Fidelity prototypes.

View PREPARE's Low-Fidelity Prototype.

ITERATION & USABILITY FINDINGS

The app's 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. But research showed that users preferred to log into their own account to pin their favorites (recipes they like to reference), while having a manager's ability to update recipes for all users. I took this a step further to allow managers assign training and be able to communicate with their staff through the app.

Between the initial screener and the three rounds of moderated usability studies between the app's and website interfaces, 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.

Lo-Fi prototype Log In page. User ID field, user pin field, log in button, reset log in link, on top of a white tinted box, which sits on an image place holder element.

Laptop mock up of Prepare site's log in page. User ID field, user pin field, log in button, reset log in link, on top of a white tinted box, which sits on a close up image of a fancy dinner.

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 #3: CONFIDENCE

These food scientists (what I like to call them) are in high pressure situations. They are constantly learning new techniques, skills, and recipes, and are often taught once. If that information is not retained quickly it can be a perceived reflection on them.

Having the space to pin recipes they may need more time or help with, and being able to managing their own learning in private, can build confidence.

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. Also, font size tends to be too small and not accessible for those who need glasses or are older.

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.

PREPARE - Quick View and Focus View Pages.png

TAKEAWAYS

I've been making website using web-based platforms for years but I've never created a site in this way. So I am very grateful to have had the opportunity to do this and further develop my design skills.

UX design is never complete and is an ongoing evolving process. What didn’t surprise me was my lack of patience. Just like when I was creating the app version of this product, I was so eager to continue the project that waiting on participant responses made me a bit antsy--especially because their feedback was the most important part of the process. (It didn’t help that this took place during the holiday season but I was determined to complete this project.) I can't design with the user in mind without their input.

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.