(check back soon!)



An Online Ordering System

wow bao homepage

Briefly...

The Challenge

Wow Bao is a technology-driven, fast-casual street food restaurant chain based in Chicago, IL. Wow Bao’s menu focuses on hot asian steamed buns, potstickers, and rice & noodle bowls.

Though they have self-service kiosks in-store and a mobile app, their website did not support online orders as of June 2019. Our team was tasked with filling this gap to achieve channel neutrality. Our focus was designing an online ordering system for Wow Bao’s website. We then applied this new system to refresh Wow Bao’s existing catering system, and we redesigned their home page to better promote online orders.

Project Stats

  • Design Practices:
    contextual inquiry, comparative analysis, survey design, affinity mapping, persona development, wireframes, prototyping, usability testing
  • Teammates:
    Eunice Bae, Connie Kim, and Matthew Kirsch
  • Timeframe:
    2 weeks (June 2019)
  • Tools:
    Sketch, InVision, SquareSpace

My Role

I led the creation of our visual design system, wireframes, and interactive prototype. I also helped conduct and synthesize research.

The Solution

While designing our ordering system, we balanced three goals: 1) consistency, 2) delight, and 3) conversions. Our solution combined the branding and content of Wow Bao's existing platforms (freestanding kiosks and mobile app) with the streamlined UI and consistent flow of 3rd party platforms (DoorDash and GrubHub).

We organized menu items into a two column grid, using a modal popup for additional choices and customization options. An always-present shopping cart is anchored to the right of the screen as users build their order. For complex items (such as "The Wow Factor" catering packages), a set of expanding and collapsing drop downs allow the user to remain on the same page.

Moments of delight include a bao progress bar as users construct that item, a visualized tray on the payment page, and animated elements on order confirmation to reinforce the in-store experience.

In addition to online orders and catering, our team refreshed the Wow Bao landing page, simplifying the navigation and redesigning calls to action to encourage conversions.

wow bao ordering popup
View clickable prototype

Design Evolution

Sketching and Design Studio
design sketches and post it notes
post its on wall demonstrating the online ordering process
Mid Fidelity Wireframes
wow bao ordering system wireframes
wow bao ordering system wireframes
left arrow
right arrow
wow bao ordering system wireframes
wow bao ordering system wireframes
wow bao ordering system wireframes
left arrow
right arrow
Design System & Branding
wow bao ordering system wireframes
High Fidelity Prototype
Home Page Refresh in SquareSpace
wow bao landing page before and after

Looking Back

Project Takeaways
  • This was the first project as part of GA’s UX design bootcamp with a "real" client, and balancing end user needs with focused business goals presented a unique challenge.
  • Our team worked out of the Wow Bao office space, and we realized our physical presence did not necessarily translate to client communication. Establishing a daily touch-base or summary email would increase client transparency.
Further Exploration
  • Mobile Responsive: our two-column grid for our menu items and narrow customization popup would likely translate to mobile well, but building out a fully mobile-optimized version of our ordering system would surely surface issues for users on phones.
  • In-Store Experience: the focus of this project was building an online ordering system, but our research highlighted ways to enhance the in-store experience. For example, our team would further research and test a dedicated online order “pickup station” in the event that the number of online orders exceeds the available cubby spaces.

For a Deeper Dive...

Read the full write-up