1
Seattle Happy Hour mobile app Stefania Lukito and Chris Plancic
IM 231 - Interface Design Spring 2012 Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
Definition Statement 1. List all feature you think users might like • Ability to check on the happy hour menu of the specific restaurants • Ability to see all list of restaurants that have happy hours • View maps to the nearby restaurants that have happy hours • View open hours or happy hours of different restaurants • Ability to go to the restaurants’ website to see more information • Ability to contact the specific restaurants • Ability to see the location of the restaurants • Ability to know the type of the restaurants • Ability to know how price of the restaurants • Ability to add on their favorite list
2. Determine who your users are • Users of this application will be
working class people, young adults, and may be tourist. • People who like to try different restaurant • People who like happy hour
3. Filter the feature list through the audience definition • Main function of this application is to
have easy access to all happy hours restaurant information. • Easy access to any happy hours restaurant location. • Definition statement: “ Your local happy hours information ”
4. Don’t stop there
• This app will help the guest restaurant to know what they want to order (because of the menu) • This app will definite what kinds of food they have • Make the easy hierarchy to other pages Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
2
Competitive Analysis
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
3
Competitive Analysis
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
4
Competitive Analysis
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
5
6
Competitive Analysis Dark
Dark
Bright
Black for navigations, Dark blue for background and Green and Red for time
Black for navigations and background Orage for some text
Red for navigation and red and cream for background
Layout
Organize, Easy to read and understand the information
Organize, Easy to read and understand the information
Organize, Easy to read and understand the information
Navigation
Have main navigation (top) and tab navigation - Happy hours, Show in Map and Find Address
Tone
Colors
Only main navigation (top)
Have main navigation (top) and tab navigation - List View / Map View
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
7
User Persona Tom Smith 37 years old Manager of Business Seattle, WA Married for 12 years He is very busy with his job. He is very wise with financial and can control with his business budgets. He has very powerful opinion to discuss in his conference. When he finished with his shift hour, he sometimes likes going out to bar with his friends to watch sport channels. He loves to watch any sports. Also, spend time with his kids and his wife during suppertime and storytelling to kids for bedtime.
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
8
User Persona Michelle Albertson 20 years old Undergraduate student at University of Washington Seattle, WA She is studying Biology. She took four different internships in different states. She wants to rescue many animals from danger place. She is so exciting to have real-world job after graduate from her university.
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
9
User Persona David Carr 35 years old Architecture Photographer Toronto, Canada He loves to take trip by himself and with his group to United States, Europe, Asia, and Australia. He always brings his own camera to take shot any architecture to add in his portfolio. Plus, he is the freelancer in photography for any job position to teach how to better material to the camera. And, he takes some shots for job position. He earns good salary a hour and saves for his other trip to different country.
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
Mood Board
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
10
App Icon Concept
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
11
App Icon finalized
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
12
Concept Sketch
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
13
Process
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
14
Process
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
15
Site Map
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
16
Lo-Fidelity
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
17
18
Lo-Fidelity
Back
Logo
Back
Logo
Close
Back
Locations
Lorem ipsum Lorem ipsum Lorem ipsum Tootip title
Tooltip description
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Home
Near by You
Locations
Back
Restaurant
search
A Lorem ipsum
A B C
Lorem ipsum Lorem ipsum Lorem ipsum
D E F G H I J K L M
Lorem ipsum
N O P
Lorem ipsum Lorem ipsum Lorem ipsum
Q R S T U V W X Y Z
Lorem ipsum
Restaurant List
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
#
19
Lo-Fidelity
Back
Restaurant Name
Back
Hours
Back
Menu
Back
address ,Seattle,WA 123-123-1234
Map
Tootip title
Tooltip description
Website
Restaurant Detail
Hours of Operations
www.example.com
Menu
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
Map
20
Lo-Fidelity
Search
Close
Search bar
Back
Favorites
Back
Restaurant Name
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Q W E R T Y U I O P
Lorem ipsum
Menu Facebook
Lorem ipsum
Map Twitter
A S D F G H J K L
Lorem ipsum
Z X C V B N M
Lorem ipsum
.?123
space
return
Search
address ,Seattle,WA 123-123-1234
Lorem ipsum
Favorites
EmailHours to A Friend
Cancel
Share
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
21
Style Guide Typeface :
Colors : R: 163 G: 0 B: 23
text: Helvatica (Regular) 17pt Top Nav: Helvatica (Bold) 20pt
#A30018
Pattern : R: 230 G: 230 B: 230 #E6E6E6
R: 59 G: 94 B: 140 #3B5F8B
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
22
Hi-Fidelity Home Page In the home page we giving the users to choose locations or near by you
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
23
Hi-Fidelity Near By You The near by you will giving the users information of the restaurants surrouding them
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
24
Hi-Fidelity Home Page In the home page we giving the users to choose locations or near by you
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
25
Hi-Fidelity Locations The locations list that is the neighbourhood of Seattle is in alphabatical order and user have to scroll in order to find the desired location
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
26
Hi-Fidelity Restaurants list the restaurants list is also in the alphabtical order and users have to scroll in order to find the desired restaurant
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
27
Hi-Fidelity The Information We provide the users the address, phone number, hours, menu and direction. And we also giving the favourite (bookmark) icon
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
28
Hi-Fidelity After being favorited After the user press the favourite icon, the favourite icon will be filled with white color
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
29
Hi-Fidelity Hours of Operations We giving users both information of happy hours and regular hours
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
Hi-Fidelity
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
30
31
Hi-Fidelity Menu We provide the information of the appetizers, drinks and the website link
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
Hi-Fidelity
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
32
33
Hi-Fidelity Direction This map will connected to the google map that it will calculate and show the direction to the restaurant
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
34
Hi-Fidelity Favourites If users click on the restaurant on the favourite list, they will be directed to the restaurant information
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
35
Hi-Fidelity Search Users are able to search for the desired restaurants
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design
36
Hi-Fidelity Share Or even share the information that they found to others
Chris Plancic & Stefania Lukito | Seattle Happy Hour Apps | SP 12 | IM 231 Interface Design