information architecture
website
wordpress
From Information Overload to Guided Discovery: Simplifying 100+ Program Offerings
App Design
Project
Website Design, UX Design, Front-end Development
What I did
Designed and implemented multi-level filter functions for program offerings, using HTML, CSS and jQuery. Developed a CMS plugin to streamline our workflow.
Timeline
4 months
Team
University of Florida, College of Education | E-learning team
Outcome
2000+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
The Challenge
With 100+ program offerings buried in poor information architecture, potential students couldn't find what they needed, and advisors couldn't help them navigate the chaos.
1. Potential students struggle to locate the programs that interest them, leading to frustration and confusion. This hampers their ability to make informed decisions about their academic futures.
2. Academic advisors also face difficulties navigating the page. They often find it hard to help students explore options or provide guidance on major and minor changes, ultimately affecting the quality of student support.
Understanding the Users
Understanding the Users
The College of Education Admissions page faces a challenge with the disorganized presentation of program offerings, which disrupts the enrollment funnel. Potential students struggle to navigate the page, preventing them from moving forward in the application process, which in turn affects enrollment numbers.
What's wrong with the current admissions page?
1. Unclear hierarchy: It's not immediately clear how the programs are organized or what the differences are between certifications, degrees, and minors.
2. Information overload: Small text and abbreviations that is confusing to visitors.
3.Lack of filtering options: There's no way for users to easily sort or filter programs based on their interests or requirements. Ideally, we need more identifiers for users to reach their intended results.
2. Information overload: Small text and abbreviations that is confusing to visitors.
3.Lack of filtering options: There's no way for users to easily sort or filter programs based on their interests or requirements. Ideally, we need more identifiers for users to reach their intended results.
So...
How might we create an experience to guide more students toward enrollment, and also improves the quality of academic support for current students?
Exploring Solutions
A couple of more proposal before we reached an ideal solution
Firstly, I proposed that we continue use a dropdown menu for filtering since this is the easier option for development. As for the design of the program cards, we want it to come with a short paragraph and color-coded,
But we quickly found out that this might not be ideal.
Students searching for programs required more specific filtering options, such as "degree level" and "program type." Additionally, we needed to highlight the College’s high-ranking online programs due to our strong conversion rates. We realized that without emphasizing online programs, we were missing an important opportunity to attract more prospective students.
This single-level filter could potentially get very long, and will affect the user experience when browsing programs.
During testing, it became clear that the color-coded system wasn’t intuitive for users. The color distinctions weren't obvious enough, leading to confusion and accessibility concerns.
Additionally, the grid layout compressed content, limiting the amount of information we could display about each program.
Additionally, the grid layout compressed content, limiting the amount of information we could display about each program.
The Multi-Filter Solution
In response, we implemented a multi-filter system.
Considering our data structure, we want our approach to allow users to filter programs by multiple criteria—such as degree level, delivery format (e.g., online, hybrid, in-person), and area of study—giving students an opportunity to get a more personalized results. The multi-filter system provided flexibility and addressed both the needs of prospective students and those of academic advisors who assist students in selecting or changing majors and minors.
I tried out 2 patterns of filter, including sidebar filter and a filter bar with addictive pills on top.
The side bar filter would not be ideal since our program offerings are shown on a web page, It might seemed confusing since left hand side bar mostly affects the whole page and is fixed-position.
Filter bar, on the other hand, is flexible for web pages. I tried out using tabs to select categories and another filter option to select the program type.
I also thought about batch-filtering instead of live-filtering; however, given the environment of our website we decided that live-filtering would be functional enough.
Due to the complexity of programs and the data structure, we went with the top filter bar with button filters
We've discussed with our end users and found out a button filter would be intuitive to them and leading to a very straight-forward result.
While the Admissions page has reached a solution that meets our academic advisors' and students' needs, I started thinking about scalability and how we manage our data.
Behind the scenes: System Thinking
What's the problem with the current workflow?
One of the biggest challenges we faced during this project was the lack of a centralized content management system (CMS) for complex information, such as our program offerings. Without a CMS, managing and updating program details across multiple pages became a disjointed and inefficient process. Information could easily become inconsistent, leading to discrepancies across the website. This inconsistency made it difficult for potential students to find accurate program information and created a frustrating experience for academic advisors trying to guide students through their options.
This is what our current workflow looks like...
My proposed workflow...
We worked with our back-end developer to implement a more scalable solution by storing program data in a JSON file. This approach centralized program information in a single location, allowing for easier updates and reducing the risk of discrepancies. The JSON data could be accessed and displayed dynamically across the site, ensuring consistency and saving time on manual updates.This new system not only improved accuracy but also optimized our internal workflow, making it easier for designers and content managers to handle the growing complexity of our program offerings.
I also tried out building a WordPress plugin
We experimented with various ways to manage this program data more effectively using custom post types within WordPress. This method reduced the risk of redundancy in the workflow, streamlined content management, and improved the overall efficiency of managing large amounts of information.
Plugin Demo
This plugin works using short code to call the database. So team members using this plugin could easily access and fetch the program information across our network.
It also supports pre-filtering and displaying different templates. Depends on the needs of the college, we could add in new templates to support any use cases.
It also supports pre-filtering and displaying different templates. Depends on the needs of the college, we could add in new templates to support any use cases.
Before & after
Design Walkthrough
Here's the major difference between the old design and the new design.
Before
- Poor legibility
- Design is not consistent with our branding
- A line of acronyms without any context
After
Before
- Potential students need more filters to narrow down the results
- Dropdowns are harder to navigate when users are browsing the page
After
Reflection & Impact
Results
The redesigned program directory launched in July 2024 and immediately improved the student experience:
20% reduction in time spent searching for programs
Zero support tickets related to finding program information since launch
Positive feedback from academic advisors who now use it as a primary tool during advising sessions
1000+ impressions on the program directory page in the first 3 months
What I Learnd
Sometimes the best solution requires multiple attempts
My initial proposals seemed logical on paper but failed in practice. This taught me the importance of testing early and being willing to kill ideas that don't serve users, even if they're easier to build.
Good design extends beyond the interface
The multi-filter system solved the user-facing problem, but discovering the workflow inefficiency behind the scenes was equally critical. Designing the JSON structure and WordPress plugin wasn't glamorous, but it ensured the solution could scale. This project reinforced that UX design includes the systems that power the experience.
