Laddawn.com : Enhance search box

High level goals
Phase 1 - Implement autocomplete "as you type" suggestions based on keywords

High level goals

Improve our customers' ability to find products on our site by keyword or dimensions, while preserving and enhancing ability to search by item number (Laddawn SKU, MOD number and customer part numbers).
- An added bonus is that staff may find it easier to locate products - especially new staff who are still learning our lingo, as well as staff who encounter customers requesting products via new and unfamiliar synonyms.
- Enhancements need to be achieved without degrading search speed.
Enable users to not to have to differentiate between content and products, and to search for content using a single search box.
Increase conversion rate. Cause and effect - leading shoppers more directly and quickly to products they're looking for will increase conversion rate.
Learn more. Understand what our customers are really looking for and use that data to optimize website, increase conversion rates and identify demand for new offerings.
User retention. We can create more loyal customers by making search functionality, and the website as a whole, easier for them.

Phase 1 - Implement autocomplete "as you type" suggestions based on keywords

As users type words into the search box, we will match them against keywords associated with product categories. If they type numbers, we will match them to item numbers assigned to specific products. As the user types we will "autocomplete" their search string for them, by displaying matching categories or items as suggestions that the user can select to search on - much in the way Amazon and many other popular sites work.

One of the key principles in human–computer interaction is recognition over recall: the notion that people are better at recognizing things they have previously experienced than they are at recalling them from memory... Auto-complete transforms a recall problem into one of recognition. As you type into the search box, it tries to predict your query based on the characters you have entered. Like a human interpreter mediating between two people speaking different languages, auto-complete facilitates the dialogue between the user and the search application. Source: Designing Search: As-You-Type Suggestions (UX Magazine)

1. Preliminaries

To support the new functionality, we'd like to widen the search box about 25% and replace the current "Go" button with an integrated magnifying glass button:

2. Match data for keyword searches

For keyword searches, we will populate a database with a flat list of individual product category names from our current nested menu structure, and associate them with keywords that when typed, will trigger these categories as suggestions. Keywords will consist of:

