UMaryland - Academic Tools Reporting Website

Optimizing Website Navigation and Data Communication for Executive Decision-Making.

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 engagement from executive level stakeholders and partner schools.

MY ROLE

UX Designer

DURATION

16 weeks

TEAM

Web developer x1
Data Analyst x2

Deliverables

Reporting Website
Documentation & Guidelines

Design Impact

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.

Problem Statement


  1. Confusing Navigation Problem:
    Users struggled to find the tools they needed due to arbitrary categorization.
  2. Unclear Audience Goals:
    Some users groups, especially students, could not see the relevance of the data.
  3. Poor Visual Hierarchy:
    Information was difficult to skim and absorb.
  4. Unclear Data Visualizations:
    Charts and titles lacked alignment, leaving users confused about their meaning.

Design Goals

‍

  1. Simplify navigation to make tools and services easier to find.
  2. Create engaging content for diverse user groups.
  3. Enhance visual hierarchy for improved readability and scannability.
  4. Make data visualizations clearer and more actionable.

Design Process

Heuristic Markups

→

Communication

Communicate

→

Proposing
Solutions

→

Sketching and Execution

→

Iteration

1

Heuristic Markups

‍

  • I manually evaluate the webpages with freeform tools to mark immediately noticeable design issues such as hierarchy, priority, readability, and content writing.
  • I organized issues on spreadsheets to communicate with my managers and fellow researchers who aren't design-tool savvy.

‍

2

Collaborative Team Alignment

‍

  • I led discussions to clarify design priorities, fostering a shared user-centric mindset across the team.
  • I briefed researchers and project managers to ensure design goals aligned with business objectives and user needs.

‍

‍

‍

3

Redesign Execution

‍

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.

‍

‍

Data Visualizations:

‍

  • I simplified charts and titles to clearly communicate their purpose and insights at a glance.
  • I collaborated with researchers to frame data in actionable and direct way

‍

‍

Visual Hierarchy:

‍

  • I improved typography, spacing, and layout to enhance readability and accessibility.
  • I logically grouped related information to make content easier to skim and understand.

‍

‍

Design Guidelines

‍

  • I created a design system tailored to Drupal and Infogram constraints, addressing typography, colors, data visualization, and spacing.
  • I documented and presented the guidelines to the team, ensuring consistent application across updates.

4

Sketching and Execution

  • I simplified category organization to align with user mental models.
  • I proposed grid and sectioned layouts for different options of clarity, importance, and usability.

‍

Impact: These sketches guided the final structure and addressed user frustrations with navigation.

‍

We went with the option A - Easy "at a glance", as we think all sections are important, and it's easier to navigate at once.

5

Iteration

  1. ‍Continuous Improvement: Plan regular updates and enhancements to keep the website fresh and engaging.‍
  2. 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.
← Back to Projects
© 2024 Chao Min Wu