Case Study File No. 04
Cafe Ordering Kiosk
Interactive food and drink ordering kiosk, detailing the user flow and efficient design for optimization of the ordering process.
Project Timeline
Tools
16 Weeks, Spring 2025
Figma, Adobe Suite, Google Suite
Prototype Video
Initial Development
01 / Definition
A food ordering kiosk in an environment like a cafe would allow for a optimized flow of consumers, decreasing the stress of the employees and staff, as well as increasing production rate. As this is meant to optimize the ordering process, the design should match the simple efficiency of the kiosk’s function. This interface will have a clean and cohesive color palette that is readable and comprehendible by a wide range of users.
02 / Project Direction & Research
Everything that happens within a user flow should always happen for a reason. By reviewing other kiosks, it put into perspective how a flow should centralize and minimize what a user should have to interact with as they order. The structure should be able to be easily scanned, a user should be able to quickly find any items they want to order without much hastle. Simplicity should not however be at the expense of being stylized to match the aesthetic and environment.
Starting from the very beginning of the ordering process, I went in depth into the potential choices and decisions a user would make when ordering something as simple as a latte. This helped me to understand and establish the the consumer side of the ordering process while also considering the backend/designer side.
iterations
The Process
03 / Process Work
Constructing cohesive and appealing layouts of a kiosk needs to take into account the influence and interaction of all forms of users. There are consumers that are more likely to use it but it should be designed with users of all kinds in mind.
Wireframes are meant to focuses exclusively on structure and determining exactly where everything should exist in the kiosk to be seen and used to it’s fullest capacity. These wireframes decide the flow of this specific user case, along with the overall structure and layout of each screen to direct a user through each step of the ordering process.
StyleGuide
The Process
04 / Stylization
Adding style to wireframes is a tricky part of the process, but it is what ultimately pulls the design together. Once the structure is out of the way, adding stylized elements gives the composition more of a personality and brand identity.
Creating a styleguide is a step in the process of stylization, giving a comprehensive insight into each aspect of the composition’s design. The composition style sets the stage for the overall outward image being portrayed by the cafe and the environment that they facilitate.
Final Designs
Afterword
05 / Reflection
This was one of the longest and most extensive projects I've ever worked on. Developing everything about the kiosk from start to finish was very rewarding and it helped me keep in mind every little detail. Every aspect of the kiosk user flow that I designed had a purpose and nothing is included unnecessarily. This mindset was something that I hadn't always considered as carefully until this project. For something intended for user efficiency, it was important to create this design with both the user and the design side of the kiosk in mind.
© Emily Menna 2026