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.
The page was littered with SEO text, banners, ads, brand promotions, cross-sells and a list of thousands of printer brands.
Users were using the site's main search box to try to find the ink they wanted. This was problematic because the “Save Your Printer” feature only worked if the user identified his printer via the 3 selects.
Plus, the page was so long that when the results were returned, they were all below the fold. Many users thought their search had failed.
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.
Again, users were attracted to the search boxes.
Still, users were attracted to the search boxes!
We took these designs to the usability lab, and a marketing researcher came back with the finding that the search boxes were "too prominent."
When confronted with 2 call-to-action buttons, users chose the one they were most familiar with and was easiest to interpret: Go.
The design who had last been working on this project left the company and I was tasked with taking it over the finish line.
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.
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.
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.
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.
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.
During A/B testing, the redesigned page showed a 3% lift in conversions, which translates to additional sales of
$1–$20 million annually
Copyright © 2022 Angy - All Rights Reserved.