Enhanced Mobile Search Filters - Grainger Apps

Optimized the filter attribute values with new layouts and features to improve filter option comprehension and facilitate filter selection. Customers could now tackle very long filter lists by adding searching capabilities and viewing two-column formatting. Visual points of reference were added to clarify ambiguous or technical product attributes.

Platforms:

 

Design Challenges

  • Analytics indicated low interaction with filters for refining a search
  • Customer feedback identified usability issues with filter options and finding desired selections in long lists
  • Many highly technical filter option terms were not well understood by non-specialized users

Opportunities

  • Provide contextual supporting visuals to increase filter option comprehension for users
  • Introduce new layouts and functionality that optimize for product selection from long lists of filter options

How I Made a Difference

Decision Tree

Outlined clear guidelines to clarify which type of filter enhancement to employ

Decision Tree for Filter Search vs Table Layout

Decision Tree for Filter Search vs Table Layout

Design Guide

Documented rules and guidelines to indicate when particular search filter enhancements were and were not appropriate for full site and mobile experiences

Excerpt from Design Guide

Excerpt from Design Guide


Competitor Analysis

Surveyed over 45 applications from a variety of competitors and out-of-industry examples to identify best practices and new benchmarks. Few instances of innovation in filter design and functionality were observed

Excerpt from Competitor Analysis

Excerpt from Competitor Analysis

 

Detailed Design

Documented and maintained functional and interaction specs for all mobile platforms including iOS (tablet and mobile), Android, and mWeb

Excepts from Filter Enhancements Functional and Interaction Specs (Search and Table Layout)

Excepts from Filter Enhancements Functional and Interaction Specs (Search and Table Layout)


Prototype Testing

Tested prototype variations in field with real customers. Results influenced final functionality and visual design

Scalability

Accounted for scalablilty of filter designs to deliver a consistent experience across all mobile platforms

Filter Search (Mobile App)

Filter Search (Mobile App)

 
Reference Image (Mobile App)

Reference Image (Mobile App)

Table View (Mobile App)

Table View (Mobile App)

 
Visual Filters (Mobile App)

Visual Filters (Mobile App)

 

Tablet Design

 
Filter Search (Tablet App)

Filter Search (Tablet App)

 
 
 
Reference Image (Table App)

Reference Image (Table App)

 
 
 
Table View (Tablet App)

Table View (Tablet App)

 
 
 
Visual Filters (Tablet App)

Visual Filters (Tablet App)

 

Outcomes

  • 28% increase in filter engagement
  • 17% increase in conversion for people who engaged with filters on updated category pages
  • V2.0 - Extended into second wave of enhancements to optimize for different filter types or more interactive solutions
Direct Visual Association

Direct Visual Association

Nested selection options

Nested selection options

Samples of concept work for second round of filter enhancements