Stash Tea

PROBLEM STATEMENT

Like any other E-commerce platform or website, Shopify should have a proper directory structure for its site map. As Stash Tea grows, a well-organized directory structure makes it easier to scale the website without confusion, and new categories can integrate easily into the existing structure. It allows the company to set goals and funnels in analytics tools to track user behavior more effectively. The directory structure makes it easier to understand how users move through the website and at what point users drop off in the conversion process. The website's core function as an E-commerce platform seems well-established. Users can browse and buy products effectively.

Project goals

Conduct a sitemap evaluation on Stash Tea Website on these:

Primary Global Navigation
Secondary Navigation
Home Page Content
Global footer navigation

Project Duration

2 weeks

Sitemap Evaluation
Analysis

Tools Used

Approach

Evaluation

Navigation & Labeling Schemes:

The URL structure on each page is modified to include "collections" before the selected item, a common frustration in Shopify's SEO due to its fixed folder structure. A user-friendly website is paramount; having the flexibility to adjust folder structures could enhance content authority and improve URL appearance. While Shopify creates a site without a hierarchical chain, the site owner can mitigate this by carefully curating collections to convey content significance to users versus search engines. To establish a parent-child relationship for the URL structure, the site owner needs to link to the canonical URL of products, removing liquid filters like "within: current_collection" and "within: collection" from links in the page's theme, prioritizing a design that serves users over solely catering to search engine optimization.

Example of what it should be:

www.stashtea.com/tea/loose-tea/dragon-phoenix-pearl-jasmine-green-tea

Example of what it does:

www.stashtea.com/collections/tea/loose-leaf/products/dragon-phoenix-pearl-jasmine-green-tea

‍

For consistency in building the URL structure, the labels for Tea Flavors need to be labeled stash-tea flavor-tea-family. Under Teaware, New Arrivals, Iced Tea, Stash Merch, Teapots & Kettles need to be labeled consistent with the header for the URL structure to match the page's contents.

‍

Example: https://www.stashtea.com/collections/teapots

‍

Recipes has its own content page and a sub-directory to pages (figure 1.1).

(figure 1.1)

When clicking Cocktails within the page's content (figure 1.2), its sub-directory flips between pages to blogs and adds recipes/tagged before Cocktails in the URL. The sub-directories pages, blogs, recipes, and tags do not exist on the site.

(figure 1.2)

Example of flipping URL Structure:
https://www.stashtea.com/pages/recipes
https://www.stashtea.com/blogs/recipes/tagged/cocktails
https://www.stashtea.com/blogs/recipes/cranberry-pomegranate-mocktail

‍

Clicking the Tea Type contextual link from the Cocktails page changes the sub-directory from blogs to products. If the details are removed from the tea product from the URL structure, and the user tries to navigate to www.stashtea.com/products, it redirects the user to www.stashtea.com/collections/tea.

‍

Example: https://www.stashtea.com/collections/stash-fall-tea-family/products/cranberry-pomegranate-herbal-tea

‍

The breadcrumb (figure 1.3) for the Recipes page creates an unknown location, confusing the person navigating the site, especially those with accessibility issues. The breadcrumb at the top of the product list should reflect the location of where the user is on the website.

(figure 1.3)

Tea, Teaware, and Gifts exist in different sections linking to the same sub-site directory, "collections." The Primary Global navigation has redundancies throughout the drop-down list, creating more content than necessary, such as 1.0 Teas, 1.3 Tea Type, 1.4 Tea Flavor, and 1.7 View All. Removing the redundancies will make a clear navigation system from the content hierarchy.

‍

Headings allow a document to have structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or have trouble navigating when levels are skipped. Restructuring the document headings to ensure the heading levels are not overlooked (figure 1.4)

(figure 1.4)

In the search filtration system, labels such as Floral and Smoky from the Tea Flavor drop-down are missing or mislabeled from the Primary Global Navigation system. In the global navigation system (figure 1.5a), the Tea Flavor listed is Flower, but it is Floral in the search filtration system (figure 1.5b). The Global Navigation and search systems should add and consistently label these items for website usability.

