UM-Dearborn Filterable Program Listings

Desktop screenshot of UM-Dearborn filterable program listings page

Overview

The university is updating its program pages in order to improve and standardize program content across the website to effectively appeal and communicate to prospective students. Intercept surveys I ran on the website last year confirmed that learning about academic programs is a top task for prospective students. Program pages are also in the top 250 pages viewed on the UM-Dearborn website. Program listings would leverage taxonomy to tag, sort and filter to help students find what they’re looking for and allow content to surface in multiple areas of the website.

Problem statement: How can we make it easier for prospective and current students to find and compare programs?

Role

UX/UI Designer

Methods/Deliverables

Secondary Research, Benchmarking Analysis, Intercept Surveys, Wireframes, High-fidelity Mockups, Interactive Prototype

Role / Activities

I was responsible for UX research and the UI design for the filterable program listings page. I completed benchmarking research of similar pages and functionality on other university sites. I developed wireframes and high-fidelity mockups and an interactive InVision prototype that incorporated visual elements from the program page designs provided previously by a third-party vendor for consistency.

Interactive prototypes help stakeholders understand functionality in a simple and approachable way.

Benchmarking Research

Benchmarking of other university websites (blurred for privacy)
Blurred

Project Details / Process

National research shows prospective students often enter college undecided on a program and would like guidance in determining the right path. Keeping these needs in mind and taking inspiration from several other university sites that allowed prospective students to find programs that match their interests or personality traits I explored an option for filtering programs based on area of interest.

Wireframe Examples
Wireframe examples for UM-Dearborn filterable program pages
High Fidelity Mockup Examples
High fidelity examples for UM-Dearborn filterable program pages

Next Steps

If the university moves forward with area-of-interest filtering we would create mobile screens and test with students to ensure it resonates with them to help determine value. We would also work with campus partners to help determine appropriate taxonomy by program for this filter type and then test with prospective students.

Test with representative users to ensure your designs match their goals, needs and expectations.

View Prototype