AAC Internal Staff Site

UX Design

Dates

11/2020 - 3/2021

My Role

Lead UX Designer

Team

Scrum Master: Tim
Web Development: Stephen
Operations: Rene
Content: Gabe & Aileen
+ 4 key stakeholders

The Product

A hub for student success professional in the Academic Advising Center (AAC) in CU Boulder’s College of Arts & Sciences (A&S), this internal website is a critical resource for staff to access information, updates, and documents during day to day operations.

The Challenge

The previous website was outdated (content-wise and aesthetically) and plagued with broken links. Additionally, each page had a different set of menus with random links which made the site impossible to navigate.

The Solution

Create an updated interface that organizes data in a way intuitive to staff and meets staff needs to frequently reference material and updates.

Understanding the User

User Research: Pain Points

1. IA

The current information architecture is disorganized and nonsensical, making it impossible for users to quickly locate information.

2. Feedback

Users need a way to provide feedback about content, broken links, and requests for updates.

3. Updates

Users receive many emails on a daily basis containing important information, but these can easily get lost. Users want the ability to easily view a digest of all these updates.

4. Centrality

Users currently need to reference several websites, such as a separate training site, to view information for daily work. Users wanted to see all critical information linked in one central location.

Persona

Problem Statement:

Ataya is an academic advisor who needs quick and easy access to updated and reliable information in order to provide the best possible academic support to students.

User Journey Map

Starting the Design

Foundational Research

Methodology

Open card sort + Survey ( with quantitative and qualitative components) to determine structure and IA

Insights

+ Based on feedback from an open card sort, users categorized information on the website into three main categories: Administrative, Resources, and Training.
‍
+ Users wanted quick “above the fold” access to the most frequently accessed content on the site
‍
+ Users wanted a way to quickly submit feedback about broken links or out of date information

Information Architecture

Paper Wireframes

Digital Wireframes

Content was sorted into three main pages: Administrative, Resources, and Training. Users appreciated seeing the weekly updates section on the home page, a way to get quick access to the most updated content. The feedback allows users to provide feedback on both the department as a whole and website-specific content.

Low-fidelity Prototype

Usability Studies & Findings

I conducted two rounds of usability studies.

Usability Testing

First click testing + Usability Survey ( with quantitative and qualitative components) to determine how easy it is to find important data.

See graph below for data from information finding tasks and participant ratings.

Insights

+ Based on the fact that 11% participants found it very challenging to locate AAC Comments & Suggestions, we need to make the location for feedback more clear. This was accomplished by moving a “feedback” link to the top navigation bar.

+ Based on the fact that 16% participants found it “very challenging” to locate Expectations and Performance Management, we hoped to find a more clear location for this item (however, stakeholders declined our request to move it).

+ Based on the fact that 3 participants wrote comments about the page looking too busy and exhausting upon first glance, we needed to make the page look cleaner. This was accomplished by moving the “Weekly Updates” to dropdowns to declutter the top of the page. We also removed the academic calendar due to feedback that this was redundant of what is already on CU Boulder’s public-facing site.

+ Based on the fact that several participants mentioned worrying about information being “buried” and several others were interested in just using “cntl+F” to find the information they need, we decided to make the homepage a single scroll page using anchor links for the main navigation.

Refining the Design

Mockups

Before Usability Study

After Usability Study

1. Based on user preferences to use "control + F" to search the homepage, we changed the format to a single scroll page.

2. Users thought the homepage looked too crowded with the text from the weekly updates, so we put this text in a drop-down. This also allows quicker access to historical weekly updates.

3. Users wanted an easier way to get to the "Feedback" page, so we added it it to the top navigation.

High-fidelity Prototype

Accessibility Considerations

1. Annotations

With a long, single-scroll homepage, navigation order annotations were an important consideration.

2. Search

Users can search using the search bar the top or using "control + F" as some users preferred the latter method.
‍

3. Contrast

High-contrast icons and text used in conjunction for clarity on navigation menu and elsewhere. Minimum 17.3:1 contrast ratio for text.

Going Forward

Takeaways

Impact

The new AAC staff site makes the information discovery journeys of staff much faster and easier, allowing advisors to more confidently and accurately provide timely and rapidly-changing information to students. This in turn leads to improved outcomes for academic advising.

Learnings

Designing the information architecture so that it aligned with the user research was an important part of this re-design. I found that team members and stakeholders had their own ideas about the IA design, so it was critical on my part to continue to advocate for the users. The research data usually prevailed, however, occasionally compromises were made so that the IA also aligned with departmental organization.

Quote from user testing: “I think this is a huge improvement to our old AAC Staff page and I am so thankful for you all. I think this will be a site I actually use rather than just go to for one item (pointing sheets) that I had to bookmark because I couldn't locate it from the homepage before."