Return to top
Case Study 2

Filter Redesign

Role: UX / UI Designer

Tools: Photoshop

Problem: The original filter on Code Fellows’ course calendar sas becoming bloated and inefficient with the ever-expanding course offerings. Code Fellows wanted a streamlined way for prospective and current students to navigate and filter the list of upcoming courses that reduced clicks and was easier to use.

Discover

The original filter on Code Fellows’ course calendar was becoming bloated and inefficient with the everexpanding course offerings. Code Fellows wanted a streamlined way for prospective and current students to navigate and filter the list of upcoming courses that reduced clicks and was easier to use.

Goal

The filter needed to be simplified so the user only needed approximately three clicks to display only the upcoming courses they wanted to see.

User Research

Method
  • User interviews with Admissions and Operations teams
  • Users observations with these team members to see how they use the filter to navigate to a specific course on the calendar

Insights

Findings
  • The filter took +10 clicks to find specific courses
  • New filter options had to be added manually
  • Unscheduled courses could still be selected in the filter, displaying an empty page
Solutions
  • Group courses by level to replace the “experience level” section
  • Load page with boxes unchecked, so users select the option for the courses they want to see rather than deselect the options they don’t want to see
  • Generate filter options based on what courses were scheduled, so that the filter never included courses that weren’t available and didn’t require manual updating

Prototype

Based on user research, I created a prototype of the new filter with the following changes:

Additions
  • Add “Clear Filters” button
  • Group courses by levels
  • Hide subfilters when parent filter is unchecked
Subtractions
  • Remove “Cities” option since courses are now only offered in Seattle
  • Move “Experience Level” detail to parent course title

Launch

The new filter is much shorter and cleaner. It is reduced to three categories and shortens the user’s search to just a few clicks.

Key Learnings
  • Interview and observe several different types of users to identify the different goals users have when using the product
  • If possible, discuss constraints and possibilities with developers early to reveal technical solutions that may not have been apparent during the planning phase