UX Case study: Coffee and Tea

West 4th, Vancouver

With a time frame of three weeks, we started our second project as UX designers at RED. The goal was to design an E-commerce store aggregating multiple retail stores into a unique online experience that would provide information from the stores, increase customer engagement, social engagement and sales. My focus: Coffee and Tea stores in West 4th.


Today, Coffee is the most commonly consumed beverage in Canada, followed by Water and Tea, according to the Coffee Association of Canada. Substantial time on research including Surveys, Field Trips, Affinity Diagram, Personas, Information Architecture, Customer journey, and Storyboard followed by planning and analysis, helped me gain an understanding of the actual Coffee and Tea market and how to design for its users.

Who are the users?

The Canadian Tea market is growing exponentially. This has been attributed to immigration (Millennials 18–33 years old) from countries with strong tea-drinking cultures (China, India, the Middle East, and Russia), an interest in being health conscious, and an interest for learning about different varieties. In fact, some local and North American Coffee and Tea stores competitors I looked at such as Elysian Coffee Roasters and Revolver (local Coffee stores) and Teavana and The Republic of Tea (North America), are sharing the interest of diversifying their products.

With the purpose of further understanding of the user’s interests and motivations, my classmate Yuki (also researching the same user group) and I planned a field trip to some Coffee and Tea stores in West 4th: David’s Tea, Silk Road, and 49th Parallel Coffee to see how users interact in-store. While observing them, we found out how they differ. For example, some of the consumers that visit the stores already know what product they want when they go to order while others are expectant to hear recommendations and get samples.

49th Parallel Coffee and David’s Tea

The next step was conducting Surveys. This method allowed us to get meaningful and unbiased information together with thoughts, opinions, and comments from the users:

Demographics charts

The largest group of people surveyed was in the age range of 18 to 33 years old (Millennials) and 53% of the complete group was female.

Key questions in the Survey:

  • What are the most important aspects you consider when buying Coffee/Tea? Results pointed out that the most important attributes the users look for in Tea and Coffee are the variety and origin.
  • What is the reason you drink Coffee/Tea? 
    The flavor was found as the main reason to select the product, followed by the effect: Boosting, resting…
  • What are the advantages of buying in-store?
“The experience of buying it at a store is enjoyable. I can taste the product.”
“Can smell, I like getting help cause there are too many options. I need the staff to help me.”

On the other hand, when users buy Coffee or Tea online (only 30% of surveyed), they look for reviews and offers. Similarly to the in-store observations, when users buy online, some of them want to buy their product without researching other options while others are looking to explore and research the products before they buy.

What are the motivating factors when choosing to buy online?

  • Usually will get a wider range of products online
  • Can get to know more about the products: Reading about the product, peoples’ experiences and overall research online.
  • Can get special benefits online: Coupon codes and offers
  • Save time: Online checkout and delivered at home.

Once the Survey results were collected, my classmates Eric Tan and Deepjyoti Goswami to group the data and find patterns in an Affinity diagram:

Deep and Eric collaborating in the Affinity diagram

Key findings

  • Users value the in-store experience: Aromas and sampling
  • Users like to have the option of asking for help
  • Some of the most important attributes when users look for Tea and Coffee are variety and origin
  • Users pay attention to the flavor and intensity level of the product
  • Some users are interested in sampling before buying a product
  • Some users are interested in offers and discounts
  • Some users want to find their product and want to buy without distractions
  • Some users read reviews and do research before buying a product


“Sensory experiences are everything to me. I enjoy keeping memories, value small things and love being surprised!”


33 years old 
Professional dancer & Choreographer
Yoga practitioner
Archetype: The Explorer Adventurous, Energetic, Clever. She feeds her soul discovering, learning and sharing.


Gabriela was recommended a new tea from a West 4th store. She decides to go to the physical store and sample the product. She experiences the store and its aromas, tries the product and loves it. She wants to buy the product but it is sold out. To complete her purchase, Gabriela was directed to the online store where the product is available.

User Journey map with opportunities highlighted

In order to visualize the previous User Journey map, I created a Storyboard:

The storyline of Gabriela experience


  1. Some users value the experience in-store. They enjoy being captivated by multi-sensory experiences that appeal to all of the five senses: sight, smell, taste, touch, and sound.
  2. Some users might forget the complete name of the product, but they might remember the variety or the origin. Some others know what product they are looking for and want to find and buy it fast.
  3. Some users explore different options of the products online: Match their flavors and intensity level of the product with ease.
  4. Some users like to get some help, hear from people and researching before they buy a product: Reviews, instructions, health, and recipes. They are also interested in getting information about new products and offers.
  5. Some users like sampling before buying a product.


