Redesigning the University of Florida Website

Redesigning the University of Florida Website

Client
Independent redesign
Project title
Improved user flow and interaction for a university website
Disciplines
Competitive analysisInformation architectureUIResponsive design

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 redesign of UF’s website to make it easier for potential students to discover UF’s academic programs.
image

Role

I worked independently on this redesign, completing all stages of work over two months. I employed Figma for research, Balsamiq for wireframes, Adobe XD for prototyping and Photoshop for mockups. This was a student project, with gratitude to mentor, Alex Tostado, for feedback, guidance and encouragement!

Problem

How can we redesign the website for the University of Florida to make searching academic programs easier and more intuitive?

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 these programs on UF’s website.

Solution

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

DISCOVERY

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. Figma worked really well for me at this stage for note-taking. Click here to see the Figma project file.

It was easy to drag and drop screenshots and the Pages feature made it easy to organize content.
It was easy to drag and drop screenshots and the Pages feature made it easy to organize content.

I discovered that it took five taps/clicks on my phone to reach a searchable list of undergraduate academic programs. Also, the path isn’t obvious. There are so many choices and they span multiple levels of navigation.

User flow: "As a prospective student, I want to find a searchable listing of undergraduate programs."
User flow: "As a prospective student, I want to find a searchable listing of undergraduate programs."

It takes an additional click to reach the graduate catalog, for which there actually is no search and filter (as you can see in the dead end represented with an "x" in the flow diagram).

For inspiration, I also surveyed other university websites and identified examples that afforded users a straightforward search and filter interaction.

USER FLOW

My redesigned user flow prioritizes the prospective student and integrates program descriptions at all degree levels. This flow also reduces clutter and ambiguity.

"As a prospective student, I want to find information about UF's academic programs at all levels."

Redesigned user flow
Redesigned user flow

Visual Design

I began with low fidelity wireframes in Balsamiq. 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 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.

image

I was especially drawn to both the style and simplicity of interaction of the website of the University of Central Florida. I adopted several design elements from their website.

I also took inspiration from non-university sites I found, such as this ecommerce site from Hugo Boss.

I developed a style guide based on these recommendations, and including extensive guidelines for imagery. I had employee access to promotional photography, which made it easy to find authentic and highly specific photos.

Click
Click here to download the style guide

FINAL PROTOTYPES

View the final prototype in action here.

image
image

image
image
image
image
image
image

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.

drewlong.ux@gmail.com · Linked In · Resume · Medium