Interactive Teahouse Casestudy by Feryal Khawar

The

INTERACTIVE TEAHOUSE a case study

Introduction In setting out to reinvent the much loved and highly visceral experience of tea drinking in a digital interactive environment, I knew I was setting out on a hard and tortuous journey. Tea is the second most drunk beverage in the world, with a history spanning thousands of years, and associated cultures and traditions which are as rich as they are varied according to the global region they flourish in. Inspired by the sense of slowing down that the tea ritual inspires, the primary motivation behind this project was to make an indulgent experience even more indulgent and playful by adding the magic of technology. The purpose of adding technology to a much loved experience was not to detract existing tea aficionados from their experience but to augment it with the advantages that technology provides-namely immediate access to information. Using the principles of immersive learning, the Interactive Teahouse, using the Microsoft Surface 2 table as the portal to the world of tea, seeks to make tea connoisseurs out of the everyday tea drinkers, making the tea drinking experience ever more richer and satisfying! The choice of Microsoft Surface 2 as the central technology that would augment the experience, was two fold: one it allowed 2-3 users to sit comfortably around the table sized surface and two it allowed for object to surface interactions which allowed contextual information to be provided to the user in response to their choices.

Content Understanding Phase Questionnaire What I found Personas Objectives

Information Architecture & Interactive Design The Journey Map Userflows Sitemap Interactive concepts Final Wireframes

Interface Designs Assets Mockups

Name: Gender: Age: Married: a. Kids? 5. Profession: 6. What makes a good day? A bad day? 7. What do you enjoy most as a quick break in the middle of a hectic day? 8. What do you enjoy doing most when you’re relaxing? 9. What helps you make decisions? 10. What influences your choices in products? 11. What activities do you do most frequently on a touch device? 12. What touch devices do you own? 13. What is your comfort level with technology? 14. What do you like/enjoy about technology? 15. What do you find bothersome about technology? 16. Do you enjoy/seek out tech-free environments? Or vice versa? 17. How frequently do you use a touch device? 18. Why do you visit a teahouse? 19. What other activities give you a similar experience? 20. What activities do you enjoy doing in a tea house? 21. What activities do you find cumbersome in a tea house? 22. How frequently do you visit a tea/coffee shop? 23. How frequently do you sit at a tea/coffee shop? 24. Why do you prefer sitting over take out or vice versa? 25. How long do you sit at a tea/coffee shop? 26. Are you interested in knowing about the products you consume above and beyond your enjoyment of them? 27. How much do you know about the tea/coffee you’re drinking? 28. Do you care to know more? 29. What do you love most about tea? 30. What do you love most about tea houses? 31. How adventurous are you about trying new flavours or kinds of tea? 32. What’s the first thing that you do when you come into a tea/coffee house? What next? 33. What is a typical tea house experience? 34. What’s an exception? 35. Do you prefer solitude or company when out for tea/coffee? 36. What do you do when you’re alone? 37. What do you do when you have company?

38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50.

What company do you come with? What sort of topics of conversation do you engage in with company? How frequently do you try new tea flavors? Do you try specials? Seasonal promotions? What do you enjoy about human ordering systems? What do you like about automated ordering systems? What do you find most tedious while ordering for tea/coffee? Where do you see yourself 5 years from now? What would you like to add in your current lifestyle? What would you like to cut out of your current lifestyle? What are the things you hate doing in your day? What are the things you procrastinate on? What do you enjoy most about your lifestyle?

The Interview Questionnaire

1. 2. 3. 4.

Understanding Phase Tea, for all its deceptive simplicity is unbelievably complex. Given that my own knowledge of the subject was limited to just the generic green and black teas, I had to learn about the subject myself. My main reference book was The Story of Tea: a cultural history and drinking guide by Mary Lou Heiss and Robert J. Heiss. The second step was to understand tea drinkers. For that I conducted a series of interviews, asking questions from both tea drinkers and tea merchants, to try and understand what brings people to tea and help them navigate the 400 plus varieties on the market. A big part fof the questionnaire was also trying to understand people outside the sonfines of tea and teahouses to get a sense of the â&#x20AC;&#x153;personalitiesâ&#x20AC;? tea drinking appeals to. This resulted in the development of three personas which would determine the userflows and d e s i g n o f t h e i n f o r m a t i o n a n d interactive experience.

What I found Todayâ&#x20AC;&#x2122;s 20-40 years old population of working men and women are highly comfortable with technology being incorporated in their lives. Most prefer the intimate company of 1 or 2 friends or family when visiting teahouses. Those new to the varieties of tea available prefer personal guidance. Information makes users feel validated about their choices; friendsâ&#x20AC;&#x2122; and familyâ&#x20AC;&#x2122;s ratings and suggestions carry the most weight. Users who enjoy tea like to know more about the product.

Persona—Jane McKenzie (primary) Jane is a 26 year old designer at a midsized advertising agency in downtown Vancouver. She’s a keen employee, eager to learn and progress up the ladder as quickly as possible. She works hard to earn the indulgences she enjoys in life; yoga, the occasional expensive clothes, a holiday in some destination far and warm, activities with friends and of course good food and drink. Jane is well versed with the current technologies and enjoys the up and coming innovations. She owns a smart touch phone, runs multiple errands on the go through 3G networks on her phone, and is perfectly comfortable with living life in the “digital age”. Being a designer, she pays attention to design elements in all her experiences and is particular about incorporating good design in her own life as much as is possible within her means. She believes in working for the big goals in life while enjoying the small pleasures along the way. Her one such pleasure is tea. She visits teahouses several times a month, either by herself or by her friends. She’s enjoys the ritual and fuss of tea, the way it allows her to escape her hectic life for a while and the multitude of paraphernalia and foods that go along with a good cup of tea. She enjoys trying out new flavors and wishes to be better informed about a product that is as rich in its culture, history and flavor as wine.

Personaâ&#x20AC;&#x201D;Adam Decker (secondary) Adam is a 29 year old IT professional who works as a free lancing consultant for big corporations looking to set up internal and external systems. He lives a fast paced life, occasionally travelling to other metropolises. He runs his own company, occasionally bringing on additional colleagues and professionals, on some of the biggest projects. Being a freelancer he is constantly plugged in through his smart phone, and his ever present laptop and is engaged in actively growing his professional network scouting out new jobs. He rarely takes time off, but when he does he likes to indulge in the good life. He is conscious about health and exercise and makes an effort to go out for a run every other day and playing tennis in the summers. He normally eats whatever is on hand on the go, but enjoys fine dining whenever he gets the chance. Being a one man company he frequently ends up spending a lot of time in coffeehouses working and meeting with potential clients. Being health conscious he is actively trying to cut down on his coffee intake and has recently started trying out teas to provide his caffeine intake. Adam is not a huge fan of tea, and knows little about it. His choice of beverage whenever possible is beer and other fine wines. But he enjoys the more relaxing ambiance of the teahouse and finds them a more congenial spot to conduct his meetings. He also appreciates the detail-oriented nature of tea and is willing to delve deeper into the world.

Personaâ&#x20AC;&#x201D;Laura Ashby (tertiary) Laura is a 38 year old Project Manager who works on contract at multiple big corporations in town related to the gaming industry. She is a wife and has a 6 year old daughter, May. Her husband works as a creative director at one of the game development studios. They own a house in north Vancouver and enjoy a comfortable, and fairly luxurious lifestyle. Laura leads a busy hectic life. Her profession and her lifestyle necessarily demand technology to be well integrated in her life. She owns an Blackberry, an iPad and gave away her iPod to her daughter. She conducts most of her business online, both in the office and on the go. Despite her hectic work life, she enjoys being a wife and a mother and enjoys cooking and spending time with her daughter in the evenings. Laura has an interest in fashion and jewelry, and boasts an impressive collection of designer shoes. She also tries to live as healthily as possible, and hits the gym twice a week. She maintains a lively interest in what is new and happening in town and keeps her bedside bookshelf well stocked with the books of all subjects. Laura gets little time to indulge herself between her work and her family. But she tries to spend out an evening or two a month with her girlfriends, either shopping or dining out or just heading to the spa for a day long pampering session. She especially enjoys her daily tea breaks, as they not only serve to keep her refreshed throughout the day but also provide her the caffeine content that she craves in the mornings. She also enjoys heading down to the nearest tea store or salon, to restock her home supplies and indulge in some tea and scones away from her many responsibilities. She has an impressive knowledge of the various blends and brews and is often the one her friends call up to ask an opinion of the right sort of tea. She also enjoys the occasional high teas to celebrate some occasion. While she has her preferences and likes and dislikes she enjoys sampling the latest quality brews and different tea house experiences increasingly available in the city.

Objectives Help initiate potential tea drinkers in the most comprehensive way possible. Educate and train new and casual tea drinkers to better able to improve their experience through knowledge about the various teas and their properties. Provide a new experience to established tea drinkers and help them further develop their expertise and tastes. Allow users to profile their tea journeys and share it with their friends and family, to better direct their tea journeys.

Information Architecture & Interactive Design

The Journey Map Enjoy the instore interactive tea house experience!

Buy tea for home!

Build a tea profile! Learn about exotic and common teas!

Return to store to continue your learning experience!

Recreate the experience at home, using your tea profile (available through the stores website), as a guide to buy teas online!

User Flows I created fairly high level user flows for the users interactions with the tablet device, as well as the tea cup interactionswith the tablet. While the primary target remains the casual tea drinker who is likely to return, guidance was added for the new user as well.

New User

Use tea wizard

Tea Wizard

Tea 1

Tea 2

...

YES

Explore system on your own

YES

Niave User Flow

YES

Order Tea NO

Tea 1

Tea 2

...

Food recom1

YES

Food recom 2

YES YES

Food recom ...

YES

Order Tea Order Food

Food recom1