One of the challenges faced while working on this project was while developing the IA. In order to understand how Coffee and Tea stores categorize their products and what people understand as Tea and Coffee type/variety, I went back to the initial phase of domain research. Discovered the main types of Coffee in the world: Arabica and Robusta, and how they are subcategorized in many varieties under the categories of Interspecific Hybrid, Original variety, Subvariety, Intraspecific Hybrid, and Mutation. This helped me to start the categorization by varieties of Coffee.

As for Tea, it was clear to identify as Tea stores divide their loose Tea leaves by classified Tea type names (familiar for customers). When it comes to Coffee, talking about varieties turns vague. Some Coffee retailers list their products and provide the filters without any categorization. An easier way to identify the product is by its Origin, which is a key setting point that adds adding credibility and value.

In order to keep consistency for both Coffee and Tea products and respond to the user's interests, the categorization in the E-commerce site was defined as variety and origin.

Defining which filters would work throughout the search was another challenge, finally deciding to keep Tasting notes and Brands for both Coffee and Tea and one more describing the intensity for Tea, and roast level for Coffee. The selection of these filters was based on the users' interests collected during the research as it was found that they are highly interested in the flavor and intensity of the products.*(Refer to Survey- What is the reason you drink Coffee/Tea?)

IA Coffee and Tea E-commerce
User flow for Herbal Tea purchase, as Guest.


Homepage evolution from the sketch: Video and sound with the option to pause.
  1. For the users that love being captivated by sensory inputs, an interactive site including a video with sounds and subtle animations to their actions through all their navigation will make the experience memorable.
  2. For the users that might find it challenging to search their product online by the product name, or they recognize their products by its Variety or Origin, the user search is simplified to familiar categorization: variety and origin.*(Refer to Information Architecture) 
    Besides, the users will find filters: intensity, tasting notes and brand, that will narrow their search. For the users that know their product and just go online to purchase it, they can also use the search bar that will take them directly to their product.
Tea purchase: Navigation experience by Variety.
Variety and origin categorization in Coffee and Tea E-Commerce site

3. For those customers that want to explore the right product for them, there is the Match your product button tool that leads them to their search results based on their chosen intensity/roast level, tasting notes and price. *(Refer to Who are the users?)

Match your product button for discovering products of user’s taste

4. For the users that like researching and hear from people before they buy a product, under Explore button in the main menu they will find New products, The World of Coffee, The World of Tea, Senses and Aroma, Online Exclusives and Coupons and Sale.

The sections The World of Coffee and The World of Tea include Staff picks, Recipes, and Wellness. Next to Explore, the users will find the Social button, and it will take them to a section in which they can share Photos and Reviews with other users. As for the users that look for asking questions directly, there is a small floating button: Need help? to chat with someone from the store.

Explore and Social

5. For the users that like to sample before they buy a product, they will be receiving samples that are similar to the product they have bought and so that they can start comparing products. Some extended benefits in regard to sampling are effective after registration.

User Testing

The task:
Buy “SUNNYC Tea” (Herbal Tea) applying a coupon code

  • The user suggests that when it is time to add the coupon code at checkout, it would be great to have a tool that would help users to find any applicable coupon, that way the users would not need to find coupons available online. (This tool was added later in the prototype, and can be visualized in the video “Tea purchase: Navigation experience by Variety” under the Design section)
  • The user navigated with ease but would like to see the project in a more developed phase to enjoy interactivity.

Future considerations

Interactivity and creation: A proposal creating a more interactive experience that would address the users exploring souls. Think of some experimental screen in which the user can move shapes and play with sounds, colors, and textures instead of only viewing it and hearing it. This interactive experience could be translated into something else. Example: Their interaction has created a digital art on the screen that will result in the gift wrap or a mix of sounds that can be saved.


Although I am a Graphic Designer and I am highly familiar with research, especially for Branding, this is my first Case study as a UX Designer and the recurrent feeling is there are many things to learn. From this experience, I learned how paying attention to those small details gathered on user research are the ones giving the first clues on creating better solutions for the users.
Last but not least, I learned successful communication with users is critical all throughout the research and design process. One of the key moments is user testing, the earlier conducted the better.

Thanks for reading!

Check out my website: