Product Filters vs. Categories

Users had to navigate through overly specific categories, making it harder to see a complete range of products.

Solution: Use Both Filters and Categories

• Categories: Group candles into high-level categories to help users navigate distinct product types.

• Filters: Within each category, use filters for shared attributes to allow users to narrow down their options further.

  • “Scented Candles” category

  • Filters for “Scent Family,” “Size,” and “Attribute” within that category.

• Benefit: Users can easily browse distinct product types through categories, while filters allow them to refine their choices quickly. This combination enhances product discovery without overwhelming users.

  
  

  Why It Works:

  • Categories help organize the site and make it easier for users to find the general product type they're looking for.

  • Filters allow users to dive deeper into specific attributes without losing sight of the full range of products.

  • This hybrid approach gives users more control over their shopping experience, improving navigation and product discoverability.

Courtesy Navigation: Keeping It Clear and Functional

Sitewide courtesy navigation (e.g., “Sign In,” “Contact,” “Help”) was mixed with the main product navigation. This cluttered the interface and made it harder for users to focus on browsing products.

Solution: Separate Courtesy Navigation from Main Navigation

• Desktop Implementation:

  • Grouped courtesy links (e.g., “Sign In,” “Track Order,” “Contact Us”) into distinct sections.

  • Used visual separators, dropdown menus, or placement in a header bar to ensure these links didn’t compete with product categories.

  
  

• Mobile Implementation:

  • Added clear visual separation between courtesy links and product categories using white space, lines, icons, or different background colors.

  • Ensured courtesy links were easily accessible but not in the way of product browsing.

    
    

• Why It Works:

  • This separation reduces distractions and keeps the main navigation focused on products, which improves the browsing experience.

  • Courtesy navigation remains easy to find, ensuring users can still access account or support features without disrupting their shopping flow.

Search Results Visibility: Making Results Easy to Spot

The total number of search results was difficult to see due to small font size and lack of visual emphasis. Users struggled to gauge how many products matched their query, impacting their browsing efficiency. 

Solution: Enhanced Visibility

• Increased Font Size & Contrast: Made the result count larger and used a more noticeable color for emphasis.

• Added White Space: Separated the result count from other elements to reduce visual clutter.

• Positioning for Clarity: Placed the result count near the search bar or at the top of the product list for immediate visibility.

  
  

Why It Works:

• Helps users quickly understand search scope and refine queries if needed.

• Reduces frustration by providing clear feedback on search performance.

Search Autocomplete: Enhancing Search Usability

Limited or no query suggestions made it harder for users to find products efficiently. Users had to type full queries manually, increasing the chance of errors or missed results.

Solution: Implemented Autocomplete for Search Queries

• Product and Category Suggestions: Displayed relevant product names and categories as users typed.

• Error Prevention: Included misspelling corrections and alternative suggestions.

• Exploration & Guidance: Suggested popular searches, product categories, and related keywords to help users discover more options.

  
  

Why It Works:

• Speeds up the search process by reducing manual input.

• Helps users find relevant products faster, even with incomplete or misspelled queries.

• Encourages product discovery, leading to better engagement and conversions.