Butte College • 2 min read

Search for Classes

A mobile redesign with no rebuild budget: 400% more mobile class searches and 88% fewer support tickets.

400%

More mobile class searches

Increase in students searching for classes on mobile devices

88%

Fewer support tickets

For the Search for Classes tool

17.2%

Lower bounce rate

On the Search for Classes tool

Role: Webmaster: UX design and front-end development
Timeline: Designed fall 2019, launched spring 2020
Team: Department of one, working across departments
Constraint: No budget to rebuild the tool

In 2019, more than half of Butte College’s web visitors were on mobile, but fewer than one in ten class searches happened there. As the college’s new webmaster, I spotted the gap in our analytics and took it on without being asked, with under two months until registration.

Challenge

A desktop-only tool

The form and results weren’t built for small screens
Building locations lived in a separate table, not the results
Changing a filter meant starting over from the form

Solution

A mobile-first redesign, not a rebuild

The three filters students use most come first
Meeting times, locations, and open seats appear in the results
Built in CSS and targeted JavaScript on the existing application

Restyle it, don’t rebuild it

With no budget to rebuild, I redesigned what I could change myself.

Mostly that meant CSS, minimal markup changes, and some targeted JavaScript on top of the existing application. The UI kit I had built for the college earlier let me go from paper sketches straight to high-fidelity mockups. Rapid prototypes went to stakeholders, then a coded version to moderated testing with students in a lab, with two rounds of changes before launch.

The original Search for Classes page: a dense desktop form with small dropdowns, text fields, rows of day checkboxes, and red instructional text. — Before: the original Search for Classes tool.

The essentials first, everything else one tap away

Redesigned Search for Classes on desktop: three primary filters with a gold Search Classes button above a results table of meeting times, faculty, availability, and locations. — Term, subject, and location lead; Advanced Search holds the rest. Each result shows meeting time, location, and open seats.

Phone showing the mobile search form: full-width term, subject, and location dropdowns above a Search Classes button. — The essentials first.

Phone showing 120 search results under an Open Search Filters button. — Filters reopen from the results.

Phone showing the search filters with advanced fields for keyword, instructor, and course number. — Advanced search, one tap away.

Results

400%

Increase in students searching for classes on mobile

88%

Decrease in support tickets for the tool

17.2%

Decrease in bounce rate on Search for Classes

It launched in spring 2020, before registration and without a redevelopment budget. Class search started working where students actually were.

What I learned

It was one of my first chances to bring several departments together and take a project from concept to launch.
I had mostly worked at startups and design agencies, so the bureaucracy was new to me. It prepared me well for running projects at SNHU.