Based on a sample cross-section of 100+ products that Evy Tea offers, I was tasked with designing and creating an eCommerce platform in the form a clickable prototype around an online shopping experience. It was critical that my design meet the goals of the users, the goals of the business, and the goals of the brand. My designs were tested by users and followed Information Architecture (IA) heuristic best practices.
Evy Tea is a Boston-based maker of cold-brewed teas offering unique flavors and sample-friendly flights.
Design and create a clickable interactive prototype based on a sketched interface for the Evy Tea eCommerce platform.
I was the sole designer for this project.
Customers of Evy tea not only need a convenient way to shop for tea online, but also be able to favorite items and have the store remember their choices.
By creating a simple and efficient on-demand eCommerce platform with the functionality to create accounts and favorite items, Evy Tea customers will be satisfied with their online shopping experience. We will know this to be true when we conduct usability tests, continually iterate on the website and see an increase in sales traffic.
The first step was gathering information about current users and the status quo of the business as a whole through contextual inquiry. I collected my Moleskine notebook and Sheaffer fountain pen and made my way to the brick and mortar storefront to covertly observe and make notes on the types of customers, the staff and overall branding of the business. As I watched the flocks of hipsters suck down chai and matcha teas in their snow hats, I realized that the core reason as to why Evy Tea was able to grow so quickly was due to the grassroots organization's loyal customer base. This was important to keep in mind when moving into the competitive analysis portion of the research phase.
The Competitive Analysis included both a basic Feature Analysis as well as an assessment of Nielsen's 10 Usability Heuristics. The competitors chosen were the leading rivals that already had a similar user base and/or had a robust eCommerce experience: Stash Tea, Tea Forte and Upton Tea Imports. Based on the information learned about the existing trends in the market, my research pointed me more towards evaluative approach rather than generative. Going back to the old adage of, “If it ain't broke, don't fix it,” there were certain categories for teas that were generally accepted in the market as industry standards.
Takeaway: personal connectivity/customization to the consumer is absent in the competition
Takeaway: error prevention needed to be addressed in my design
After firing off a quick screener to determine tea-drinking behaviors and interviewing a few users I identified based on the personas, it was time to get down to brass tacks.
Knowing that this was primarily an Information Architecture (IA) challenge, it seemed natural to have users go through a card sorting exercise (using Optimal Workshop) in order to catalog the sample cross-section of the 100+ products that Evy Tea had to offer. In this particular case, I chose a closed card sort in order to abide by best practices as it pertains to navigation design.
The results subsequently guided the structure of the sitemap.
Sitemap (Card Sorting results)
The preliminary low-fidelity sketches were a messy brain dump where I just needed to get my ideas down on paper. After all, the cost of pen and paper is cheap and it is enough to test the viability before you sink a ton of time and resources into creating something close to perfect.
The sketches slowly but surely evolved to mid-fidelity paper prototypes and went through multiple iterations through a combination of guerilla A/B testing and user testing. The UI design was primarily ruled by contemporary patterns in online shopping experiences and the brand style guide. The hands-on experience I gained working with fundamental UI tools for web & eCommerce gave me the confidence to move onto the final wireframing and prototyping stage.
User Flow for getting to the product page
Knowing the ins and outs of an eCommerce platform and its process
Working hands-on extensively with Axure
Designing for the web through Information Architecture (IA)
Scenario A: You feel flustered as you are working on a project deliverable with an imminent deadline. You want to quickly purchase some Masala Chai tea without any hassle and get it delivered ASAP.
Search for Masala Chai
Add "Masala Chai 3" to your cart
Continue as guest
Purchase a quantity of 2 bags
Scenario B: You have an account with Evy already but have now decided to get in control of your health by cutting out caffeinated drinks. You created an account with Evy so the store can remember you choices.
Sign into your account
Search for caffeine-free tea
Add "Caffeine-free Tea 1" to cart
Purchase 1 container in powder form
Try out the clickable prototype by clicking here!