Backcountry.com Site Search 2.0

Previous Site Search

When Backcountry.com and its sister sites moved from Atomz Site Search to Microsoft FAST 2.0, the interface was left unchanged. There were a few fairly obvious opportunities to improve what existed. I was challenged with improving the interface without changing it in a way that required any updates to the data. This would be a strictly visual improvement.

A few of the most obvious issues to me were:

1. Faceted filters laid out across the top of the search results page. Generally users scan quickly across the page, then down the left column. It’s pretty common practice in ecommerce to lay the filters out vertically in this column in order to allow it to be quickly scanned.
2. Tiny product images. In general, customers don’t read a lot of what’s on your website. They scan for keywords and images. When they don’t find what they’re looking for they bounce. However, we were limited by the sizes of images we had available. We only had access to 50px, 100px, 300px, 440px and the full-sized source files. I opted to go with the 300px images and hope to come back to the interface in a future iteration to add size selection.
3. The left navigation. We looked at the data and found out that this was basically useless at this level. If the user searched a specific term, they didn’t seem interested in clicking on a main category link. <3% of visitors clicked the left nav at this level, so it was a real estate waste.
4. Comparisons. Product comparison posed a tough decision. Few searchers ever clicked on it, but those that did converted several times better than those who didn’t. In the end we decided to try to address product comparisons in a future iteration and dropped it from this launch to clear up clutter.
5. Sorting. A lot of people don’t actually know the difference between filtering and sorting. It’s hard for interaction designers to take that on board, but we needed to make the sorting much more obvious than the small links on the right side of the screen.

Initial Pencil Sketching

I’m not a huge fan of jumping into a wireframing or layout program without basically knowing exactly what I want the interface to look like. I normally (with a few exceptions for easy/small changes) go through several rounds of pencil and whiteboard sketching before I settle on the interface and jump into layout. Above is an early sketch of the new search interface components.

Page Layouts

Once I settled on the pencil sketches I had been working through, I laid out the interface. The great thing about sketching is that I had already gotten buy in from the various stakeholders of this project and only did two revisions of this layout.

Prototype

During this time the UX team’s prototyper created a functional prototype that stakeholders could interact with. Prototypes are a fantastic tool for both testing ideas on users and also getting buy in from stakeholders. Unfortunately we didn’t get to test this project, but the prototype helped to finalize the product in everyone’s mind and really aided the communication of the requirements to the developers without the need for heavy documentation.

Final Product

I worked with the creative director to get final designs and layouts created and approved for development. She did an amazing job. The big product images really pop on the page and the interface is clean and easy to scan. We also decided to add a lazy load and get rid of pagination during the design process. This lets users scan and interact with the search results without having to click through links (most only clicked a couple pages deep before re-searching).

Results of this project:

Backcountry.com: http://www.backcountry.com/store/search.html?mv_session_id=knmc4ezt&aff=1&q=ski

Dogfunk.com: http://www.dogfunk.com/dogfunk/search.html?mv_session_id=FqFRaWMZ&q=snowboard

HucknRoll.com: http://www.hucknroll.com/mountainbike/search.html?mv_session_id=C6bhkXqZ&q=bike&x=0&y=0

RealCyclist.com: http://www.realcyclist.com/roadbike/search.html?mv_session_id=2pZXa23f&q=bike&x=0&y=0

DepartmentofGoods.com: http://www.departmentofgoods.com/sales/search.html?mv_session_id=9gSDXXIP&q=ski