YES

Food recom 2

Food recom ...

YES

Order Food

*Food recom = Food Recommendation

YES

Full Menu

YES

NO CHECKOUT

YES

Full Menu

YES

NO CHECKOUT

View Purchase History

View Wishlist

Tea 1

Tea 2

YES

Explore system on your own

YES

Pay for yourself only

YES

Pay for a fellow table companion

YES

Pay for entire table

Order Tea

Tea 1

YES

...

Power User Flow

NO Returning User

Tea 2

Food recom 1

...

YES

Food recom2

YES

Food recom ...

YES

Full Menu

NO CHECKOUT

Enter authorization PIN

YES

Pay through membership

YES

Order Food Order Tea

Food recom 1

YES

Food recom2

Food recom ...

YES

Order Food

YES

Full Menu

YES

NO CHECKOUT

Receive Order

Pay through credit or debit card

View info about tea View interesting brew legends

Browse tea brew menu

Rate tea and comment View future tea brew suggestions based on current

Receive Order

Buy tea

Enter authorization PIN

YES Add to cart

Share with friends on facebook & twitter

Pay through credit or debit card

View future food pairings based on current tea brew

View info about food item Browse food item menu

View recipe

Rate food item & comment

Rate tea-food pairing & comment

Share with friends on facebook & twitter

Pay through membership

Add recipe to profile

Receive tea caddy from salesperson

Teacup/Tabletop Interactive Flow

View tea brew manufacturing facts

Sitemap Following are the sitemaps for the tabletop application and the store's website.

2.0 Journey the tea trail

1.0 Guided Tea tours

1.1 By user flavor profile 1.2 By Caffeine content 1.3 By tea classes

2.1 Tea menu 2.1.1 White teas

2.1.2 Yellow teas

2.1.3 Green teas

2.1.4 Black teas

3.0 View your tea diary

2.2 Tea food

2.1.5 Oolong Teas

2.1.6 Pureh

2.1.7 Scented teas

2.1.8 Herbal teas

2.2.1 Scones

2.2.2 Cookies & Biscuits

2.2.3 Sandwich es

2.3 Tea services 2.2.4 Cakes and cupcakes

2.2.5 Tarts & pies

2.3.1 English afternoon tea

3.1 Purchase history

2.4 All about tea

2.3.2 Brunch

2.4.1 Tea history

2.4.2 Tea cultures

2.1.1.1 Tea no. 1

2.1.2.1 Tea no. 1

2.1.3.1 Tea no. 1

2.1.4.1 Tea no. 1

2.1.5.1 Tea no. 1

2.1.6.1 Tea no. 1

2.1.7.1 Tea no. 1

2.1.8.1 Tea no. 1

2.2.1.1 Buttermilk scones

2.2.2.1 Chocolate chip cookies

2.2.3.1 Cucumber Sandwich

2.2.4.1 Red velvet cupcakes

2.2.5.1 Kelime pie

2.3.2.1 Eggs Benedict

2.4.2.1 Chinese

2.1.1.2 Tea no. 2

2.1.2.2 Tea no. 2

2.1.3.2 Tea no. 2

2.1.4.2 Tea no. 2

2.1.5.2 Tea no. 2

2.1.6.2 Tea no. 2

2.1.7.2 Tea no. 2

2.1.8.2 Tea no. 2

2.2.1.2 Blueberry scones

2.2.2.2 Sugar cookies

2.2.3.2 Egg Salad sandwich

2.2.4.2 Marble cupcakes

2.2.5.2 Strawberr y tart

2.3.2.2 French toast bread pudding

2.4.2.2 Japanese

2.1.1.n Tea no. n

2.1.2.n Tea no. n

2.1.3.n Tea no. n

2.1.4.n Tea no. n

2.1.5.n Tea no. n

2.1.6.n Tea no. n

2.1.7.n Tea no. n

2.1.8.n Tea no. n

2.2.1.n XXXXX scones

2.2.2.n XXXX cookies

2.2.3.n XXXX sandwich

2.2.4.n XXXX cupcake

2.2.5.n XXXX pie

2.3.2.n XXXXXX

2.4.2.3 Indian

2.4.3 Tea and Health

2.4.2.4 European

Utilities

Social networks

Facebook

Order Cart

Twitter

About Us

3.2 Wish list

Tabletop sitemap

0.0 Welcome screen

1.0 Tea Diary

1.1 Personal Information

1.2 Tea flavor profile

1.3 Purchase history

3.0 Tea Accessories

2.0 Teas

1.4 Wish list

1.5 Recipe box

2.1 White teas

2.2 Green teas

2.3 Yellow teas

2.4 Black teas

2.5 Oolong teas

2.6 Pu-reh

2.7 Scented teas

2.8 Herbal teas

3.1 Teapots

1.1.1 Personal information

Teas

2.1.1 Tea no.1

2.2.1 Tea no.1

2.3.1 Tea no.1

2.4.1 Tea no.1

2.5.1 Tea no.1

2.6.1 Tea no.1

2.7.1 Tea no.1

2.8.1 Tea no.1

3.2 Teacups

1.1.2 Billing information

Food

2.1.2 Tea no. 2

2.2.2 Tea no.2

2.3.2 Tea no.2

2.4.2 Tea no.2

2.5.2 Tea no.2

2.6.2 Tea no.2

2.7.2 Tea no.2

2.8.2 Tea no.2

3.3 Tea caddies

2.1.n Tea no. n

2.2.n Tea no.n

2.3.n Tea no.n

2.4.n Tea no.n

2.5.n Tea no.n

2.6.n Tea no.n

2.7.n Tea no.n

2.8.n Tea no.n

3.4 Tea paraphernelia

1.1.3 Shipping address

Utilities

Social networks

Facebook

Twitter

Order Cart

About Us

Website sitemap

0.0 Homepage

