Project Work Recommendations

Search / Type Ahead

1. Suggest 'search queries' and not (just) auto-results of categories and products
2. Improved sorting of suggestions
3. Synonyms​ and typo-correction for queries
4. Only show products if query contains a full/partial code, or includes a low-level category​
5. Search queries to include search and/or purchase history (cookie, KOB-specific)
6. Make search query persist​ after submission (both main and sticky)
7. Emphasize the search suggestions, not query (bolding)

Out of Scope

• Cirrus Signal-boosting + Endeca (Phase 10)​

PLP Recommendations

1. Filter by availability ('In My Store' and 'In My DC' into a filter​)
2. Autoswitch the results layout to match the user's query (Grid/List)
3. Add search suggestions​
4. Default to SKU-level presentation over Family (Thumbnails should match variation searched for)
5. Display variation information (color/finish, sizes)
6. Change pagination to 'Load More'
7. Display category-specific attributes​
8. Revise list-item information heirarchy (product codes, primary/secondary info, compare, documents, purchase history, select indicators only when filtered, etc. mouse over? gallery images)
9. Create "in-cart" indicator​/mechanism
10. Personalize experience according to KOB
11. Trim filters to 10
12. Remove page refresh on filtering​
13. Add 'Previously Purchased' as a filter​
14. Faceted Search
15. Add category-specific attrbitute sorting
16. Improve filter usability ('fixed filters'?)
17. Add image references to visual filters (ex: thumbnails for colors)
18. Fix bug: Selections and Filters should match
19. Enhance 'Inline-banner' cartridge
20. Display contextual search snippets​

Questions

We want to have these questions answered before we begin design. (Answer each question for PLP and Type Ahead unless otherwise noted).

1. (Competitive Analysis) How do our competitors solve the problem(s)?
   1. See the Competitive Analysis section
   2. What will be different about our product compared with current similar solutions?
2. (Heuristic Evaluation) What are the best practices? Are we following them?
3. (PLP-only) Do people use the PLP for certain types of product (categories) more than others?
   1. eg. faucet and fixtures, not commodities
4. (Task Analysis) What task(s) are our users trying to accomplish?
5. (Overall sentiment) Is the current experience good? Bad? What does it do well? (What do customers like about it?)
6. (Incremental Improvement, Future Enhancements) How can it be improved? (What have customers asked for?)
7. What changes in user behavior will indicate that we have solved a real problem that adds value to our users?
   1. How will we measure success?
8. Does relevancy factors in whether customers purchase the product before?

PLP-Specific

Informational Questions

Sort & Result

1. What sort methods are preferable? (Frequently Purchased, Price, Relevance, etc.)

Product List Items

1. Do types of products factor into what information is important? (eg. 'Size' for a fitting, 'Finish' or 'Center Size' for a faucet)
2. Most important ↔ least important information
   1. Codes
      1. Do customers ever look at product codes (the alt code) while on search results? Why?
   2. Actions
      1. What actions need to be available (Add to Cart, Add to List, Quick View Details, Change Finish/Variation, Compare, etc.)?
   3. Availability
      1. What availability messaging is important?
   4. Indicators
      1. What indicators important? (My List, Purchase History, In cart, etc.)

• Ask Kelly why we use family SKU?
• Analytics for PLP or type-ahead?

Persona

Who are our users?

• User type: T3/T4 
• Page(s): PLP 
• Frequency: Weekly use
• Minimum: 12 times
• Timespan: Over the last 6 months

Questions:

• What types of customers are using Type-Ahead? ... PLP? (roles, job types, industry... etc)
• What are the goals they're trying to achieve?
• What's motivating them to use these features to achieve their goals?

Customer Feedback

What do our users say about the current experience?

Competitive Analysis

How do our competitors solve the problem(s)

Home Depot

https://www.homedepot.com/b/Bath-Bathroom-Faucets-Bathroom-Sink-Faucets-Single-Handle-Bathroom-Sink-Faucets/N-5yc1vZbrg2?NCNI-5&searchRedirect=single+handle+bathroom+sink+faucet&semanticToken=200r200000+%3E++st%3A%7Bsingle+handle+bathroom+sink+faucet%7D%3Ast+cnn%3A%7B2%3A0%7D+cnr%3A%7B8%3A0%7D+cnb%3A%7B9%3A0%7D+ct%3A%7Bsingle+handle+bathroom+sink+faucet%7D%3Act+tgr%3A%7BNo+stage+info%7D+qu%3A%7Bsingle+handle+bathroom+sink+faucet%7D%3Aqu

Grainger

Search

• Suggestions
• Product categories
• Brands
• Product results where you can directly add to cart

PLP/Search Results Page

• Results are filterable
• Previously Purchased
• Categories
• Availability
• Brand
• Price
• Shop by
• Ratings
• Product specific filters
• Sort by: top sellers, brands, price
• Help us improve this page
• Check boxes for filters
• List view or table view
• Can search individual filters
• View more available after six options
• View more at bottom

