GR 605 OL1: Digital Design Studio 1 Assignment 2.1: The Design Brief and Proposal Yizhuo Liu
01
DESIGN BRIEF
Introduction
The Ladro Roasting Cafe is located in Seattle where is famous for coffee. Caffe Ladro opened their first location on Upper Queen Anne in 1994. They serve superb coffee and freshly baked goods. Their o wn green coffees directly from the farmers and roast single origins and blends at their Queen Anne roastery. The homemade baked g oods sustain and satisfy. Also, the comfortable space with a friendly atmosphere is nice for serving the customers and community.
Client Requirements
Ladro Roasting Cafe has a nice website which includes the enough information of this brand, such as the menu, the introduction of their ingredients, and selling products. However, the visual layout of the website could be more friendly and prettier. The navigation needs to b e changed at some point. The logo is going to be modified as well.
Target Audience
- Tourists - College students - People who work on the union street
Competition
- Starbucks - FontĂŠ Cafe & Wine Bar - Seattle Coffee Works - Victrola Coffee Roasters
Content
http://www.caffeladro.com
GR 605 OL1: Digital Design Studio 1 Assignment 2.1: The Design Brief and Proposal Yizhuo Liu
02
DESIGN PROPOSAL
Objective
The objective of this project is to redesign the website for Ladro Roasting Cafe and help this brand to promote their products.
Business Goals
- Promote the fresh organic ingredients - Sell more coffee and brewing machines - Raise awareness about this brand
Brand
The Ladro Roasting Cafe is near Pike Market which is a famous tourist spot in Seattle. Also, a s we all know, there are a lot of famous cafe in Seattle, especially Starbucks, but Ladro Roasting Cafe is known for its ingredients which are directly from the farmers. The typeface of the existing logo they have is not that good. Creating some visual element for Ladro Roasting Cafe is going to have some benefit on promoting this brand.
Constraints
Coffee is really famous in Seattle, and the original Starbucks shop is at the gateway to the Pike Place Market, which is near the Ladro Roasting Cafe.
Solutions
- Redesign the website with emphasizing their fresh ingredients in order to promote this brand. - Creating some interesting visual elements for this brand. - Modify the logo.
GR 605 OL1: Digital Design Studio 1 Assignment 3.1: The Site Map Yizhuo Liu
03
SITE MAP
HOMEPAGE
LOGIN / ACCOUNT
ABOUT US
SHOPPING
MENU
CAFES
About Ladro
Items Categories
Coffee
9 Cafes Address
Roasting Responsibly
Shopping Cart
Bakery
Opening Time
Wholesale Seattle Coffee Roster
Price
Comments From Customers
Contact Us
Calories
GR 605 OL1: Digital Design Studio 1 Assignment 4.1: Navigation Terminology Yizhuo Liu
04
NAVIGATION TERMINOLOGY
GR 605 OL1: Digital Design Studio 1 Assignment 5.1: Persona and Scenarios Yizhuo Liu
D S
05
PERSONA AND PERSONA AND SCENARIOS SCENARIOS GR 605 OL1: Digital Design Studio 1 Assignment 5.1: Personas and Scenarios Yizhuo Liu
me job. onth uiet place
SERENA
Serena
1: 1 1: s u
he City
Place: Lives in Seattle, WA Age: 21 years old. Occupation: A student at the City University of Seattle. Part-time job. Income: $1500-3000 per month Driving need: She needs a quiet place for writing papers and drinks coffee for staying up. The City University of Seattle is near the Ladro Cafe, and she lives in downtown. She is hard working on studying. Since she also got a part time job, she usually writes papers on weekends or at night. She goes to a cafe on weekends for writing papers or discussing projects with classmates. She also buys coffee online for staying up for homework.
Louis
Place: Lives in Seattle, WA Age: 21 years old. Occupation: A student at the City University of Seattle. Part-time job. Income: $1500-3000 per month Driving need: She needs a quiet place for writing papers and drinks coffee for staying up.
Place: Lives in Seattle, WA Place: Lives in Seattle, WA Age: 27 years old An employee in Amazon Age:Occupation: 27 years old Income: $8000-13000 per month Occupation: An employee in Amazon Driving need: Fresh ingredients. Quick Income: $8000-13000 per month and convenient.
Steve Place: Lives in Bellevue, WA Age: 42 years old Occupation: A seafood restaurant owner and chef in the Pike Market Income: $6000-$7000 Driving need: Cheap and fresh
Driving need: Fresh ingredients. Quick and convenient. Louis is working for Amazon. He and his
Louis is working for Amazon. He and his colleagues likeato have lunchresturant aroundin Steve runs small seafood colleagues like to have lunch around the the Pikefrom PlaceAmazon Market. Since he needs the Pike Market. There are 10 minutes walking way building The City University of Seattle is near the Pike Market. There are 10 minutes to a check ingredients prepare for Pike Market. lunch, he to usually buys cup the of coffee and and a croissant Ladro Cafe, and she lives in downtown. to the walking way from After Amazon building foods. He usually arrives restaurant She is hard working on studying. Since for his theafternoon. Pike Market.Since After his lunch, he usually girlfriend is a coffee lover, he usually purchases couple hours before the opening time. she also got a part time job, she usually buys a cup of coffee and a croissant for fresh coffee beans online.
LOUIS
Serena Place: Lives in Seattle, WA Age: 21 years old. Occupation: A student at the City University of Seattle. Part-time job. Income: $1500-3000 per month Driving need: She needs a quiet place for writing papers and drinks coffee for staying up.
writes papers on weekends or at night. She goes to a cafe on weekends for Louis writing papers or discussing projects Place: Lives in Seattle, WA with classmates. She also buys coffee Age: 27 years old online for staying up for homework. Occupation: An employee in Amazon Income: $8000-13000 per month Driving need: Fresh ingredients. Quick and convenient. Louis is working for Amazon. He and his
The City University of Seattle is near the Ladro Cafe, and she lives in downtown.
colleagues like to have lunch around the Pike Market. There are 10 minutes walking way from Amazon building to
She is hard working on studying. Since
the Pike Market. After lunch, he usually
she also got a part time job, she usually writes papers on weekends or at night. Louis She goes to a cafe on weekends for Place: papers Lives inorSeattle, WA projects writing discussing
buys a cup of coffee and a croissant for his afternoon. Since his girlfriend is a Steve coffee lover, he usually purchases fresh Place: Livesonline. in Bellevue, WA coffee beans
Age:classmates. 27 years oldShe also buys coffee with Occupation: An employee in Amazon online for staying up for homework. Income: $8000-13000 per month Driving need: Fresh ingredients. Quick and convenient.
s coffee for Louis is working for Amazon. He and his
STEVE
his afternoon. Since his girlfriend is a
coffee lover, he usually purchases fresh Steve coffee beans online. Place: Lives in Bellevue, WA
The nearest cafe which offers cheap coffee and bakery is convenient for her to have a fresh breakfast. He also needs to pay wholesale for drip coffee for his restaurant.
Driving need: Cheap and fresh Steve runs a small seafood resturant in
e is near the downtown.
colleagues like to have lunch around the Pike Market. There are 10 minutes walking way from Amazon building to
ying. Since she usually
the Pike Market. After lunch, he usually buys a cup of coffee and a croissant for
foods. He usually arrives restaurant
or at night. ends for projects
his afternoon. Since his girlfriend is a coffee lover, he usually purchases fresh coffee beans online.
The nearest cafe which offers cheap
the Pike Place Market. Since he needs to check the ingredients and prepare for couple hours before the opening time. coffee and bakery is convenient for her to have a fresh breakfast. He also needs
to have a fresh breakfast. He also needs
Steve runs a small seafood restaurant in the Pike Place Market. Since he needs Steve runs a small seafood resturant in to check the ingredients andheprepare the Pike Place Market. Since needs for foods. He usually arrives restaurant couple hours the opening time. to check thebefore ingredients and prepare for The nearest cafe which offers cheap coffee and is convenient foods. Hebakery usually arrives restaurantfor him to have a fresh breakfast. He also couple hours before the for opening needs to pay wholesale drip time. coffee for h is restaurant.
Occupation: A seafood restaurant Income: $6000-$7000
coffee and bakery is convenient for her
Place: Lives in Bellevue, WA to pay wholesale for drip coffee for Age: 42 years old Age: 42 years old his restaurant. Occupation: A seafood restaurant Occupation: A seafood restaurant owner and chef in the Pike Market owner and chef in the Pike Market Income: $6000-$7000 Income: $6000-$7000 Driving need: Cheap Cheap and Driving need: andfresh fresh
Age: 42 years old owner and chef in the Pike Market
The nearest cafe which offers cheap
GR 605 OL1: Digital Design Studio 1 Assignment 6.1: Mood board Yizhuo Liu
06
MOOD BOARD
GR 605 OL1: Digital Design Studio 1 Assignment 6.1: Style Tile Yizhuo Liu
07
STYLE TILE
Logo Logo
Color palette
COLOR PALETTE
Color palette
Typography ABCDEFGHIJKLMNOPQRSTUVWXYZ Typography abcdefghijklmnopqrstuvwxyz
TYPOGRAPHY
Serifa 45 Light
A B C D E F G HABCDEFGHIJKLMNOPQRSTUVWXYZ IJKLMNOPQRSTUVWXYZ a b c d e f g h i jABCDEFGHIJKLMNOPQRSTUVWXYZ k l m nabcdefghijklmnopqrstuvwxyz opqrstuvwxyz
Avenir Next Condensedabcdefghijklmnopqrstuvwxyz Regular Serifa 45 Light
Serifa 65 Bold
A B C D E F GABCDEFGHIJKLMNOPQRSTUVWXYZ HIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz abcdefghijklm nopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Avenir Next Condensed Ultra Light
Serifa 65 Regular Bold Trade Gothic
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGH I JABCDEFGHIJKLMNOPQRSTUVWXYZ KLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz a b c d e f g h i j k l mabcdefghijklmnopqrstuvwxyz nopqrstuvwxyz Myriad Pro Regular
FFADGothic Matro Regular Trade Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ Photography
PHOTOGRAPHYabcdefghijklmnopqrstuvwxyz FFAD Matro Regular Photography
Style Tile Ladro Cafe
Style Tile Ladro Cafe
GR 605 OL1: Digital Design Studio 1 Assignment 7.1: Storyboard of usability Yizhuo Liu
08
STORYBOARD OF USABILITY
MOBILE DEVICE
DESKTOP DEVICE
GR 605 OL1: Digital Design Studio 1 Assignment 8.1: Storyboard Mock-Ups Yizhuo Liu
09
STORYBOARD MOCK-UPS
MOBILE DEVICE
Introduction of review
Press this Evaluation
Picture for ‘’Special Combo”
Users add photo section
Picture for combos
Items Catagory
Write reviews
Items Catagory Product information Items Catagory
Order button
DESKTOP DEVICE
MOBILE DEVICE Logo
Catagory
Catagories
Logo
Image
Click this
Image
Wholesales introduction Email
Logo
Catagory
Write email
Image
Wholesales introduction Email
DESKTOP WEBSITE
GR 605 OL1: Digital Design Studio 1 Assignment 10.1: Web Fonts Yizhuo Liu
10
WEB FONTS
HOMEPAGE
HOME
ABOUT US
SHOPPING
MENU
CAFES
STA RT T H E DAY W I T H A G O O D TA ST E Copyright 2015 Caffee Ladro | All Rights Reserved
SECOND-LEVEL PAGE
HOME
ABOUT US
SHOPPING
MENU
CAFES
About Caffe Ladro Now a Seattle coffee institution, Caffe Ladro opened our first location on Upper Queen Anne in 1994. From the intimate vibe of that single café and bakery, we grew to fifteen locations around Seattle that maintain our superb coffee, signature friendly atmosphere, and freshly baked goods. Ladro has always been a pioneer of sustainably and ethically produced coffee. In 2011, we launched a new division of the company: Ladro Roasting. Now we source our own green coffees directly from the farmers and roast single origins and blends at our Queen Anne roaster. Our cupping lab and training program ensure customers always receive perfection. We are profoundly dedicated to serving our customers and community.
GR 605 OL1: Digital Design Studio 1 Assignment 11.1: Sketches and Wireframes Yizhuo Liu
11
SKETCHES AND WIREFRAMES
SKETCH FOR HOMEPAGE A
SKETCH FOR 2ND-PAGE A
SKETCH FOR HOMEPAGE B
SKETCH FOR 2ND-PAGE B
GR 605 OL1: Digital Design Studio 1 Assignment 11.1: Sketches and Wireframes Yizhuo Liu
12
SKETCHES AND WIREFRAMES
WITH TE
WIREFRAMES FOR DESKTOP
Logo
START THE DAY WITH A GOOD TASTE
Logo
DESKTOP
GR 605 OL1: Digital Design Studio 1 Assignment 11.1: Sketches and Wireframes Yizhuo Liu
13
SKETCHES AND WIREFRAMES
SKETCH FOR HOMEPAGE A
SKETCH FOR HOMEPAGE B
SKETCH FOR 2ND-PAGE A
SKETCH FOR 2ND-PAGE B
GR 605 OL1: Digital Design Studio 1 Assignment 11.1: Sketches and Wireframes Yizhuo Liu
WIREFRAMES FOR MOBILE
14
SKETCHES AND WIREFRAMES
BakeryBakery
LOGOLOGO Cinnamon cake cake Cinnamon O r d e r iOt rndoewr i t n o w P i c k u pP il ca kt eur p l a t e r
CoconutCoconut cookies cookies ORDER NOW ORDER NOW
Apple loaf Apple loaf EXPLOREEXPLORE IT IT
ORDER NOW ORDER NOW
Home
Shoping bag Search Home Shoping bag
MOBILE DEVICE MOBILE DEVICE
Search Me
Me
GR 605 OL1: Digital Design Studio 1 Assignment 12.1: Final Mock-Ups Yizhuo Liu
15
FINAL MOCK-UPS
HOMEPAGE For the final homepage, I adjusted the opacity of the background in order to enhance the legibility of the tag line since I want to keep it thin and consistent with the brand style.
HOME
ABOUT US
SHOPPING
MENU
CAFES
STA RT T H E DAY W I T H A G O O D TA ST E Copyright 2015 Caffee Ladro | All Rights Reserved
GR 605 OL1: Digital Design Studio 1 Assignment 12.1: Final Mock-Ups Yizhuo Liu
16
FINAL MOCK-UPS
SECOND LEVEL PAGE For the second level page, I modified the color and size of body copy for creating an obvious hierarchy. Also, it’s more appropriate that the prices were added as well.
HOME
ABOUT US
SHOPPING
MENU
CAFES
DRINKS
Our thoughtfully sourced, roasted, and crafted coffee beverages broaden and awaken minds.
COFFEE
FROZEN DRINKS
NON-COFFEE
Espresso 10 cal
$2.70
Frozen Latte 669-1371 cal
$4.45
Hot Chocolate 190-360 cal
$3.05
Frozen Vanilla Latte 694-1421 cal
$4.60
Chai Tea 130-270 cal
$3.65
Frozen Mocha 699-1431 cal
$4.80
Hot Tea 0 cal
$3.05
Frozen White Chocolate 696-1426 cal
$4.80
Iced Tea 0 cal
$2.85
$3.65
Frozen Caramel Latte 696-1426 cal
$4.80
SIGNATURE DRINKS
$4.25
Frozen Treat (non-coffee) 724-1441 cal
$3.85
Medici 160-330 cal
$4.45
Gibraltar 80 cal
$3.00
Shakerato 26 cal
$3.00
Macchiato 15 cal Cappuccino 90-140 cal Americano 10 cal Latte 110-220 cal Mocha 160-330 cal Brewed Coffee 10 cal
$2.30
EXTRAS $2.05
Add double shot 10 cal
$0.85
$3.25
Syrup 20-70 cal
$0.50
$3.40
Whip 16 cal
$0.35
GR 605 OL1: Digital Design Studio 1 Assignment 12.1: Final Mock-Ups Yizhuo Liu
17
FINAL MOCK-UPS
THIRD LEVEL PAGE For the third level page, I adjusted the space between the image, title, and the body copy since the spaces between them were too tight, and it impacted overall feeling.
HOME
ABOUT US
SHOPPING
MENU
CAFES
ABOUT CAFFE LADRO Now a Seattle coffee institution, Caffe Ladro opened our first location on Upper Queen Anne in 1994. From the intimate vibe of that single cafĂŠ and bakery, we grew to fifteen locations around Seattle that maintain our superb coffee, signature friendly atmosphere, and freshly baked goods. Ladro has always been a pioneer of sustainably and ethically produced coffee. In 2011, we launched a new division of the company: Ladro Roasting. Now we source our own green coffees directly from the farmers and roast single origins and blends at our Queen Anne roaster. Our cupping lab and training program ensure customers always receive perfection. We are profoundly dedicated to serving our customers and community.
GR 605 OL1: Digital Design Studio 1 Assignment 12.1: Final Mock-Ups Yizhuo Liu
18
FINAL MOCK-UPS
HOMEPAGE I have changed opacity of the background on this page. It keeps the same feeling as the desktop version.
START THE DAY WITH A GOOD TASTE Order it now, pick up later
GET STARTED
GR 605 OL1: Digital Design Studio 1 Assignment 12.1: Final Mock-Ups Yizhuo Liu
19
FINAL MOCK-UPS
SECOND LEVEL PAGE I have modified the menu icons from the abstract shape to the clean outline which match the feeling of the brand style.
TODAY’S SPECIAL Americano, Coconut macaroon
START THE DAY WITH A GOOD TASTE
COFFEE
Sourced, roasted, and crafted coffee beverages broaden and awaken minds.
A 2
A 4
A 6
Order it now, pick up later
B 3
C 2
BAKERY
C 5
Homemade baked goods sustain and satisfy.
GET STARTED
Es 6
HOME
SEARCH
ORDER
ME
GR 605 OL1: Digital Design Studio 1 Assignment 12.1: Final Mock-Ups Yizhuo Liu
19
FINAL MOCK-UPS
THIRD LEVEL PAGE I have changed the whole style of this page. The previous dynamic layout was not really consistent compared to other two pages. Therefore, I kept the consistency when I created this page.
BAKERY
BAKERY Homemade baked goods sustain and satisfy.
TODAY’S SPECIAL Americano, Coconut macaroon
COFFEE
Sourced, roasted, and crafted coffee beverages broaden and awaken minds.
BAKERY Homemade baked goods sustain and satisfy.
HOME
SEARCH
ORDER
ME
Almond Biscotti 246 cal
$1.65
ORDER
Almond Croissant 436 cal
$3.85
ORDER
Apple Galette 606 cal
$4.15
ORDER
Banana Bread 379 cal
$2.75
ORDERED
Chocolate Croissant 263 cal
$3.85
ORDER
Coconut Lime Muffin 521 cal
$2.65
ORDER
Espresso Chip Cake 688 cal
$3.70
ORDER
HOME
SEARCH
ORDER
ME