Course Hero Search

Skills and tools used:
  • Photoshop
  • InVision
  • HTML5
  • SCSS
  • JavaScript

1

The Goal

Build more of a search-centered experience that would allow users to easily find materials via all products (study documents, flashcards, tutors, and Q&A sessions) and taxonomies (schools, departments, courses, and subjects) available on the site.

2

The Problem

In the previous design, there were several opportunities for improvememnt. A search bar was absent, it was difficult for users to tell the products in the grid apart, and filters in the sidebar couldn't be applied to each of the products in the search results.
1 2 3 4 5

There wasn't a search bar at the top of the page, so users couldn't search again if their results were insufficient.

Sorting buttons were small, difficult to see, and difficult to interact with.

Filters in the sidebar couldn't work effectively because they couldn't be applied to each of the products in the search results.

It was difficult to tell all of the different products in the search results apart.

Pagination links were small and difficult to interact with.

3

Competitor Analysis

I researched existing search result solutions online, and how they could be improved upon.

4

Design Explorations

Since not all taxonomies could be applied to each product, it was necessary to create a hierarchy of filters and prioritize the product filtering over the taxonomy filtering. Additionally, the product thumbnails could be designed to reflect how they would look in the real world.
1 2 3 4

Search bar is always visible in the main header.

Top results display first in order to showcase all of the products available for the search query.

Users have the opportunity to drill down search results in the product of their choice.

Product thumbnails actually look like the real-world product

5

Identify A/B test Variations

In addition to testing this new design against the original, it was also helpful to optimize it by testing different versions and answering some questions we had about the design. One question that the product team had was whether or not a default list view would out-perform a default grid view.

A. GRID VIEW

B. LIST VIEW

6

The Solution

After A/B testing, we found that the default grid view design had out-performed both the original design and the default list-view design.
1 2 3 4 View the Page here

Product filters were given visual hierarchy by being displayed in a button group at the top.

Taxonomy filters that could be applied to the chosen product would populate below the button group.

Document thumbnails were easy to recognize in a 3:4 portrait aspect ratio. Grid view helped to provide a larger preview of the content.

Larger pagination buttons were easier for users to click.

Prev Project Next Project