HD Supply

Search

• Suggestions in different departments
• Suggestions based on words
• Recent searchers
• Show recommended products
• Add directly to cart

PLP/Search Results Page

• Can Print and email from this page
• Sort by: relevance, brand, price, top sellers, country of origin
• List vs Grid view (default)
• Compare feature
• Relevant check box filters
• Show more for filters are shown with five or more items listed
• Most filters are collapsed
• Has pagination
• Has cartridges under the results: Customers who views items you browsed also viewed, related searches, related products

Motion Industries

Search

• Product categories
• Brands
• Shows previously results
• Product results where you can directly add to cart

PLP/Search Results Page

• Can search within results
• PLP has categories

Home Depot

PLP/Search Results Page

• Sticky and expandable filter section

Best Buy

Search

• Left column hover affects products shown in right hand column

Heuristic Evaluation

What are best practices? Are we following them?

See our guidelines page for a starting point on best practices.

Product List Findings

1. Do types of products factor into what information is important? (eg. 'Size' for a fitting, 'Finish' or 'Center Size' for a faucet)
   • Yes, present the user with sufficient product information (category specific) to adequately assess a product’s suitability (to their unique needs), and enable the user to get an overview of the product list (i.e. their available options) and compare products of interest to one another. - Baymard
2. What is the most important ↔ least important information?
   • In order to provide the user with direct insight into product aspects they’ve expressed an interest in, sites must dynamically include product specifications (i.e., the “product aspects”) based on the user’s applied filters and sorting (i.e., the “user’s interests”) - Baymard
3. What product codes are important?
4. What actions need to be available (Add to Cart, Add to List, Quick View Details, Change Finish/Variation, Compare, etc.)?
   • Common repetitive elements such as “Compare features”, “Wish list”, “Buy buttons”, and “Quick View” don’t contribute any unique insights about each product. These elements may therefore instead be displayed on hover or relegated to the product page, to reduce product list clutter and allow the user to focus on the product details that are unique to each list item. The first and foremost solution to this issue is to thoroughly evaluate which list item elements (text and buttons) are important to users in each specific context while keeping in mind that choosing one list item element will inevitably mean leaving out other elements. - Baymard
   • Quick Views are often symptom treatments for poor product list designs. The subjects were only appreciative of Quick Views in the instances where they solved a problem that was ultimately rooted in an inferior list item design. The key challenge is helping users 1) distinguish Quick Views from product pages, and 2) make sure they don’t accidentally open one when they wanted the other. - Baymard
     • Visually enhance the product page link on Quick View
     • Make the Quick View a gallery, not an intermediary product page
     • Don’t place the Quick View link in the middle of the thumbnail
5. What availability messaging is important?
   • The anticipated delivery date, or delivery date range, should be provided to users directly in the product list. This allows users scanning the product list to see when they’ll actually be able to receive the product. Items that are truly unavailable (i.e., discontinued) should either be removed from product lists or it should be clear to users that the item isn’t available to purchase and heavily demoted in the product list. - Baymard
6. What indicators are important? (Lead Law, Loyalty, My List, Purchase History, etc.)

Visual Findings

1. How important are large product images?
   • Best practices: Users lean heavily on list item thumbnails during product finding for visual recognition, and tend to either ignore or get confused by list items without them. Thumbnails need to be large enough to provide users with sufficient visual information about each product. This is especially true when the product is visually driven (product aesthetics). - Baymard
2. What preference do our users have of List view vs. Grid view?
   • Best practices: Grid View is better for visually-driven product verticals, while a List View is typically more appropriate for spec-driven ones. If the site’s catalog has a mix of the two types of product verticals, both view types should be implemented and (automatically) switched between depending on the user’s current product scope. - Baymard
3. How many products should be 'in view' on screen?
   • Search should therefore load 25-75 products per “page” by default. For product categories, the default number of list items to load per “page” is 50-150 products (fetched in ~20-product sets using the dynamic loading technique described earlier), depending on the type of product being displayed. Aesthetically-driven product verticals should be closer to 150, while spec-driven ones should move toward the lower end of the range. - Baymard
   • To accomplish this with search a “Load more” button should be used, ideally with a dynamic number of results returned based on relevancy scores. On a category page A combination of a “Load more” button and lazy-loading should be used. Display 10–30 products on initial page load and then lazy-load another 10–30 products until reaching 50–100 products – then display a “Load more” button. Once clicked, another 10–30 products are loaded in, resuming the lazy-loading until the next 50–100 products have loaded in, at which point the “Load more” button once again appears. - Baymard

Discovery Meetings

UX Question Ideation

February 28, 2019

Interview w/ Product

March 11, 2019

1. What does success look like for these projects? How will we measure it?
   1. Nicole: Success looks like (addressing customer problems)
      • Search history
        • Storing and tracking what customers have searched for in the past (previous search terms)
      • Extensibility
        • We want to design it so we can scale it with additional features in the future
      • Personalization
        • FY2020
        • Be able to personalize experience based on what you've searched for
      • Signal boosting
        • Machine learning
      • Dimensions
        • Brands
        • Categories
        • Products
   2. Noah: Success looks like
      1. Two users:
         1. Users trying to find a particular product to purchase
            1. They dont necessarily know what the product is, but they know what they're looking for (3/4" copper 90)
            2. Success for this user:
               1. to add the correct product to their cart as quickly as possible
                  1. need to be able to validate that product is correct
         2. Users doing research, may be looking for specs
            1. Maybe looking for a 'toilet' or a 'sink'
2. What are the main things we know about Type Ahead/PLP that you recommend we address in this project?
3. Who are our target user types and what are the specific tasks we want to design around/take into account?
4. Is there anything else we should know before we begin research?
   1. Merchandisers will know how customers search
   2. Customer KOBs search differently
      1. HVAC
         1. searches by SKUs almost as a rule
         2. Use wild card
      2. FFS uses fee codes

Type Ahead

• Nicole: Maybe not business a problem, but industry standards problem
• Nicole: Type Ahead problem statement: Typeahead Redesign Problem Statement
• Matt: We want to start with industry standards, but filter that through our customer's expectations (some of our customers know our SKUs)

Discussion w/ Nicole & Jessica on Type Ahead Personalization

March 13, 2019

• Customers are organized into 'profiles' by
  • KOB segments, and
  • Region
  • Products are often buried based on a customer's region (relevancy ranking)
  • Segementing effects price column
• What impact does Personalization have on Type Ahead?
  • Fire & Fab
    • Never wants to see a toilet or faucet or fans, or lighting in their search
      • Ex: We would want to bury top-level Plumbing results, it wouldn't appear to, say, page 13
    • Only want to see valves, pipes and fittings
    • Collection is excluded from Type Ahead, but Collections are something F&F use extensively
      • They buy a line or products, and products are often organized by 'class'
    • Fire-lock is the #1 collection for F&F

• Navigation ranks by of results returned

• Someone searches for 'schedule c' but you know they are a plumber, so you are going to want to return plastic pipe and tubing that fits that

Type-Ahead Discovery

March 20, 2019

• Project directory

PLP Lucidchart

UX Working Session Meeting Notes

March 27, 2019

Attendees: Matt, Farid, Lina, Dan, Cibonay, Laurie, Nicole, Noah, Percy, Liz, Tim, Drew

Type Ahead

1. Main Search vs Sticky Search
   1. The sticky nav currently does persist the query. However, it does not mirror the main search, resulting in someone typing "faucet" in the sticky search and then typing "chrome" in the main search, they will not be searching for "chrome faucet". Suggestion for the search query 