(figure 1.5a)

(figure 1.5b)

The tea packaging, Loose Tea, and Tea Bags within the Primary Global Navigation are found in the search filtering system and seem excessive along with Last Steep Teas. Last Steep Teas labeling system could be better, such as changing it to Retiring Products. Teaware Gift Sets should be combined with Teaware Gifts as there is only one item in this category, and the item is not a set. This grouping can be labeled as Gifts and filtered from the product list. The shopping list is overwhelming, with multiple selections to choose from.

‍

When navigating to View All from a desktop-based interface, the hidden affordance of the drop-down only allows the user to go down a certain amount until the drop-down disappears, and cannot select the information in Tea Flavors when trying to choose Unflavored.

‍

Some elements must be clarified when navigating the website responsively, adjusting the screen size, and moving into the hamburger window. The user can no longer click Teas and navigate to all items listed on the desktop interface. The category listing minimizes the options under the header and removes some elements. For example, Teas are reduced to Loose Leaf, Tea Bags, Teas on Sale, and View All (figure 1.6). It also occurs in Secret Stash.

(figure 1.6)

As the user interacts with the page, the Primary Global Navigation becomes hidden on the left-hand side under the logo, redirecting the user to the homepage. It needs to be clarified for users to navigate to all information on the site (figure 1.7).

(figure 1.7)

A good directory structure is fundamental for responsive web design. It ensures the website displays correctly on various devices and enhances the mobile user experience, given the increasing use of mobile devices for online shopping.

‍

The header Recipes should become Blogs in the Primary Global Navigation to align with the website's URL structure. The labels under Recipes should be a sub-collection of the Recipes blog page. The user can then access all items listed in the current Primary Global Navigation drop-down from the main Recipes page. An additional header under Blogs labeled Education should be listed to incorporate blogs such as About Our Teas and Tea Education to follow the website's URL structure.

‍

The Primary Global Navigation is organized in an ambiguous hybrid labeling scheme using topical, audience-based, geographical, and metaphor-driven labels. Currently labeled as Tea (topical), Teaware (topical), Gifts (topical), Recipes (topical), Secret Stash (metaphor-driven), Find A Store (geographical), and Wholesale (audience).

‍

Items in the Primary Global Navigation are not labeled alphabetically (figure 1.8a), but when selecting Tea Type, the teas are organized alphabetically (figure 1.8b). Not all headers in the primary navigation bar are contextual links, such as Secret Stash, but the hidden affordance remains for the drop-down.

(figure 1.8a)

(figure 1.8b)

The Primary Global Navigation should be in an ambiguous hybrid labeling scheme: Shop (topical), Blogs (topical), About Us (topical) - moves from the Global Header Navigation), Help (topical), and Wholesale (audience) (figure 1.9a & 1.9b).

(figure 1.9a)

(figure 1.9b)

Tea, Teaware, and Gifts can become sub-collections of the primary collection, which will help break the sub-directory "collections" into smaller groups. The label can be organized under a topical-based labeling scheme called Shop, as each navigates to a similar page with a search filtration system. Doing so will help organize "products" that make sense to users by nesting products below the primary collections into broader groups while leveraging the tagging and filtering capabilities of the search system to allow customers to narrow specific criteria on the product list content page (figure 1.10).

(figure 1.10)

When clicking on Shop, the user is taken to www.stashtea.com/collections/shop. From here, the user has a breadcrumb (figure 1.11) below the Primary Global Navigation. An affordance will be applied to the header for which page the user clicks on, which will be more prominent than the others.

(figure 1.11)

The filtration system will switch when users click between different collections (figure 1.12).

(figure 1.12)

Blogs become a header of the Primary Global Navigation system. When hovering, a drop-down list appears with additional headings for Recipes and Educational as sub-collections to "blogs." It will help users understand the site's location from the URL structure (figure 1.13).

‍

Keyword Examples: #pumpkin, #spice, #pumpkin-spice, #latte, #hot-drinks

