UX Portfolio - nom.bravo

nom.bravo
UX Portfolio

John E. Thompson
Nerdery Interactive Labs, June-August 2011

John Thompson - nom.bravo

Contents
4 nom.bravo Process Plan 31 Designing the Interface
Frontend Wireframes (pp. 34-38)
5 Defining the Project Admin Wireframes (pp. 40-48)
What Is nom.bravo? Visual Design
Project Scope
Outlining the Problem 50 About

9 Researching the Process
Contextual Observation
Content Audit
Previous Process Flow

14 Understanding the Audience
Research Methodology
The 4 C's
Empathy Map
User Types

19 Improving on Existing Applications
Heuristic Analysis
Grub Hub
Chipotle Online Ordering
Nerdery Mainframe
Key Characteristics

25 Architecting the Content
Mental Map
Ideal Process Flow
Site Map

2


nom.bravo
Overview

157.5 hours (meetings included)
UX Framework
Project Definition
User Research
24 work days Information Architecture
June 14 - July 18 Interface Design

3

John Thompson - nom.bravo - Overview

nom.bravo Process Plan
This project brought a unique set of challenges and required a
whole new toolset to help analyze and solve a problem. First, I
My Process:
had to figure out the general UX plan, then I executed it.
Define the Project
1 I needed to figure out what nom.bravo actually
is and what the stakeholders desire it to be.
This is the ideal.
Due to the project timeline and my own
Research the Process
familiarity with the UX process at the time,
the "Researching the Process" and 2 I then had to figure out what is already being
"Understanding the Users" steps were
done to avoid making the same mistakes and
truncated and replaced by a multiple-
iteration wireframe-and-review process.
"reinventing the wheel."

Understand the Users
3 People are going to have to use and react to
this new process; I needed to understand how
to meet their needs, and exceed them!

Architect the Content
4 Before I wireframe the new system, I needed to
know the tasks and elements required and how
they relate to the new process flow.

Design the Interface
5 Finally, I'll take everything I have researched,
learned, and organized, then present a
wireframe set to the stakeholders. A revised set
will be handed off to development.

4


nom.bravo
Defining the Project What Is nom.bravo?
Project Scope
Researching the Process Outlining the Problem

Understanding the Audience
Improving on Existing Applications
Architecting the Content
Designing the Interface

5

John Thompson - nom.bravo - Defining the Project

What Is nom.bravo?
nom.bravo is a proposed improvement to an internal lunch
process. The goal was to reduce administrative hours spent
My Process:
managing lunch orders and streamline food ordering.
Interviewed Stakeholders
The project's development leads, project
manager, UX team (myself and my mentor), and
stakeholder met to discuss the project scope
seen on the following page. High-level
requirements and objectives were established.

Defined Requirements
A "scope of work" Google document outlining
key requirements had already been created.
Throughout the project, I would reference this
document.

Outline the Problem
After I knew what the people backing the
project wanted, I took a step back and
hammered down the main goals and objectives
of nom.bravo.

6


Project Scope nom.bravo Scope of Work

The purpose of the nom.bravo application was to automate the daily internal lunch ordering
process of the Nerdery Bloomington location. Employees would be able to create orders as
Before research was conducted, I met with the stakeholders, part of a larger group order, which was sent to specific restaurants. The application would also

backend development leads, and the project manager to allow for lunch scheduling, order placement, and financial reporting (primarily for payroll
accounting).
discuss and specify high-level requirements and objectives. A
summary of the scope of work is shown.
Restaurants
- Jimmy John's (Bloomington)
The product itself was undefined, but we did know it would be integrated into the - Possibly Chipotle (Bloomington)
company mainframe. - Generic menu order form for other restaurants, along with a link to their online menu

Ordering Features
- Orders may be placed/edited/deleted during an open ordering time.
- Users can order one or more times.
- Users may select orders to be comped, with a reason.

The Ordering Process
1. User logs into nom.bravo.
2. User selects restaurant.
3. Users creates order or edit existing order, based on restaurant selection.
4. User submits order.

Accounting Features
- Export a selected day's orders to a CSV for reconciliation and reporting.
- Group orders by payer for ease of reconciliation.

Administration Features
- Add and remove menu items
- Update menu item pricing
- Select restaurants for the day
- Select start/stop times, if different from default
- View and maintain order records
- Create group order for submitting to a restaurant

*Not shown: Milestones and timeline

7


Outlining the Problem
I knew what nom.bravo was supposed to be and what the
clients and stakeholders wanted, but I had a few questions to
answer about food ordering at the Nerdery on the whole:

What is the overriding problem? What are the goals of this project? What are the objectives?
The internal food ordering process is complex, - Reduce those work hours spent by admin by - Admin has more time for work that absolutely
riddled with emails, and is time-intensive. about half (of ~6 hours a day) or more. require human touch points.
- Automate food ordering. - Reduce the ratio of administrative work hours
- Integrate with payroll accounting. to the increasing amount of lunch orders.
- Reduce human error in data handling. - More timely and accurate accounting reports.
- Lessen order errors and mishandling.

8


nom.bravo
Defining the Project
Researching the Process Contextual Observation
Content Audit
Understanding the Audience Previous Process Flow


9

John Thompson - nom.bravo - Researching the Process

Process Research
I detailed the current process by researching who was involved,
what they were using, and their methodology.
My Process:
I shadowed one administrative staff member
through two rounds of food ordering (6 hours
total). I noted pain points, inefficiencies,
shortcuts, challenges, and people contacted.

Content Audit
Along with holistically analyzing the process, I
also collected all general documents and noted
key computer and web applications used by
staff and admin.

Outlined Previous Process Flow
I brought all of this research together to show
the process as it was to effectively identify and
incorporate improvements.

10


To familiarize myself with the pain points, challenges, and
eccentricities of the process, I shadowed the administrative staff
tasked with handling food ordering.

Begin...
1 2 3 4
CMD-C
CMD-V
CMD-C
CMD-V
I scheduled two four-hour time I prepared a note-taking When the time came, I sat next When all the staff had received
slots with the primary template, complete with to the administrator as she orders and sent their orders
administrator. symbols for (1) pain points, (2) began the process, starting with back in, I observed as the
challenges, (3) shortcuts, and (4) sending email announcements. orders were copied and pasted
contacted people. from email into Excel and Word.
5 6 7 8
TY!

The rest of the sessions I remembered to thank the I asked the administrator to Then I translated everything I
consisted of two faxing sessions admin for taking the time to let supply me with examples of all wrote into a visible diagram.
and two to three hours of me observe and take notes. the documents used. See Previous Process Flow (page after next)

entering orders into accounting See Content Audit (next page) ...done!
spreadsheets.

11


Content Audit
Along with holistically analyzing the process, I also collected all
general documents and noted key computer and web
applications used by staff and admin:

Gmail Online Menus / Internet Microsoft Word Google Docs
Email was the primary mode of Aside from Chipotle (which had a specific Used by admin to keep track of temporary Used by both staff and admin, mostly for
communication for the process (ordering order form), staff derived their orders from data, such as fax-able orders and lists of staff ordering food through the Chipotle order
food, announcing close times, reporting online menus from each restaurant. members who have earned free lunches. form (below).
order errors, etc.).

Google Calendar Restaurant Information Sent Lunch Order Form Existing Order Form
An existing lunch calendar displays the Used by admin to store restaurant Used by staff to fax to certain restaurants (in Used by staff to order food through
restaurants available for the day as well as information and primary contacts. this case, Golden Wok). Chipotle. The data is sent to the admin.
their close times.

Example Lunch Worksheet
Multi-field Excel sheet used by admin to
manually enter orders, names, and costs per
group order (for each restaurant)

12


Previous Process Flow
Now that I had both seen the admin handle food ordering in
KEY
action and had familiarized myself with the admin toolset, I Shortcut
Pain point
outlined the process flow, as seen from the administrator's (unnecessary)
Call made
perspective. I noted pain points, challenges, and shortcuts. Challenge
(inherent)
Email(s) sent

*Not shown: Chicago food ordering; Chipotle Bloomington food ordering; notifying
Shout Out free lunch winners.

Check which Copy-paste-send Copy-paste Copy-paste-send Reformat all orders
continued...
restaurants are template email received orders template email from spreadsheet
Begin... scheduled for the requesting lunch (name, order, announcing into a fax-able
day orders instructions) ordering is closed document.

Memorize Tracking Email
Manual entry nicknames spamming
restaurants
Adding a Tracking Multiple data Staff misses
restaurant visiting values order due to
Chicago meeting
employees

Copy-paste-send Finalize order data
Fax document to template email Handle order on restaurant
Receive food
each restaurant. announcing food errors lunch order
has arrived spreadsheets

Call to ensure Resolving Copy-paste
Late food
receipt of fax disputes alters text
arrival format
Restaurant Notify
fax goes restaurant of
unnoticed order errors

