What it does
My design replaces the café’s manual, chaotic ordering system with a WebApp-based kiosk for students to browse a visual menu, customize orders, and pay digitally, while a vendor app manages real-time orders and payments, reducing confusion and wait times.
Your inspiration
The inspiration came from my visit to McDonald’s, where I found their large kiosk screens incredibly convenient for placing orders. In contrast, at my college café, I observed the chaos of a manual system—vendors writing down orders and tracking payments on paper, which often led to delays and confusion. At the same time, I was diving into the world of UI/UX and WebApp development, and that’s when the idea struck me: why not bring that same seamless experience to the college café? I realized a digital solution could greatly improve efficiency, reduce errors, and enhance the overall customer experience.
How it works
Currently, I’ve designed the interface but not implemented the full system. The working is kept simple and user-friendly. A student scans a QR code displayed at the café, which opens a lightweight WebApp. They enter their name, browse a visually-rich menu, customize their order, and place it—all through the WebApp. This eliminates the need to stand in long queues or explain orders verbally. On the vendor side, there's a dedicated mobile app that instantly displays incoming orders along with customer names and payment status. The vendor can mark orders as completed and also view a summary of daily income, helping them track business performance without the hassle of paper entries or switching between apps.
Design process
The idea for the kiosk system began when I observed the inefficiencies of the manual ordering process in my college café and contrasted it with the smooth, digital experience at McDonald’s kiosks. I started by identifying the key pain points: lack of visual representation in menus, no proper payment tracking, and heavy dependency on manual input. With these in mind, I began sketching out low-fidelity wireframes focusing on two separate interfaces—one for students and one for vendors. I then used Figma to build an interactive high-fidelity prototype that showcased the full user flow, from scanning a QR code to placing an order and receiving confirmation. For the vendor app, I designed real-time order updates, clear payment tracking, and daily summaries. I iterated based on visual clarity, touch responsiveness, and screen hierarchy to ensure quick decision-making during peak hours.
How it is different
What makes my design unique is that it doesn’t rely on any expensive or bulky hardware. Instead of a fully dedicated kiosk setup, it uses mobile phones and a lightweight WebApp, making it highly accessible and easy to implement. Customers can scan a QR code to place their orders directly from their own devices, while vendors manage everything through a simple mobile application. This approach reduces costs, avoids maintenance issues associated with physical kiosks, and ensures a smoother, scalable experience for both students and café owners. It brings kiosk-like efficiency without the need for any physical infrastructure.
Future plans
A base version of this app can be tailored for small vendors like tea stalls and snack shops as a smarter alternative to paper coupons. By digitizing orders and payments, it offers a low-tech, cost-effective solution that automates operations and improves income tracking. The next step is to develop a working MVP, test it in real-world settings, and refine the UI for maximum usability. In the long term, I aim to scale this as a plug-and-play system for local vendors, helping them modernize their business with minimal effort while offering a better experience to their customers.
Share this page on