Redesigning the University of Florida Website

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!

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.

My mobile-first redesign includes:

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.

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.

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."

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.

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.

FINAL PROTOTYPES

View the final prototype in action here.

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.