Copy-paste Name, Adjust employee Reconcile receipt Combine each
Update
Order, and Price of costs for comped with estimated lunch order
spreadsheet data
all orders into (company-paid) food cost (from spreadsheet into
as required
spreadsheet orders spreadsheet) "big spreadsheet"

Memorize Comped info Acceptable Human error Prioritizing
menu prices in separate range: +/- $3 within data orders for
Word doc. manipulation executives
Locating the Shout Outs
spreadsheet (free lunches)

Ensure there are
Send "big (Lunch costs Notify free lunch
restaurants
spreadsheet" to
accounting
deducted from
paychecks)
winners (for future
ordering)
planned for the ...done!
following day

13


nom.bravo
Researching the Process
Understanding the Audience Research Methodology
Empathy Map
Improving on Existing Applications The 4 C's

Architecting the Content User Types


14

John Thompson - nom.bravo - Understanding the Audience

Research Methodology
I currently take an agnostic approach to figuring out how users
think and how to best suit their needs. For this project, I wanted
My Process:
to know who the general users are, how they behave, what they
might be thinking and feeling, and what they might require with C C C C Outlined the 4 C's
the proposed food ordering system. That's a lot of information, I created a table outlining the Components
required, production and usage Challenges,
so I took three related and integrated approaches.
functional and aesthetic Characteristics, and the
Characters involved.

Created an Empathy Map
I identified the thoughts, actions, sights, and
feelings for two main "characters," as well as
their goals and needs with respect to ordering
food.

Constructed User Types
I identified the two basic, primary user types
and one secondary user type from the list of
"characters."

15


The 4 C's
I outlined, on four large sheets, the Components required for
the system to work at a minimal level, the Challenges the users
and the design and development team would face, the
suggested Characteristics of the system, and the Characters
who will be utilizing it. I bolded the high-priority items.

Components Challenges Characteristics Characters
* Database * Price accuracy - Step-by-step * Recurring/stable admin
* Admin console * Comparing physical receipt to est. cost - Minimal instructions - New/substitute admin
- Restaurant manager - Negotiating with restaurants * Practical and quick to implement - Support (developers?)
- Scheduler - Resolving order errors * Scalable * The food orderer
* Order manager * Ensuring order changes reflect cost - Uses company stylesheet - The expert user
* Exporting reports - Uploading custom menus - Robust at data handling - "High maintenance" food orderer
* Export group orders - Scalability of application/process - Admin overrides (into staff-submitted data) * Recurring/stable accountant
- Menu manager - Comprehensive error messaging * Easy forms - New/substitute accountant
- Reconciliation page - Data tracking, sorting, exporting by - Professional (relative to the company) - Error reporter
- Confirmation dialogs multiple date ranges (daily, weekly, 15-day) - Readable text - Delivery person
- The food itself - Syncing with company mainframe - Simple interface * Store owner/manager (primary contact)
* Food ordering system (menu forms, - Ordering food on time - Less (or no) email communication - Cook (food service professional)
order confirmation, comping orders) * Exporting reports in correct format - User-agnostic / usable by anyone

16


Empathy Map
I created an empathy map (summarized here) from subjectively
analyzing what a user may think, do, see, and feel when
performing the project-related action (in this case, ordering
food). The goal was to put myself in the user's shoes.

Think Do See Feel
- "Why does this take so long?" - Type names and orders - Excel spreadsheets - Responsibility
- "Did I remember everything?" - Fax group orders - Menu orders - Disoriented
- "Who has a free lunch today?" - Email staff - Emails - Concerned / worried
- "What restaurants are - Notify accounting - Word documents - Overwhelmed
scheduled for today, again?" - Call restaurant - $X.XX - Relieved (when it's over)
- ... - ... - ... - ...
Admin
Needs Goals
- Get orders from staff - All orders are correct
- A way to record and export orders - Not so many emails sent
- Specify order close times - Reduce time spent handling process
- Phone, fax, email, Internet - All files and data in one location

Think Do See Feel
- "What do I want to eat?" - Pick a menu item - Online menus - Hunger
- "When does my food arrive?" - Email order to admin - Multiple emails - Jealousy ("Where's MY food?")
- "Why so many emails?" - Locate food. Eat food. - Names on food wrapping - Angry/disappointed
- "Shoot. I forgot to order!" - Notify admin of order errors - Pay stub (minus food costs) - Apathetic
- ... - ... - ... - ...

