Website Redesign
Overview
Aroma Tea Shop, started in 2005, is a famous tea shop located in the heart of San Francisco. The shop would like to showcase their products, improve navigation and streamline user’s purchasing experiences on their website.
My Role
Role : UX/UI Designer
Tools : Figma
Client : Aroma Tea Shop
UX Process
The Research Objectives
To understand the pain points of user’s online tea shopping experiences.
By Redesigning the website , I can help the client by improving the website
navigation, showcasing their products and streamlining user’s purchasing experiences.
Interviews
At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem. My target audience were people who purchase tea online I have chosen contextual inquiry method. I have 6 participants for the interview. All of them have online tea shopping experiences.
The key insights
The users have difficulty in finding flavored Tea bags
Most of the users want a trial pack before purchasing.
Users have difficulty in finding wellness teas
Users have difficulty in finding tea recipe video
Persona
Based on the interviews, I created a User persona. It helps me to understand the needs and behavior of the user.
Customer Journey Map
To understand how customers find and interact with the service, I created a Customer Journey Map.
Scenario : Mehan is looking for a trial tea pack in Aroma tea website.
In the above Journey map, User plans to purchase a trial tea pack . She was very exited as she thought the website has lot of options. But because of the poor navigation and lack of options , she is frustrated and decided to leave the site in search of looking other Tea websites.
Sitemap
I started working on Information Architecture and with the help of Define phase I created a well organized a sitemap. It helps me in understanding the website structure more easily.
Sketches & Wireframing
At the beginning of my design process I created wireframes for testing purposes. I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly. For Sketching I initially worked on some rough sketches. Later on, made some iterations on those sketches until my design fully took shape in the form of low-fidelity wireframes. I used these wireframes to create a mid - fi digital prototype for my product.
Wireframes
User Testing & Iterations (Hi-fi Prototype )
Before launching the product, I did a testing round in order to reveal possible usability problems. I conducted Usability testing with 6 participants.
Their task is to purchase a flavored tea trial pack from the website.
In order to improve the design of my site, I conducted Usability testing of the mid-fi prototype. Based on the feedback from usability testing, I made iterations on my Hi- fi prototype.
Usability Testing Insights
All participants were able to complete the task as expected
6/6 participants were able to complete the task in less than 3 minutes
2/6 participants noticed that breadcrumb is missing
2/6 participants were confused about the need of home tab in the primary navigation
Home Screen Layout Before and After Redesigning
Reflections
Finally, I wanted to highlight some key reflections :
Tea drinkers have specific needs. They want to learn new tea recipes and try new teas before making a purchase decision. These needs are supported in physical stores but real websites do not. The redesign of the website attempts to bridge the gap between physical stores and the online purchase.