UW-Madison AIM

Information Architecture and Navigational Website Redesign

  • Website Design
  • UX Research
  • UX Design
Redesigned AIM home page on a laptop, over a dark photo of the office building

As the product designer, I proposed a redesign of the AIM website with a focus on creating an intuitive and functional information architecture. Through rigorous usability testing, I was proud to receive a 100% satisfaction rate for the redesign.

My role
Product Designer, UX Researcher
Team
1 Product Manager, 1 Product Designer, 1 Engineer
Duration
4 months (July - December 2022)

Background

AIM (Academic Information Management), formed in 2012, helps UW-Madison administration, academic planning, advising, and teaching to ensure L&S department undergraduate curriculum and policy information is accurate; and make sure programs and operational systems are rational and efficient.

Problem

Difficulties in finding information on the website can frustrate users and discourage revisiting.

User & Goal

Users are University of Wisconsin - Madison faculties, including student advisors, analysts, and assistant deans. The goal is to find which services can support them and find the right person in AIM to contact if needed.

Solution: Final Design

The current home page of the AIM website needs more context and includes numerous unnecessary items that do not provide users with helpful direction (as shown in the left image). During the usability testing, users expressed confusion, stating that they thought some items were nice, but they needed to know how they related to them. In response to this feedback, the proposed design was created to guide users on how to start on the home page.

The changes received positive feedback from users, with comments such as "I can now immediately know what AIM does and its services" and "The layout is intuitive, and I won't be confused anymore."

Before and after home pages, from a large AIM logo and quick links to an introduction, three main services and the latest projects

Providing context with the link helps users understand where they will be directed if they click on it, making it clear and understandable. Users can quickly find the information they are looking for, improving the website's overall usability. Screen readers often rely on descriptions to navigate.

Policy Documentation page with one link enlarged to show its title and the short description beneath it
Description on the link help users where they will be directed

Listing each team member's responsibility and contact information helps users quickly identify the person they need to contact. Including icons makes it easier for users to recognize the available contact options.

AIM Team page with staff cards listing responsibilities, phone and email, and an office location with a map
Contact information with easy to scan enhances clarity, credibility, and accessibility

Demo

Impact

Five impact cards: increased 30% of new school staff user conversions, 80% of users satisfied, and user quotes saying it is better organized, a huge improvement and a better first impression

What Stakeholder Say About Me

LinkedIn recommendation from Mike Pflieger, Assistant Dean at UW-Madison, who managed Austin directly, calling Austin a skilled UX designer and diligent communicator

Design Process

Begin with comparative analysis then conduct interviews

Due to the limitations of implementing WordPress school themes in the future, I decided to conduct a comparative analysis of other websites (UW-Madison: Guide, Graduate School Website, and Office of the Registrar) recommended by the manager to understand their information architecture. Before conducting interviews, I debriefed the manager on how these websites were organized and asked for feedback on his preferred style or layout. This approach helped me balance the future design limitations and the manager's expectations.

Table comparing the top, middle and bottom of the Guide, Graduate School and Office of the Registrar websites
Comparative analysis table summary

I interviewed eight target users recommended by the manager, asked about their past experiences with the AIM website, previewed the home page, navigation bar, and core functions page, and followed up with any additional questions. With this research, I discovered the following pain points:

  • Home page: contain many unnecessary contents (Program proposal resources, calendar), confusing users, and feeling are they helpful for them? Both buttons direct to different things, one is the website, and one is the Google form.
  • Core Function page: rich text-based requires users to scan for a while. The link on the right side does not tell users what it is. The organization of each page is inconsistent, so users need to get used to the organization of each new page layout.
  • Contact page: redundant section (People and Contact have similar contents). The most important information is hiding in the core function, and the text title has no meaning for users.
Old AIM home page with Quick Links, request buttons, program proposal resources and a calendar
Home Page challenge
Old core function page with a magnifier over a list of L&S curricular information links
Services Page challenge
Old Contact page with an office photo and address, and a magnifier over the list of AIM staff names
Contact Page challenge

Based on this information, I have created four personas that can help address the identified pain points. I will report these personas to the manager and the team. Here is an example of one of the personas (advisor):

Persona of Joshua, a student advisor, with goals and pain points, beside a journey map of using the AIM website
Personas and journey mapping help the manager understand users' pain points quickly

I categorized the finding into three main redesign sections: the Home, Core function, Contact page. I first devised 15 ideas for each and refined them into what I should add and remove from each section.

Ideation helps me effectively generate new opportunities to improve the user experience of the Home page, Navigation, and each Core function page.

Grid of sticky notes with home page ideas beside a summary table of what to add, remove and change
One of the example of brainstorming ideas on Home page

Key learning

I thought switching to the middle style could help users navigate better because people usually focus on the middle element. However, during testing, I discovered that most users were confused about the button design as it was not intuitive, which made them think the page had not changed. After making changes and not switching to the middle option, I tested again, and all participants were no longer confused.

DARS page design with three red buttons where the selected button moves to the middle position
Original design with the switch to the middle button
Updated DARS page where the three buttons stay in the same order and only the selected one changes
Update version

I received design critiques from stakeholders regarding a specific section of the website. They wanted to include a "What's new" section, but user confusion and questioning its usefulness led me to remove it. I carefully listened to their concerns, scheduled a meeting to understand their expectations, and revised the design accordingly. The stakeholders were pleased with the changes and appreciated my receptiveness to feedback and effective communication. This experience taught me the importance of feedback and effective communication in design, skills I continue to value.

Previously, I had every section's title name presented with a highlighted and non-highlighted option. However, by utilizing the component property of "text," I could easily create many variants. With only one component to change the text, it saves time and better organizes the design system while providing the same options with fewer variants. Furthermore, I discovered that the "Instance Swap" and "Boolean" features helped manage the library with even fewer variants.

Many highlighted and plain section title variants with an arrow to a single Sub Title component in two colours
Left: previously have each section’s title. Right: using component properties saves time and better organizes the design system

Explore More Works!