PrepStep
Tools
-
HTML
-
CSS
-
Typescript
-
React
-
Supabase
-
SQL
Visit website“PrepStep turns prep from a collection of tasks into a clear, guided workflow.”
PrepStep is a digital prep management system created to make cocktail bar prep shifts more structured, efficient and consistent. The project started at Sonora Cocktailbar, where prep work was managed through a combination of Google Sheets and Slack. Recipes, quantities and tasks were often difficult to find or understand, creating unnecessary friction for both prep planners and preppers. Through interviews, workflow analysis and user testing, I investigated how prep shifts were currently organised and where the biggest problems occurred. This research became the foundation for designing a system that supports the entire prep workflow. PrepStep consists of three main parts: a Recipe Library for managing recipes and ingredients, a Prepshift Builder for planning tasks and quantities, and a mobile-first Prepshift Execution interface that guides preppers through their work step by step. I designed the experience from research and information architecture through UX/UI design, prototyping and user testing, and developed the interactive prototype using React, TypeScript, Vite and Supabase. The result is a system that turns a fragmented prep process into a clear, guided workflow while creating a foundation for better consistency, planning and insight into bar operations.
Project information
Research
I started by trying to understand how bartenders currently learn and prepare cocktails, and where the existing process creates uncertainty or inefficiency. I interviewed bartenders and other people working at the bar to understand their routines, frustrations, and expectations. Alongside the interviews, I conducted desk research into cocktail preparation, learning methods, and existing digital solutions. I also benchmarked comparable products and services to understand how other platforms approach learning, preparation, and knowledge management. Combining these different research methods helped me identify recurring problems and opportunities rather than designing around assumptions. The research gave me a clearer understanding of what PrepStep needed to solve and, just as importantly, what it should avoid.
Define
With the research collected, I translated the findings into concrete requirements for the product. Instead of keeping the research as a collection of observations, I used it to define what the system should actually be able to do. These requirements became the foundation for the next phases of the project. I then prioritised the requirements using the MoSCoW method, separating the essential functionality from features that would be useful later. This helped keep the project focused and made clear what the first version of PrepStep needed to achieve.
Concept
With the requirements defined, I started exploring what PrepStep could actually become. This was a broad ideation phase where I explored different ideas for the product, its functionality, and the way users could interact with it. Rather than immediately committing to one solution, I used sketches and different concepts to explore the possibilities. During this phase, I developed a canvas built around flow elements. This became a way of thinking about the different steps a bartender goes through and how PrepStep could support them throughout that process. The concept phase allowed me to move from "what is the problem?" towards "what could the solution look like?"
Design
Once I had a clearer concept, I started translating it into an actual interface. I first created a low-fidelity prototype to focus on the structure, navigation, and overall user flow without getting distracted by visual details. I then tested the prototype with bartenders, allowing them to go through the experience themselves and give feedback based on how they would actually use the system at work. These tests exposed areas that needed to change, which I used to iterate on the flows and interactions. After validating the core concept, I moved into Figma and developed the prototype further into a medium-fidelity design, introducing more detailed layouts, interactions, and visual decisions while keeping the focus on usability.
Build
Once the design and functionality had been sufficiently validated, I moved into development. Before starting to code, I created a technical plan for how the system would be structured. I broke the application down into its main functionality and considered which TypeScript and React modules would be needed to build each part of the experience. From there, I started turning the designs into a functional application. PrepStep was developed using React, TypeScript, Vite, Express, and Supabase, with the architecture designed around the needs identified during the earlier research and design phases. This phase was not simply about translating the Figma designs into code. Building the real system also revealed new technical and UX considerations, leading to further iterations along the way.
Test & Iterate
PrepStep is currently in its testing phase. The system is being updated with the current cocktail menu, allowing me to test the complete execution of the cocktails rather than testing the system with placeholder recipes. This means bartenders can use the actual recipes and preparation steps they encounter in their day-to-day work. The goal is to validate whether PrepStep works in the real environment it was designed for, identify friction during actual cocktail preparation, and continue improving the system based on those findings. The project therefore doesn't end with the first working build. Testing the system in the real bar environment continues the same iterative process that started with the initial research.
