01 Research

Comparing 4 Websites

I looked at four existing coffee shop websites to research and analyze. In all of them there was a global navigation system comprised of either one or two headers. Typically, the top header had links to a Search bar, “My Accounts” page, and “My Cart” page – things found in typical retail website typologies, which a coffee shop would also fall under.  

Gimme Coffee

(insert annotated diagram)

Kicking Horse Coffee

Pilot Coffee

Eight O’Clock Coffee

In these examples, the secondary header was typically used as a navigation menu bar labelled with major categories and quick links. While Gimme coffee had a vertical dropdown menu, the others had a megamenu that would open when hovered over. This made it easy for me to navigate to the specific “Coffee” section (especially as many of the shops sold other adjacent products such as teas).  

Every site also had a large hero image/video in the primary space of the webpage upon entering. This along with the logo on the top header helped with placemaking and gave a clear understanding of the brand identity.  

After scrolling down, most of the websites had secondary content in the form of horizontal bands. Large product images were displayed in curated collections such as ‘Popular’ or ‘Holiday Favorites’ which made it easy to quickly find themed and recommended products for someone who did not have specifics on what they were looking for.  

Product pages typically showed items in a gallery view with a grid and either a horizontal or vertical filtering bar and a sorting feature. Surprisingly, no sites provided a search option within product pages. 

Overall, the coffee shops used a top-down approach with clear categories defined by the site (common categories being Roast, Grind, Decaf). The content was laid out very horizontal creating an easy scrolling rhythm and ease of viewing. Secondary or tertiary content was accessed by scrolling down not scanning left or right and the content was very large and visual.

02 Exploring Users’ Mental Models

Closed Card Sort

I performed a closed card-sorting exercise through UXTweak and tested it with 9 individuals. The categories I provided were based on the common ones found in my precedent research of existing coffee shop sites.

I chose to do a closed sort because the coffee shop website typology is already established, and the familiarity helps users with wayfinding. I am not intending to create a new organization or bottom-up navigation system, so I wanted to give users a set of standard categories. This data would be most helpful in terms of providing feedback to design with. In addition, I knew many of my test participants do not drink coffee, so in order to keep the exercise simple and make sure the users completed the task, I gave them set categories.  

Results

• General words were more confusing in terms of what connotations and categories people would put them into. For example, ‘Regular’ was put into five categories with the majority of users thinking that it fit under “Roast Level” rather than the “Seasonal” category (which the coffee sites categorized under). Most “Brewing Methods” cards were categorized correctly and all the “Origin” and “Flavors” cards were all in consensus. The more specific the term, the easier it was for users to place into a specific category.

• I was surprised at how fast the sorts took with the median being 2min 47s. Even with preferences being so varied, each individual was confident with their own choices and didn’t ponder for too long. after testing, my conclusions are that either more specific non-generic vocabulary must be used or users need more context in order to understand some terms such as “Regular”, “Seasonal”, and “Medium”. 

(insert card sort results & categories)

03 Design Proposal

Website Schematic

This new website follows the standard coffee shop website typology intuitive to users but also condenses the categorization system and simplifies the labeling so that users can find items in an efficient manner.  

(insert website schematic)

Wireframes

Navigation is streamlined, with a global navigation bar containing two stacked headers. The first header is for utility and contains a Search bar, “My Account”, and “Cart”. These functions are applicable to the whole site and are relevant actions regardless of which page you are on. The second header acts as the navigation menu bar and groups content into four primary categories: “Shop”, “Learn”, “Visit”, and “Services” which address key user intents such as purchasing products, understanding coffee preparation, and finding physical store locations. Within these major categories are subcategories and the menu bar acts as an index of pages to show context for key terms such as “Medium” (found under Roast) which would otherwise be confused into other categories.

This main navigation and organization system gives users a clear hierarchy and minimizes cognitive load while subsections allow for deeper exploration. Both headers that make up the global navigation provide direct access to major sections as well as the option to search for quick access to specific products or information. The search system supports efficiency by letting returning or expert coffee users bypass browsing and allowing them to complete purchases quickly.

The labeling system in the navigation menu bar is concise and intuitive, using terms familiar to coffee enthusiasts and found commonly on coffee sites. Clear labels like "Brewing Method" and "Grind" instead of “Method” or “Type” reduce ambiguity and enhance usability.  

The homepage is optimized for new visitors of the site who may not know what they are searching for. Instead of jumping to links in the global navigation, new users are more likely to browse around. The homepage is more supple and contains regularly updated in-page links to curated collections and blog posts catered to beginner coffee drinkers.

Comparison of Options

Option 1 allows users to expand or click into categories, which give them more information without leaving the main products page. The global navigation at the top allows users to have the option to find other pages and is a reminder of the peripheral context of the overall website. The filtering system is located on the left sidebar and has expandable categories (starting with more general labels). This method uses progressive disclosure so that users can explore with more granularity when desired. There is a search and sorting function is located within the product content area - clearly differentiated from the filtering vertical side bar. Users can click on the “Add to Cart” button to bring up a pop-up and allows them to quickly shop. Overall, Option 1 aims to give users lots of options while keeping hierarchy within the main product page.

Option 2, however, prioritizes ease of use and tries to minimize information and clutter. It is designed to focus users on one task at a time, guiding them through a designed experience by giving them fewer but clear set options. While users are searching for products, the top navigation bar is hidden until hovered on. The filtering system is placed horizontally under the page title and has clear categories with dropdown selections. This placement works with the F-scanning pattern which naturally capitalizes on the importance of the top horizontal space. Selections appear visually underneath as tags that can be deleted to continue customization of options. Products do not have a pop-up or preview, clicking into the tile will take a user to the item’s specific page, meaning users focus on one page at a time.

The main differences are that Option 1 lays out the filtering system as a vertical sidebar with expandable categories whereas Option 2 has the filtering system placed horizontally on top with tags. Option 1 allows more specific customization but also creates cognitive load with how detailed and long it can become. The vertical sidebar also breaks the horizontal rhythm that is established in all other areas of the site and takes up screen space that could be used for products. Option 2 allows the user to have an easy time selecting categories, but is difficult to remember and modify once deep into the product grid (the categories remain at the top of the page). This filtering method and layout also are difficult to translate to a mobile screen where proportions are vertical.

Next Steps

For further steps, I would continue iterating the wireframes to make each option even more differentiated in order to more clearly demonstrate how different approaches to information architecture can change the design of a webpage. I could do further polishing by creating mock-ups of the webpages and wiring a prototype in Figma to test the user experience which changes after interacting with these navigation, search, labelling and organization elements. Lastly, I could investigate how these websites would translate to mobile screens and how to make those two versions cohesive and compatible.