Be Good Not Bad by Brian Warren

Tagboard Case Study: Search Results


We set out to redesign the search results on to solve a number of problems that had crept into the page. The search results had become a bit of a dead end for users, and we wanted to give them a clear path forward. Also, the search results didn’t show very many results, and we had a sidebar that was causing confusion and not helping people accomplish the goals they were setting out to do when searching the site.

Step 1: Collaborative Wireframes

We had each of our designers, including myself, spend some time mocking up some low-fidelity wireframes. We gathered together and strategized a plan based on the best ideas from the group.

Tagboard Search WireframesWe identified a few key ideas from these designs we wanted to incorporate into the final version:

  1. Full-width Design
  2. Call-to-action banner below results
  3. Pop-down menu with details & stats

Step 2: Visual Design

Next, I started mocking up the design, in this case going straight to code. The first rough prototype is below.

Tagboard Search Prototype

Step 3: Refinement

This needed lots of refinement, so we brought it in front of the stakeholders at the company to pitch it and get feedback. After a few rounds of refinement and rapid rounds of feedback, we had something that met the goals of this page.

Tagboard Search Final (Before & After)
Roles: strategy, UX, visual design, front-end development