The University of Florida offers over 500 degree and certificate programs across its many colleges and departments. But it’s surprisingly difficult to find basic information about these programs. This project is my proposed redesign of UF’s website to make it easier for prospective students and their families to discover UF’s academic programs.
Background
I was really surprised. While their academic program offerings are staggeringly extensive (500+ degree and certificate programs across 16 colleges and 87 schools and departments) — and prestigious (UF is currently ranked as the sixth-best public university, according to US News and World Report), it’s really difficult to explore their academic programs on UF’s website.
Let’s make that a problem statement
How can we redesign the website for the University of Florida to make searching academic programs easier and more intuitive?
My solution, in a nutshell
My mobile-first redesign includes:
- a straightforward search and filter feature for academic programs;
- a design template for easily browsed, high-level previews of academic programs;
- a redesigned and simplified landing page for Academic programs; and
- a redesigned and simplified top-level navigation.
Approach: Understanding the problem
I started with a heuristic analysis, focusing on the pain points for a prospective student. I have been this user, so it was both familiar and somewhat personal. I also performed a competitive analysis, surveying other university websites and identifying examples that afforded users a straightforward search and filter interaction.
Pro-tip: Figma worked really well for me at this stage for note-taking. Click here to see the Figma project file.
I discovered that it took five taps/clicks on my phone to reach a searchable list of academic programs. What’s worse, the path is not intuitive, due to confusingly similar choices (“programs” vs. “courses” vs. “catalog”?) and multiple levels of navigation. Worse still, the path is not equivalent across program levels (as shown in the user flow below, the catalog defaults to Undergraduate). And worst of all, there is no searchable list of graduate-level programs (as shown by the crossed out path in the flow diagram).
User flow reimagined
My redesigned user flow prioritizes the prospective student and integrates program descriptions at all degree levels. This flow also reduces clutter and ambiguity. You’re there in two mobile taps.
Approach: Visual Design
I began with low fidelity wireframes in Balsamiq, based on my redesigned user flow (you can download them here). I took cues in layout and interaction from other sites that are mobile-responsive, easy to browse and quickly direct the user to a call to action, e.g., find more information, apply, contact the department, etc.
For styling and design of UI elements, I created alternate moodboards that aligned with a selection of tone words from UF’s official style guide. The goal was to adopt a distinctive, modern style that adapts UI elements familiar from other sites, but remains true to UF’s existing branding. This included the logo and primary color palette, which cannot be changed.
I drew primary inspiration from the style and simplicity of interaction of the website of the University of Central Florida. In particular, I adopted a similar layout and typography. For clarity and brevity, I adopted an accordion-style element for program details. I also took stylistic inspiration for the search functionality from online shopping, such as this one when I was refreshing my supply of snappy men’s briefs.
I developed a style guide based on these recommendations, including extensive guidelines for imagery. I had employee access to promotional photography, which made it easy to find authentic and highly specific photos.
Mockups and prototype
Check out the images below for a side-by-side comparison between the University of Florida’s actual website and my proposed redesign. Also, view the final prototype in action here.
I also developed a mockup for each screen at tablet and desktop breakpoints.
Final words
This project was a success on multiple fronts. It gave me the opportunity to focus on visual design, which I had found intimidating before. In particular, I improved my facility with Adobe XD and made my first efforts in Photoshop. Also, it reinforced that the earlier stages of design, including the research, user flows and wireframing, are my wheelhouse.
In the future, this project would require extensive coordination and content generation across the university’s colleges and departments. While I do not know the feasibility of this effort, I think I have created an appealing prototype that would spark a lively conversation in a networking session with anyone on UF’s UX/web design team.
I welcome your feedback and would love to chat about this or other UX opportunities. Thank you for reading!
This was a student project, completed as part of the UI Specialization for the UX Immersion program offered online from CareerFoundry. With gratitude to CareerFoundry mentor, Alex Tostado, for feedback, guidance and encouragement! ¡Muchísimas gracias!