Staff Needs Goals
- Food - Get food by noon
- Notification that ordering is open - Save orders / order in advance
- Ability to order food - Reduce lunch costs
- A restaurant/menu to order food from - More restaurant and food options

17


User Types
Having the process flow and basic characters figured out, I
knew how food ordering worked. Now I needed to identify the
main users.

What happened to What does this
It would be neat if we had
my side of guac? order say?
our own internal Grub Hub!

Admin Staff Vendor
PRIMARY PRIMARY SECONDARY
- The person handling the internal food - Those employees who do not bring in food - Store owner or manager working a hectic
ordering process every day lunch hour
- A company employee - Usually a young professional - Familiar with using a fax machine
- Familiar with the internal politics and - Very adept at using complex applications - Receive orders in a specific format
personalities - Hungry, but patient and respectful of the - Possibly not fluent in English
- Looking to reduce the amount of time and admin's efforts
energy spent dealing with handling this
process

18


nom.bravo
Improving on Existing Applications Heuristic Analysis
Grub Hub
Architecting the Content Nerdery Mainframe

Designing the Interface Chipotle Online Ordering
Key Characteristics

19

John Thompson - nom.bravo - Improving on Existing Applications

Heuristic Analysis
I then analyzed the positive and negative aspects of existing
sites, methods, and applications. Grub Hub and Chipotle both
Why I Analyzed...
served as inspirations for the interface, while the Nerdery
Mainframe served as a constraint for the interface components.
...Grub Hub:
This application was explicitly mentioned by a
The CSS styles and functional components (form fields, date selectors, etc.) for
nom.bravo were predetermined, so I concentrated more on the process and practical key user. It's a tried system, is incorporated into
features of each application, rather than aesthetics. 13 cities, and is actually used by the company's
Chicago location.

...Chipotle Online Ordering:
Chipotle is the second most commonly
ordered-from restaurant at the company, and
the key admin user fills out the Chipotle online
ordering form for placing orders.

...the Nerdery Mainframe:
Part of the stakeholder requests was that it
integrate within the mainframe. And with a tight
development timeline, we would duplicate
certain selectors and input methods.

20


Grub Hub Easy Undo
Some people often
Grub Hub (grubhub.com) is an online food ordering system switch orders last-
open to the general public. Many aspects of this application minute. Grub Hub
gives them this
would take up too much time to implement, so I identified
capability, in a digital
elements integral to the process of ordering online. context.

Simple Top Nav Obvious Steps Call-to-Action Prices Next to Adding Extra
Global navigation is Large, bold type with within Button Items Items Is Easy
easy to track and actionable fields A simple and Listing prices next to Simple checkbox
keeps to a near- immediately below it commanding button individual items forms are easy to
minimum three tabs. make it clear where leading to the next (versus only in the code, recognizable by
the user is supposed clears up the path order summary) all potential Informative
to start. even more. ensures the user can nom.bravo users. Order Summary
afford the order. All the pertinent
information is clearly
and concisely laid out,
including full pricing
Grub Hub Food Ordering Process (Simplified) information (subtotal,
total, tax, and tip).

Choose restaurant Specify delivery
Type address Add menu items Finish ordering Place order
from list or map instructions

21


Chipotle Online Ordering
Chipotle is Mexican restaurant specializing in burritos. Their
online ordering process is aesthetically pleasing and is actually
utilized by the company's administrator when ordering food.

Disabled Allow Order Helpful Error
"Continue" Editing/Deleting Messages
Buttons Categorized, Simple Form
Users may easily edit Forms induce
Chipotle ensures all or delete individual mistakes. Before an
Ordered Options Radio buttons imply a
required data is items within their order is completed,
Chipotle mimics its single choice.
collected by halting order. Chipotle verifies all
onsite ordering Checkboxes imply
the process until a submitted data is in a
process by sorting its multiple choice.
user completes a correct format.
'add item' process Indenting "Guac
required action. Included" implies that
into chunks (i.e.
"What Goes Inside"). option lies under
"Veggie".

Chipotle Online Food Ordering Process (Simplified)

Choose Chipotle Add menu items Specify payment Specify pickup
Register/Sign In Enter ZIP code Send order
location "to Bag" method time (no deliveries)

22


Nerdery Mainframe
The Nerdery Mainframe is an internal console, containing a Date Selector
Users will likely need
timesheet, a work order manager, and many other work-related
to pick dates (and
features. I spotted existing interaction patterns that would be times) via this
standard JQuery date
needed for the nom.bravo interface to function.
selector.