Example of new URL Structure from Primary Global Navigation:
https://www.stashtea.com/blogs/recipes/hot-drinks/pumpkin-spice-tea-latte (Final Destination.)

Current URL Structure:
https://www.stashtea.com/pages/recipes (Clicked on Recipes from Primary Global Navigation.)
https://www.stashtea.com/blogs/recipes/tagged/hot-drinks (Clicked on Hot Drinks from Recipes page.)
https://www.stashtea.com/blogs/recipes/hot-drinks/pumpkin-spice-tea-latte (Final Destination.)

(figure 1.13)

The About Us needs to be a primary header in the Primary Global Navigation system. The information found on this page introduces what A Little Bag of Crazy means. The content can also be housed in the footer navigation but is associated with the About Us page. When clicking on About Us, the URL structure becomes www.stashtea.com/pages/about-us because Shopify requires "pages" to be included in the URL structure. The content structure on the About Us page will be from the current website. From there, a contextual link on the page for B-Corp Certification, A Little Bag of Crazy, Social Environment Responsibility (does not exist anywhere else on the website), Community Involvement & Events (does not exist anywhere else on the website), and Stash Retail Store. Each has a page with content. These pages will become sub-collections to the content of the About Us page (figure 1.14).

‍

Example of the new URL Structure: www.stashtea.com/pages/about-us/a-little-bag-of-crazy

(figure 1.14)

The same will happen to the Help page, creating contextual links on the main content page for FAQ, Shipping & Handling, and the Return Policy. It will help people understand how to access all the information on the website by condensing it from the Primary Global Navigation (figure 1.15).

‍

Example of the new URL Structure: www.stashtea.com/pages/help/FAQ

(figure 1.15)

The Global Header Navigation is organized in an ambiguous hybrid labeling scheme using topical and task-based labels, currently labeled as Search (task/iconic), Shipping (topical), Help (topical), Account (task/iconic), and Bag (task/iconic).

‍

The Global Header Navigation should be in an ambiguous hybrid labeling scheme: Search (task/iconic), Find A Store (geographic/iconic), Account (task/iconic), and Bag (task/iconic) (figure 1.16a & 1.16b).

(figure 1.16a)

(figure 1.16b)

By creating the website URL structure based on what Shopify forces people to do, it makes a well-structured site map that can help categorize products and information in a way that is intuitive for users and improves SEO by supporting search engines to crawl and index pages more efficiently. It can lead to better search engine ranking and increased organic traffic. The newly-organized architecture in the Primary Global Navigation houses the main content within the website. It allows for items to be listed in the footer navigation and referencing two places for the user to find information and create a well-rounded user experience.

‍

Additional pages are listed in the Global Footer Navigation, such as the Mailing List, Careers, Terms & Conditions, and Privacy Policy. These pages can stay in the footer as these are similar in placement to most websites (figure 1.17).

(figure 1.17)

Sitemap Legend

Current Sitemap

Search System

‍

The search filtering system can then drive the user interaction to create a clear CTA (calls to action) for what products the user is seeking for a more effortless shopping experience (figure 1.18). The content can then be sorted by how the user wants to see the information. It would eliminate having three sub-collections (Tea Type, Tea Flavor, and View All) navigating to the same collection (Tea). When navigating to a product list, the search filtering system within those pages is vast but limited, allowing the user to organize the content to the user's needs on select pages. Teas are grayed out in the Teaware and Gifts filtering system and should be removed as an option. Teas, Teaware, and Gifts each have different tags and filtering associated with the content. Some items within the filtering system have been left outside the Primary Global Navigation drop-down, such as Honeybush, Pu-erh, Rooibos, White, and Yerba-Mate under Tea Type. Iced Tea should be removed from tea packaging in the filtration system) and added to Tea Type based on the Global Primary Navigation drop-down. Fair Trade should be removed from Organic in the filtering system to match the contents on the page when this filter is selected, as there are not any Fair-Trade teas, which means allowing certain chemicals to be used on certified farms.

‍

