PROJECT 02
Smart Tables: Hi-Tech Meets Coffee Shop
Spring 2014
1
Melissa Samworth • User Experience & Visual Design
Project Title
01 INTRODUCTION
How can technology be utilized in the coffee shop to
facilitate the ordering process?
& how can we make sure this adds to, rather than takes
away from, the down-to-earth coffee shop vibe?
2
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
02 RESEARCH
Summary
With two fellow students, I
conducted the following research:
11 INTERVIEWS
2 Midnight Oil Managers
7 Midnight Oil Customers
2 Starbucks Customers
1 MARKET SURVEY
100 Total Participants
2 CUSTOMER ROLE-PLAYS
General Take-Away
The coffee shop provides much more than coffee & other drinks. What
attracts customers is the entire experience: the cozy atmosphere, the
exchange between customers & staff, & the general vibes of the coffeeconsuming community.
3
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
02 RESEARCH
Manager Interviews
“I think people come
to the shop for the
interaction with the
staff. Interpersonal
experience is easily
Jim
Kayleigh
HEAD MANAGER
ASSISTANT MANAGER
• Likes to facilitate the typical coffee
• Wants to promote sustainability &
as important as
shop atmosphere: people lounging
the product being
around, reading or working on their
served.
computers while sipping coffee.
• Believes the social aspect of the
coffee shop is as important as the
Jim
product being served.
Head Manager
• Has worked as manager at several
“green” practices.
• Wishes there was a more efficient
process of ordering & making drinks
for the busiest times of day.
• In the process of organizingmore
event nights to promote the
community aspect of the shop.
coffee shops, & focuses on targetting
the demographic that corresponds
with the shop’s location.
4
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
02 RESEARCH
Customer Interviews
Kate
Tim
Bethany
• Reports a low “coffee IQ”. In other
• Enjoys coming to Midnight Oil with
• Enjoys the small, friendly, cozy
words, she doesn’t know the
ingredients of most of the drinks, so
she never breaks out of her usual
friends from class as well as alone.
environment of Midnight Oil
• Wishes the line wasn’t so long in the
• Typically comes at night to do
morning.
latte routine.
• Enjoys playing the board games that
• Enjoys the small, friendly, cozy
environment of Midnight Oil.
• Often just relaxes alone, sipping on
her coffee.
Midnight Oil provides for customers.
homework & enjoy the company of
the staff.
• Considers health an important part of
her food & drink choices, & wishes
more health information about the
food & drinks was readily available.
5
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
02 RESEARCH
Current Trends
Many eateries are utilizing technology, specifically iPads &
tablets, to simplify & personalize the ordering process.
Jaleo
Stacked
Lark Creek
TAPAS RESTAUR ANT
FULL-SERVICE RESTAURANT
FULL-SERVICE STEAKHOUSE
An app called SmartCellar guides
A system that lets customers order from
“The advantage for us is we can
the user to search for wine by grape
their table, send the meal ticket directly
include a lot more information,” Senior
variety & climate zone. Select a bottle
to the kitchen–& even pay via the iPad.
Vice President Quinn McKenna says.
for details about the vintage & its
Servers bring the food & beverages.
“Instead of just saying ‘14-ounce steak,’
producers, tasting notes written by
the restaurant’s wine team, pictures
of the bottle or label, & food pairing
”The advantage to the guest is the
speed of service,” says co-founder Paul
on the menu, we can show pictures of it
& say where the beef comes from.”
Motenko. “The communication between
Eventually, he’d like to add Amazon-like
the guest & kitchen is immediate, which
features that learn about the customer.
“There’s a clear advantage to digital
is something that’s unheard of in the
For example, “If you ordered this steak,
menus,” says wine director Lucas Paya.
restaurant business.”
you might like this particular wine”.
suggestions.
“First, there’s the amount of content
you can display, which is impossible on
paper. & there’s the real-time capability.
I can update the list at a moment’s
notice online from anywhere in the
world.”
6
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
02 RESEARCH
A Case Study
Carmel
MenuPad App
CAFÈ & WINE BAR
Displays vibrant, detailed photos
& descriptions of items on Carmel
Café’s menu. It also connects to the
Founded
Headquarters
2010
Tampa, Florida
restaurant’s point-of-sale system, so
customers can order food or drinks
without a server, & quickly pay when it’s
Employees
250
time to leave.
TapGuest App
Florida-based Carmel Café & Wine Bar
offers a fresh approach to casual dining,
with a modern Mediterranean menu & a
comfortable, colorful environment that
encourages guests to relax & linger.
But the real innovation at Carmel Café
is iPad. This rapidly exp&ing restaurant
group uses iPad everywhere — from
the dining room to the kitchen to the
business office. iPad makes customer
interactions, food preparation, & other
essential functions faster, simpler, &
more responsive.
TapGuest, a web app, enables the
restaurant to text or phone guests on
their mobile phones when their tables
are ready, eliminating the need for bulky
pagers.
FusionPrep App
Allows every one of the cooks & chefs
to be on the same page about how to
make an item. They can see specifically
what they need to make at their
stations.
7
Melissa Samworth • User Experience & Visual Design
Project Title
02 RESEARCH
Market Survey
Our survey results were very insightful. We learned that
socializing is the second most popular reason people visit coffee
shops, that most people really don’t know much about what’s
in coffee drinks, & other things. Here are a couple of the more
important questions with the results listed by percentage.
WHY DO YOU USUALLY GO
WHAT IS YOUR COFFEE IQ?
TO COFFEE SHOPS?
I know the ratios & ingredients of most common coffee-type drinks
Just to grab coffee or food
35 %
86%
I know what the different drinks taste like, but I don’t know what’s in them
See friends, socialize
34 %
54 %
I’m not very knowledgable in this field!
Do work
34 %
31 %
Meeting place
25 %
Other
6%
8
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
02 RESEARCH
Role-Play
To help with the empathizing process, I experimented
as the customer at both Midnight Oil & a local off
campus shop. My experience at Midnight Oil, probably
similar to that of a typical customer, was something like
this:
3
2
1
4
Waited in line for about a
Ordered a decaf coffee &
Waited about a minute for
Sat down at a table & waited
minute.
paid with my debit card.
my coffee.
about five minutes for my
coffee to cool.
I SAW
I HEARD
I THOUGHT
• People in front of me ordering &
• The din of the room.
• What shoud I order?
• The people infront of me ordering
• What is in half of these drinks?
paying, mostly with credit cards &
R.I.T. Tiger Bucks.
• People awardly waiting around for
their orders.
• People talking with others in close
& paying, all with credit card, debit
card, or R.I.T. Tiger Bucks.
• Employees calling out prepared
orders.
range.
• People on their laptops sipping
coffee.
9
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
03 PERSONAS
Based on my user research, I identified 3 key
personas; almost everyone who visits a coffee shop
will fit at least one of these categories!
Loungers
Socializers
Busy Bees
Loungers come to coffee shops alone
Socializers at the coffee shop for the
Busy bees are easy come, easy go.
& tend to stay around & keep to
chill coffee community vibes. Whether
They’re pretty much there to get their
themselves, often performing activities
they’re coming with friends or just enjoy
coffee & head off to class!
including, but not limited to.
chatting up the staff, they are there to
connect with people. Socializers may
• Working or fiddling on their laptop
be found:
• Reading a book or newspaper
• Attending a special Midnight Oil
• Daydreaming
hosted event.
• Chatting up the staff.
• Spending time with their friends.
10
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
04 USES CASES
Profiles
Kurt
Kara
Jamie
AGE 21
AGE 19
AGE 27
• Studies New Media Design
• Studies Mechanical Engineering
• Grad student at RIT
• Loves technology. Owns an iPad,
• Lives in the dorms
• Following a strict dairy free diet.
• Somewhat introverted, so enjoys her
• Lives in an apartment with her
iPhone, & Macbook Pro
• Considers himself a social person;
enjoys spending time with friends &
meeting new people.
few moments of alone time
• Plays acoustic guitar in her free time
boyfriend.
• Loves working out & staying active.
11
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
04 USES CASES
Stories
Kurt
Kara
Jamie
AGE 21
AGE 19
AGE 27
Kurt has been in the design lab all day.
Kara pressed the snooze button one
Jamie is visiting Midnight Oil by herself
He is ready to take a break, so he & his
too many times today &–whoops–she’s
to work on some homework. She wants
friends from the major decide to go to
running a little behind schedule.
to venture from her typical regular black
Midnight Oil together. They have gotten
to know the staff after so many visits, &
they enjoy the opportunity to socialize &
unwind.
Kurt gets to Midnight Oil & waits in line
with his friends. He is hungry, so he
orders a vegan burrito. He pays with
She knows that she will not be able
to stay awake during her computer
coffee, so decides to try something
new.
programming class if she doesn’t ingest
However, she is not very educated in
some caffeine.
the area of coffee. She has no idea
She gets to Midnight Oil, but the line is
just too long. If she were to wait, she
would be late for class.
cash, & waits several minutes chatting
what is in any of the drinks, or the
difference between them. She wants to
get a dairy free drink she thinks she’ll
enjoy. However, the only information
with his friends at a nearby table. He
Kara decides it’s not worth it, & heads
Midnight Oil provides are the names
wishes he didn’t have to hear constant
off to class, skipping her morning
of the drinks, which are written on the
shout of employees calling out people’s
coffee.
board. She has no way of knowing any
orders.
She is so tired she can’t pay attention in
of the drink’s ingredients, & she doesn’t
He always loves meeting new people,
class.
feel like st&ing there asking the barrista.
but he wishes there was an easier
way to approach them or initiate a
conversation.
12
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
05 OBJECTIVE
General Idea
I want to utilize technology to provide a menu which customers
may explore &, ultimately, use to place an order! This will
provide a fun, interesting, & easier experience for the customer.
It will also reduce, even eliminate lines in the coffee shop!
GOALS
PLATFORM
• Display all menu items in a visually
I am going to explore the concept of a “Smart Table”! I want to design for the (sort-of-
stimulating, intuitive manner
• Provide easy & intuitive access to drink &
menu item ingredients
• Provide a simple way to adjust ingredients
imaginary) platform of an interactive table; that is, a table with a touchable screen as
the surface. This provides me, as a designer, with the chance to apply my skills to a
totally new area of impending technology. “Smart Tables” are also a super effective
solution for a coffee shop! The large surface allows for lots of real estate. Plus, they
are fun & new – everyone will want to come to that coffee shop!
& customize the order
*Okay, it’s a little unrealistic. They would be super expensive, given the current technology. But, hey,
• Deliver an overall fun, innovative, &
this is the future!
beautiful experience that will keep the
customers coming back!
13
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
06 INSPIRATION
Mood
I want to make sure the technology blends in
to the general chill, earthy, personal, & cozy
atmosphere of the coffee shop.
KEY WORDS
Earthy, Lively
COLORS
Red-ish browns, deep tans
14
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
06 INSPIRATION
Style
As I said, I want the technology to blend into the store
atmosphere! I’m going for a highly rendered look, edging on
skeumorphic. I will utilize textures, drop shadows, & gradients to
keep a look which is very consistent with the real world!
15
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
07 WIREFRAMES
Opening Screen
1
2
1
Unlock Swipe
2
Current Staff
As is custom for touch
Current staff members
screen surfaces, I include
are displayed with small
a “slide to begin” element.
pictures & their first name
That way, people don’t
accidentally touch the table &
unintentionally start the menu
exploration/ordering process.
16
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
07 WIREFRAMES
40”
Main Menu
5
5
Selected Item
Selected item is ( 1 ) outlined
with a stroke & (2) 100%
opaque (other items are semitransparent)
6
8
Circular Swiping
•
User may swipe through
menu items in a dial-like
motion
7
•
Central information reflects
currently selected item
7
3
2
Customization
•
Each customization option
belongs to one of several
4
steps
•
User proceeds through
steps by ( 1 ) Tapping each
1
Navigation
Choose between Other
3
Pagination
•
User may ( 1 ) swipe finger
number or (2) Tapping
Search by Tag
•
“last” & “next” buttons
Opens overlay,
Drinks, Coffee Drinks (current
along bottom pagination
displaying type input with
menu), S&wiches, & Pastries
to scroll through menu
accompanying keyboard,
items or ( 2 ) touch a dot
& matching results
to jump to the according
2
4
•
User may select result,
& jump to that item on
Drinks are organized in
the menu (may require
drinks: Mochas, Frappuccinos,
alphabetical order; letters
transition in navigation, i.e.
Machiattos, Cappucinos, &
accompanying pagination
opens “Pastries menu)
Lattes
reflect this
Display only selected types of
•
Shopping Cart
Added items appear here
menu item
Refine
8
17
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
08 VISUAL STYLE
Render Style
To create a sense of depth & tactility,
I utilized drop shadows, gradients, &
subtle bevels & embosses
The Models
In consistence with the highly rendered style, I
illustrated the coffee drinks using Cinema4D.
I chose fifteen different fun coffee-type drinks &
created the models based on the ingredients!
18
Melissa Samworth • User Experience & Visual Design
Smart Tables: Hi-Tech Meets the Coffee Shop
19
Melissa Samworth • User Experience & Visual Design
Project Title
20
Melissa Samworth • User Experience & Visual Design
Project Title
21
Melissa Samworth • User Experience & Visual Design
Project Title