PREPARE: A Training and Recipe Site
Lead UX Designer, from conception to delivery
2022-2023, 3 Months
A RECIPE APP
View Mobile Version
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.
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.
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..
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.
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.
Too many features
Minimal or no accessibility options
Minimal language options or just english
Not much diversity
No ability to customize
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
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.
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.
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.
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.
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.
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.