Issuu on Google+

GRASS FED

D ESIGN OVERVIEW KE R I O ’ BR I A N · FA LL 2 0 1 2


GRASS FED

D E SIGN OVERVIE W K ER I O ’ BR I A N · FA L L 2 0 1 2

3

Objectives & Goals

4

Competitive Analysis

5

Key Interactions & Features

6

Personas

7

Scenarios

8-9

User Flows

10-13

Wireframes - Mobile App

14-16

Wireframes - Tableside Tablet

17-18

Visual Design - Mobile App

19-21

Visual Design - Tableside Tablet


Objectives & Goals OB JE CTIV E S

3 GOAL S

Design the digital dining experience for Grass Fed, which will enable diners to:

Decrease wait time for diners by giving take out customers another simple way to place orders.

Make a reservation via a mobile app

Order takeout via a mobile app

Arrive/be seated at a digital table interface

Free up space in the dining room by decreasing wait time for take out customers and allowing customers dining in to order and pay more efficiently

Review the menu

Order courses and beverages

Request additional food and/or beverages

Review the bill and pay

Enhance the Grass Fed brand by giving customers another way to engage and interact with the restaurant Increase revenue through improved takeout ordering and easy tableside ordering


Competitive Analysis GRUB HUB FUNCTION & SCOPE

Delivery and pickup ordering service for restaurants in over 300 cities Online service & mobile app

DESIGN OBSERVATIONS

Consistent brand seen throughout web service and app Modern & approachable look makes me trust interacting with both services

SEARCHING & BOOKING

4 INAMO

FOOD LER

Digital dining experience for two Inamo restaurants

Delivery and pickup ordering service for thousands of restaurants

Website allows for reservations, ordering food is done interactively at the table

Online service

For a restaurant with a technologybased concept, I expected web design to be a bit more polished

Dated looking brand makes me concerned about how well the application will function & how current their information is

Design of tabletop interactivity looks dated, now that touch interfaces are no longer novelty

Web & app interfaces focus on “Where are you?” and “What would you like?”

Booking offered from homepage, book online page, menu page and contact page

Web offers more instruction on searching/using the service

Placement of booking widget not consistent between pages

App is laser-focused on search

Interface very simple & understandable, even without words

Search by your address or area - seems like an unnecessary distinction because ‘area’ could be determined by ‘address’ Action is made clear by green buttons


Key interactions & Features MO BIL E A P P Reservations

Accurate walk-in wait time shown

Make a reservation for a specific date, time, and party size

Option to be reminded of your reservation via email or text message at a time determined by the user

Take Out Ordering

5 TABL E SID E TABL ET Add menu items to bill though search function or standard menu browsing Add items to order at any point throughout the meal Waitstaff/bartender can add items to your bill with their own interface Ability to preview check total at any point throughout the meal Option to pay tableside or through the waitstaff

Option to log in with an account from previous purchase

Suggested tip included

Find items by keyword search or by browsing the menu

Ability to split the check into multiple payment methods tableside

Option to pay immediately with credit/debit card or pay at the restaurant Amount of time until pickup order is ready pro- vided


Personas STEPH

The rushed local Steph, 28, lives in Jamaica Plain and works full time while also going to school two nights a week to complete a second degree. Since her job, classes, homework and social life demand so much of her attention, she often relies on food that she can eat on-thego. However, even though she’s rushed, eating good food is important to her and she doesn’t want to sacrifice quality for convenience. Steph’s Goals Eat tasty food that doesn’t require a long wait time Get a meal that won’t break the bank Support a local business instead of a fast food chain

“I want a good meal that doesn’t make me late for class!”

6 MAGGI E & JAS O N The first date diners

DAN

S AN D R A

The leisurely regular

The out-of-towner

