Testing Our Way to Success
Office Depot's Ink & Toner Finder is one of the most high value pages on the site. Over the years, it had become more and more cluttered.
OD sells $9 million worth of ink per MONTH from this page alone.
Prior Attempts
Left-to-Right
Users were attracted to the search boxes.
While the Ink & Toner search box was more accurate than the main search box, results were not ideal when compared to the Finder.
Side-by-Side
Again, users were attracted to the search boxes.
Left-to-Right + Stacked
Still, users were attracted to the search boxes!
Too Many CTAs
When confronted with 2 call-to-action buttons, users chose the one they were most familiar with and was easiest to interpret: Go.
MY FINAL ITERATION
One Clear CTA
Blue buttons are used for CTAs throughout the site. Design principles tell us that there should be only 1 call-to-action on a page. By removing the competing Go button from the search field, the Select a Brand dropdown finally was able to capture users’ attention.
Judicious Use of Animation
By using animation thoughtfully, we were able to move the user past the ads and brand promos to the results of their filtered search. After the user hit Return, or selected a printer from the final dropdown, the page is auto-scrolled to the results area.
Reduced Cognitive Load
With the noise and clutter of the rest of the page, most of which was non-negotiable (we’ve all been there right?), I attempted to make the Finder as visually simple as possible by making the 2nd and 3rd selects very faint, so they didn't look like disabled buttons.
Either | Or
I bumped up the prominence of the divider line and the "OR" to provide clear definition so that it was more clear that there were 2 different ways for user to search for their ink.
Titles to Add Clarity
I added titles to the 2 sides in hopes it would add further clarity. It had the added benefit of reducing the words needed insides the selects.
