Revamping admissions page for University of Florida
in order to align with enrollment and student support needs
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.
Problem Breif
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.
Why is this important to the college?
Context
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.
So...
How might we create an experience to guide more students toward enrollment, and also improves the quality of academic support for current students?
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.
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.
→View Live Website
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.
Accomplishments
- Designed dashboard functions that increases efficiency of managing inventory for small businesses
- Hosted weekly design critique to make sure that designers are in locked steps and seek feedback internally before design critique
- Collaborated with PMs, developers in the design process and implementation
- Managed the design hand-off documentation, established design library for B2B dashboard
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.
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 using 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.
Finally, let me show you what have changed...
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
