Team
I collaborated with a visual designer and PM for this project while leading UX research and design. We collaborated with another studio's engineers: an iOS developer, Android developer and a front end engineer.
Competitive analysis
Goal: Find the common app experiences for mobile food and beverage ordering.
Menu browsing IA and key page wires
Goal: Adopt standard browsing and PDP page designs while integrating actual Beecher's menu customization options.
My research highlighted some key features that users would expect to see in this kind of app:
Persistent cart. Users are always one tap away from viewing their cart for checkout, regardless of where they are in the app's hierarchy.
Easy reordering. Apps like DoorDash make it easy for users to reorder their favorite dish from a restaurant.
Post order account creation. Many of the apps I researched allow the full shopping experience and only force account creation as part of the checkout flow to reduce onboarding friction.
Feature parody with native UI adjustments
We wanted to offer the same UX across both versions of the app while adhering to both Apple and Google's design principles.
Field testing
Testing the actual experience at a café.
We were able to catch a few critical bugs before going live but the majority of testing was targeted at the various app integrations, i.e. checking that the confirmation page in the app, transactional emails from Stripe, and printed Micros tickets behind the counter all matched up. The overall browsing experience was intuitive to customers though there was some confusion about how to make substitutions not listed in the app's UI, so we added comments section for orders to detail extra changes.
Final Designs
Key experiences with design rationale.
Persistent Bag
The CTA (call to action) to view a user's bag only shows up after an item is added. This component pulls triple duty in the design:
Displays the number of items in a user's bag with a running total.
Ensures that the next step in checking out is obvious and saves time bouncing back and forth between the menu and bag view.
Provides a necessary feedback loop that reassures users that their item was added successfully and with their customizations.
Dynamic wait time
The review page includes a freshness disclaimer letting customers know approximately when their order will be ready. The default timer is set at 5-10 minutes but will increase by increments of 5 if there are more than 10 online orders in the queue at once. This same disclaimer is also shown in the bag view so Beecher's can be transparent about their wait times.
Quick Reordering
User's with accounts will be able to bypass the entire menu experience by quickly adding a previous order to their bag. This is our MVP favoriting system for repeat customers.
Post Order Account Creation
Users don't need an account to place an order. However, the option to create an account for faster future ordering is presented after checking out as a guest.
