Web: Search Redesign (Research Phase)

Make it Scannable yet information-dense

Searching is one of our users’ most important goals. They find essential information and learn faster, and the company gets a bit of money in exchange. Win-win.

However, our search experience needed an overhaul. To lay the groundwork for a project of that scale, I surveyed 24 products, exploring the most common industry practices, and distilled 15 core patterns.

The list of patterns may not make perfect sense outside the context of the project, but I will list them here:

• Multi-field search input

• Suggestions in the search box

• Significant area given to filters

• Browse categories

• Category active state

• Interstitial bar between box and results

• Visually modular groupings

• Content preview

• Content tags

• Dedicated page for content/creators

• Take immediate action on results

• Card-like search results

• Search blows away nav

• Linear search results

• Contextual search

I categorized different screen captures and noted aspects that would be relevant for our work.

Identify the problem

Next, I ran baseline usability tests to understand how people were using the current tools. I also worked with our Customer Experience department to gather larger-scale data from the front lines. They offered up valuable anecdotal impressions, along with hundreds of user search-queries and user feedback that could have been a result of a confusing search UI.

After studying those data, our team understood that our problem was the result of one of our greatest strengths. StudyBlue’s repository was extremely well-tagged, but the tagging hierarchy also made it difficult for the system to serve the most relevant results. Some good results got buried, while less relevant ones showed up prominently. Resolving this tagging hierarchy problem became our North Star for the project.

We obviously needed to refine the search algorithm, but as a designer I wanted to make sure users could quickly navigate through layers of relevant results.  I made a fancy diagram to demonstrate our situation.

using new tools

Armed with a clear vision of the problem, along with an arsenal of strong patterns to help solve it, I began designing the new search experience for StudyBlue. Since this involved brand new UI, I wireframed at first, and worked my way up to higher fidelity. As I worked, I chose patterns from the list and incorporated them where they were relevant.

Solutions and upgrades

In order to make it easier for users to scan results, I incorporated previews. Users would no longer have to click to see what a deck contained. Metadata was more scannable, and users could now begin studying directly from the search page.

The system showed results based on categories, but sometimes the best results would be in a lower category. Of course, the ideal solution would have been a more exact algorithm that didn't make users dig. But a temporary solution was to let users to collapse categories, in order to quickly traverse the line of results.

Unfortunately other priorities took precedence and the project was shelved near the finish line. Towards the end, I was working out the final visual refinements.

Looking toward improving it, I would simplify the look. There is a lot of detail, perhaps more than students might find useful in the context of a search. They do not need all the metadata included here.

Interestingly, many of my decisions were validated months later, when a major competitor independently launched a very similar style of search results.

This research and work will still be useful down the road when StudyBlue decides to tackle it again.