In contrast, organic has strict standards prohibiting chemical use. On Sale (Teas on Sale) or Retiring Products (Last Steep Teas) items can be added to the filtration system. Relevance should be added to the search filtering system on the "products" and "blog" pages.

(figure 1.18)

The search system is only used for items in shopping collections and not blog articles (figure 1.19a). The blog articles should be tagged with keywords from the article's title so a user can use the search system to find information from the articles with ease (figure 1.19b). When people can find products and information quickly and easily, the users are more likely to have a better user experience, stay on the site, explore further, and make purchases.

(figure 1.19a)

(figure 1.19b)

Content Structure

The site is organized in a hybrid top-down and bottom-up information architecture because some information is pulled from databases embedded on the website, and users manually modify the information architecture in the background when navigating the collections of products. At the same time, some of the information is narrow and deep.

‍

The home page content has a Hero Image highlighting the tea retailer's brand with a shop button for new teas available automatically sorted in the filtering system by best-selling to create a CTA to explore products (figure 1.20).

(figure 1.20)

Currently, the website lists the best sellers directly under the hero image, but this should be replaced with a feature section introducing the tea retailer's unique selling points and products. It would be the featured seasonal products and the company's commitment to being B-Corp Certified, found further down the page (figure 1.21).

(figure 1.21)

The company focuses on tea recipes and teaware in the feature list section. It should focus on the types of teas the company offers, such as Loose Tea, currently under the recipes and teaware section. The teaware and recipes section should be distinguishable and laid out like the product pages with an image, quick view, and price (figure 1.22).

(figure 1.22)

A section for Blogs should be added underneath the types of teas and the teaware section to highlight interesting articles for users to explore (figure 1.23).

(figure 1.23)

The Instagram post, which pops up at the end of the main page, highlights the company's interaction with users on other platforms, and the placement can stay as is in the content structure.

‍

The content on the main page is missing alt text on images to describe to assistive devices what the image shows to explain or illustrate a concept better than the image. Using heading elements helps break up the page's content into related "chunks" of information. (figure 1.24a) It must be used to structure a page and allow devices to navigate correctly in a logical sequence (figure 1.24b). The headings are vital for helping people who use assistive technology to understand the meaning of a page or view.

(figure 1.24a)

(figure 1.24b)

A form control does not have a label but a title. The title attribute value for unlabeled controls will be presented to screen reader users. A properly associated text label provides better usability and accessibility unless the form control is intuitive with the label (figure 1.25).

(figure 1.25)

The absence of a text label associated with the form's function or purpose is evident as a form label is missing. These labels offer both visible descriptions and larger clickable targets for form controls. The search button is empty and has no value text. It must provide descriptive text to screen reader users to indicate the button's function (figure 1.26).

(figure 1.26)

Links devoid of text or a clear function can confuse keyboard and screen reader users because they will not be visible or meaningful (figure 1.27).

(figure 1.27)

The title attribute text value is used to provide advisory information. It typically appears when the user hovers over an element. The advisory information should not be identical to the element or alternative text (figure 1.28),

(figure 1.28)

No script elements are present throughout the website. Content within the NoScript is presented if JavaScript is disabled. All users, including screen readers and other assistive technologies, that have JavaScript enabled cannot be used to provide an accessible version of the inaccessible scripted content.

ACTIONS

User persona

Sitemap Legend

Sitemap Restructured

Content Restructured

RESULTS

Summary Results - Automated Code Inspection

In summary, the Stash Tea website has the potential for improvements in its information architecture, URL Structure, labeling, accessibility, and overall user experience. By addressing these issues, the site can become more user-friendly, SEO-friendly, and effective in meeting its e-commerce goals.

‍

The Stash Tea website can potentially improve its information architecture, URL Structure, labeling, accessibility, and overall user experience. By addressing these issues, the site can become more user-friendly, SEO-friendly, and effective in meeting its e-commerce goals.

LESSONS LEARNED

This was one of the most complex projects I encountered. Though it was tough to analyze, it all came together once I saw the bigger picture of what was happening. I will never forget this project and apply this thinking towards the beginning stages of projects.

Interaction in Practice

Work