Faculty & Staff Profiles

UX Design project for University of Wisconsin Law School

Project Overview

The goal of this project was to create a profile layout that showcased the University of Wisconsin Law School faculty & staff in an accessible and mobile-friendly way.

The high-level process for tackling this design project was to:

1. Establish content needs
2. Complete a comparison review
3. Sketch out low-fidelity wireframes to determine layout
4. Design a high-fidelity, interactive prototype in Figma
5. Hand off to the developer and provide iterative feedback throughout the project

Process

Establishing Content Needs

The profile layouts needed to serve both staff members with very little information as well as faculty members who may have many publications, media appearances, teaching interests, and more. We listed out the information in the previous profiles as well as the new content elements we wanted to add:

• Name
• Title
• Resume or CV
• Contact information
• Hi-res photo (new)
• Education
• Biography
• Publications (new)
• Recent scholarship & activities (new)
• Media appearances (new)
• Courses Taught
• Teaching Areas

In addition to these content requirements, the profiles needed to be accessible, mobile-friendly, and easy to update and maintain.

Comparison Review

Given that faculty are often cross-referenced with their peers, it’s important that their profiles provide similar information with a predictable layout as other law schools. We completed a comparison review of other law schools to get a sense of:

• types of information included
• how the information is organized
• features used to display the information
• commonly used terminology

This comparison review confirmed our content list and gave us a few layout ideas to test out. It also ensured that we were using consistent terminology in our headings, such as using “Scholarship” for publications and scholarly activities.

Card Sort & Sketched Wireframes

First, I wrote out the individual content items on sticky notes to do a brief card sort on my own. I consulted with my main team members to confirm what information belonged together.

I then sketched a few different layout options, playing around with where the name would go, whether to use tabs or accordions, whether to use a sidebar and what should go in it, how much to explicitly label.

Figma Prototypes

I mocked up the layout in Figma to do more interactive testing and design. After many iterations, tweaking the icons and the exact layout of everything, we were able to share the prototype with leadership and get approval for our developer to start implementing the design.

Development Phase

While my role as a designer is more concentrated on the beginning stages of a project like this, I find it important to be involved in the development stage of the project as well. The developers and I would touch base with the developers every week or two to check in on progress and troubleshoot issues. I would provide feedback and guidance on design details that needed clarification. Even the (seemingly) simplest designs can have unforeseen hiccups along the way!