UMaryland - Academic Tools Reporting Website

Optimizing Navigation and Communication that increased users by 433%.

Problem

The original reporting site lacked clear content hierarchy, had inconsistent data visualizations, and buried key insights under dense, academic language.

Outcome

I led the UX redesign to make the report more accessible, scannable, and action-oriented—resulting in faster stakeholder comprehension and increased external recognition from peer institutions.

MY ROLE

UX Designer

DURATION

10 weeks

TEAM

Web developer x1
Data Analyst x2

Tools

Figma
Drupal
Tableau

Outcome

External

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

Internal

Improved usability that led to impact in decision making of leadership across the campus. Out team received positive feedback from high-executives as well as partnering schools on our website's improved interactivity and communication.

Dave

Director of Instructional Services, UofIowa.

Maryland's report is super impressive!

Alia

Assistant Vice President, Academic Innovation

This redesign makes our work so much more accessible — it’s clean, professional, and easier to navigate.

User Needs

From our user testing, we located these problems:

👩🏼‍💼

Provosts
Strategic Decision Maker  

use the site to evaluate the effectiveness of services and make high-level decisions—such as whether to renew contracts.

🧑🏾‍🏫

Faculty members
Instructional Innovators

read the reports to reflect on how tools and services may enhance their instruction and improve student learning outcomes.

🧑🏾‍🎓

Staff and students
Tech-Adaptive Users

explore the site to better understand how technology is shaping their work and learning environments.

🏫

peer institutions
Benchmarking Partners

look to Maryland’s report as a benchmark and source of inspiration when planning their own initiatives.

User Challenges - Problems

From our user testing, we located these problems:

Confusing Navigation

Users struggled to find the tools on the landing page as they needed, because we have different ways of categorizing than our users.

Complex Data Visualizations:

Charts and titles lacked alignment, leaving users confused about their meaning.

Poor Visual Hierarchy:

Information was difficult to skim and absorb.

Undocumented Design system

Designers and researchers work separately without a unified design guideline, causing visual inconsistencies.

Design Goals

Organize Navigation

Simplify navigation to make tools and services easier to find.

Simplify Data Viz messaging

Make data visualizations clearer and more actionable.

Set Up Clearer Visual Hierarchy

Enhance visual hierarchy for improved readability.

design document for iteration

Set up design guidelines to prepare for future iterations and scalability.

Proposing Design Solutions

Information Architecture:

I restructured categories to align with user mental models, improving navigation and usability.
I proposed a new organizational framework to resolve ambiguities in tool categorization, based on internal team card-sorting.

The result is clearer for two reasons:
1. All tools fit into one category and there are no additional levels.
2.Our stakeholders indicated that it's much easier to find what they're looking for with the new IA.

With the new IA, we can organize the navigation card with improved clarity.

Data Visualization

I simplified charts and titles to clearly communicate their purpose and insights at a glance.
I collaborated with researchers to design different visualizations in actionable and direct way for the users to understand.

Visual Hierarchy

To tackle a chaotic content hierarchy structure, I work on improving the typography, spacing, and layout to enhance readability and accessibility. I grouped related information to make content easier to skim and understand.

Design Guideline

Finally, to ensure the design pattern could be past on to future designers, I created a design guideline tailored to Drupal and Infogram system. The document addressed typography, colors, data visualization, and spacing.

I documented and presented the guidelines to the team, ensuring consistent application across updates.

Design Process Details

Heuristic Markups

Communication

Communicate

Proposing
Solutions

Sketching and Execution

Iteration

Heuristic Markups

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

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

Iteration

Continuous Improvement:
I‍
Expansion:
Explore additional features like personalized recommendations, customer reviews, and virtual room design tools to further enhance the shopping experience.

See Full Report Website ↗

Key Learnings

  1. Conduct Targeted User Testing: While time constraints limited extensive testing, I would prioritize usability testing with representative stakeholders (executives and faculty) to refine navigation and data communication further.
  2. Explore More Interactive Media: Given the design constraints, I would explore embedding tools like Tableau or Figma prototypes to make data visualizations more engaging.
  3. Iterative Testing: Allocate more time for iteration to refine the design in response to live feedback.