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

No items found.

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)

So, what's next?
Woodwide