Image
Top
Navigation
March 31, 2017

Examining Information Architecture: Tea Websites

I did a critique of two different tea websites examining their IA.  These exercises (along with various research and readings on IA) help to quickly digest what works in an IA structure and what does not.  Enjoy, my pretties.

Site 1: Empire Coffee & Tea – http://www.empirecoffeetea.com/

1. Primary organization. What is the primary organization scheme for the site? 

The primary organization scheme for Empire Coffee and Tea is topical meaning that the site, according to usability.gov, “…organize[s] content based on the specific subject matter.”  This content relates to topics that ultimately revolve around drinks which are specifically coffee and tea.  Task related items are prevalent as well though not as much (through “Find Us” and “Help”).


2. Where am I?
Drill down to a single product page. What element(s) tell users where they are on the site in relation to the overall organization scheme? 

Starting with “Baskets” I was brought to a page full of gift baskets.  The user is greeted with a larger header, the word “basket” repeated on every shoppable item in the category, and imagery of what they might want to purchase.

 

By clicking “Breakfast Basket” the title and image reflect what I was just looking at but with more detail.  I assume this is one of the last steps since the call-to-action is to place the item in my cart.  There is some trouble with this page because there are no breadcrumbs or way to navigate back to the previous page without using the native browser controls.

3. How do I get to? For pages showing information about a specific product, what element(s) will get people to all the other products in this category? 

In order to horizontally navigate to other similar products in the same category, the products would need to be displayed on the product detail page.  They are nowhere to be found and thus this action cannot be completed.

4. How do I see? For pages showing information about a specific product, what elements will help the user move up one level in the site so they can see all products of this type, and just this
type? 

As stated previously, there is no back option for the user within this site.  The user can only click on “Baskets” in the top menu or on “Gift Baskets” within the sidebar menu to move up a tier.  “Gift Ideas” is an option but presents less desirable results.  There is not a set path for the user to be able to view previous options without aid of the native browser controls.

5. What’s not good?

The labels in the top level navigation are not specific enough.  “Filters” for instance is a type of function on a website used for searching, or it could mean coffee filter.  The “Shop by Category” and “Shop by Brand” is also a bit disconcerting as the topics do not all fit together.  “Gift Baskets” and “Gift Ideas” overlap in their inventory and thus are poor facets.  “Decaf Coffee” and “Decaf Flavored Coffee” also seem like they could share overlap.  There needs to be more differentiating and intent of what the menu items consist of.

Site 2: The Cultured Cup – http://www.theculturedcup.com/


6. Primary organization. What is the primary organization scheme for the site? 

The primary organization scheme of the Cultured Cup is topical.  Each of these navigation items relates to a specific topic regarding the company such as “About”, “Blog”, and “Home”, which are typically of many websites.  The major categories are “Tea”, “Coffee”, “Sweets”, and “Gear.”


7. Where am I? Drill down to a single product page. What element(s) tell users where they are on the site in relation to the overall organization scheme? 

It was simple to drill down to the “Blooming Flower” detail page.  The steps can be seen in the below screenshot… “Tea”, “Green”, and finally a list with all green tea appears with a nice additional filter section on the left.  The elements that tell the user where they are include menu items that are highlighted below, and repeated wording and imagery between the product list and the product page.

 

8. How do I get to? For pages showing information about a specific product, what element(s) will get people to all the other products in this category? 

In order to horizontally navigate to other products in the same category as the “Blooming Flower” example, similar products would need to be listed on the same page.  The Cultured Cup lists similar products underneath the details allowing the user to navigate within the same product category without going up a level, back down, back up, etc.

9. How do I see? For pages showing information about a specific product, what elements will help the user move up one level in the site so they can see all products of this type, and just this
type? Use a screenshot and highlight the elements.

In order for a user to see all of the products in a given category when on a product details page, they are able to use the top sticky navigation to go back to “Green” tea.  By keeping these elements close together it is easy for the user to keep track of where they are in the site.  This gives the functionality of breadcrumbs while still acting as a menu bar.

10. What’s not good?        

Potentials problems with information architecture are that a user may scroll down the page immediately and have access to the sticky navigation, but the contextual search is only available when the user is at the very top of the page.  This creates a situation where they may think they will need to sort through facets in order to find what they are looking for instead of searching by keyword.

Submit a Comment

Posted By