The Coffee & Tea Exchange
conceptual b2c desktop website
Role
Tools
Timeline
UX & UI design, UX research
Figma, Figjam, & Photoshop
3 weeks
Overview
A conceptual redesign for coffeeandtea.com, an online store for buying coffee, teas and merch from The Coffee & Tea Exchange in Chicago, IL.
Research & Discovery
What is The Coffee & Tea Exchange?
-
Small, family-owned local coffee roaster located in Chicago, IL
-
Sells coffee, tea, herbs and spices, filters and gifts
-
Store has been open for 50 years
-
Started selling online worldwide in 2016
-
Coffee is now roasted in a warehouse to accommodate the growing company
Research Methods
-
Interviewed 4 people who drink either coffee and/or tea every day
-
Conducted a competitive analysis and
-
Conducted a comparative analysis and learned about how effective spacing and hierarchy are when listing out products​
Identifying Pain Points in Current Site
confusion with navigation
confusion with products offered & difficulty reading text
Competitive Analysis
Looking at a few similar companies that sell coffee and tea successfully online, I learned that homepages were welcoming, there was guidance towards products, but they were lacking some filter options.
-newest release highlighted on main page
-various products separated into categories based off type
-filters and sorting on coffee types
-homepage greets you with suggestions and categories to explore based on feeling.
-flavors and helpful properties
-can sort by blend
-tasting notes listed with name and price, easy to see (not for every one for some reason)
-footer on each page has a lot of helpful links
-reviews included at top and bottom of product page
-have to scroll down quite far to add to cart
-added 2 things to cart, but they are the same blend so it just says there’s 1
-would prefer to be greeted with blend options on the home page, currently there’s a large section for joining subscription service, have to scroll down to see coffee
-a lot of graphics, can be overwhelming
-ingredients section is cool, but when you click on one it only shows you what tea they sell with that ingredient. Could be a sort function or listed on the product page.
-product images show full bags, not flavors
-zoomed in on the product image of the bag to see the tasting notes. Missed that it was listed under purchase options until looking at the page for a few minutes
-can’t sort by type or flavors, just alphabetically or by price
Panther Coffee
Yogi Tea
James Coffee Co
Pros
Cons
Comparative Analysis
After looking at a few companies that sell different types of products in a similar way online, I learned about how effective spacing and hierarchy are when listing out products
-Separated into jewelry types
-bestsellers section, but not sorted into types
-clicked on necklaces
-main categories listed at top, can also sort by availability and price
-necklace lengths shown as clear buttons, easy to see which one is chosen
-no images showing different options, just one option shown in several photos
-easy to add to cart, pop up drops down
-category and description
-SKU to keep track of item
-ability to update quantity
-clear ‘add to cart’ button
-4 columns, can sort by name
-add to cart button clearly listed underneath product
-includes large photo of plant
-can click on photo to go to description page
-featured products clearly listed on landing page
-ability to click ‘shop all products’ instead of looking at specific categories
-also includes a link to a catalog pdf of everything they sell with photos and descriptions
-products tab at top with all product types listed
Landing Page
Product Listing Page
Product Description Page
By Jessi Jewelry
Lake Valley Seed
The Soap Factory
-Main categories called out
-can preview a few items from one category
-some reviews listed
-scroll down to sampler item
-categories listed at top -- doesn’t scroll with you
-categories separated by use
(face and body products)
-products separated by type (oil, spray, cream etc.)
-shown a few items with a ‘see all’ button
-lists name, size and price with product photo
-clear product photo and name listed
-includes description, ingredients and how to use
-’add to cart’ button is animated
-says ‘I agree with terms and conditions’ but doesn’t say what for or what terms
-space to add notes for order
-related products underneath
Checkout Process Page
-Items and quantities listed clearly
-checkout button listed clearly, with multiple options to pay
-checkout details listed next to cart, easy to see whole process
-Pop up says it’s been added to cart. Clicked to go to my cart.
-add coupon
-continue shopping/checkout buttons at bottom
-new page to put in all my info and hit submit
-task tracker at top so I can see there’s a complete order page after I pay
-added item to cart, pop up showed current cart, ability to check out or go to shopping bag page
-Shop Pay integrated, so it already uploaded my information
Research Synthesis
Affinity Mapping
After interviewing 4 users who drink coffee or tea often, I organized statements into separate sticky notes to begin affinity mapping. While organizing all of the answers received during the interviews, I found many common themes. Users expressed interest in a less overwhelming and uncertain shopping experience.
Zoomed Out View
User Statement Trends
-
"I need caffeine"
-
"I like to make coffee at home"
-
"I have a specific daily routine for drinking coffee or tea"
-
"I have preferences on what I drink"
-
"I prefer a certain roast or blend"
-
"I buy more at least once a month"
-
"I buy more when I’m running low"
-
"I’m willing to buy something else"
-
"I buy where it’s convenient"
-
"I find it hard to know what's available that I'd like"
-
"I like to purchase certain items from certain places"
-
"I care about the coffee plant growing process"
Strongest Trend
"I find it hard to know what's available that I'd like"
*see zoomed out view above
Main Takeaways
Interviewees expressed stress with sorting through options and finding what they like. Guidance to products and filter options needed.
Understanding the User
and their needs
Brandon is a young working professional who lives alone and enjoys making coffee at home when he has the time. He buys coffee a couple of times of month, but drinks it daily and always has some on hand. His morning is usually dictated by when he wakes up, and is often short on time before heading to work. He has some coffee preferences, but also likes to try new flavors sometimes when he’s in the mood. Sometimes he also drinks tea when he’s under the weather.
Frustrations
-
Finds the variety of coffees available overwhelming
-
Sometimes finds it easier to go into the grocery store to buy something in person
-
Everything looks the same online sometimes, needs more information on quantities and dates and if it will be available next time he wants to buy
Defining and Organizing Content
Site Mapping and Flow
-
Conducted a card sort with 3 users, and found that all sorted out items based on overarching category, while â…” sorted coffees into roast type
-
Learned there was some need for filtering types of coffee
Main Nav
Sub Nav
Visualizing Layout Ideas
Sketching
I began sketching layout ideas for each main page, taking research findings into account. Focusing on clarity and organization.
Wireframing
Once I reached a certain point with my sketches, I moved into Figma to start wireframing. Since I had sketched out several iterations of each page, I began wireframing by selecting what I at the time thought was the most successful version of each.
Validating Design Decisions
Usability Testing
I conducted 3 usability tests with separate users. Each usability test was monitored in-person on a laptop. Each user was given the task of opening the website, searching for coffee blends, selecting a couple to add to the cart, and checking out. In addition to writing down specific feedback given directly by the users, I also took notes throughout of pain points and observed their behavior for each step.
Feedback
-
Incentives to order: free shipping offers + opportunity to earn points
​
-
More prominent sorting feature on right, similar to how bold the categories are
​
-
Add in quantities for limited items in quick add
Bringing the Design to Life
Style Guide
Calming, earthy tones in a wide range of tones were chosen to provide a stress-free feeling for the user in what can typically be an overwhelming experience.
M Plus 1 font style was chosen to align with the calming feeling of using the website while remaining easy to read. Several line weights were chosen to establish hierarchy and simplify understanding of navigation.
#F2E9E4
#C0A59A
#BFC3B5
#756558
#4E3E3D
Homepage
Product Listing Page
Product Description Page
Checkout Confirmation
HiFi Prototype
Next Steps
In the second phase of this project, I would focus on continuing usability tests. Focusing on visual design consistency and layout, I would refine the color system and the layout to improve clarity and overall usability of the website for users.
