Web: Search Redesign (Unfinished)
Make it Scannable yet information-dense
Searching is one of the most important things a user can do while using the StudyBlue website. If they find information they need, it helps them do better in school, and the company gets a bit of money in exchange. Win-win.
The search experience needed an update, so I was tasked with conducting a thorough redesign based on industry standards. I surveyed 24 products, taking a total of 126 screenshots to capture various parts of their products. Since (for the most part) they had much larger usability budgets, I studied their work and distilled 15 core patterns out of them.
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
Here are close-up examples of the work, along with written thoughts.
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 search queries and actual complaints that could have been a result of a confusing search UI.
Using those data, our team developed a mental model that became the north star for the project. It turns out that our problem was a result of one of our greatest strengths. StudyBlue is unique in the deep level of tagging it uses. Students could search for flashcards down to the exact professor, and the student who made them. But the tagging hierarchy also made it difficult for the system to know exactly what is most relevant. Some good results got buried, while less relevant ones showed up prominently.
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 of an elevator to show 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.