A different spin on ordering

This app was a side project created with the small team of myself, another UX designer, and a single developer. We locked ourselves into a room every day with the goal of creating a full ordering application in only two weeks. It was an interesting experiment, coordinating what could be worked on at the same time so we weren’t blocking our dev.

We started by creating a persona of our primary user. After that, I handled initial sketches and wireframes, then we moved on to making a basic prototype to get in front of users as fast as possible. Once we had gathered some feedback, I made final mockups and handed over assets to our dev to complete the app.

This is what we were able to create.

Requirements

Persona

Sketches and Prototype

Here’s how the swiping to customize the sandwich works. It defaults to whatever style the user selects (everything, plain, extra style, etc), then swiping left reduces the item to “lite” and then “none,” while swiping right adds “extra.”

User Testing

After creating our basic prototype, we were able to have many users go through the experience while asking questions and receiving feedback. Here are some of the things we observed:

• Users wanted a way to add sides or drinks and skip customizing a sandwich. Needed to add this option to the first screen.
• Needed a screen that allowed users to order sandwiches as-is without customizing.
• Some users were confused by the swiping to customize, added coach marks overlay.
• Some people had trouble identifying what the toppings were for their sandwich. We needed to include a way for them to tap to see a description of all toppings.
• Some users wanted plus and minus buttons to increase or decrease ingredients, but all were able to swipe intuitively once they realized they could.
• Swiping left to increase and right to decrease matched their expectations.
• One user asked to order a shake without whipped cream. Should offer at least some level of customization to side items in the future.
• On review page, users wanted a way to remove items or increase quantity of items in cart.

Kiosk

With the increased size of a tablet, I was able to show more default styles to the user making this step faster. They can quickly make their selections and order immediately or move on to customization.

The kiosk is able to show all of the ingredient options at once, so the reliance on swiping wasn't necessary. We were also concerned that the kiosk itself might not always be an ipad, so a tap gesture was a much safer input method if the display was older.