Library Program Website Design
Learning "textbook content" from a well organized medium website
My Role
UX, UI Designer
Content Strategist
Teammates
Yulia Sevryugina
Tools
Figma
Timeline
Jan 2020 - Present
Working in progress...
OVERVIEW
Problem Statement
How to build a smooth navigation through a content-heavy website? How to best organize and present "textbook-content" in a user-centered way?
University Michigan Library has this awesome summer program where students will do chemistry research with professors. During the program, they'll learn 1) how to search for research sources and use library database, 2) how to comprehend scholarly literature, and 3) how to print posters and present their research work. Librarians have the content ready. My job is to design and build a website presenting the content so that they can learn and navigate smoothly. Most importantly, students can share this website to others. The website should be beneficial to two groups of users: 1) students who join this summer program, and 2) people who want to learn how to do scholarly research.
Solutions
Before
After
DESIGN
Design Goals
Design Process
I first analyzed current content structure and created a new hierarchy that groups content based on users' mind map and needs.
After creating the content hierarchy, I made a few prototypes to visually show librarian the website under new structure. I also communicated some content change using this prototype. From there, we made a few more changes and moved forward.
The librarian really likes my hierarchy and content strategy. Designing together with her, we further consolidated the web design and committed on all changes.
When I make high fidelity prototypes, I put much thought on how to show the different tiers of navigation as I want to enable users freely navigate to different sections but also immerse to the current learning section. I studied a lot lateral navigation and thought about the ideal UI and interaction.
Here're a few examples I made to communicate my ideas.