Project type: UX ∙ School: RED Academy ∙ Timeline: 3 weeks


E-commerce Coffee & Tea
West 4th, Vancouver


With a time frame of three weeks, my team at RED Academy started this project. 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.

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.


Key findings:

  • Users value the in-store experience: aromas and sampling

  • Users like to have the option of asking for help

  • Variety and origin are important attributes to look for Coffee and Tea products

  • Flavor is important for the users, some like trying different flavors

  • Intensity level of the product is also important for the users

  • Users research and look for reviews before buying a product

  • Users are interested in sampling before buying a product

  • Users are interested in offers and discounts

  • Some users want to find their product and want to buy without distractions

Sketch to Low/Mid-fidelity Wireframes

Sketch to Low/Mid-fidelity Wireframes


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.


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 with familiar categorization: Variety and origin.
Besides, the users will find filters: Intensity, tasting notes and brand, that will narrow their search. For the users that know their product and go online to purchase it, they can use the search bar.

Variety and origin categorization in Coffee and Tea E-Commerce site

Variety and origin categorization in Coffee and Tea E-Commerce site


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:


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 sections

Explore and Social sections