Maggie, 24, and Jason, 27, are young professionals who are out on their first date. Since Jason is planning the date, he wants someplace where he can get a reservation and they won’t have to wait long. Maggie and Jason both want a place where they can focus on talking to eachother and not to the waitstaff, while also getting a good meal. Jason wants to impress Maggie with a restaurant that has some interesting features.

Dan, 32, is a JP local who frequents Grass Fed. He sometimes eats with friends, but isn’t afraid to hang out for most of the night at the bar, watching TV and chatting with whoever stops by. Since he’s at the restaurant so often, he doesn’t require a lot of staff attention. He’s in it more for the social benefits, though he’s can eat and drink a good amount throughout the night. He’s also into saving money where he can.

Maggie & Jason’s Goals

Dan’s Goals

Sandra, 51, is a guest speaker at a local college who is staying in Jamaica Plain at a colleague’s house for just one night. She’s on her own for dinner that night, so she’s looking for a place that’s close to where she’s staying, and offers a local-feeling eating experience. She cares about where her food comes from and tries to support restaurants that source locally. Because of her busy traveling schedule, she’s also looking for a place where she can eat quickly.

Make a reservation to reduce stress

Spend a relaxed evening out

Have a dining experience that allows for them to be interrupted by waitstaff as little as possible

Eat and drink his fill without bugging a waitress or anyone pressuring him to leave

“We want a great experience that lets us focus on eachother.”

Be mindful of money spent

“I eat where they won’t bug me for taking my time.”

Sandra’s Goals Support local agriculture with her eating See what the neighborhood has to offer Eat quickly but not feel rushed

“Local and quick is what I’m after!”


Scenarios S TE P H Steph has just finished a busy day at the office and has to head home to pick up her books and notes for her night class. She doesn’t have much time to eat, but remembers that she saw that Grass Fed has a new app that lets her place take out orders. When she gets home, she searches in the Apple App Store for “Grass Fed.” She quickly finds the app and downloads it. She places her order and is given a pick up time 10 minutes from now. She grabs her things for class and walks over to the restaurant. When she arrives there, walks up to the cash register and gives her name to retrieve her food, which is ready for her. Since she’s paid through the app already, the transaction is done and she heads to class.

7 MAGGI E & JAS O N Jason decides on Grass Fed for his first date with Maggie, since he’s been there before, knows the food is good, and already has the restaurant’s app installed on his smartphone. The morning of their date, he navigates to the app, and uses the “reservations” option to save a table for 2 at 7:30 pm. When they arrive at the restaurant, both 5 minutes early, they’re greeted by the hostess who asks the name for the reservation. She moves them to their table. On their table’s ordering tablet, they peruse the menu, adding items directly from the menu to their order. After their drinks and burgers are delivered and finished, they decide to order an additional drink and dessert each through the ordering tablet. Finishing those, Jason closes the bill tableside with the tablet.

DAN Dan comes into Grass Fed for some late night fare and to watch the Patriots game. Walking past the hostess, saying hellos and taking a seat at the bar, he places his initial order with the bartender. When the order goes through, it appears on the tablet in front of him. Throughout the next several hours, Dan orders a second order of fries, as well as two more beers. Since it’s a Friday night and the bartender is busy with a lot of customers, he decides to place these next orders directly through the ordering tablet. Once he’s hit his budget limit and the game’s over, he closes out his bill via the ordering tablet. Since he’s chosen the “pay with cash” option, the bartender collects his money and tip, and Dan heads home for the night.

S AN D R A Sandra has just arrived in Jamaica Plain after a long flight. It’s late in the evening and she has about a half hour before her colleague, who she’s staying with for the night, arrives home. She wants to get something to eat before she heads there, but isn’t sure where to go. Since Sandra cares deeply about supporting local business and agriculture, she searches on her smartphone for such a place in JP. During her cab ride from Logan Airport, she finds Grass Fed’s website which directs her to the app which will allow her to place an order and pick it up on the way. She downloads the app and places her order with an approximate wait time of 15 minutes. She picks up the food by giving her name at the register, and completes her transaction by paying with cash.


User Flows

8

ST EPH Searches in App Store for “Grass Fed” & downloads the app

Navigates to place a new takeout order

Finds the items she wants by keyword search

Completes her order by paying with credit card via the app

She is alerted that her order will be ready in 10 minutes

To pick up her order, she gives her name at the restaurant

M A G G IE & J A S ON Navigates to the Grass Fed App on his smartphone

Navigates to the “Reservations” feature

Makes a reservation for 2 at 7:30 that evening

They are seated at the restuanrant

They add items to their bill by browsing the menu

Order additional food/drink via tableside tablet

Jason pays for the meal by credit card via the tablet


9

User Flows DA N Places food/ drink order with bartender

Order appears on his tableside tablet

Browses the menu to place his next few orders via tablet

Checks his running total to see how close he is to his budget limit

Browses the menu

Places a new takeout order via the menu

Closes his tab via the tableside tablet

Chooses the “pay with cash” option

Completes her order by specifying that she’ll pay at the restaurant

She is alerted that her order will be ready in 15 minutes

Pays the bartender and leaves the restaurant

SAN DR A Finds the Grass Fed website via Google

Downloads the App from the website

Proceeds to the restaurant to complete her transaction


10

Wireframes - Mobile App 1

1

Grass Fed

PLACE AN ORDER

MAKE A RESERVATION

2

BROWSE THE MENU

2

Grass Fed logo orients the user. From here, the user chooses to Place an Order, Make a Reservation, Browse the Menu and Manage their account.

3 2 Place an Order

3

4 BROWSE THE MENU OR

4

5

OR

5

GO TO MY FAVES

6

MANAGE MY ACCOUNT

6

Click to add items to an order through browsing the menu Find menu items through a keyword search A user logged in to their account will be able to access items that they’ve purchased before or that they’ve added to their favorite items. Navigation from the home screen is now relocated to the bottom of each screen with the addition of a “home” button. The user’s current location is highlighted.


11

Wireframes - Mobile App

1 Make a Reservation 1

WHEN? JUNE 2, 2012

WHAT TIME? 7:00 PM

HOW MANY?

2

When a user clicks on the date, time and number fields, familiar date, time and keypad interfaces appear for them to input information.

Grass Fed Congratulations! Your reservation is set for

2

June 2, 2012 7:00 PM 3 Guests

3

SAVE MY SEAT!

3

REMIND ME!

3

Large text confirms the date, time and party number that was previously entered. By pushing “Remind me!� the user can choose to be alerted via text message or email about their reservation.


Wireframes - Mobile App

-

1

+ 2

-

+ 0

-

+ 0

3

(3)

Classic fries $2.99

2 Spicy Fries $2.99

2 Truffle Oil & Parmesean Fries $3.99

Beet Fries $3.99

Salads

Burgers & Dogs Desserts

3

As items are added by the user, a counter appears on the side tab. By pulling the tab, the user can view their total so far, double check and submit his or her order. To quickly navigate to other parts of the menu, click or drag up/down on the heading. The items in that section can then be scrolled through.

Apps & Sides

+

0 (3)

+ 2

+ 0

-

0

Apps & Sides

4

-

+

Menu items can be added to the order by clicking the (+) sign. Quantity increases for each (+) click. Only after a (+) is clicked, the (-) becomes active to reduce quantity.

ORDER 0 YOUR Classic fries $2.99

-

1

12

+

4

Spicy Fries $2.99 1 Item 1 $2.00 2 Truffle Item 2Oil & $4.00 0 Parmesean Fries Subtotal $6.00 $3.99 Tax $0.38 Beet Fries $3.99 0 Total $6.38 2

0

0

5

Poutine $4.95 ALL DONE? PAY NOW Salads

Burgers & Dogs

PAY AT PICKUP

Desserts

5

The customer’s entire order is shown with name, quantity, and price information. A total based on what he or she has ordered thus far is shown. When the order is correct and complete, the customer can choose to submit his or her order by paying inside the app or paying when they arrive at Grass Fed.


Wireframes - Mobile App 1

Grass Fed Your order will be ready in

1

12

Minutes (6:42 PM) 2

SET A TIMER

2

Large text alerts the customer of his or her pickup time. The customer has the option to set a timer to remind them of their order directly from the time approximation screen.

13


Wireframes - Tableside Tablet

Browse our Menu

1

2

Burgers

A bold welcome message greets the diner.

Sandwich

From here, the

Hot Dogs

diner will choose to Browse the Menu,

Soup/Salad

Search the Menu, use the Interactive

Search our Menu

Date:

Food Map, or Review & Pay the bill.

3

Where’s this from?

+ 2

0

Wings

+ 0

+ 0

/

5

/

(2)

3

Classic fries $2.99

Menu categories appear on the lefthand side. The section that the diner is viewing is

Spicy Fries $2.99

indicated.

Truffle Oil & Parmesan Fries $3.99

4

The main menu from the welcome screen is moved to the bottom, along with the addition

Beet Fries $3.99

of a “home” and “help” button.

5

Poutine $4.95

A diner may access the food that they have added to their order, as well as

4 bilambee

0

+

Desserts

Review & Pay my bill

+

Fries

Drinks

Interactive Food Map

French Fries

-

Welcome to Grass Fed!

14 Project:

-

2

/

-

1

/

-

Date:

-

Project:

help

bilambee

submit their order by pulling the tab.


Wireframes - Tableside Tablet Project:

Date:

Search our Menu

Burgers Sandwich Hot Dogs

1

We have 5 items on our menu with “potato”.

+

Desserts

1

0

+ 0

Diners enter search terms into

menu.

2

Spicy Fries $2.99

/

3

Based on the search results,

3

Server: Kristen Table #: 10 Date & Time: 11.23.12

the Grass Fed

Classic fries $2.99

4

confidence.

Spicy Fries

$6.95

1

Classic Bacon Cheeseburger

$8.95

Cali Burger

$9.95

Tax Total

dulled (no results)

Truffle Oil & Parmasan Fries $3.99

or appear with a number beside it, insidcating the number of results

Beet Fries $3.99

in each category.

+

help

bilambee

5

information is user familiarity &

2

1

Classic reciept given to boost

4

Items ordered are listed with quantity, name and price.

menu sections are

-

Drinks

+ -

Wings

2

/

Grass Fed the field to search

-

Fries (5)

+

Date:

(2)

-

2

/

potato

0

Soup/Salad

/

15 Project:

5

$2.67 $28.52

If the diner is ready to pay, they choose the option to pay now with a credit card, or

PAY NOW WITH A CARD

alert the waitstaff to pay in the tradi-

ALERT WAITSTAFF YOU’RE READY TO PAY

tional manner.

help

bilambee


Wireframes - Tableside Tablet Project:

Date:

/

/

Where’s this from? Interactive Food Map

1

DAIRY FARM

1

Beverly, MA

1

3 4

This farm provides: Meat, cheese

2

Buttons to zoom

3

Slider of farm

at, sagittis vitae mauris.

pictures. A small next image is shown to prompt scrolling.

Nullam nec est odio, eget orci, semper iaculis molestie

in/out of the map.

amount of the

tortor accumsan consectetur.

+ 2 _

cal food providers for Grass Fed.

Nullam tincidunt sem vel

varius nisl. Praesent tortor

Map shows all lo-

4

Informs customers what items have been provided for Grass Fed.

help

bilambee

16


Visual Design - Mobile App

17


Visual Design - Mobile App

18


Visual Design - Tableside Tablet

1917


Visual Design - Tableside Tablet

20 17


Visual Design - Tableside Tablet

2117


Digital Dining Design Overview