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.