Header Dropdown Select Form Fields with Footer Tab Navigation Tables Buttons
The Mainframe uses We will likely use this Auto-Suggest The entire Mainframe Global tab navigation Since there will need Button styling is very
the same logo, login, space-saving selector. These will help save uses the same footer would be a good to be an admin consistent throughout
profile, and search time on form field with a link for choice for the console with recorded the Mainframe. We
elements in the entire data entry. feedback and interface, since the order data, there will will continue this
backend. copyright information. staff is already familiar most likely be a need consistency through
with it. for a table. nom.bravo.

23


Key Characteristics
In comparing Grub Hub with Chipotle and the Mainframe, I
noticed some key commonalities and must-haves for the new
food ordering process and accompanying interface.

Structured Consistent
1. "Where are you ordering from?" - The process is the same every time (though
2. "What will you be ordering?" restaurants and items may change).
3. "Where (or to whom) is the order going?" - The interfaces have a familiar style.
4. "Are you ready to send the order?"
5. [Order sent]

Reversible Easy to (Un)do
- User may go back one step in the process. - The steps to ordering food are unambiguous.
- User can delete items. - One main action per step (i.e. "add items").
- User can start the order over. - If the user makes an mistake, there's always a
quick way to reverse the last action.

Repeatable Informative
- User may add more than one item per order. - Descriptions for non-obvious menu items
- User may submit multiple orders. - Prices for non-free items
- Clear labels for actionable buttons
- Section headers for each step (and each page)

24


nom.bravo
Architecting the Content Mental Map
Ideal Process Flow
Designing the Interface Site Map

25

John Thompson - nom.bravo - Architecting the Content

Mental Map
A mental map is a chart of all tasks that users and admin will be
able to perform on the site, with the underlying features that
support those tasks. I combined this with the scope of work and
user research to prioritize and identify all necessary features.

1. Compile list of tasks. 2. Write them on sticky notes.
First, I organized all the tasks I could think of on I then hand-wrote those tasks on several dozen
a sheet of paper. sticky notes of different colors (blue for sections,
yellow for granular tasks).

3. Sort, supplement, and strike. 4. Review and prioritize.
I sorted those notes via general affinity on a Once I had all my sticky notes ordered, I would
large sheet of paper. Then I reorganized them consult with development first, then
by section and category. stakeholders (and repeat step 3).

26


Ideal Process Flow
A new way to handle food ordering was created. I combined
the prioritized features and elements from the mental map with
key characteristics and example processes from heuristic
analysis, then ensured they lined up with stakeholder, client,
and user needs.

[Detailed flows] are on the following page.

Ordering Ordering Food arrives Data handled
open closed (w/receipt) and exported

To: Schedule Send email To: Allocate Save actual Deduct
Export group To: Send/fax
Admin restaurants & order group orders
that food has
arrived
actual costs
(from receipt)
cost values
(in database)
allotted costs
from pay
close times

Save Fax-able Adjust actual
Group orders CSV
System restaurants &
by restaurant
report food prices
exported
close times exported and totals

To: Order To: Receive
Staff food food

27


Detailed Flows
Schedule restaurants and Log in to
Go to Select week Select Set close
time for each
Save
Return to
Schedule to schedule restaurant(s) Schedule
close times nom.bravo
page restaurants for the day(s) restaurant
schedule
main page

Call vendor
Export group Print group Walk to fax Fax group Return to
Send/fax group orders order order machine order
to ensure
work station
receipt of fax

if actual costs differ >$3.00 from estimated costs

Allocate costs (from Record/note
Record/note
Locate cost Solve cost Adjust new
Save actual
estimated cost values
receipt) actual costs
costs
discrepancies discrepancies cost data
(in database)
else: bypass steps

if comped order:
Choose Choose (one) To: Add Choose
View order View/edit
Order food Nerdery restaurant items to
summary
reason for Place order
order
workspace from list order comping

else: bypass step

if order's wrong:
(Admin sends Report order
Walk to Locate and Return to
Receive food email about
kitchen pick up food
Eat food error(s) to
work station
food arrival) admin

else: bypass step

if more items needed:

Choose (one) Select menu Select menu Add toppings Add Repeat: Add
Type special
Add items to order restaurant category item and extras
instructions
completed items to
from list (i.e. 8" Subs) (i.e. BLT) (subitems) item to order order
else: View order
summary
28


Staff Site Map
I created a site map to see what needed to be wireframed for
development. I started with the frontend.

Location
Staff Select

Order Food View Order

Order
Review Order Summary
(not editable)

Error
Select
Place Order Reporting
Restaurant
Instructions

Add Items Comp Order

Subitems
Comping
Menu Categories Items (toppings,
Options
etc.)
Element
Page element
Multiple
element (text, form, icon,
pages etc.)

Order
Summary
(editable)

29


Admin Site Map
Then I outlined the wireframing "needs" for the admin end.

Admin

Schedule Restaurants Orders Reconciliation Accounting

List of Group Orders List of Names
Month View Group Orders
Restaurants (by restaurant) and Totals

Export
Export Group
Week View Online Menu Accounting
Order Report
Report

Export Group
Order Report

Element
Page element
Multiple
element (text, form, icon,
pages etc.)

30


nom.bravo
Designing the Interface Wireframes Introduction
Frontend Wireframes
Admin Wireframes
Visual Design

31

John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes

Wireframes
With the site mapped and process laid out, I could begin
designing the interface via annotated wireframes.
My Process:
Created Wireframe Drafts
I first created a set of wireframes for the staff-
side "frontend." Those underwent several
iterations. Then I wireframed the admin console.

Reviewed and Iterated
Once each draft of wireframes were completed,
they were presented to the development team,
stakeholders, client, and project manager.
Changes and improvements made during those
meetings were implemented.

Consulted with Development
When I was unsure of what approach to take
with the interface, I gathered advice from UX,
HTML/CSS, and PHP/database experts.

Hand Off to Development
Wireframes were finalized and handed off to the
front-end development team.
Due to a tight timeline, the database was developed
simultaneously with wireframing and front-end development.

32


Frontend Wireframes
First, we tackled the frontend, or staff side of the food ordering
interface.

33


Select Restaurant
Staff
Featured

Order Food View Order 4
Your current location is Bloomington, MN 3

ORDER FOOD
Select a restaurant from those available today.
1
1 List of available restaurants for the day.
Jimmy John's

[on click] To either a generic menu form (p. 35) or 1
2 Chipotle

custom menu form (p. 37) for that restaurant. Davanni's

Select Nerdery workspace location from dropdown: Proceed to Menu 2
3

Your current location is Bloomington, MN
Bloomington, MN
Chicago, IL
<NERDERY WORKSPACE>
<NERDERY WORKSPACE>

4 [on click "View Order"] To View Order screen (p. 39),
which displays all menu items ordered for the current
date.

5 When it is past the order close time, the following
replaces the page header and restaurant select:

ORDERING CLOSED
Please wait until after <ORDER OPEN TIME>, then return and place your order.

Send all order errors to <ADMIN CONTACT EMAIL>. Do not alert the admin in person or via phone.

34


Generic Menu
Staff
Featured

Order Food View Order
Your current location is Bloomington, MN

1 [on click "Link to full menu"] Goes to an external page
or PDF of that restaurant's online menu. <RESTAURANT NAME> Change Restaurant

Please complete your order. Order Summary
2 User may not continue until the required Item and Sides
field is completed. <RESTAURANT NAME> Order Form Linguine with clam delete 5
<RESTAURANT NAME> Order Form Link to full menu
Link to full menu 1 sauce and garlic bread
Sauce on the side

Item and Sides Linguine with clam delete
sauce and garlic bread
Linguine with clam sauce and garlic bread Sauce on the side
2
3 Special instructions are optional and include a character Linguine with clam
sauce and garlic bread
delete
Special Instructions
Sauce on the side

counter (140 total). Sauce on the side
3 6
Continue
126 characters left

4 [on click "Add to Order"] Adds the item to complete Start Over
7
Add to Order 4
order. User may add multiple items per order.

5 [on click "delete"] Removes the menu item from the
Order Summary and deletes the menu item data.

6 [on click "Continue"] To Review & Place Order screen.

7 [on click "Start Over"] Prompts Start Over modal:
Start Over

Are you sure?

Your order will be completely erased.
This cannot be undone.

Cancel OK

[on click "OK"] Deletes entire order and sends user to
Select Restaurant screen (previous page).
35

UX Portfolio - nom.bravo

Recommended

Recommended

More Related Content

Similar to UX Portfolio - nom.bravo

Similar to UX Portfolio - nom.bravo (20)

Recently uploaded

Recently uploaded (20)

UX Portfolio - nom.bravo