The Interactive Design: the first concept The Interactive Design for this application was challenging for one main reason: It was a multi user driven experience that had to profile each individual`s experiences while still enough providing sharing touch points to keep it social. The way that I started to understand it was by using the metaphor of a navigator; each user would gain access to the system using an ID which would in turn provide each user with a navigator. The Navigator would allow each user to drive their own journey detachable to allow sharing among companions around the table. Following is the concept that I created to understand the functionality. Ultimately it did not work, but it helped me identify the problems. Using the metaphor of â&#x20AC;&#x153;growing trianglesâ&#x20AC;?, the navigator consisted of triangular navigational elements and 4 sided informational elements that would grow out of the navigator. The navigator itself would expand and collapse depending on where in the heirarchy the users were, providing a visual breadcrumb.

Title: Welcome Screen Page 1 of 18

INTERACTIVE TEAHOUSE

Place your ID cards on the table to begin your tea adventures!

Title: Welcome Screen2 Page 2 of 18

INTERACTIVE TEAHOUSE

Place your ID cards on the table to begin your tea adventures!

Title: Home Page 3 of 18

1.0 Primary Navigation Primary navigation buttons fold out from under the ID card. 2.0 Sign in feedback Welcome message appears when the user has signed in to indicate to user to remove the card. 1.0 Guided Tea tours

Journey the tea trails View tea diary

2.0

Welcome, Feryal!

Title: Home 2 Page 4 of 18

1.0 User digital card A digital representation of the card is created to which the navigation is attached. Actual ID card is removed. Also serves as the Home Page.

3.0 Guided Tea tours

1.0

Journey the tea trails View tea diary

Feryal

2.0

2.0 Tap to select A single tap opens up the respective navigation element. Another tap closes it. 3.0 Fold-away navigation elements

Title: Secondary Navigation Page 5 of 18

1.0 Open Menu The most immediate menu that is open, is indicated by a rotation of the label. 2.0 Fold out secondary navigation Secondary navigation elements fold out. Tap an element to open. Food Menu Tea Menu

the y rnetrails u Jo tea

2.0

Feryal

1.0

All about tea Tea Service

3.0

3.0 Fold away unselected navigation Unselected navigation elements fold away.

Title: Tertiary Navigation Page 6 of 18

1.0 Bolded & Italicised breadcrumbs The navigation element immediately above the currently open menu is bolded and italicised to indicate trail. Scented

3.0 Herbal Pu-reh Oolong White Tea

Teanu Me

1.0

Journey the tea trails Feryal

Green Tea Black Tea

Yellow Tea

2.0

2.0 Fold out tertiary elements Tertiary navigation elements fold out. Tap an element to open. NOTE: Information cards about general information about the selected class of tea open when a tertiary element is tapped (refer to next wireframe) 3.0 Unselected Tertiary elements Unselected navigation elements fold away.

Title: Fourth level elements Page 7 of 18

1.0 Bolded & Italicised breadcrumbs The navigation element immediately above the currently open menu is bolded and italicised to indicate trail. 2.0 Bolded breadcrumb The element 2nd up from the current open menu is bolded to indicate trail.

3.0 1.0

Jade Dew Sencha

Journey the tea trails

Sun-dried tea from Xishuangbanna

e e r G

Tea drinker

ea T n

Tea Menu

2.0

Gunpowder

Tai Ping Hou Kui

Green Snail Spring

Ming Mei

Curled Dragon Silver Tip

Dragon Well

GREEN TEA Yellow tea is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

4.0

3.0 Fold out 4th level elements 4th level elements navigation elements fold out. Tap an element to open. 4.0 Information Card General information about the selected tea category. It opens independent of the controller and stays open till the user shuts it.

Title: Fourth level elements 2 Page 8 of 18

Wild-grown Tieguanyin

Journey the tea trails Tea drinker

Assam Kama Black

White Peony

Silver Needle

Yunnan Golden Buds

Darjeeling Castleton Garden

Darjeeling Autumnal Keemun

Yunnan Golden Buds

Ceylon Nuwara Eliya

WHITE TEA Yellow tea is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

BLACK TEA Yellow tea is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

OOLONG (BLUE) TEA Yellow tea is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

SCENTED TEAS Yellow tea is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

PU-REH (BLACK) TEA Yellow tea is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

Tanzania CTC

Tea Menu

Journey the tea trails

Pu -re

Journey the tea trails Tea drinker

Tea Menu

Pu-reh (Green)

Tea drinker Pu-reh (Black)

nte d

Ceylon Dimbula

Royal Red Robe Wu Yu Mountain

Jasmine Dragon Pearls

Sce

Bla

Tea drinker

Journey the tea trails

Tung Ting

ng o l Oo

Journey the tea trails

Formosa Fancy Silvertips

Tea drinker

Wh ite Tea

Tea Menu

Tea

Tea Menu

Earl Grey

Traditional Style Jasmine

Modern Style Jasmine

Lapsong Souchong

Title: Infocard interactions Page 9 of 18

1.0 Hold and slide apart to expand Expanding the information card reveals more information BL AC Yel un low t K TEA u e do won sual a is a de cla es m w ma ith ea have rfully ss of ost de fre tea rly m bu from spri uch i sh th , n d n a the s or a eithe g gre com t n ma r ve en t mo me pro n r e tho ces o fen y ear as. I the ds a sed g pl ly s t is po s gr by t uck prin int e g h of en te e sa and init m ial a, up e t firi ng o .

1.0 YELLOW TEA

Tea Menu

Tea drinker

Tea low Yel

Journey the tea trails

Mengding Mountain Snow Buds

3.0

Yellow tea is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

2.0

2.0 Hold and rotate Rotate the info card to view from desired orientation. 3.0 Expand 4th level elements Tap an element to expand.

Title: Tea elements Page 10 of 18

1.0 Expanded selection The tapped tea opens as a separate element, with appropriate calls to actions folding out. Click close button to shut the element. YELLOW TEA

Tea Menu

Journey the tea trails Tea drinker

Yellow Tea g din ng tain Me un Mo now S ds Bu

1.0

Mengding Mountain Snow Buds

Once one of the Imperial Tribute teas, the garden that grows the Mengding Mountain Snow buds is located just northwest of Mount Emei, one of four sacred mountains on Chinese Buddhism. The tea is plucked as a budset in the garden in small fabric bags rather than in baskets.

View User Comments

4.0

$2.75

Add to wishlist

2.0 Add to order button Add to order triangle fold out. Tap to add to order. 3.0 Add to wishlist button Add to wishlist triangle folds out. Tap to add to order. 4.0 View User comments Tap to view what other people have commented about the tea.

2.0 Add to order

3.0

Title: Home 3 Page 15 of 18

Guided Tea tours

Journey the tea trails Feryal Wishlist 1 item

View tea diary

Title: Tea diary Page 16 of 18

1.0 Secondary Nav folds out

1.0

Feryal Wishlist 1 item

w Viediary tea

Wish List

1.0 Purchase history

Title: Purchase history Page 17 of 18

1.0 Organization by rating Purchased teas and food items are organized by your personal rating. 2.0 Tap to view purchase Tap an element once to open up the purcgase order.

Wish List

Feryal

1.0

Wishlist 1 item

ase rch y Pu istor h

View tea diary

Cumin Carrot Sandwich

FOOD

Chocolate Pumpkin Cupcakes

2.0

Lemon Poppy Seed Scones

FOOD

TEAS

Assam Kama Black

3.0 Swipe to view more items Swipe along each row, left or right to view more items.

Red Velvet cupcakes

Walton Stilton Scones

Banana Walnut cupcakes

Yunnan Gyokuro Golden Formosa Buds Fancy Royal Red Silvertips Robe Tanzania CTC

Keemun Black Tung Ting Oolong

Pu-reh Green

Ke e Bla mu ck n

3.0 Earl Grey

4.0 Lapsong

Souchang

4.0 Swipe to view more rows Swipe up or down to bring up more rows of tea and food. 5.0 Suggest to a friend Hold and drag off of the navigator and drop into a friendsâ&#x20AC;&#x2122; wishlist.

Title: Purchase history 2 Page 18 of 18

Yellow Tea

Jane

Journey the tea trails

Black Tea

Green Tea

Teanu Me White Tea

Wish List

Oolong View tea diary

Pu-reh

Purchase history

Wishlist 1 item

Cumin Carrot Sandwich Chocolate Pumpkin Cupcakes

Lemon Poppy Seed Scones

FOOD

2.0 Date of purchase: February 20, 2011, Monday.

â&#x20AC;&#x153;Loved it! Definitely going on the regular rostrum!â&#x20AC;?

TEAS

$2.75 Food pairing: Herbed goat cheese sandwich ( )

Add to Order

4.0

3.0

sam As ma K a ck Bla

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Red Velvet cupcakes

Walton Stilton Scones

Banana Walnut cupcakes

Keemun Black

Tung Ting Oolong

Tanzania CTC Pu-reh Green

Ke e Bla mu ck n

2.0 User rating and comments The purchase slip lists the date of purchase and your rating and 3.0 Swipe to view food item bought on the same purchase slip Swipe to view the food item purchase with tea (if any). the label also displays the user rating for teh food item. 4.0 Add to Order Click on the tab to add to order cart

Yunnan Gyokuro Golden Formosa Buds Fancy Royal Red Silvertips Robe

TEAS

Assam Kama Black

Scented

FOOD

1.0

Herbal

Feryal

1.0 Purchase detail Clicking on an item in the purchase history opens up the purchase details card.

Earl Grey

Lapsong Souchang

5.0 Suggest to a friend Drag a suggestion onto a friends ID triangle. It automatically adds it to their wishlist and updates their wishlist tab on the navigator.

Title: Add to order Page 14 of 18

1.0 Added to order The add to order button gets highlighted and changes to â&#x20AC;&#x153;orderedâ&#x20AC;?.

YELLOW TEA

Tea Menu

2.0

Journey the tea trails Order Cart $2.75

Tea drinker

Yellow Tea g din ng tain Me un MoSnow ds Bu

Ordered

1.0

3.0

Mengding Mountain Snow Buds

View User Comments

Add to wishlist

2.0 Order cart folds out Order cart folds out of the main controller, reflecting current total. Remains open as long as there are items waiting to be checked out. Click to view order cart. 3.0 Close tea element Click close to shut tea element.

Title: View user comments Page 11 of 18

1.0 Comment card View user comments panel expands ro show user comments.

YELLOW TEA

Tea Menu

Journey the tea trails Tea drinker

3.0

Mengding Mountain Snow Buds

View User Comments

2.0

Add to wishlist

“Absolutely lovely, especially in the afternoon. Great pick me up!” – Sarah Walker

1.0

g din ng tain Me un MoSnow ds Bu

Add to Order

Yellow Tea

2.0 Swipe to view comments Swipe left or right to view additional comments. 3.0 Tap to close/tap another element. Tap the element again to close or click on another element to close comment card.

Title: Add to wishlist Page 12 of 18

1.0 Added to wishlist The add to wishlist button gets highlighted and changes to â&#x20AC;&#x153;Added to wishlist. YELLOW TEA

Tea Menu

2.0

Journey the tea trails Tea drinker

Yellow Tea

Add to Order

g din ng tain Me un MoSnow ds Bu

Wishlist 1 item

3.0

Mengding Mountain Snow Buds

Added to wishlist

View User Comments

1.0

2.0 Wishlist tab folds out Wishlist tab folds out of the main controller, reflecting current number of items in the wishlist. It folds out every time a user signs in, if there is atleast 1 item in the wishlist. Click to view wishlist. Wishlist tab folds away to open the wishlist. 3.0 Close tea element Click close to tea element.

Title: View wishlist Page 13 of 18

1.0 Click and order wishlist item. Click to expand tea element and order as per usual.

Add to order

s Wi

Tea drinker

ist l h

1.0 View tea diary

Mengding Mountain Snow Buds

Mengding Mountain Snowbuds

View User Comments

$2.75

Add to wishlist

Title: Home 4 Page 6 of 12

Guided Tea tours

Journey the tea trails Order Cart $4.00

Feryal

Wishlist 1 item

View tea diary

Title: Guided tea tours Page 1 of 12

1.0 By Caffeine content Click to filter teas by caffeine content. Reveals a list of teas by order of caffeine from highest to lowest. 2.0 By Tea classes Click to filter teas by class. Reveals the list of tea classes with descriptors.

Feryal

ed rs d i Gua tou Te

By caffeine content

1.0

By Tea classes

2.0

By user taste profile

3.0

3.0 By user taste profile Click to filter teas by user profile. Opens a questionnaire that determines user tastes.

Title: Tour question 1 Page 2 of 12

1.0 Question 2.0 Answers Tap to select answers. Multiple answers are acceptable. 3.0 Next Click to move on to the next question. 1.0

Feryal

By tas user pro te file

Guided Tea tours

2.0

Pu-reh

1 of 4

What kind of teas have you tried before?

Oolong Scented

Green Tea

3.0

White Tea

Black Tea

Yellow Tea

None

Title: Tour question 2 Page 3 of 12

1.0 Question 2.0 Answers Tap to select answers. Multiple answers are acceptable. 3.0 Next Click to move on to the next question. 1.0

Feryal

By tas user pro te file

Guided Tea tours

2.0

Vegetal Nutty

Smooth

Spicy

Mineral

2 of 4

Kelpy

What kind of flavours do you enjoy?

Bold Crisp

3.0

Grassy Herbaceous

Malty

Lingering finish Sweet

Short finished

Floral

Aromatic Piney

Title: Tour results Page 4 of 12

1.0 Results Click to open details of suggested tea elements.

Feryal

By tas user pro te file

Guided Tea tours

1.0

Try our

Earl Grey Puerh Black

Ceylon Dimbula

Keemun Black

Title: Open results Page 5 of 12

1.0 Ordered Click “Add to order” buttons to add to order. Order flap opens on navigator, “Add to order” button changes to “Ordered” to provide feedback.

1.0

2.0 Order Cart

UN KEEM

ast eakf tiful r b d h n re nglis nger ple h for Orde E l a r g in thei no lo nou orig The emen is ensive e to base ea is ps Ke is t xp tea, h or ine t teasho or of th a real av es e is ug eno t the fin cused fl ftertast a fo bu any on. The ingering ds el blen , and th rb supe t. trea

$4.0

to Add st li wish

Add to orde r

View Com User men ts

Guided Tea tours Order Cart $4.00

Feryal

By user taste profile

Add to w ed ishlis t

3.0

Try our

4.0

$3.2

Earl Grey Puerh Black

Ceylon Dimbula

Ke e m un B l a ck

Wishlist 1 item

GRE

Y Earl G rey is add prov ition of n one the c ides the c atural oil lassics. T h itrus o y sna f bergam e p an d aro ot ma.

User View ments Com

2.0

EARL

3.0 Added to wishlist Click “Add to wishlist” tab to add to wishlist. Label changes to “Added to wishlist” to provide feedback. Wishlist tab opens on navigator reflecting number of items in wishlist. 4.0 View Wishlist Click to view wishlist.

Title: Order cart Page 7 of 12

1.0 Order Cart Click order cart to view order details 2.0 Checkout Click to begin checkout process.

Guided Tea tours

1.0 1 Keemun

$4.00

Checkout

Total: $4.00

r de Or rt Ca

2.0

Journey the tea trails Feryal Wishlist 1 item

View tea diary

Title: Checkout Page 8 of 12

1.0 Pay for yourself Click tab to pay only for your own order. 2.0 Pay for a friend Click to pay for yourself and a friend. 3.0 Pay for the table. Click to pay the total for the entire table.

Pay for yourself

Pay for yourself & a friend

$4.00

Total: $4.00

Guided Tea tours

Journey the tea trails

Pay for the table r de Or rt Ca

1 Keemun

3.0

2.0

1.0

Feryal Wishlist 1 item

View tea diary

NOTE: Clicking any of the tabs brings up the payment method.

Title: Pay for yourself Page 9 of 12

1.0 4-number PIN Touch to highlight field and bring up keyboard. Hidden characters for 4 number pin. 2.0 Enter PIN Click to submit payment 3.0

Journey the tea trails

Pay for yourself

$4.00

1.0

Total: $4.00

Enter Pin

2.0

ENTER

r de Or rt Ca

1 Keemun

Guided Tea tours

Feryal Wishlist 1 item

View tea diary

3.0 Highlighted paying option. Selected paying option is highlighted.

Title: Pay for a friend Page 10 of 12

1.0 Select User Select the user tab you wish to pay for. Adds their total to your own and brings up the next step.

Guided Tea tours

Journey the tea trails

Pay for a friend

$4.00

Total: $4.00 Jane $5.00

1.0

Eric $2.50

Jerry $3.00

r de Or rt Ca

1 Keemun

Feryal Wishlist 1 item

View tea diary

Title: Pay for a friend 2 Page 11 of 12

1.0 Select User Removing the user will , deduct their total from your own and cause the system to move back one step to select a different user. 1.0

Guided Tea tours Remove Jane

$4.00 $5.00 Total: $9.00

**** Enter Pin

ENTER

r de Or rt Ca

1 Keemun Jane

Journey the tea trails

Pay for a friend

Feryal Wishlist 1 item

View tea diary

Title: Pay for a table Page 12 of 12

Guided Tea tours

Journey the tea trails

Pay for the table

$4.00 $5.00 $2.50 $3.00 Total: $14.50

**** Enter Pin

ENTER

r de Or rt Ca

1 Keemun Jane Eric Jerry

Feryal Wishlist 1 item

View tea diary

Your order has been sent and will be arriving shortly!

Guided Tea tours

Journey the tea trails

Feryal Wishlist 1 item

View tea diary

The Interactive Design: final table wireframes Ultimately the triangular navigator was too complicated, with not enough elements that could be shared or moved around. Instead of an expansive experience, users exposed to the concept were confused and felt restricted by the geometry. The problem of being the interactive and interface designer meant that sometimes the lines between the two disciplines would blur. So I canned the concept, and started from scratch, concentrating on just making the functionality expansive, fun and intuitive. The final wireframes got rid of a presupposed visual metaphor and sought to lay down the functionality without having any influence of a presupposed visual aesthetic. The final designs separated the navigational elements from the content, allow easy content sharing and movement among multiple users on the touch surface. Private information remained housed within the stripped down navigator.

Title: Start

1.0 Begin your journey Place your temporary or member ID card on the table to sign in and begin your adventures.

Page 1

1.0

Place Card Here

Title: Signing in

1. 0 Signing in feedback

Page 2

User ID Card

1.0 Signing in...

Title: Welcome

1.0 Profile picture Member profile picture (if customer has signed up on the website)

Page 3

2.0 Custom welcome message 3.0 Tea diary summary A list of the number of teas tried, and the number of items on the userâ&#x20AC;&#x2122;s wish list. 4.0 User tips Tips to help people navigate about the system ( Myriad 16 pts) 1.0 4.0 2.0 Please remove card

User ID Card

Welcome, Feryal Khawar! Teas tried: 15 Wish list: 5

3.0

1.0 Guided tours Targetted towards casual or new tea drinkers who are looking for a little help to choose a brew.

Title: Primary Navigation Page 5

2.0 Journey the tea trails Targetted towards returning users, or tea connoisieurs who wish to explore the system themselves.

Sign out

Wishlist 5

Home

3.0 View tea diary View purchase history and wishlist to see your growing profile of teas. 1.0

Take a guided tea tour

2.0

Journey the tea trails

3.0

View Tea Diary

4.0

4.0 Primary Navigation Click and drag to expand each element.

1.0 By caffeine content Filters available teas and ranks them on the basis of caffeine content.

Title: Secondary Navigation Page 6

2.0 By Tea classes Educates the user on different classes of tea and allows them to order based on the class properties. 3.0 By user taste profile Determines users flavor and tea profile to help suggest teas the user might like.

Sign out

Wishlist 5

Home

Take a guided tea tour

Journey the tea trails

By caffeine content

1.0

By tea classes

2.0

By user taste profile

3.0

View Tea Diary

1.0 Profile question Swipe to view the next one.

Title: Taste tour Q1 Page 7

Error handling: If no answer is selected do not allow the user to swipe through to the next question. 2.0 Multiple answers Tap the elements which are pertinent to select.

Sign out

Wishlist 5

Home

Take a guided tea tour

Journey the tea trails

View Tea Diary

By caffeine content

By tea classes

1 of 4

What kind of teas have you tried before?

By user taste profile Black Tea

Green Tea

White Tea

Yellow Tea

Oolong Tea

Pu-reh Tea

Scented

None

Title: Taste tour Q2 Page 8

Sign out

Wishlist 5

Home

Take a guided tea tour

Lingering Finish

By user taste profile

Short finished

Piney

Aromatic

Vegetal

Malty

Herbaceous

Crisp

Sweet

Floral

Grassy

2 of 4

What kind of flavors do you enjoy?

Nutty

Spicy

Bold

Smooth

Mineral

1.0 Feedback that the tour is done

Title: Results Page 9

2.0 Return to Home view Controller collapses to primary navigation.

Sign out

3.0 4.0

Wishlist 5

Keemun

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton “The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

Home 7.0 5.0

3.0 Standard opening format The tea elements open in this view, tea title, tea picture, tea price, user comments & ratings & the main calls to actions to order or to add to wishlist.

2.0

Take a guided tea tour

Journey the tea trails

View Tea Diary

Try our suggested blends! Enjoy!

4.0 User comments and ratings Read user comments and view their ratings. Swipe down to see more content.

1.0

$2.54 Order now

5.0 Tea Image Swipe left-right to expand or collapse more information about the tea. Scroll up and down to view more information that is open.

6.0

Tap, hold and drag to home to add to wishlist Swipe over image to view information!

Tanzania CTC Fully oxidised black tea, with a rich malty flavor from Tanzania, Africa. Tanzania CTC boasts a nutty, biscuity aroma and tastes great with, milk sweeterner or lemon.

“Wonderfully smooth, but definitely an acquired taste.” – Jesse Milton “A wonderful black tea, refreshingly different” – Jane Addler

$2.75 Order now Tap, hold and drag to home to add to wishlist Swipe over image to view information!

Darjeeling Fully oxidised black tea, with a rich malty flavor from Tanzania, Africa. Tanzania CTC boasts a nutty, biscuity aroma and tastes great with, milk sweeterner or lemon.

“Wonderfully smooth, but definitely an acquired taste.” – Jesse Milton “A wonderful black tea, refreshingly different” – Jane Addler

6.0 User navigational tips Only for the first few visits to educate the user on how to navigate through the system.

$2.75 Order now Tap, hold and drag to home to add to wishlist Swipe over image to view information!

7.0 Close tea element. Shut the tea elements by tapping close.

Title: Ordered and wishlisted Page 10

“Wond e definit rfully smoot ely an h acquir , but ed ta – Jesse ste.” Milton “A wo nd refresh erful black te ingly d ifferen a, t” – Jane Addle r

Darjee

ling

Order

$2.45 now

Darjee li added ng has been t wishli o your st!

n u m Kee

6.0 Wishlist 6

ing

go itely

defin s ’ t I ilton d it! lar!” e m v a o “L a regu da H n i L e – to b tea s i h t r of ering o v a l d f he ling e s u foc d t “The erb, an l treat!” Sarah p a – is su ste, a re ta after

Sign out

$2.5 ow

er n Ord

Take a guided tea tour

Home Order $2.75

Journey the tea trails

View Tea Diary

2.0

Tanzania CTC Fully oxidised black tea, with a rich malty flavor from Tanzania, Africa. Tanzania CTC boasts a nutty, biscuity aroma and tastes great with, milk sweeterner or lemon.

“Wonderfully smooth, but definitely an acquired taste.” – Jesse Milton “A wonderful black tea, refreshingly different” – Jane Addler

$2.75 Ordered

ee t Ch G oa bed Her wish d San

e Pi

4.0 3.0

3.0 Food pairing suggestions Once tea is ordered, the user is encouraged to order something to eat by being offered interesting food pairings (suggestion thumbnails only appear when tea is ordered). 4.0 Food pairings Thumbnails of food suggestions. Tap and hold and slide off to wherever you want on the screen. 5.0 Added to wishlist “Added to wishlist” to provide feedback.

e ac Pe

Buttermilk Scones

Try something to eat with your Tanzania CTC!

5.0

2.0 Update order cart The order cart tab appears once an item has been added and remains there till items are checked out. It changes to reflect the total as items are added or subtracted.

1.0

Tanzania CTC has been added to your order cart!

3.0

Fully o x malty idised black fla te Tanza vor from T a, with a ric nia CT a h C boas nzania, Afri ity aro ca. ts m sweete a and tastes a nutty, bisc ugr rner or lemon eat with, mil . k

1.0 Add to Order cart Click “Order now” button to add item to order cart. The button gets bold and label changes to “Ordered”

Title: Food pairings

1.0 Add to Order cart Once thumbnails are separated they expand into a standard open view consisting of the title, the picture, the price, the user comments, and the order button.

Page 11

Swipe on each element to open up information about the item.

Sign out

Wishlist 6

Take a guided tea tour

Home Order $5.75

Journey the tea trails

View Tea Diary

Tanzania CTC Fully oxidised black tea, with a rich malty flavor from Tanzania, Africa. Tanzania CTC boasts a nutty, biscuity aroma and tastes great with, milk sweeterner or lemon.

“Wonderfully smooth, but definitely an acquired taste.” – Jesse Milton “A wonderful black tea, refreshingly different” – Jane Addler

$2.75 Ordered Tanzania CTC has been added to your order cart!

1.0 Herbed Goat Cheese Sandwish

$4.50 Order now

Delicious, soft scones that melt on the mouth, served with our signature strawberry jam and clotted cream!

“Absolutely decadent!” – Chloe Sandler

“Absolutely decadent!” – Chloe Sandler “Definitely worth the diet afterwards!” – Sarah

Buttermilk Scones

Peace Pie

“Definitely worth the diet afterwards!” – Sarah

$3.10 Order now

The richness of the scones goes especially well with black teas.

“Definitely worth the diet afterwards!” – Sarah

$3.00 Ordered

Title: Journey the Tea Trail

1.0 Tea Menu List of Teas available.

Page 12

2.0 Food Menu List of Food items available 3.0 Tea Services List of tea services available: Afternoon tea, & Brunch.

Sign out

Wishlist 5

Home

Take a guided tea tour

Journey the tea trails

View Tea Diary

Tea Menu

1.0

Food Menu

2.0

Tea services

3.0

All about tea

4.0

4.0 All about tea Information about various aspects of tea.

Title: Viewing the tea menu Page 13

Sign out

Wishlist 5

Home

Take a guided tea tour

Journey the tea trails

View Tea Diary

Tea Menu

White Tea

Food Menu

Tea services

All about tea

Yellow Tea

Green Tea

Black Tea

Oolong Tea

Pu-reh Tea

Scented Tea

Herbal Tea

Title: Opening Teas Page 14

1.0 Swipe to open teas Swipe over tea class elements to open teas and information about the class.

Assam Kama n u Darje Keem eling a i n

za n Ta

2.0 Scroll through information Information about the tea class. Swipe up and down to view more information.

4.0 Sign out

Wishlist 5

Home

Take a guided tea tour

Journey the tea trails

BLACK TEA is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

View Tea Diary

3.0 Tea products group Stack of teas thumbnails; Close group or tap and drag each thumbnail off to reveal expanded tea element.

1.0 Tea Menu

Food Menu

White Tea

Yellow Tea

WHITE TEA is a most unusual class of tea, wonderfully fresh that does have much in common with early spring green teas. It is made from either very early spring buds or a mao feng pluck and then processed by the same methods as green tea, upto the point of initial firing.

Green Tea

2.0

All about tea

Bai

Oolong Tea

Pu-reh Tea

Scented Tea

Herbal Tea

NOTE: Minimum 2 teas are required to maintain the group. Stack teas back into a group by tapping tea elements and dragging them one over the other.

Tea services

Silver Needle n a d u M

Black Tea

3.0

4.0 Open multiple tea classes Swipe over multiple tea classes top open up product stacks and info cards.

Title: Tea element gestures Page 15

Darjeeling

Tanzania

Fully oxidised black tea, with a rich malty flavor from Tanzania, Africa. Tanzania CTC boasts a nutty, biscuity aroma and tastes great with, milk sweeterner or lemon.

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton

Keemu

“The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

3.0

Assam Kama

2.0 “Loved it! It’s definitely going to be a regular!” – Linda Hamilton

4.0

$2.54

Fully oxidised black tea, with a rich malty flavor from Tanzania, Africa. Tanzania CTC boasts a nutty, biscuity aroma and tastes great with, milk sweeterner or lemon.

Order now

“The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

$2.54 Order now Tap, hold and drag to home to add to wishlist

Tap, hold and drag to home to add to wishlist

Swipe over image to view information!

Home

Take a guided tea tour

Journey the tea trails

View Tea Diary

Tea Menu

White Tea

Food Menu

Yellow Tea

Black Tea

Green Tea

Oolong Tea

Pu-reh Tea

Scented Tea

1.0

Silver Needle

Bai Mudan All about tea

Herbal Tea

Tea services

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton “The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

$2.54 Order now Tap, hold and drag to home to add to wishlist Swipe over image to view information!

2.0 Tea info Swipe over tea thumbnail to pull out tea information. 3.0 Tea group Minimum of two teas are required to maintain group.

Sign out

Wishlist 5

1.0 Expanded tea elements Once separated tea thumbnails expand to show user comments, price, and order button.

“The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

$2.54 Order now Tap, hold and drag to home to add to wishlist Swipe over image to view information!

4.0 Compare teas Tap, hold and drag two teas together till they snap to open up a comparison.

Darjeeling

n u m e Ke

1.0 Selected Tea element Tapping and holding a tea element reduces it to a basic thumbnail view.

Assam Kama

ia n za

Tan

1.0

Sign out

Wishlist 5

Home

Take a guided tea tour

Journey the tea trails

View Tea Diary

Tea Menu

White Tea

Food Menu

Yellow Tea

Green Tea

Black Tea

Oolong Tea

Pu-reh Tea

Scented Tea

Herbal Tea

Tea services

Silver Needle Bai Mudan

All about tea

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton “The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

Title: Tea comparison Page 16

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton

$2.54

“The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

Order now Tap, hold and drag to home to add to wishlist Swipe over image to view information!

$2.54 Order now Tap, hold and drag to home to add to wishlist Swipe over image to view information!

1.0 Tea comparison Teas snap together to show a compare and contrast view.

Click on each card simultaneously, hold, and separate.

n u m e Ke nia

za n Ta

Darjeeling

Assam Kama

BLACK TEA

Region: Fujian Province, China Manufacture: Air dried white tea Style: Open leaf, usually blended with budsets Flavor: Smooth, sweet, soft Aroma: Clean, floral Liquor: Rich straw

Region: Tanzania, Africa Manufacture: Fully oxidized black tea. Style: Granular, neat Flavor: Full, rich, malty Aroma: Nutty, biscuity Liquor: Burnt umber tinged with orange

1.0

Tap, hold and slide apart to separate the tea elements.

Sign out

Wishlist 5

Home

Take a guided tea tour

Journey the tea trails

View Tea Diary

Tea Menu

White Tea

Food Menu

Yellow Tea

Green Tea

Black Tea

Oolong Tea

Pu-reh Tea

Scented Tea

Herbal Tea

Tea services

Silver Needle Bai Mudan

All about tea

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton “The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

Title: Tea comparison Page 17

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton

$2.54

“The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

Order now Tap, hold and drag to home to add to wishlist Swipe over image to view information!

$2.54 Order now Tap, hold and drag to home to add to wishlist Swipe over image to view information!

Title: Order Cart Page 18

Sign out

Wishlist 6

Home

Order $5.75

1 Tanzania CTC $2.74 1 Buttermilk Scones $3.00

Pay for yourself Pay for a friend

Total: $5.75 Pay for the table

Title: Pay for yourself Page 19

Sign out

Wishlist 6

Home

Order $5.75

Pay for yourself

1 Tanzania CTC $2.74 1 Buttermilk Scones $3.00 Total: $5.75

CHECK OUT

Title: Pay for a friend Page 20

Sign out

Wishlist 6

Home

Jane Ethan

Order $5.75

Pay for a friend

1 Tanzania CTC $2.74 1 Buttermilk Scones $3.00

Lisa

$3.5

Total: $5.75

$4.50 CHECK OUT

$5.50

Title: Pay for a friend 2 Page 21

Sign out

Wishlist 6

Home

Ethan Order $9.25

Pay for a friend

Lisa

1 Tanzania CTC $2.75 1 Buttermilk Scones $3.00 Jane $3.50 Total: $9.25

$4.50 CHECK OUT

$5.50

Title: Pay for the table Page 22

Sign out

Wishlist 6

Home

Order $19.25

Pay for the table

Me Jane Ethan Lisa

$5.75 $3.50 $4.50 $5.50 Total: $19.25 CHECK OUT

Title: Charge credit card Page 23

Sign out

Wishlist 6

Home

Order $19.25

Pay for the table

Me Jane Ethan Lisa

$5.75 $3.50 $4.50 $5.50 Total: $19.25

ENTER MEMBER PIN

**** ENTER

Title: Order sent Page 24

Sign out Your order has been sent and will be arriving shortly! Explore more about tea while you wait!

Wishlist 6

Home

Take a guided tea tour

Journey the tea trails

View Tea Diary

Title: View tea diary Page 25

Sign out

Wishlist 6

Home

Take a guided tea tour

Journey the tea trails

View Tea Diary

View Wishlist

View Purchase History

Title: Wishlist Page 26

Sign out

View Tea Diary

View Wishlist

Tanzania CTC

eT ea

Kee

-re u P

ey gr

eni Mudan e r a hG B

Journey the tea trails

Home

Take a guided tea tour

View Purchase History

Wishlist 6

Title: Purchase history

1.0 Stack of teas purchased Group of teas purchased, based on filter settings. (The default group is determined by default filter settings-refer below) .

Page 27

2.0 Sign out

3.0

TEAS

6.0

rN Silve

White Peony

DEC WEEK 4

NOV

OCT

SEP

AUG WEEK 3

JUL

JUN

MAY WEEK 2

APR

MAR

FEB

JAN

View Purchase History

2.0 Viewed tea filter. The tea filter settings determined which of the purchased teas are seen. Teas are filtered by: Rating (Default: 5 stars) Tea class (Default: most purchased class is selected) Month(Default: current) Week (Default: based on current date) 3.0 View Teas purchased Select/unselect box to show or unshow purchased teas.

FOOD

1.0 eedle

TARTS & PIES

CUPCAKES & CAKES

COOKIES & BISCUITS

View Wishlist

SANDWICHES

View Tea Diary

WEEK 1

NOV

HERBAL TEA

SCENTED TEA OCT

SEP

Journey the tea trails

DEC WEEK 4

WEEK 3

AUG

PU-REH

OOLONG JUL

JUN

MAY

BLACK TEA

GREEN TEA WEEK 2

APR

MAR

FEB

WEEK 1

JAN

WHITE TEA

YELLOW TEA

Home

Take a guided tea tour

SCONES

Wishlist 6

5.0

Close group or separate teas out to view each element.

4.0 ones c S k l Pumpkin Scones rmi Butte

4.0 Stack of food items purchased Group of food items purchased based on filter settings. 5.0 Viewed food filter 6.0 View Food items purchased

1.0 Contextual brew information 2.0 About your brew Swipe element to view information about your brew of tea. 3.0 Brew legends Swipe element to view legends and fun facts about your brew of tea. Wishlist 5

Journey the tea trails

Take a guided tea tour

Home

If you like the Tanzania CTC, try these in the future.

6.0 Add a comment about the tea Add a comment about your brew of tea (it will be visible to you and others that log into the system)

el w on

ag Dr

1.0

4.0 Manufacturing info Swipe to view information about how your tea is made. 5.0 Rate your cup of tea Tap over the stars to rate your tea.

9.0 ko Gyo ea aT h nc

View Tea Diary

2.0 5.0

Rate your tea

About your brew

6.0 Post

7.0 8.0

Tanzania CTC

Brew legends

Share with your friends. Tweet about your tea adventures.

3.0

4.0 How itâ&#x20AC;&#x2122;s made?

7.0 Share on Facebook Share your tea experiences on facebook. 8.0 Share on Twitter Share your tea experiences on twitter. 9.0 Suggested tea thumbnails View teas similar to your current brew for the future.

Wishlist 5

Take a guided tea tour

(Feryal) Home

Journey the tea trails

“Lov ed it! It to be a regu ’s definite ly go lar!” ing – Lin da Ha milto n “The focus ed fla is su vor o p f this aftert erb, and te aste, a real the linger a ing treat! ” – Sar

a ench

g goin itely n i f e d ton ! It’s ” amil ed it r! “Lov a regula Linda H – to be a is te of th ring r o v e ng fla e li sed focu and th t!” e h a T , rah “ b re – Sa eal t uper is s aste, a r t after

onwe

r now

$2.54

About your brew

wishli

$2.5 ow

er n

Ord

Post

$2.5 er Ord

Tanzania CTC

Brew legends

Share with your friends.

now hlist

is to w Add

Rate your tea

hlist

is to w Add

koru Gyo g goin itely n i f de on ! It’s milt ed it ular!” v o a Ha d “L a reg n i –L to be s tea f thi or o ngering v a l f li used d the ” n e foc “Th perb, a al treat! – Sarah e u r s a s , i taste after

Drag

Orde Add to

View Tea Diary

Tweet about your tea adventures.

How it’s made?

1.0 Comparison card When two tea cups(or more) are placed on the table, a comparison card appears that lists the attributes of all the brews in a comparitive way.

our ith y re w Sha s. d frien ur t yo bou es. et a r Twe dventu a tea Post

2.0 Separate teas Tap, hold and pull apart (two flaps at a time) to separate the tea elements.

Rate

te Whi r you

tea

itâ&#x20AC;&#x2122;s How ? e mad

ny Peo

Brew ds n lege

Wishlist 5

o ut y Abo brew

(Feryal) Home

nc h a Te a

Take a guided tea tour

ok Gy

Dra g o n we ll

Click on each card simultaneously, hold, and separate.

Journey the tea trails

1.0

White Peony

Tanzania CTC

WHITE TEA

BLACK TEA

Region: Fujian Province, China Manufacture: Air dried white tea Style: Open leaf, usually blended with budsets Flavor: Smooth, sweet, soft Aroma: Clean, floral Liquor: Rich straw

Region: Tanzania, Africa Manufacture: Fully oxidized black tea. Style: Granular, neat Flavor: Full, rich, malty Aroma: Nutty, biscuity Liquor: Burnt umber tinged with orange

View Tea Diary

2.0

oru k o Gy a e aT h nc

Dr ag

on we ll

(Alice ) Hom e

2.0 ur

o About y brew r tea Rate you

Post ith your Share w friends. ur bout yo Tweet a ures. nt tea adve

C Tanzania

Brew legends

How itâ&#x20AC;&#x2122;s made?

Wish list 5

Take guid a tea ed t o u r

Jour n the t ey e trails a

View Tea Diar y

our ith y re w Sha s. d frien ur t yo bou es. et a r Twe dventu a tea Post Rate

te Whi r you

tea

it’s How ? e mad

ny Peo

Brew ds n lege

Wishlist 5

o ut y Abo brew

h a Te a

(Feryal) Home

Take a guided tea tour

View Tea Diary

ok Gy

White Peony

go n w ell

Dra

Tanzania CTC “Loved it! It’s definitely going to be a regular!” – Linda Hamilton

“Loved it! It’s definitely going to be a regular!” – Linda Hamilton “The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

Journey the tea trails

$2.54 Order now Add to wishlist

“The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

$2.54 Order now

oru k o Gy a e aT h nc

Add to wishlist

Dr ag

on we ll

(Alice ) Hom e

our About y brew r tea Rate you

C Tanzania

Post r

ith you Share w friends.

ur bout yo Tweet a ures. nt tea adve

Brew legends

How it’s made?

Wish list 5

Take guid a ed te a t o ur

Jour n the t ey e trails a

View Tea Diar y

1.0 Select a tea Tap, and hold a tea to drag to someone elses wishlist (drop over friend’s home). Once a tea is selected all other information shuts off.

our ith y re w Sha s. d frien ur t yo bou es. et a r Twe dventu a tea

2.0 Tea suggestion When a tea is dropped over someone’s home, it gets highlighted, wishlist number is updated and user gets a feedback.

Post Rate

te Whi r you

tea

it’s How ? e mad

ny Peo

Brew ds n lege

Wishlist 5

o ut y Abo brew

ch a

(Feryal) Home

Te a

Take a guided tea tour

Journey the tea trails

View Tea Diary

ok Gy

go n w ell

Dra

White Peony “Loved it! It’s definitely going to be a regular!” – Linda Hamilton

2.0

“The focused flavor of this tea is superb, and the lingering aftertaste, a real treat!” – Sarah

$2.54 Order now

ru oko y G a Te a h nc

Take guid a ed te a t o ur

Add to wishlist

Dr ag

on we ll

( A l i c e ) Hom e

Tanzania CTC

our About y brew

Wish list 6

1.0

r tea

Rate you

C T C a i n a Tanz

Post r

ith you Share w friends.

ur bout yo Tweet a ures. nt tea adve

Brew legends

How it’s made?

gges

Fe r y a l has s u

d a te a to

you!

Jour n the t ey e trails a

View Tea Diar y

1.0

2.0

3.0

4.0

1.0

2.0

3.0

4.0

1.0 1.0

2.0 2.0

3.0 3.0

4.0 4.0

1.0

1.0 About your food order Swipe element to view information about your food order.

1.0

2.0

3.0

4.0

2.0 View the recipe Swipe element to open up the recipe. Swipe up and down to view the rest.

Wishlist 5

(Feryal) Home

4.0

Take a guided tea tour

Journey the tea trails

3.0 Add to recipe box Tap to add recipe to your online profile.

View Tea Diary

4.0

4.0 Rate your food order Tap over the stars to rate your tea, tap the text box to add a comment.

r d orde

our foo Rate y

Post

oo e tea-f Rate th

your About order

min min ime: 15 Prep T Prep Time: 0 e v i t c a in In m ime: 0 Cook T

2.0

ou with y e r a h S . friends

our bout y a t e e Tw es. ventur tea ad

3.0 S

3.0 Rate

0 Level: b recipe Add to

ature temper ature r m e o p o s r t m t n ie room te ontrachet, a Ingred ad: cheese, as M pre For the S low-fat cream cheese, such s) es at 8 ounc nces mild go arlic (2 clove g u es d o v e a 2 c / le 1 in e 10 oons m d fresh thym p s a te 1 1/2 mince fresh parsley spoon 1/2 tea oons minced k -fat mil sp 3 table lespoons low b lt a ta s epper 6 5 to kosher black p spoon shly ground a te 4 / 3 fre spoon 1/2 tea and k, salt, ced inly sli ons mil es: o h th p ic s , w d le d a n b e a r y, 5 ta For the S se 7-grain b npeeled , parsle u en , thyme t. Beat on c 1 loaf d se cucumber, li r a g u eese, hmen e spread is 1 hotho goat ch le attac cheese, ith the padd n of milk if th m a e r ec dw oo s lace th er fitte ional tablesp Direction the spread: P electric mix dit d a n n e a a k f To ma bowl o ll mixed. Add in the e pepper speed until w medium

Gyokoru a Tea ench

7.0 Share on Facebook Share your experiences on facebook.

ell nw

Go erbed

ings

: 8 serv

Serves

Post

ese at Che

ich Sandw

ch t a o g rbed

ni i n a p eese

5.0Rate the tea-food pairing Tap over the stars to rate the pairing, tap the text box to add a comment.

3.0

Dra

View Recipe

d pairi

1.0

your tea

3.0

Post Shar e frien with yo ur ds. Twe e tea a t about y dven o ture ur s.

Tanz a

nia C

Abo u brew t your

Brew lege nds

How i mad tâ&#x20AC;&#x2122;s e?

8.0 Share on Twitter Share your experiences on twitter.

The Interactive Design: final website wireframes The Interactive Teahouse was envisioned as a 360 concept, so that users would not only have a unique experience in store, but they would also take something away with them to recreate the experience away from the store. This take away was their personal tea profiles. The store's online website would not only allow users to purchase teas, but would also give them access to their profiles, with their tea ratings and comments and suggestions to better direct their purchases. Effectively it would serve as a tea memory!

Homepage Page Notes

2.0 1.0

1.0 Company Logo

4.0

Placemat for the company logo. Serves as anchor to homepage.

2.0 Utilities bar Sign in/Register facility Order Cart (reflects the current total) About Us (Information about the company) Contact Us (Lists contact info)

3.0

| Tea Diary | Teas | Tea Accessories |

3.0 Search website Searches only the website what the user inputs.

4.0 Primary navigation Primary Navigation menu. Remains constant throughout the experience.

5.0 Product Carousel 5.0

Carousel featuring various products and seasonal offerings

6.0 Welcome Copy Information about the company and the website experience

7.0 New and Features Thumbnail format for featuring news and products

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id estlaborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioqueciviuda.

6.0

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

7.0

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

Secondary nav Page Notes Sign in/Register | Order Cart: 0 | About Us | Contact Us GO

1.0 Primary Nav Hover State Hovering over primary navigation elements opens up the secondary navigation under the primary nav tabs that do have secondary navigations.

2.0 Secondary Navigation

1.0

| Tea Diary | Teas | Tea Accessories | White Tea Yellow Tea Green Tea Black Tea Oolong Tea Pu-reh Tea Scented Tea Herbal Tea

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tea Pots Tea cups Tea sets Tea Caddies Tea Paraphernelia

2.0

Secondary navigation text boxes. Mouse over to the secondary nav element and click to go navigate over.

3.0 Secondary Nav hover state Hover state for secondary navigation elements.

3.0

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

Inside secondary tea Page Notes Sign in/Register | Order Cart: 0 | About Us | Contact Us GO

1.0 Open Secondary Navigation Open secondary navigation, selected element is highlighted.

2.0 Tea class information General information of the open tea class.

3.0 Featured tea from selected class

| Tea Diary | Teas | Tea Accessories |

1.0 White Tea

Yellow Tea

Featured Item

Heading 2

Green Tea

Black Tea

Oolong Tea

Pu-reh Tea

2.0

Scented Tea

Herbal Tea

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

4.0 Average featured item rating 5.0 Product list

Green Tea

3.0

A tea is featured from the tea class. Name, a brief description, the average user rating is listed next to an image.

List of teas in class. Each tea element features a picture, the name, a brief description, price, and average user rating.

4.0

5.0

1234

Page 1 of xx >>

Heading 2

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

$xx.xx

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

Green Tea Page Notes Sign in/Register | Order Cart: 0 | About Us | Contact Us GO

1.0 Open product list List of green teas.

2.0 Selected Tea Selected, open tea.

3.0 Tea information

| Tea Diary | Teas | Tea Accessories | White Tea

Yellow Tea

Green Tea

Black Tea

Oolong Tea

Pu-reh Tea

Scented Tea

Herbal Tea

Tea image, tea name, tea description and a list of informative parameters.

4.0 Cost per size User selects caddy size-prices are listed alongside.

2.0

5.0 Quantity

Heading 3 3.0

SIZE:

Heading 3

5.0

Tea name

Heading 3

6.0 Delivery options Choose to have the order either delivered only once, or if it’s part of your regular rostrum of teas, set up a delivery schedule.

7.0 Auto-Deliver

Heading 3

4.0

Weight oz/gm - $xx.xx

QUANTITY:

1.0

Number of boxes.

AVAILIBILITY: In Stock / Out of Stock

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Region: Lorem ipsum dolor sit amet. Style: Lorem ipsum dolor sit amet. Manufacture: Lorem ipsum dolor sit amet. Flavor: Lorem ipsum dolor sit amet. Aroma: Lorem ipsum dolor sit amet. Liquor: Lorem ipsum dolor sit amet. Caffeine: Lorem ipsum dolor sit amet

Select the schedule for regular delivery of tea order.

Deliver Once

6.0

Auto Deliver and get 5% off Deliver every

8.0 10

Select One

weeks

7.0

8.0 Add to order cart button Click to add to order cart. Button label changes to “Added to cart” to provide user feedback.

Add to Order

9.0 Add to wishlist

Add to wishlist

Click to add item to wishlist. Button label changes to “Added to wishlist” to provide user feedback.

Share on facebook

Share on twitter

9.0

10.0 Share with friends and family Share with friends and family through twitter and facebook.

Preparation: Lorem ipsum dolor sit amet

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

First time Tea Diary Page Notes Sign in/Register | Order Cart: 0 | About Us | Contact Us

1.0 Sign in to view Tea Diary Enter username and password to sign in to access your tea diary.

2.0 Sign in Button Clicking sign in will redirect the user to the Tea diary. Default open page is Purchase History.

| Tea Diary | Teas | Tea Accessories |

3.0 Sign up for membership Sign in to become a member and receive membership card. Select a username and password.

4.0 Why become a member? 1.0

Click this to view the benefits of membership. Opens an information dialogue box.

3.0 Already a member? Sign in to view your Tea Diary!

Not a member yet? Sign up today to start your Tea Diary! Why become a member?

4.0

Profile, save and share your tea experiences as you learn and grow as a tea connoisseur! Review the teas youâ&#x20AC;&#x2122;ve tried, add teas to wishlist, suggest teas to friends!

Username:

Password

Password:

Use your membership to avail one touch payment at our Interactive Tea house!

CLOSE 5.0 Register Click register to go to your tea diary. Fill in personal information, billing and shipping information and taste profile.

Confirm password:

2.0 Sign in

5.0

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

Tea diary Page Notes Sign in/Register | Order Cart: 0 | About Us | Contact Us

1.0 Upload profile picture Click to upload a profile picture from your computer.

2.0 Save/update information Click to save/update information.

| Tea Diary | Teas | Tea Accessories | Personal Info

Tea taste profile

Purchase history

Wish list

Recipe Box

Personal Information Name: I am:

Female

Male

1.0 Upload Billing Information Card type:

Shipping Address Visa

MasterCard

First name (on card):

Address 1: Address 2:

Last Name (on card):

City:

Card number:

State/Province:

Security code: Card expiry:

American Express

Country: (mm-yy)

British Columbia Canada

Postal Code:

Save

2.0

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

Purchase history Page Notes Sign in/Register | Order Cart: 0 | About Us | Contact Us GO

1.0 List of purchased teas List of purchased teas. Each tea element consists of: Tea name, tea class, the user’s comment and rating and the date of purchase. The list is by default ordered by highest rating to lowest rating, and most recent purchase to the oldest purchase.

| Tea Diary | Teas | Tea Accessories |

Change filter values to change which teas are viewed.

2.0 Filters Personal Info

Tea taste profile

Purchase history

Wish list

Set filter parameters to view pertinent data.

Recipe Box

Default filter settings are 5 stars and most recent purchase date.

3.0 Selected Tea

2.0 Filter by:

Tea class

Month

None

Feb

Week

Teas

Ratings

Year

Week 1

2012

4.0 Tea name “User comment goes here.”

Purchased on:

February 2, 2012, Monday

4.0 Tea viewport

Tea name

3.0

Food

Tea class

Tea Class

“User comment goes here.”

February 2, 2012, Monday

January 22, 2012, Tuesday

“User comment goes here.”

Tea name “User comment goes here.”

User’s comment of their experience of the tea for future reference.

Purchased on:

1.0 Tea class

Purchased on:

January 22, 2012, Tuesday

Add to Order Cart

Purchased on:

January 22, 2012, Tuesday

Tea class “User comment goes here.”

7.0

Click to add to order cart. Label changes to “Added to order cart” to provide user feedback.

8.0 Remaining order items.

Additional Order Items Food Item

Tea name

Tweet or like the tea to share with friends.

7.0 Add to Order Cart

Tea name “User comment goes here.”

6.0 Share

5.0

6.0 Lke

Tea class

Allows user to view the order in its entirety, to share a particular tea on the order, order it again or view some of the other items on the order.

5.0 User comment

Tea name Tea class

Selected tea is highlighted and populates the viewport with detailed information.

View other items on the order. Listed with image, title and user rating. Food Item

Purchased on:

January 22, 2012, Tuesday

8.0

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

Purchase history filter Page Notes Sign in/Register | Order Cart: 0 | About Us | Contact Us GO

| Tea Diary | Teas | Tea Accessories | Personal Info

Tea taste profile

Tea class

“User comment goes here.”

Tea name Tea class “User comment goes here.”

Week

None

January

Week 1

2012

Yellow Tea

February

Week 2

2011

March

Week 3

Black Tea

April

Week 4

Oolong Tea

May

Green Tea February 2, 2012, Monday Purchased on:

January Pu-reh 22, 2012, TeaTuesday Scented Tea Purchased on: Herbal

tea January 22, 2012, Tuesday

Tea Class Purchased on:

February 2, 2012, Monday

June July “User

“User comment goes here.”

comment goes here.”

August September Tweet

Add to Order Cart

October Purchased on:

January 22, 2012, Tuesday

Tea name Tea class

Tea name

Purchased on:

Tea name “User comment goes here.”

None

White Tea

Tea class

Year

Food

Tea class

Recipe Box

Month

None

Tea name

Wish list

Teas

Ratings

Purchase history

November Additional Order Items December Food Item

Food Item

Purchased on:

January 22, 2012, Tuesday

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

Recipe Box Page Notes

1.0 Recipe Categories

Recipe categories based on the table categories.

2.0 List of recipes added 3.0 Selected Tea Recipe elements list the title, the user rating, cook time and difficulty level along with an image

| Tea Diary | Teas | Tea Accessories |

4.0 Recipe card Personal Info

Tea taste profile

Purchase history

Wish list

Recipe Box

5.0 Review the Recipe Try and review the recipe. Scones

Scones 3.0

Recipe Title

Print Recipe

Cook time Level 50 min

Full page view

Intermediate

Total Time:

2.0

Cook time Level 50 min

Intermediate

Cook time Level 50 min

Intermediate

Recipe title

50 min

Intermediate

Praesent eu Aliquam eget. Phasellus sed Proin vel lacus Duis eget

Directions

Tweet Like

4.0

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris

Tarts & Pies

Cook time Level

Easy/Intermediate/Difficult

Ingrediants · · · · ·

Review Recipe

X to Y servings

Yield Level

5.0

Cupcakes& cakes

Recipe title

XX min XX min

1.0

Sandwiches

Recipe title

XX hr XX min

Prep Cook

Cookies & Biscuits

Recipe title

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

Wishlist Page Notes

1.0 Tea Class tabs

Wish list teas are organized by tea class.

2.0 List of teas in wish list Each tea element states the tea name. the top user comment, the average user rating and the date it was added on.

| Tea Diary | Teas | Tea Accessories | Personal Info

Tea taste profile

Purchase history

Wish list

3.0 Selected tea Selected tea populates the view port to show multiple user comments and a brief description about the tea.

Recipe Box

4.0 Add to order cart White Tea

1.0

3.0 Top user comment:

“User comment goes here.”

Top user comment:

Tea name Top user comment:

“User comment goes here.”

Tea name “User comment goes here.”

Top user comment:

“User comment goes here.”

Added on:

February 2, 2012, Monday Added on:

February 2, 2012, Monday Average rating:

“User comment goes here.” “User comment goes here.”

Added on:

February 2, 2012, Monday Average rating:

Added on:

February 2, 2012, Monday Average rating:

Added on:

February 2, 2012, Monday

4.0

Scented tea

Tea name

Average rating:

Pu-reh tea

Top user comment:

Tea Class

Oolong Tea

2.0

Tea name

Black Tea

“User comment goes here.”

February 2, 2012, Monday

Green Tea

Tea name

Added on:

Yellow Tea

Tea name

Average rating:

Herbal tea

Document: Wireframes Last Edited: 2/13/2012

Author: <author name>

The Interface Design Having discarded my traingular navigator, I had to come up with a new visual metaphor that would successfully translate in an interactive environment where content had to remain free floating while user activity would remain private and individual. It took a while, and many, many experiments, ranging from nodal designs to 3D globes to other ideas equally bizarre to get to a visual metaphor that would evoke the sense of narrative that I needed to develop detailed assets. The idea what finally created a spark was this; the experience was supposed to be a journey, a tea journey. The visual metaphor thus, became "The memorabilia of a tea journey!" Expanding this metaphor, all the interface elements became some sort of collectible memorabilia one would collect and scrapbook in a tea journey. The Tea Diary became the navigator and profiler, and postcards and labels became content buckets.

Moodboard I wanted a rich, textured feel for the interface that would incorporate the vintage feel of a time when people actively did scrapbook their experiences. I also wanted to showcase the beautiful regions of the tea growing world through rich photography. For the product labels, I wanted them to look and feel, â&#x20AC;&#x153;collectibleâ&#x20AC;? and sophisticated, to reflect the high quality of the product.

Moodboard I also wanted to incorporate a lot of patterns and modern typography to contrast with the vintage feel of the rest and prevent the interface from looking dated.

Final Interface Assets Postcards became the main categories for products, each with their own set of product â&#x20AC;&#x153;labelsâ&#x20AC;? that could be added to users tea diaries in either the wishlist or the order cart. The tea diary would profile a user's choices: wishlist items, ordered items, purchased items. Various labels, and bookmarks would serve navigational purposes.

Oolong Tea Fujian, China

Oolong teas are the most complicated to manufacture. There are a greater number of steps involved in the manufacture of oolong tea than when making any other class of tea. The key to making a successful oolong is in the processing – in the crafting of the leaf. Oolongs come in myriad forms, shapes, and colors.

White tea in its original, pure form consists of only the tender, unopened budsets of particular varieties of China bush tea plants that are cultivated especially for this class of tea in Fujian Province on the eastern coast of China.

Yellow Tea

Pu-reh Tea Yunnan, China Pu-reh, known in old Chinese as “black tea”, is tea that is actually fermented. Pu-reh is a particularly large, richly colored leaf tea that can be made from either oxidized (cooked) or nonoxidized (raw) leaf. “I received a small brick of tea, And sipping it, felt cool; I can do with the wind as I will. Why should I need paradise? My whole body is floating amid the white clouds.” —Gido Shushin (1325-1388)

Yellow Tea is a most unusual class of tea. Wonderfully fresh, it does have much in common with early spring green teas, which perhaps explains the confusion surrounding yellow teas. One of the Imperial Tribute Teas, once exclusive provenance of the Emperors of China, they are now available for mere mortals to enjoy.

Black Tea

Scented Tea Fujian, China

Scented teas are uniquely Chinese. Perhaps the most famous example of this is the manufacture of Jasmine tea. Over time however, as the popularity of finished tea spread around the world, flowers, spices, oils and herbs began to be used to flavor different types of already finished tea locally.

Green Tea

Herbal Tea

Jiangsu, China Herbal teas or tisanes are not actually produced from tea leaves. They are herbal or plant infusions and are prepared by combining hot water and some primary ingredient. There are typically three categories of herbal teas based on their main ingredients. Rooibos is a herbal tea made from the South African red bush. Mate Teas are made from the South American Yerba Mate plant. Finally, herbal infusions can be made from a variety of ingredients including dried fruits, hibiscus and rosehips.

The Postcard Design

White Tea Fujian Province, China

BAI MUDAN

DARJEELING AUTUMNAL

SUN-DRIED TEA FROM XISHUANGBANA

Yellow Tea

White Tea

Black Tea

Green Tea

ROYAL RED ROBE

GREEN PU-REH

Oolong Tea

Pu-reh Tea

TRADITIONAL-STYLE JASMINE Scented Tea

ROOIBOS CHAI Rooibos

Tea & Food Product Labels

SNOW BUDS

White

Navigation

Yellow Green Black Oolong

Purchase Wishlist History

Pu-reh Herbal Scented

Order Cart

Filter purchase history:

Feryalâ&#x20AC;&#x2122;s Tea Diary

Oolong Tea

White Tea

Who would you like to pay for?

Black Tea

Herbal Tea Scented Tea

Date: 29-02-2012

Yellow Tea

1. Ming Mei

Friend 1 Green Tea

Current Order

$2.13

Pu-reh Tea

Friend 2 Friend 3

Total: $2.13

Rating

Scones

Cakes

Sandwiches

Pies

Cupcakes

Tarts

Tea Classes

All

Page 2 of 2 Page 1 of 2

0 2 .0

(You may select more than one...)

LATE

OON

ERN

AFT

FICE

E OF

DBY

GOO

1 of 4

1. What flavors do you enjoy?

1. How are you feeling?

3 of 4

4 of 4

(You may select more than one!)

2. What sort of teas have you tried before?

2 of 4

Guided Tea Tours

1. How much Caffeine would you like to have?

r to

GUNPOWDER

yo ea fT

Rate & Comment $1.00

riends

with f e r a h S

“Tap here to add a comment!”

GUNPOWDER $1 .0 0

Sic

Tea Legends

INvinAce CH huan Pro

Gunpowder tea was so named by sea captains for its rolled shape (zucha or “pearl tea” in Chinese). The antioxidant levels in green tea have been reported to be a 100 times more efficient than Vitamin C in protecting out immune systems.

Benefits

Health

FROM:

Gunpowder tea is one of the best known and most liked of all the standard green teas. It is among the easiest and most forgiving of green teas to brew. It was originally shaped into its pellet form for quality and keeping purposes, as its shipped more compactly and retained its fresh flavor better with so little surface area exposed.

Tea cup interaction assets

eS Th

$1.00

Final Comp Mocks