Loading...
A redesigned website featuring easy-to-use navigation, clear categories for products, and high-quality visuals to replicate the convenient in-store experience, online.
Point Loma Tea’s website lacked visuals, easy navigation, and a convenient user experience.
When visiting the current Point Loma Tea website you are brought to a home page that lacks visuals and proper navigation.
What type of online user experience makes a successful purchase? To further uncover what the website needed in terms of layout, features, and user experience, I created a competitive and comparative analysis to determine what features and designs work well from each competitive website. I chose competitors based on customer satisfaction, exposure in-stores and online, and consistency in quality.
To discover what the website needed for a redesign, I needed to recruit the right users through a screener survey that filtered out users who met specific criteria for an interview. I conducted user interviews that uncovered the main reasons users drank tea, their method of purchasing, and pain points and frustrations when making a purchase.
Based on the interviews I took note of the following trends and insights that the interviewees had in common:
Following the interviews, usability testing was conducted to determine what parts of the website contributed to poor user experience. In this test, I gave users three tasks to complete on the previous website to analyze their interactions throughout the website.
In order to redesign a website for the typical user, I created the following persona by combining the most common pain points and frustrations I gathered from my interviews.
Based on the insights gathered from research, I determined three key design decisions:
Point Loma Tea’s website was lacking intuitive navigation. To update their site map, I conducted a card sort and asked participants to organize different products into categories they perceived as appropriate for each item. In addition to conducting a card sort, I analyzed competitor’s site maps and by using my card sorting data and competitor comparisons I constructed the following site map.
Combining my design strategies and newly designed information architecture I sketched a design with solutions that helped with my user persona’s pain points and frustrations.
After creating my sketches, I digitized them below and annotated key features to justify the changes that were added.
To create a convenient and efficient user experience that takes the user from the home page to a purchase confirmation page, I created an improved user flow.
After I determined an ideal user flow I created a medium-fidelity prototype to digitize these interactions.
To further test my design in this iterative process, I conducted a second usability test on my medium-fidelity prototype to see what other opportunities my design could be improved and I gained these top three insights:
After synthesizing the test results from my second usability test, I created a higher fidelity prototype below.
80% of users that were interviewed purchased their tea in-store because it was quick and easy. One user said that it was convenient to pick up a box of tea while picking up other grocery items. Other users thought shopping in-store for a new tea flavor was convenient because they would be able to taste it once they got home. With the re-design, I wanted to ensure I replicated that quick and easy experience, online. To do this I made sure I had easy-to-use navigation and important categories on the home page the user could follow to their ideal tea flavor.
From the interviews, I discovered that 60% of users drank tea for its caffeine benefits while the remaining 40% consumed it for its relaxing qualities. With this in mind, it was important to have categories on the homepage where the user can immediately navigate to teas that had caffeine or non-caffeinated decreasing the steps it took to complete a purchase.
100% of users interviewed mentioned that flavor was the most important deciding factor that made them purchase the product. “It’s important for me to smell the tea before I buy it because I gauge the flavor and quality by the smell”. Seeing how the flavor was important across all of the users I interviewed, I re-designed the product pages for individual tea flavors to have an accurate enticing description of the flavor and added ingredients and a “how it tastes” descriptor underneath the picture.
When asked about emotions relating to drinking tea, users were able to describe feelings like relaxing, warm, soothing, and cozy. 60% of users who participated in the mid-fidelity usability test mentioned that they would like to feel those same emotions when shopping through a website in order to imagine themselves with the product. Nearing the end of this project I discovered how important it was for users to envision what they were purchasing and how important it was for me as a designer to invoke the same feelings they had when picking an item in-stores, online.
