Baguette About It

UX/UI research and design
Project Overview
A menu viewing and ordering app for a French restaurant.
My Contributions
My first ever UX project and I did everything. Initial research, competitive analysis, interviews, personas, wireframing, mockups, prototyping, usability study, etc. I learned how to do it all.

Project Overview

exclamation point inside circle

The Problem

Many people have dietary restrictions and ordering food can be a minefield of questions and tummy no-no’s.
star in circle

The Goal

Create an food ordering app that makes it easy to make adjustments to your order.

Role

UX Researcher, Interaction Designer, and Visual Designer

Responsibilities

  • Conduct initial research
  • Design wireframes, low fidelity prototypes, mock-ups, and high fidelity prototypes
  • Conduct usability studies
  • Synthesize research into solutions

Understanding the User

User Research

Personas

Problem Statements

User Journey Maps

User Research - Summary

I conducted five user interviews. I figured it can’t be too hard designing a menu preview app, especially since most people look at them all the time. But my interviewees taught me a little bit about what works best for them as well as confirming some of the assumptions I’d made.

How the app is organized was the biggest concern ranging across all interviews, but some also had allergies and kids that are picky eaters. Some wanted family style meal options, but everyone wanted to know the price up front.

I also completed a competitive audit to make sure the product was something people could and would want to use.

Pain Points

one
Organization
Almost every person interviewed asserted that organization was the most important thing
two
Not Enough Information
It’s hard to know what you can and can’t eat if the ingredients aren’t listed.
three
No Price Up Front
Some menus don’t show the price of each item until it’s already been added to your cart. Users didn’t want to be surprised by the total
four
Not Enough Options
Putting in all dietary specifications in a textbox can be confusing and often orders are made wrong

Personas and Their Problem Statements

Persona card for Daniel Mueller. "Being a parent and getting everything done is hard work."
Daniel Mueller is a busy dad who needs to order precise meals so that his picky eaters can eat dinner.
 Persona card for Remi Flores. "Eating is dangerous business."
Remi Flores, a young woman with food allergies and IBS, needs to know exactly what she’s ordering so her conditions don’t act up.

User Journey Map

Scenario:

Daniel is ordering dinner for the whole family. He opens up his phone and goes to the Baguette About It app.

Goal:

To order all meal items quickly and get home to eat.
user journey chart

Starting the Design

Paper wireframes

Digital Wireframes

Low-fidelity prototype

Usability studies

Paper Wireframes

pencil and paper drawings of potential layouts for the app.pencil and paper drawings of how the app could be laid out.

Digital Wireframes

digital wireframe homepagedigital wireframe menudigital wireframe menu itemdigital wireframe paydigital wireframe confirmation page

Usability Study

Participants:

3 women, 2 men, between the ages of 20 and 70

Instructions:

After the concept was explained, participants were instructed to order an item, modify it, and check out. All participants succeeded with varying levels of prompting.

Findings

Refining the Design

Mockups

High-fidelity prototypes

Accessibility

To view prototype, click here
mockup home pagemockup salads menumockup entree menuitem added to order mockupmockup order list, total, and tipmockup payment page

Accessibility

one

Color

It is imperative that the content on the app be legible, so settling on a color palette with the appropriate contrast ratio.
two

Tap vs. Drag

In order to take into account different technological and manipulation abilities, the menu can either be dragged from side to side to change sections, or the arrows near the top can be tapped.
number 3

Color

For user who utilize screen readers, each menu item has a comprehensive description to accompany the photo, so that everyone knows exactly what they’re getting.