top of page
PREPARE - App-9.png
Prepare website. Profile home with a search bar, quick links to categorical pages; a favorite pins, outstanding training, updated recipes, and schedule section, and a navigation bar at the top.


PREPARE: A Training and Recipe Site


Lead UX Designer, from conception to delivery


2022-2023, 3 Months





View Mobile Version

hero card 2a.png


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.


  1. General recipe inconsistency.

  2. Language barriers between front and back of house regarding how an item is made.

  3. Turnover from disorganization and poor and limited training.

  4. 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.


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.

User Journey Map - Manager POV.png
User Journey Map - Chef POV.png
PREPARE - App-5.png


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.

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.

Paper wireframes (site layout sketches) for website case study Prepare.
Wireframes with arrows.png


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.
Laptop mock up of Prepare site's profile home page for usability study. Search bar, quick links to recipe categories (seasonal recipes, classic, drinks, and desserts), pinned recipes, recently updated recipes, outstanding training, and schedule sections.
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.


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.


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.


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.


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.

hero card 2a.png
PREPARE - Quick View and Focus View Pages.png
PREPARE - App-5.png


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.

google logo.png
bottom of page