2. Liz: As you get more into the personalization you are going to need the personalization for the different types of KOBs.
3. Make search query persist - (1, #10)
   1. Note: The sticky nav currently does persist the query. However, it does not mirror the main search, resulting in someone typing "faucet" in the sticky search and then typing "chrome" in the main search, they will not be searching for "chrome faucet"
4. Account for typos - (1)
   1. Additional Suggestion: Make suggested search queries for autocomplete, where hovering over suggestions repopulates the input field with that query.
5. Account for synonyms - (1)
   1. Note: Autocomplete does not have synonyms — regular search does have synonyms.
6. Only show products if query has a sku, or is low-level category search
   1. Note: Ranking or relevance order should be looked at when autocomplete suggestions appear. Currently they are not available.

PLP

• Noah: The list view is a familiar view for our customers.

Search / Type Ahead Recommendations Working List

1. Suggested Search queries and not just auto-results (Categories/Products)​
2. Better sorting on the list items displayed​
3. Account for synonyms​ and typos
4. Only show products if query has a SKU, or is low-level category search​
5. Improve relevancy to include search/purchase history / KOB
   
   1. Limited to the cookie session
6. Make search query persist​
   1. Both main and sticky nav
7. Prioritize the search suggestions, not query (bolding)

Out of Scope

1. Cirrus Signal-boosting + Endeca (Phase 10)​

PLP Recommendations Working List

1. Pull 'In My Store' out of search range box, and into its own clear/easily identifiable filter​
2. Show Grid/List based on rules​
3. Add search suggestions​
4. Default to a SKU-level presentation over a family presentation
5. Display the variation information (if color/finish, show thumbnails, if sizes, TBD), 'More Options' not enough​
6. 'Load More' over pagination​
7. Display category-specific attributes​
8. Remove indicators unless the user is filtering on it (ex: Lead law)​
9. Are Documents Relevant on PLP?​
10. Consider mouse over on product list items for additional information or images, discuss as an alternative to quick view​
11. Remove 'Compare'​
12. Add purchase history indicators​
13. Create "in-cart" indicator​
14. Add gallery for products that have important, multiple images​
15. Minimize relevancy of product code​
16. Personalize / Using Oracle to understand how KOB behaves​
17. Hide more than 10 filters in a list​
18. Remove page refresh on filtering​
19. What experience do we want to focus on?​
20. Add previously purchased as a filter​
21. Filter by status: Available / In My Store​
22. Faceted Search
23. Consider category-specific sorting
24. Consider fixed filters
25. Consider graphical filters where appropriate
26. Selections and Filters should match (bug)
27. Enhance Inline-banner
28. Display contextual search snippets​

Search Results

1. Show Grid/List based on product type (1, 2, 3)
   1. Note: Liz said that some products will have accessories incorporated within the category
2. Add search suggestions (1)
   1. Liz: Make sure we give suggestions relevant to that user's KOB profile
3. 'Load More' over pagination (1)
   1. Consider auto-loading next page/set of results
   2. Note: No real preference either way but agreed to move forward with it
4. SKIPPED TEMP: Consolidate items into family whenever possible (1, #1)

List Items

1. Display the variation information (if color/finish, show thumbnails, if sizes, TBD), 'More Options' not sufficient (1, 2, 3, #1)
   1. Note: We were in agreement to move forward
2. Display category-specific attributes
   1. Note:  
   2. Remove indicators unless the user is filtering on it (ex: Lead law)
   3. Show specific category attributes based on the user's filters
   4. #3 Customer Feedback
3. Display contextual search snippets
   1. Matt: This is where we would add additional information on the search results
4. Remove Documents
   1. Matt: Documents were originally added because customers valued looking up warranties. 
5. Remove 'Compare'
   1. Note: 
6. Add purchase history indicators
   1. Note: 
7. Create "in-cart" indicator
   1. Note: Suggestion to look at this feature not only on PLP but also on PDP
8. Add gallery for products that have important, multiple images
   1. Note: As long as it doesn't add to the page height
9. Consider mouse over on product list items for additional information or images, discuss as an alternative to quick view
   1. Note: 
10. Minimize relevancy of product code
    1. Note: Tim asked for us to consider what elements can be personalized for our KOBs as we solution
    2. Type-ahead HVAC

Filtering

1. Pull 'In My Store' out of search range box, and into its own clear/easily identifiable filter (1, #4)
   1. Note: Concern for removing the top search range box. Tim likes the idea on concept but concerned with going to "All Products" as there are regional products that need to be filtered as well.
   2. Note: When filtering by "In My Store", consider having remaining products not in your store communicated to the user so they know there are more products available that match their search query.
   3. Note: Have "In My Store" selected setting stay active throughout the site.
2. Hide more than 10 filters in a list (#2)
   1. Note:
3. Remove page refresh on filtering (#6)
   1. Note: Noah said that removing a page refresh is a huge win. We need to talk to Isaiah to see if there are technical restrictions on this.
4. Add previously purchased as a filter (#2)
   1. Note:
5. Filter by status (#3)
   1. Note: 

Sorting

• Consider category-specific sorting
  • Note: 

Research Plan - Working Session

4/11/19 9:00 AM

Attendees: Matthew Evert, Farid Mokraoui (Deactivated), Dan Flynn, Drew Palko, Cibonay Russell (Deactivated), Lina Angel (Deactivated)

Goal: To prepare list of questions we want answered to begin the Define stage of design.

To understand how users search, and

To understand what they search for

Research Problem:

• Understand how users find products (products findability).

Objectives:

• Understand how our users are searching for products.
• Identify why they are searching for products and the motivation behind it.
• Identify what products they are searching for.

Questions:

• What are they searching that is causing null search results?
• Do they know the products that they are searching for? Are they knowledgeable about the product or just aware of the product?
• How often are searches performed for yourself or for someone else?
• Think about the last time you purchased a product for the first time, how did you search it for it?
• What terms are being used?
• How do different KOBs search?
• What products do you search for that give you a hard time?
• Can analytics measure the different paths users take during search?

Findings

Search Bar

• Always Persist the User's Search Query on the Results Page - Baymard #346
• Clear Search Settings if the Same Query Is Re-Submitted - Baymard #350

Search Range

• See Search Range section below 
• Improve (TBD by preliminary research)

List Layout

• Number of Items
  • Prominently Display the Total Number of Results - Baymard #377 / Show Total Number of Items in the Currently Displayed Product List - Baymard #531
• List Style
  • Use grid view for visually driven products, list view for spec-driven ones - Baymard #533
  • Thumbnail Sizes Should Reflect the User’s Need for Visual Product Information - Baymard #456
  • Auto-Switch the Results Layout to Match the User’s Query - Baymard #379
• Pagination
  • Search Results Should Use a ‘Load More’ Approach - Baymard #381
    
    • Search should, therefore, load 25-75 products per “page” by default. For product categories, the default number of list items to load per “page” is 50-150 products (fetched in ~20-product sets using the dynamic loading technique described earlier), depending on the type of product being displayed. Aesthetically-driven product verticals should be closer to 150, while spec-driven ones should move toward the lower end of the range. - Baymard #502
    • To accomplish this with search a “Load more” button should be used, ideally with a dynamic number of results returned based on relevancy scores. On a category page, a combination of a “Load more” button and lazy-loading should be used. Display 10–30 products on initial page load and then lazy-load another 10–30 products until reaching 50–100 products – then display a “Load more” button. Once clicked, another 10–30 products are loaded in, resuming the lazy-loading until the next 50–100 products have loaded in, at which point the “Load more” button once again appears. - Baymard #501
•  Loading
• Improve the Perceived Load Time - Baymard #505
• Adjusting ‘Items Per Page’ is Excessive - Baymard #503
• Additional Content
  • Suggest Alternate Queries and Paths - Baymard #358

Sorting

• Diversity-Based ‘Relevance’ Should Be the Default Sort Type - Baymard #510
• Implement Category-Specific Sort Types - Baymard #511
• Avoid Alphabetical Sorting - Baymard #539
• The Sorting Interface Should Be a Drop-Down - Baymard #514

Filtering

• Have Faceted Search - Baymard #376
• Categories in the Sidebar Should Be Selectable and Nested Visually - Baymard #468
• Truncate Filters with 10+ Values - Baymard #470
  • Avoid displaying long lists of sizes that visually overwhelm the user and make them think too hard. (Validately Usability Test Findings)
• Show Number of Matches for Each Filtering Value - Baymard #467
• Hide Dead-End Filtering Values - Baymard #475
• Style Filtering Values as Checkboxes and Links - Baymard #479
• Use Caution With Drop-Down Filtering - Baymard #465
• If You Have Multiple Product Statuses, Allow Users to Filter by Them All - Baymard #417
• Allow User-Defined Ranges for All Numeric Filtering Values - Baymard #416

List Items

General

• Provide the Right Amount of Product Information in a List Item - Baymard #440<<<
• Include Universal and Category-specific attributes
  • Universal
    • (Price and... ) other key Universal Attributes are: product title or type, thumbnail, user ratings, and variations. For lists of search results, contextual search snippets would fall in this category too. - Baymard Article
• Include Product Attributes Consistently Across List Items - Baymard #443
• Combine SKUs Unless Visually Distinct - Baymard #421 <<<
• Consider Indicating Sub-Values of Selected Hierarchical Filters - Baymard #485
• Highlight Any Product Already in the User's Cart - Baymard #484
• Avoid Repetitive List Item Elements - Baymard #530
• Consider Showing Additional List Item Information on Hover - Baymard #526
• Ensure Pathing Is Clear and Consistent on List Items - Baymard #552

Brand

• Consider Including Logo Thumbnails When Brands Are of High Importance - Baymard #444

Image

• Best practices: Users lean heavily on list item thumbnails during product finding for visual recognition and tend to either ignore or get confused by list items without them. Thumbnails need to be large enough to provide users with sufficient visual information about each product. This is especially true when the product is visually driven (product aesthetics). - Baymard #455
• Product Thumbnails Should Match the Variation Searched For - Baymard #386
• List items without thumbnails were often completely ignored, as most of the subjects perceived these products as “incomplete.” - Baymard Article

Title

• Display the full title
• Different Product Attributes in the List Item Should Be Visually Distinct - Baymard #448 <<< Webdisplaynames
• When name, product type, number of items, materials, etc. are all presented as one long product “title” – users have a much more difficult time scanning the list items - Baymard Article

Codes

• ???

Price

• Display ‘Price Per Unit’ For Multi-Quantity Items - Baymard #446
• Prices Should Be Easily Scannable - Baymard #452
• The product price is a fundamental product attribute that ought to be included under all circumstances (and in the few cases where it can’t, some indication of why is typically warranted) - Baymard Article

Refiner

• Always Indicate Essential Product Variations in the List Item - Baymard #450

Actions

• Ability to Add to Cart (TBD by preliminary research)
• Common repetitive elements such as “Compare features”, “Wishlist”, “Buy buttons”, and “Quick View” don’t contribute any unique insights about each product. These elements may therefore instead be displayed on hover or relegated to the product page, to reduce product list clutter and allow the user to focus on the product details that are unique to each list item. The first and foremost solution to this issue is to thoroughly evaluate which list item elements (text and buttons) are important to users in each specific context while keeping in mind that choosing one list item element will inevitably mean leaving out other elements. - Baymard #530
• Quick Views are often symptom treatments for poor product list designs. The subjects were only appreciative of Quick Views in the instances where they solved a problem that was ultimately rooted in an inferior list item design. The key challenge is helping users 1) distinguish Quick Views from product pages, and 2) make sure they don’t accidentally open one when they wanted the other. - Baymard #529
  • Visually enhance the product page link on Quick View
  • Make the Quick View a gallery, not an intermediary product page
  • Don’t place the Quick View link in the middle of the thumbnail
• Ensure Pathing Is Clear and Consistent on List Items - Baymard #552
• Avoid Quick Views - Baymard #529

Availability

• The anticipated delivery date, or delivery date range, should be provided to users directly in the product list. This allows users scanning the product list to see when they’ll actually be able to receive the product. Items that are truly unavailable (i.e., discontinued) should either be removed from product lists or it should be clear to users that the item isn’t available to purchase and heavily demoted in the product list. - Baymard #528
• Display Accurate Availability & Delivery Indicators - Baymard #528 <<< Discontinued, Out of Stock Indicators

Description

• Display Contextual Search Snippets - Baymard #382
• Include List Item Information Based on Applied Filters and Sorting - Baymard #480

Documents

• Remove documents as info element (TBD)

Indicators

• What indicators are important? (Lead Law, Loyalty, My List, Purchase History, etc.)
• Consider Sparsely Highlighting Unique Purchasing Attributes - Baymard #447

Specifications

• In order to provide the user with direct insight into product aspects they’ve expressed an interest in, sites must dynamically include product specifications (i.e., the “product aspects”) based on the user’s applied filters and sorting (i.e., the “user’s interests”) - Baymard #480
• Contextual search result information - Baymard #382
• Numeric Product Specs Need Proper Labels and Units - Baymard #449

Misc

• Update elements to UI Kit standards

Search Range

Validately Study on Search Range

https://validately.com/report/837dbcd9-a59a-4a07-8e70-bd0c739f5bb0

Top Problems

1. Did not self-discover the Search Range tool. Found it only because the test questions prompted them to keep looking. (3 of 5 testers)
2. Did not see the yellow bar explaining that no products were found nearby, so all products were displaying. (3 of 5 testers)
3. Never found the Search Range - said he would go to the Locations Directory to find products nearby (1 of 5 testers)

Jira Tickets

https://ferguson.atlassian.net/browse/FET-628

Firstly, we are using sku.nonstock_stores & sku.stock_stores fields, using like this:
For example, for sku ABC:

• sku.nonstock_stores = 123
• sku.stock_stores = 456

Then we consider sku ABC is InStock in store 456, and NonStock in store 123.

And for the three Search Ranges:

• Nearby Stores: show the products from the stores which associated with the selected branch in Job Board, and show both InStock & NonStock products.
• In My Store: show the skus from the selected store in Job Board, only show InStock skus, and haven't calculated whether the InStock count is greater than 0.
• All Products: All the catalog products should show, both InStock & NonStock products.

https://ferguson.atlassian.net/browse/FET-1247
https://ferguson.atlassian.net/browse/FET-525
https://ferguson.atlassian.net/browse/FET-537
https://ferguson.atlassian.net/browse/FDC-3098

Percy's PLP Pain Points

1. Product List start too far down the page

   1. Depending on browser setting the user can only see one row of products if any at all

2. The user cannot tell the difference between a family or sku

1. This can lead to the user not knowing that some options are a group of products

2. The ONLY indication is “more options shown” in tiny lettering in the corner

3. Web display names are too long

1. This leads to important information about the product being cut off

4. Families do not show what they are differentiated by

1. The user does not know if these products are grouped by size, color, material, etc unless they click into the product

5. It is not clear to the user that they are signed in

1. This can lead to the user thinking that we do not carry a product instead of it just being behind login

6. The format should default be in list view and not column view

1. Important information about the product should also be shown in extra space

7. Most important refiners are not at the top of the refiner option

1. The customer is less likely to go too far down to hunt them down

8. Important refiners default to collapsed view

1. Users have no idea how the can refine until the clink into it

9. Refiner values can take up more than one line if they are too long

1. This takes up valuable space where another refiner is needed

10. Refiner lists are too long

    1. This causes choice paralysis for the user

11. Search range taking up important space that should have products

    1. This should be moved to the side column above refiners

12. A lot of empty space to the right and left

Sorting

https://ferguson.atlassian.net/browse/FET-534

Further Reading

https://baymard.com/blog/list-item-design-ecommerce

46% of e-commerce site have severe usability issues because they display too few product attributes in the product listings.

1. 64% of e-commerce sites impede users ability to compare the product in their list due to inconsistencies in the listed product attributes.
2. 50% of e-commerce sites make it needlessly difficult to scan and read the included product attributes, because it’s all just included as one long “product title”, cramming 2-5 lines full of technical specs.
3. 76% of sites neglect the principles of progressive disclosure, and always display the same amount of information for all product list items, instead of progressively showing extra information for items the user has shown an interest in.

A prerequisite to optimizing how list item information is displayed is to even have the correct information available in the first place.

Research studies have shown that there are two general groups of attributes that should be included in all list items: Universal Attributes and Category-Specific Attributes.

1. Universal Attributes are essential to virtually all products throughout the site and include: Price (and Price Per Unit for multi-quantity units), Product thumbnails, Product title or type, Product variations (colors, sizes, materials, capacity), and User ratings.
2. Category-Specific Attributes are meanwhile unique to each product vertical and can therefore vary from category to category. For example, category-specific specs for toy products can be “Age Rating”, while for smartphones it might be specs like “Screen Size” and “Storage Capacity”, etc.

Including all applicable Universal Attributes and 1-3 Category-Specific Attributes listed for each product list item, was found to strike the best balance between providing the user with just enough information to accurately evaluate and compare the listed products, while at the same time avoiding information overload and intimidating product listings.

The list item is a balancing act: at one hand users need enough information to to be able to make an informed decision about which products to open and which to skip – but at the other hand users need to establish an overview of the products available to them. So while too little information can be highly problematic, so can too much. (Display too little information is the most common issue.)

During testing we’ve observed a simple technique to perform very well for mitigating this list item balancing dilemma: utilizing the mouse hover state to display additional information or images. During our usability study of 19 leading e-commerce sites, this extra layer of hover-enabled textual or visual information was observed to drastically reduce wasteful “pogo-sticking”, where the user heads back and forth between the product list and product pages only to discard irrelevant products.

It is however vital that only secondary product attributes are relegated to a hover-state since users will not be able to compare these specs directly (and won’t be available on touch devices without additional implementation). This should therefore be considered a bonus layer of information provided to the user to help them better determine which of the product list items that initially sparked their interest they should pursue further.

In essence the findings can be summarized quite simply: First, e-commerce sites must ensure their product list items include all Essential Attributes (price, thumbnail, product title or type, variations, and user ratings) along with 1-3 Category-Specific Attributes. Second, with the right list item information in place, e-commerce sites must ensure that the design of this informationallows for:

1. Comparison through Information Consistency – both in terms of what information is included and the sequence in which it is displayed.
2. Scannability through Separate Entities – avoid embedding specs in titles; instead style attributes as separate entities.
3. Overview through Progressive Disclosure – consider utilizing mouse hover to show additional (secondary) item information and possible a new thumbnail (e.g. different product angle).

https://baymard.com/blog/product-listing-information

Users select and reject products based upon the information available about those items in the product list. It, therefore, isn’t all that surprising that during our large scale usability study of Product Lists & Filtering we found poorly selected list item information to be one of the most severe usability issues related to product list navigation.

During testing, we observe that too little or low-relevance list item information is highly problematic because users are unable to adequately assess the listed products when they lack essential information about those items. This led the test subjects to dismiss perfectly relevant products and forced them into unnecessary pogo-sticking between product list and product page – where they had to go back and forth, opening the product page of every single product listing just to learn the very most basic and core attributes of that product; a tiresome exercise that often resulted in the subjects abandoning the site as the friction in locating relevant products simply became too high. Clearly, displaying the right amount and the right kind of information in each list item is paramount to improving the user’s product finding experience.

Achieving a good signal-to-noise ratio in the list item information is key to improving the user’s ability to find the products they are looking for – yet it clearly isn’t easy to achieve. It requires considered curation of the product attributes displayed.

Product list real estate shouldn’t be squandered. Each and every element in the list item should be carefully chosen and presented to give users the best possible conditions for finding and choosing the products that are just right for them. A successful product list design must fulfill two requirements:

• Present the user with sufficient product information to adequately assess a product’s suitability (to their unique needs and desires),
• Enable the user to get an overview of the product list as a whole (i.e. the options available to them), and compare products of interest to one another.

The first requires sufficient product information to be shown for each product while the latter requires a sufficient amount of products being displayed on the user’s screen. This creates a dilemma, as having too much product information will take up real estate resulting in less products per page, which was found to discourage product list exploration during testing. Yet having too many products will make it difficult to display adequate information in each list item, resulting in extensive pogo-sticking.

Product list design therefore isn’t so much a matter of “less is more” as it is one of “just enough is more.” Figuring out which product attributes should be present in the list item and which shouldn’t is naturally highly site-specific and, as such, there are no hard-set rules. A good list item helps the user with just enough information to accurately evaluate which of the items in the list are of relevance to them, and – just as importantly – which items can be skipped. The list item information should furthermore enable the user to compare the relevant items to one another. It’s essentially an exercise in maximizing information scent and product comparability without bloating the product list.

Now, from our research studies we have found that there are two general groups of attributes that should be included in list items: Universal Attributes and Category-Specific Attributes.

Product variations, such as different colors, sizes, materials, looks, etc., is another essential attribute to indicate directly in the list item. Without them, the subjects often rejected products that actually matched what they were looking for simply because they couldn’t see that multiple variations of the item were available and therefore only judged the product on the default variation displayed, without ever realizing that multiple (highly relevant) product variations existed and would be available from the product page.

It’s not all product variations that should be displayed, however. For example, a desk available in different sizes would typically need an indication in the list item explaining that multiple sizes exist, whereas it’s probably less relevant for a shoe list item to indicate that multiple sizes exist as users will assume so due to the nature of the product.

The relevance of products in certain technical categories will be determined almost entirely by the product’s compatibility with another product. This “compatibility information” should therefore be included in the list items so users can identify the products that are relevant to them without having to open the product page of every single item in the list. Taking things a step further, if the user already has the compatibility-dependent product in their cart, the product list items should ideally state whether they are compatible with the item in the user’s cart.

Category-specific attributes are a smart way to provide 1-3 extra pieces of product information that is uniquely relevant to that product’s vertical and thus uniquely helpful to the user in determining whether the item is of relevance to them or not.

E-Commerce User Experience - Vol. 2: Homepages and Category Pages

Previous notes/research:

02/15/19 Quarterly Review Nicole mentioned: 
Type-ahead is the “Dropdown window that shows when searching”.

Changes:

• Search History
• Frequently Purchased
• Add to Cart Option

Some highlights wrote back on 08/2018 after some PLP and PDP researching:

Changes needed:

• PDP unorganized information 
• PDP multiple sizes for a product difficult to use
• PLP Filters
• PLP list

B2B SITE

Features:

• PRODUCT CATALOG:
• Product Detail with rich descriptions, tech specs and image zoom, Manufacturing models, shipping weight, country of origin, etc. 
• Imagery consistent and high-quality
• Use product suggestions / required / related
• Right product in few clicks as possible (Find-ability)
• Search and Navigation: SEO and product find-ability using codes, keywords or descriptions
• Product Categories and Robust filters: Price, model, brand, etc.
• Detailed Availability and quantity available
• ACCOUNT ADMIN: Enabling their customers to become more and more efficient (e.g.: Add Users, Pay Invoices)
• UX: Simplify the buying process for the best possible UX
• HELP: FAQ Questions

Crucial components of a B2B PDP/PLP https://bintime.com/blog/b2b-product-positioning 

• Title: Clear and as close as possible to the manufacturer’s descriptions
• Product Positioning should be clearly mapped out in a usable grid
• Product Information: Feature-based or benefit-based? Include all the info available
• Strong CTA
• Great UX (Avoid broken links or complicated navigation)

Motivations

• A fast and convenient way to order the product or service
• Plenty of information 
• An easy way to get in touch for a quote
• Simplify the buying process for the best possible UX

Tips

• Use product suggestions
• Use Keywords research to discover what the audience is looking for
• Imagery consistent and high-quality
• FAQ Questions
• MAKE SURE YOUR USP is present! (Unique Selling Proposition)

What Best B2B have? https://b2xpartners.com/review-of-the-best-b2b-ecommerce-websites/

General:

• Invest in Customer Experience
• Large complex catalogs but get their customer to the right product in few clicks as possible
• Product content rich and detailed
• Account Management features are enabling their customers to become more and more efficient

Catalog:

1. Search and Navigation: SEO and product find-ability using codes, keywords or descriptions
2. Product Categories and Robust filters: Price, model, brand, etc.
3. Product Detail with rich descriptions, tech specs and image zoom, Manufacturing models, shipping weight, country of origin, etc. 
4. Detailed Availability and quantity available
5. Related Products and Products other customer bought.

Features to Implement in a B2B website https://b2xpartners.com/the-secret-to-b2b-e-commerce/

“B2B Customers come to your website because they have to. It is their job.” 

• Search
• Navigation
• Cross-sell
• User Administration
• Custom Contracts

LINKS:

• https://b2xpartners.com/review-of-the-best-b2b-ecommerce-websites/
• https://www.nngroup.com/articles/b2b-vs-b2c/
• https://baymard.com/product-page
• https://www.smashingmagazine.com/2018/06/placeholder-attribute/
• https://baymard.com/blog/required-optional-form-fields
• http://www.dummies.com/education/language-arts/grammar/how-to-use-commas-in-addresses-and-dates/
• https://baymard.com/blog/list-item-design-ecommerce 
• https://www.theverge.com/2018/6/27/17508728/google-duplex-assistant-reservations-demo
• https://flutter.io/
• https://bintime.com/blog/b2b-product-positioning 
• 3 Tips for Better Product Descriptions on Websites https://www.nngroup.com/articles/product-descriptions/
• The Anatomy of a List Entry https://www.nngroup.com/articles/list-entries/
• Designing for 5 Types of E-Commerce Shoppers https://www.nngroup.com/articles/ecommerce-shoppers
• Users' Pagination Preferences and "View All" https://www.nngroup.com/search/?q=product+listing&searchSubmit=Search