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
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.
From our user testing, we located these problems:
use the site to evaluate the effectiveness of services and make high-level decisions—such as whether to renew contracts.
read the reports to reflect on how tools and services may enhance their instruction and improve student learning outcomes.
explore the site to better understand how technology is shaping their work and learning environments.
look to Maryland’s report as a benchmark and source of inspiration when planning their own initiatives.
From our user testing, we located these problems:
Users struggled to find the tools on the landing page as they needed, because we have different ways of categorizing than our users.
Charts and titles lacked alignment, leaving users confused about their meaning.
Information was difficult to skim and absorb.
Designers and researchers work separately without a unified design guideline, causing visual inconsistencies.
Simplify navigation to make tools and services easier to find.
Make data visualizations clearer and more actionable.
Enhance visual hierarchy for improved readability.
Set up design guidelines to prepare for future iterations and scalability.
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.
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.
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.
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.
Heuristic Markups
→
Communicate
→
Proposing
Solutions
→
Sketching and Execution
→
Iteration
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.
I led discussions to clarify design priorities, fostering a shared user-centric mindset across the team, and this led to a smoother developing process.
Continuous Improvement:
I
Expansion:
Explore additional features like personalized recommendations, customer reviews, and virtual room design tools to further enhance the shopping experience.