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.
Role:
Web UX Designer
Duration
16 weeks
Team
Researcher x2
Web and UX Designer (Me)
Deliverables
Reporting Website
Documentation & Guidelines
My Impact
Achieve an overall increase of 433% in users, 212% in views, and 76% per user engagement on website home page. (2023, 2024)
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
Problem Statement
- Confusing Navigation Problem:
Users struggled to find the tools they needed due to arbitrary categorization. - Unclear Audience Goals:
Some users groups, especially students, could not see the relevance of the data. - Poor Visual Hierarchy:
Information was difficult to skim and absorb. - Unclear Data Visualizations:
Charts and titles lacked alignment, leaving users confused about their meaning.
Design Goals
- Simplify navigation to make tools and services easier to find.
- Create engaging content for diverse user groups.
- Enhance visual hierarchy for improved readability and scannability.
- Make data visualizations clearer and more actionable.
Design Process
Heuristic Markups
→
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
- Continuous Improvement: Plan regular updates and enhancements to keep the website fresh and engaging.
- Expansion: Explore additional features like personalized recommendations, customer reviews, and virtual room design tools to further enhance the shopping experience.
Key Learnings
- 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.
- Explore More Interactive Media: Given the design constraints, I would explore embedding tools like Tableau or Figma prototypes to make data visualizations more engaging.
- Iterative Testing: Allocate more time for iteration to refine the design in response to live feedback.
