Café at 407 Kiosk
Download Process Doc 🔗 (PDF | 39 MB)
The Café at 407 food ordering kiosk is designed to improve the cafe experience. Inspired by the cafe’s current flow disorganization, it brings less confusion, better organization, faster customer flow, and increased efficiency, catering to all age groups.
Prompt
Create a food ordering kiosk for a restaurant.
Software
Figma, Adobe Illustrator
Timeline
12 weeks
Research - Heuristic Evaluation
To begin this project, I applied Jakob Nielsen’s 10 Usability Heuristics to analyze Panera Bread’s food ordering kiosk for insights into designing Café 407's kiosk. I learned from their successes for inspiration and identified pitfalls to steer clear of in the design process.
If you’d like, check out the in-depth evaluation presentation: Download here!
Business Info
Café 407 in Liverpool NY, overlooking Onondaga Lake, serves breakfast and lunch with locally-sourced ingredients. Known as "A Café with a Cause," they donate all proceeds to Ophelia’s Place, supporting and facilitating healing for those with eating disorders.
Inside there are uplifting quotes line the walls, and customers can buy merchandise like t-shirts and candles, occasionally featuring local artisans' work.
Observed Issues
Workers at Café 407 likely observe the lengthy line during busy periods or hear customer complaints. With just one register for ordering and checkout, the line often causes inconvenience, making customers uncomfortable.
Seated customers may feel uneasy due to the layout, with waiting customers standing nearby. This isn't solely a customer concern but also impacts the business, potentially resulting in complaints and customer loss.
Current Layout & Potential Kiosk Location
The section to the left currently has two tables separate from the rest of the seating area. If those are removed and the kiosk set-up is positioned there, the overall flow of the cafe will be more functional and effective.
There will be two kiosks set up on the bar top– standing set-ups for the customers.
Workflow Diagram
Mapping out the user’s interaction with the kiosk throughout the ordering process, as well as the checkout process. You can check out the full diagram here 🔗
Start-Up Process Wireframes
This section covers the first two planned screens of the kiosk that initiate the experience and the ordering process for the user.
General Menu Wireframes
This section covers the menu pages of the kiosk and the many elements of them including the headings, categories and navigation, menu item cards, etc.
Menu Item Customization Wireframes
Here we dive into the elements within the pop-up that appears when a menu item is selected to customize before adding the item to the bag.
Pre-Checkout Wireframes
This pre-checkout section covers the customer’s bag and the donation pop-up that appears if a user decides to give a tip.
Checkout Flow Wireframes
This section goes into each page of the checkout flow, the for here or to go question page, the payment options page, then the actual payment action flow, as well as the receipt flow, and finally the thank you page, where the order number is given to the user.
Colors
The color pallet remains concise, following the pre-existing branding that Café 407 uses for its on-site menu design!
Main Menu Page Structure
The general spacing of elements within the main menu page of the kiosk.
Menu Item Cards Structure
The menu item cards have two different types– there’s the single-line title structure and the double-line title structure. Both have a 30px margin, but the vertical measurements are where the differences are.
Main Buttons Structure
The general spacing for the main buttons throughout the kiosk. Both have a smoothed corner radius of 10 px.
Customization Pop-up Structure
Primary Elements
This is the general spacing for the menu item pop-up on the main menu page. The margins around the pop-up are 100px all around and the pop-up size is ~1166 x 824 px. Displayed is also the vertical spacing of the left column elements within the design.
Customization Pop-up Structure
Secondary Elements
This is the general spacing for the add-ons, condiments, and special instructions container and the spacing between the cards. All around, the margins are 30px. The horizontal spacing between the cards is also 30 px. The vertical spacing between the cards is 20 px.
Main Menu
Final Compositions
Menu Item Customization
Final Compositions
Item Added Verification
Final Compositions
User's Bag
Final Compositions
Checkout Flow: Order & Payment Type
Final Compositions
Checkout Flow: Payment
Final Compositions
Checkout Flow: Receipt and Completion
Final Compositions
Kiosk Location
It's important to imagine the kiosk on-site and visualize how it will affect the overall layout and flow of the store!
Final Prototype
Created in Figma.
And, there's still much more!
Check out the entire Process Doc here 🔗 (PDF | 39 MB)
