Improving the website usability & uX of campus-wide university report

Summary

In Fall 2023, I joined the ATEX (Academic Technology Experience) Team, Division of IT, in the University of Maryland as a Design and Communication specialist Graduate Assistant. I improved our flagship semester report website's usability through thoughtful evaluation and redesign roadmaps, resulting in a greatly improved readability and praised by our partners in other schools.

Timeline

Sep 2023 - Feb 2024

Team

Project Manager
Researcher x2
Web and UX Designer (Me)

Deliverables

Website
Documentation & Guidelines
Iconography
Illustration

See Full Report Website ↗

My Impact

Quantitative Results

Achieve an overall increase of 433% in users, 212% in views, and 76% per user engagement on website home page. (2023, 2024)

Qualitative Results

Increased usability and led to use in decision making of leadership.

Received positive feedback from executives and partnering schools on the improved interactivity and communication

Our Product: Reporting digital education tools

Our team produced reporting websites. We collect and analyze data of academic systems and service tools, such as ELMS-Canvas, Zoom, Panopto, and more. We inform executives and partnering schools on how academic digital tools are used by students, faculties, and staffs.

From learning management system (ELMS-Canvas), video platform (Panopto), VPN, and more, we transform data into executive languages to help them make more informed decision on the impact of digital learning tools.

Target Audience: executives, Faculty, and staffs

Higher executives, principals, provos, and directors who oversees decision of procurement, informed by our reports.
Faculty, professors and directors seeking to improve how they use tools like Canvas, Zoom, GradeScope, etc.
Staffs who continue to provide administrative and tech support to college departments, faculty, and students.
Students whose academic experience in UMD are directly affected by all the services and tool provided by the campus.

Challenges

Info Organization:
Navigation Problem

Users are unsure about where to find the tools they're interested in, and don't know why some tools are categorized.

Audience Connection:
Unclear Goals

Many users, especially students, are unsure about "why" they need to learn about the information. They are unsure how the information relates to them and why it matters.

Visual Hierarchy:
Hard to Skim

Content is very hard to read and consume due to lack of visual hierarchy and structure. Users typically only spend XX amount of time of the page.

Data Visualizations:
Unclear Message

Users find it hard to interpret themeaning of our data visualization and not getting the point. The chart and the title often has indirect relationships.

These issues emerge from our team's effort to transition from paper-based report to website, in the hope to democratize information.

Goals

Improve information and website navigation so users can find services more easily
Improve engagement and connection to 3 different but major audiences
Improve content visual hierarchy & data visualization communication

Design Process

Evaluation

→

Collaboration

→

Communicate

→

Redesign Execution

→

Guideline
Democratization

Evaluation: Breaking down different issues

Visually markdown visible issues on Webpages

I manually evaluate the webpages with freeform tools to mark immediately noticeable design issues such as hierarchy, priority, readability, and content writing.

Heuristic evaluation -> Spreadsheet for Communication

I organize evaluated issues on spreadsheets to communicate with my managers and fellow researchers who aren't design-tool savvy.

My evaluation file of the website, using google spreadsheet

Presenting to team: synthesize to maximize impact

Aligning the team to maximize the impact

Briefing to my team members helps clarify design priorities, address questions from the team, develop a user-centric mindset, reduce redundant efforts, and align on mutual goals to maximize team impact.

Redesign: Tackling one issue at a time

Information Architecture: Defining structure

Setting up category structure

The original structure is arbitrary and undefined, leading to issues in web design hierarchy. Users find it hard to navigate and have to guess which tool belongs to which category.

Data Visualization: presenting and writing with clear intention

There are a lot of data visualization in our report.

We need to help our readers/users understand what the data visualization is about, succinct and direct. I skimmed through the content we have, and communicate with researchers and manager to ensure we are clear with what we're trying to say, and translating our message to data visualization in visual languages.

Sketching and developing Guidelines

Constraints: Designing in drupal, University of Maryland templates, and infogram. It's difficult to customize the design, yet I was able to incorporate come HTML/CSS in the Drupal's constraint.

‍

Upon designing and prototyping our website, I crafted a design guideline for our team, documenting use examples of typography, color, data visualization, spacing, icons, and etc. I made sure to present the guideline to our team, and made sure the ownership and edition is continued.

See Full Report Website ↗

Key Learnings

What would I do Differently?

More User testing and Card Sorting: I was redesigning based on user testing data collected by my colleagues before I joined the team. Due to constraints on limited resources (time, budget) and shared responsibility with another senior researcher who is the owner of the website, I only conducted a simpler and informal testing within friend groups.

If I were to do it again, I would love to conduct user testing on representative users (school's high executives) and faculties during development, and prime the user testing goals on card sorting/information architecture, and information finding.

More interaction with embedding media: Design guidelines and constraints in Drupal and Infogram made it less likely to develop fun and engaging interactions on the web. However, I would love to try embedding other (free) tools such as Figma or tableau directly on the webpage to make our data visualizations more lively.

Impact and further results

Continued use of my template and guideline: Take a step back to review the information architecture. Evaluate whether the current structure effectively serves the users' needs and whether any adjustments are necessary based on user feedback or industry standards.

Research Official Guidelines: Dive into official guidelines related to nutrition data categorization. Ensure product aligns with these guidelines to provide accurate and relevant information to users.