University of Michigan Repository
UX DESIGN & FRONTEND DEVELOPMENT
End-to-end redesign and development of Help and About pages, applying user research and accessibility principles to streamline navigation and reduce user confusion.
Enhancing accessibility and architecture of the Help section for the University of Michigan Repository, enabling users to self-serve support and reducing strain on the University help team. Led end-to-end process, including research, IA mapping, data analysis, wireframing, Figma design, and front-end development.
Check it out: New About/Help Page hosted on my personal Github until new site launch.
KEY SKILLS
Data Analysis, Information Architecture, UX Writing
HTML/CSS, JavaScript, Github, Responsive Design
KEY IMPACT
Reduced reliance on support team, resulting in a drop in manual help requests on a platform with over 10,000 annual downloads.
TIMELINE
January 2025 – March 2025 (project completed, current role)
TEAM
Solo Project. Collaboration with engineering team.
THE CHALLENGE
How might we help users find the information they need without contacting support, reducing the volume of manual help requests?
To scope the product and begin strategizing, I considered:
USER VALUE AND SATISFACTION
Prioritizing solutions that would meaningfully improve the user experience and reduce frustration.
SUPPORT TEAM BURDEN AND COST
Reducing manual help requests to free up support resources and decrease operational costs.
TECHNICAL FEASIBILITY AND TIMELINE
Delivering high-quality improvements within the constraints of the existing tech stack and deadlines.
CONTENT MAINTAINABILITY AND SCALABILITY
Ensuring help content is easy to update and grows sustainably as the platform evolves.
RESEARCH OVERVIEW
To understand why users were struggling with the Help and About pages, I used a combination of qualitative and quantitative methods to do some quick research, planting my design in data.
Methods
1. Support Request and Documentation Analysis
I reviewed support tickets and Confluence documentation, categorizing the findings by type, frequency, and user role to identify patterns using FigJam.
Insights:
-
Many users were asking questions already addressed on the site.
-
Users often misunderstood where to go for help or what specific terms meant.
-
Some information was buried deep or labeled unclearly.
Help Ticket Example
Confluence Documentation
2. User Interviews
Through communication with users, including researchers, librarians, and new users, I learned about their pain points firsthand and added that information to my map.
Insights:
-
Navigation between Help and About was confusing.
-
Some users weren’t aware the pages existed at all.
-
Users felt the UI was dated, making it difficult to read.
Affinity Mapping Patterns
3. Information Architecture Mapping
I mapped the current structure of the sections and compare it against user expectations and workflows.
Insights:
-
Identified redundant and missing content.
-
Highlighted opportunities to simplify and rename categories for clarity.
IA Mapping
DESIGN PROCESS
The design process focused on simplifying information access while aligning with platform constraints and the existing design system.
Given the straightforward nature of the Help and About pages, we worked quickly and collaboratively, moving from structure to development with minimal friction.
1. Information Architecture Mapping
-
Proposed new IA based on consolidated features.
-
Streamlined categories, merged overlapping content, and added missing resources.
-
Prioritized top user tasks (e.g. finding submission help, privacy info, and contact details).
Improved IA Map
2. UX Writing & Content Strategy
-
Rewrote headings, labels, page titles to reflect user language and mental models.
-
Worked closely with a content expert to improve clarity.
-
Used plain language and consistent voice across Help and About sections.
Original UX Writing
Streamlined UX Writing
3. Design System Assessment
-
Reviewed visually + the code to find reusable components.
-
Noted constraints in typography, spacing, and navigation that shaped layout decisions.
-
Planned for responsive behavior and accessibility prior to wireframing to design efficiently.
Established Design System
Established Design System
Lofi Prototype
4. Lo-fi Prototype & Navigation
-
Mapped page structure and navigation logic including required design system components.
-
Focused on scannability, minimal clicks, and surfacing key content early.
-
Lo-fi prototype chosen to
-
provide enough detail to guide conversations with stakeholders
-
simple enough to iterate quickly.
-
5. Feedback & Finalization
-
Collected feedback from engineers and content experts.
-
Refined layout and content structure based on collaborative input.
-
Once approved, we moved directly into development, skipping high-fidelity mockups to save time.
FINAL DESIGN SOLUTION
The final Help and About pages reflect a clean, structured, and user-centered experience that makes it easier to find answers without contacting support. Check out the completed Help/About Page hosted on my github until migration and launch.
Before
-
Inaccessible, unclear navigation
-
Dense blocks of text with minimal headings or hierarchy
-
Not compliant with the design system
After
-
Clear navigation using color, contrast, and indentation to differentiate pages
-
Additional hierarchy to declutter text
-
Compliant with the design system
Original Landing Page
New Landing Page
Original Content Page
New Content Page
