Professional Science Master's

The Professional Science Master's Department of the Graduate School at the University of Utah approached our team in dire need of a new web presence.

psm.utah.edu

Project Overview

The original site was outdated and all of the content needed to be rewritten from scratch. I worked with a UX researcher who performed testing on the new navigation directly with university undergraduates.

I took a hands-on approach with the client relationship. We worked closely on all aspects of the site. Building a level of companionship and trust that allowed me to ensure their content met high web standards. Also, projects are more fun that way.

Project Goals

  • Marketing & Appeal
  • Ease of use
  • Conversion (applications)
  • Better connection/communication with the audience
    • Program & course info
    • Admissions info
  • Easier connection with industry partners

Project Details

  • Target Audience:
    • Driven undergraduates
    • Current professionals
  • Disconnected stakeholders
  • Simplified & outlined content
  • High accessibility standards
  • High branding standards
  • User tested navigation

Homepage Layout

Information Architechture

I used three sources of information to inform the new information architecture:

  • The current site's inventory
    • We were rethinking the whole site so this didn't see much use
  • Client interviews
  • Baseline user testing of the current site

We were limited to two tests per site due to limited resources.

Armed with this information I worked with the client to make a list of pages to be included. I put the list into a Canva Whiteboard for a sorting exercise much like a card sort test. The goal of the exercise is to sort the pages into groups that would be intuitive to users. This was a collaborative process with the client and included prioritizing pages within each category. From there I created a user flow chart as you see here. This chart would directly translate into the new navigation menu which was validated with usability testing.

Colorful flow chart illustrating the website's architecture and user navigation paths

I always make wireframes for the most important pages on the site. It's best to go into building a page with a plan, especially when working in a CMS with a cumbersome editing GUI. My wireframes were always low fidelity. The goal was to get feedback from the client before spending a lot of time in the CMS given the limited testing resources. That meant there was no need to create anything of higher fidelity.

Degree program page wireframe

Admissions Page

This page is one of the best examples of user centered design from this project. When you think about what it's like to apply for a master's program, it's never simple or obvious. Prospective students always need guidance. This page outlines the admissions process in simple steps with lists of action items and CTAs. A prospective student deciding to apply for admission to a University program is the higher ed equivalent of conversion. Making a clear and simple path encourages that decision.