Individual words from the "full product category name" (defined below).
Alternate search terms that Marketing has identified for each product category on the basis of Google Analytics data (for example, "trash" for can liners).
Terms from "Level 3" menus (and their alternates) as appropriate. For example, we know mattress bags are made with "low-slip" film; so "low-slip" (and its alternate, "non-slip") will be keywords for mattress bags. (Although most users looking for mattress bags aren't going to lead with low-slip, making the association makes product attributes more discoverable.)

Most if not all keywords have been set up with wildcards (eg "layfl*) in order to be able to recognize them and serve suggestions up as soon as possible to hasten recognition over recall.

We will also match what users type against Laddawn stock numbers, and, if the user is logged in, MOD and customer part numbers for their bill to. If possible, we'd like ship to's customer part numbers to be searchable as well (they are not today). Note: Users may type dimensions; if they happen to match item numbers, we will show the product suggestion; however, supporting search by dimension via the search box will be addressed in the next release. In addition, matching to PO and order numbers will be included in a later release.

(a) Full product category names

We will populate a database with a flat list of individual product category names from our current nested menu structure, with Level 1 and 2 "branches and leaves" concatenated (with discretion) to include most or all components of the product name - for example "Layflat Poly Bags." In some cases, branch words will be redundant or confusing; so we won't include them in the name. However, we will designate these branch terms as keywords for that category. For example:

L1: Poly Bags

L2: Can Liners

> High Density (HD)

> Flat Packed

Will be converted to this full product category name:

High Density (HD) Can Liners, Flat Packed

The words "Poly" and "Bags" don't belong in the full, formal name, but they will be in the list of alternate keywords for this category. So if someone types "HD poly bag," this product category name will be among the matching autocomplete suggestions.

(b) Additional alternate keywords

Alternate keywords will also consist of terms our customers have been typing into the search box (see analysis of Google Analytics); terms from each of the Level 3 menus as appropriate (and their alternates); and common misspellings.

(c) Maintenance

Marketing/Product Management will maintain product category names and alternate keywords using tools to be determined jointly with IT.

3. Entering search terms, showing suggestions and executing searches

As the user types, we will display up to 10 of the most relevant matching suggestions in a list just below the search box; when the matching suggestions exceed 10, the list will become scrollable (not shown in mockups).

(a) Displaying product category names as suggestions

As the user types individual letters, we will match only to keywords that begin with that letter or combination of letters, up until the point at which a keyword is recognized. For example:

As 'L' is typed, show only product category names associated with keywords beginning with L (products associated with Layflat, Lip & Tape, Linear Low Density, etc.)

As 'i' is added to 'L,' show only product category names associated with keywords beginning with Li (products associated with Lip & Tape, Linear Low Density, and not Layflat).

Once enough characters have been typed for us to recognize a keyword, we will display only suggestions that are associated with that keyword. So if the user types out "layflat," autocomplete matches will include every product category name containing or associated with "layflat"; Lip & Tape, etc. will drop out of the list of matching suggestions.

Until the user moves their cursor out of the search field, we will highlight the top suggestion in dark purple.	If they mouse over one of the lower suggestions, we will highlight it in a lighter purple (and remove the highlighting for the top suggestion).

Per best practices, the matching terms in the suggestion will be plain text; all other terms will be bolded.

(b) When multiple terms are entered, the implied Boolean operator is AND

The suggestions will narrow down as more matching terms are typed. For instance, if "bag" is added to "layflat," then layflat tubing will be excluded from the suggestions because we'll be searching for product categories that have "bag" as a keyword. Note also that if "bag" is typed, it will be un-bolded in the suggestions containing it. If there are two fully incompatible terms - for example, "polypropylene" and "print*" - then we won't offer any suggestions, because no product categories will have both "polypro*" AND "print*" as keywords (until such time as we offer printing on polypropylene).

(c) User interface details

If the user moves their cursor over one of the suggestions and clicks on that suggestion, it will replace what's typed in the search box, and execute the search automatically, returning the full listing of stock items for that category.

If the user clicks the magnifying glass or hits enter/return with their typing intact, while suggestions are showing, we will replace what's in the search field with the first suggestion (shown in dark purple) and execute the search (in the example above, we will return the full listing of stock items for the layflat bag category).
If the user clicks enter/return or clicks the magnifying glass button with their typing still intact, and we are not showing any suggestions, we will bypass the widget and display special messaging (see search scenario 5 below).

Note that whatever is in the search box when the search is executed (either the suggestion selected, or the what the user typed if there were no suggestions), will remain in the search box until the user starts another search via the widget, or types over it in the search box.

(d) Enhanced item number searching

For search strings that match item numbers, we will also show suggestions. These will include product dimensions and category name. We will display all matches to the number typed - to illustrate, if the user types "3565," suggestions will include all Laddawn stock items that contain that string, and if the user is logged in, any matching MOD or customer part numbers, including part numbers for ship to customers (with name of ship to in parentheses). These suggestions will have the same UI functionality (hover, select, search execution) as described above for keyword searches. Results described in search scenario 6 below. (If no suggestions are showing, we will invoke search scenario 5.)

(e) All suggestion-based product category and part-number searches will be run through the widget

All searches involving part numbers or product categories will be run through the widget to generate results, with certain exceptions noted. These searches will undergo the current zip code field validation. If the user selects a part number suggestion containing a ship to customer part number, we will overwrite the zip code field with whatever zip code is associated with that ship to customer (or location tag at the time of tagging).

(If and when we implement content searches - we will bypass the zip validation and widget, to display the opened footer content. For example, if the user types "jobs" or careers" and we've associated those terms with our Careers footer content, and the user selects the content suggestion, we will display the opened footer content when they select that suggestion without any prompting for zip code.)

4. Search scenarios and corresponding results designs

Scenario 1 - user chooses suggestion that matches category we stock, and which we make

For example, "Layflat Poly Bags" - we stock them, but we can make them in custom sizes, materials, etc. Our results messaging should mention our custom capabilities, without implying the results are in some way deficient.

Scenario 1 results today (via widget)

Proposed

Revised results heading - references suggestion chosen, if search done via search box.
Revised custom capabilities message, placed after the first three results on first page, and on each page of paginated results thereafter - after the first three results, or at the end of the results if there are only one or two results on subsequent pages.
NOTE: If the same broad search is done via the widget, or a search with some or all dimensions, heading will be "Results."

Scenario 2 - user chooses suggestion that matches category we stock, but cannot be customized

For example, "Saddle Pack Deli Bags" or "Food Service Polypro Layflat" - we stock them, but we do not make them in custom sizes or materials.

Scenario 2 results today (via widget)

Proposed

If the user runs the same search via the widget, the heading will just be "Results." Note: The shade for highlighting of the "Food service..." suggestion below should be the lighter shade.

Scenario 3 - user searching for category we make, but do not stock

For example, "Gusseted Tubing" - we cannot provide any results without full dimensions (width, depth and gauge). We need to convey that we can make this product, but also that we need the user to provide more detail via the widget.

Scenario 3 results today (via widget)

Proposed

When user types "Gusseted" in search box, and selects "Gusseted Tubing" suggestion, these two actions will occur:

We execute selection of Tubing & Sleeves > Gusseted Tubing in widget
We place cursor in width field (with focus). Tooltip with instructions appears. (If the user leaves that field, and either mouses back over it or clicks in it, tooltip reappears.)

It ends there. We do not run a Find. The user must enter complete dimensions and click Find.

~~Note:~~

~~If user starts in widget, and manually selects Tubing & Sleeves > Gusseted Tubing, we will not do anything automatic with their cursor or display a tooltip directing them to provide dimensions.~~
~~But if they click Find, without having entered complete dimensions, we will not show anything in the results space.~~
~~Instead, we will invoke the same action described in step 2 above, placing the cursor in the first dimension field that is not filled in and show the tooltip.~~

Text above is crossed out b/c we decided on 6/30/17 for sake of expediency to keep widget searches same as search box for these categories. - SP

Scenario 4 - user chooses suggestion that matches a level 3 option (material, additive, color, printing, venting, and some packaging options)

Today, you cannot open any of the level three menus unless a category is first selected; printing and venting also require complete dimensions. And for materials & additives, color, and some packaging options - even if you pick a product, then a category, and then a choice from one or more of those 3 menus, if you do not enter dimensions, we will not return any matches when you click Find (though you may get YMACs). For example, if the user wants "Low Slip" - we cannot provide matching results without a product category and complete dimensions for that category, and we are not, in this release, supporting searches that combine level 1 and 2 product keywords with level 3 keywords. Nevertheless, we do want to ensure that users who type these terms know that we do have these capabilities for customization, and generate appropriate messaging within the suggestions and in the results. We also want to expose products associated with specific Level 3 attributes.

Scenario 4 results today

Proposed

No equivalent.

(We've chosen to illustrate this with an example that may be more complicated than most searches involving level 3 terms in order to kill two birds.)

User types a portion of a level 3 term - for example, "low." They will see:
1. any product categories associated with those level three terms (can liners for LLD and mattress bags for low-slip). These will behave the same as suggestions in scenarios above (they're clickable, change appearance on mouseover, etc.
2. a canned message for each level 3 term that matches (in this example, low-slip and LLD), which have different gray shading for default view and mouseover.

2. At this juncture, the user may:

1. See the canned messages and abandon their typing and move to the widget to follow the instructions; the search box search is over.
2. Select one of the two product categories shown. This will run a product category search (scenarios 1, 2 or 3 above as the case may be with whatever product suggestions are showing).
3. Hit return or click the magnifying glass icon with their typing intact. We will assume they are looking for the top suggestion (in this example, LLD Can Liners).
4. Click on one of the canned messages. (What happens next explained in section 4 below.)
5. Keep typing terms to narrow their search.

3. Let's say the user opts to keep typing and types "slip." The suggestions will then narrow down to whatever canned level 3 suggestions and product categories still match.

At this juncture, the user may:

1. See the static message and abandon their typing and move to the widget to follow the instructions; the search box search is over.
2. Select the product category shown. This will run a product category search (search scenario 1 here for mattress bags).
3. Hit return or click the magnifying glass icon with their typing intact. We will assume they are looking for the top suggestion (in this example, Mattress Bags).
4. Click on the last remaining canned message. (What happens next explained in section 4 below.)
5. Keep typing terms to narrow their search. (At this point, if they keep typing they could end up with no suggestions showing. If that's the case, and they hit return or click magnifying glass, they will end up in scenario 5 (no results).)

4. Let's say the user selects the Low Slip canned message. The typing in the box will be replaced with the Level 3 name - in this example "Low Slip Film." We will run a search that bypasses the widget, and display the following formulaic message (which will be in our product name/keyword database):

Need <level 3 attribute>? We've got that.
But we need a little more info. Please use Shop above to:
Select a Product
Choose a Category
Add <level 3 attribute> from the <level 3 menu lozenge> menu.
Learn more about <level 3 attribute>.

The "learn more" link will only be present when footer (and blog?) content exists (also to be part of our keyword/product database). We might want the link to reference the whole menu v. the specific attribute - i.e., "Learn more about materials and additives"; Marketing needs to map all of these out to the existing content we have and make a determination.

Note regarding Level 3 search terms: We discussed taking this type of matching further, by associating level 3 terms with each other if we allow combinations of the two attributes in the widget - for example, making metallocene a keyword for non-slip and vice versa (because it's possible to combine both). That way, if the user types "non-slip metallocene", we could serve up two static suggestions (or a combo static suggestion). But all sorts of complications arose that put us on a slippery slope, and are therefore beyond the scope of this release. We've decided to forego the extra keyword setup, and only show the static suggestion matching the first term - so if "low slip metallocene" is typed, we show only the low slip static suggestion) and only products matching the first term (mattress bags and not ice bags).

Scenario 5 - user searches on their typing, and there are no suggestions showing

If the user clicks the search button with their typing still intact, and there are no suggestions showing, because ...

They've typed a term for which we have no keyword match - for example, gibberish like "djkfjdkfjdk"; misspellings we haven't yet populated our keyword database with; or terms for things we simply do not sell or which are not associated with what we sell - for example, "Clorox."
They've typed two incompatible terms - for example, "printed" + "polypropylene" (each on its own would show suggestions, but when combined suggestions will disappear, because of the Boolean "AND" operator).

...we will execute a search that bypasses the widget, and display messaging in the Results container area, offering suggestions for a successful search.

Scenario 5 results today	Proposed
No true equivalent.

Scenario 6 - exact match as a result of a widget search, or a search box item number search

For searches done via widget or searches done either via widget or search box, that produce one exact match, the results heading will simply be "Results"

Scenario 6 results today	Proposed
	(a) Results for search via widget (shown) or item number in search box producing one exact MOD match - numbered (shown) or fresh. (b) Results for search via widget or item number in search box (shown) producing one exact stock match.

UPDATE, 7/26/17; REVISED 7/29/17

Segmented suggestions and suggestion sequencing

Segment suggestions into the following groups, with subheadings, and always** present the groups in this order:

Product Categories
Articles (footer content and blog posts)
Items (specific stock items, MODs and stock/mod with customer part numbers)

**As discussed with John, if there are specific items (Products) that current logic dictates bubbling up to the top, then they will appear above the segmented groupings, without a subheading. Alternatively, if numbers are typed, the "Products" group moves to the top, followed by Product Categories (a small subset - Lip & Tape have numbers in the titles) and Articles (few if any of these will have numbers in the titles - but it could happen). I prefer the former option to the latter. -SP

Please suppress headings when the segment is empty. For example, if you type "Interview" and the only matching suggestions are blog posts then show only the "Articles" group. And if you start typing an item number or dimensions, the only segment showing will be "Products" (the exception being any categories that include numbers, like Lip & Tape - but even then, after typing 1, 2, 3, ). But if you type terms that match product categories, there's a good chance it will match a blog content and items, so you are likely to see all three.

DRAFT mockup

Please note that I am not suggesting the menu layout change to expose more suggestions, I just wanted to show the way some real data would be grouped as you scrolled through it.	Inspired a little by Grainger

Scenario 7 - content search results

When the user selects a suggestion from "Articles" and it is a link to blog.laddawn.com, please bypass the zip code validation and present a link to the blog post in the results area as shown below. Please include the URL (also hyperlinked) and the blog page's meta description below the blog title. Include symbol for external link to the right of the blog title.

Clicking the link will open the article within a new tab. (Selection of footer suggestions is already spec'd in ticket: 30632, Enhanced search - please implement footer content keywords/suggestions

Option 1 - leverage existing layout to the extent possible

It would be nice if we could extend the gray background out to the right, but that is probably problematic to code.

Option 2 - have the results heading double as the link to the content

This eliminates the gray background but is also probably problematic to code? I think it looks better but may be a weird thing to do anyway?

(OLD) Questions about the above functionality

(1) Ordering the suggestions shown. Some terms (e.g. "bag," until additional terms are typed) will have dozens of matching suggestions. We've said we'll cap suggestions at eight, but how will we prioritize them? Autocomplete suggestions should be ranked by unit sales, from highest to lowest.

((Based on "relevance" as determined by some sort of common matching algorithm, or based on our own predetermined ranking by product popularity?) Still unclear on exactly how we program this to happen and what logic Marketing needs to supply in what form. -SP))

Laddawn.com : Enhance search box

High level goals

Phase 1 - Implement autocomplete "as you type" suggestions based on keywords

1. Preliminaries

2. Match data for keyword searches

(a) Full product category names

(b) Additional alternate keywords

(c) Maintenance

3. Entering search terms, showing suggestions and executing searches

(a) Displaying product category names as suggestions

(b) When multiple terms are entered, the implied Boolean operator is AND

(c) User interface details

(d) Enhanced item number searching

4. Search scenarios and corresponding results designs

Scenario 1 - user chooses suggestion that matches category we stock, and which we make

Scenario 2 - user chooses suggestion that matches category we stock, but cannot be customized

Scenario 3 - user searching for category we make, but do not stock

Scenario 4 - user chooses suggestion that matches a level 3 option (material, additive, color, printing, venting, and some packaging options)

Scenario 5 - user searches on their typing, and there are no suggestions showing

Scenario 6 - exact match as a result of a widget search, or a search box item number search

UPDATE, 7/26/17; REVISED 7/29/17

Segmented suggestions and suggestion sequencing

DRAFT mockup

Scenario 7 - content search results

Option 1 - leverage existing layout to the extent possible

Option 2 - have the results heading double as the link to the content

(OLD) Questions about the above functionality

Attachments: