QuickBite Kiosk
Designing and building an accessible, touch-first self-service ordering interface for fast-paced environments.
Context
Role: Front-End Developer
Stack: React, JavaScript, CSS
Focus: UX clarity, accessibility, state management
The Problem
Many self-service kiosks overwhelm users with cluttered interfaces, small touch targets, and poor accessibility support. This leads to slower ordering, user frustration, and increased staff intervention.
Constraints
- Touch-first interaction
- Fast decision-making in high-traffic environments
- Clear pricing feedback
- Keyboard and screen-reader accessibility
- No external UI libraries
The Solution
I designed a state-driven kiosk interface that guides users through menu selection, customization, cart review, and confirmation with minimal cognitive load.
Each screen focuses on a single task, reducing errors and improving completion speed.
Accessibility-First Decisions
- Large tap targets for touch and motor accessibility
- ARIA labels for all interactive controls
- Live price updates announced to screen readers
- Keyboard-accessible navigation and controls
- Reduced motion support
Technical Architecture
The application is built as a single React component with clearly defined UI states representing each screen of the kiosk flow.
Cart items are uniquely identified to support customization without collisions, and pricing is derived dynamically based on selected options.
Key Challenges & Tradeoffs
- Balancing customization depth with speed
- Ensuring accessibility without cluttering the UI
- Managing state transitions cleanly without routing
Outcome
The final result is a responsive kiosk prototype that feels fast, intuitive, and inclusive — demonstrating how thoughtful front-end engineering can improve real-world usability.
View Live Kiosk Demo →