The Problem
The University of Washington's Mitochondria and Metabolism Center (MMC) is at the forefront of mitochondrial research. However, their website does not reflect the innovation and advancements made within.
As a part of the Informatics Capstone, our team was sponsored by the MMC to redesign the site in order to improve accessibility, navigation hierarchy, and content flow, in turn amplifying user engagement. The redesign transitions the MMC into an era of digital excellence that reflects their significant contributions to science, fostering collaboration and knowledge sharing with other research centers. We worked very closely with Byung, the MMC Program Manager, who served as our sponsor contact.
Improve User Experience
The modern website should be accessible and user-friendly, with intuitive navigation and a responsive design for various devices.
Enhance Visual Appeal
Incorporating modern design elements to make the website visually engaging and professionally representative of the center.
Better Engagement
Integrating interactive features to increase user engagement and time spent on the site.
Problem Statement
How might people interested in the UW Mitochondria and Metabolism Center (MMC) achieve optimal user experience while navigating their website so that they can gain an in-depth understanding of the MMC's mission and accomplishments?
Solution Overview
Research Process
Our team conducted many forms of research to understand our target audiences, validate existing assumptions, and identify pain points with the current website.
Market Analysis
We reviewed many UW medical and research center websites to understand how they organized their information architecture and to get familiarized with UW site branding.
I found that many sites use card layouts to separate chunks of information. On home screens especially, the card system serves as starting points to redirect visitors to other pages of the site.
Validating Our Assumptions
To better understand the user experience of the website, we conducted usability tests with 11 users who have never interacted with the site before.
The purpose of these tests were to observe one target user group (students) as they navigate the website, noting their first impressions of the overall layout, content, and organization, as well as assigning them goal-based tasks to complete to test the functionality of the website.
“This purple color hurts my eyes...”
When asked about their first impression of the site, users brought up many issues after skimming the home page alone. Thus, it was important that our team addressed these problems first given that the home page is what visitors would be seeing first.
“Ctrl + F is supposed to be my friend, but even my most trustworthy keyboard command cannot save me from the rough navigation of this website.”
For the second part of the usability tests, we observed users performing certain tasks and recording all the steps that they took to reach the goal. Afterwards, we asked the subject to rate the difficulty of completion from 1 (very easy) to 5 (very difficult).
Overall, many users struggled with completing the tasks that were given to them. They were getting frustrated, confused, and overwhelmed with the navigation of the site, with some scenarios nearly impossible to even complete. Users agreed that the current website was “unintuitive” because of how much searching it took for them to complete the task.
Research Synthesis
Through usability tests, surveys, and interviews with various target user groups, we discovered 3 pain points that we wanted to focus on for our website redesign:
Navigation
There were a lot of hidden menus and pages which meant that users had difficulty navigating the site and finding the information they needed.
Ideas for improvement:
Redesigning the navigation bar for better scanning
Putting most commonly searched information in multiple pages of the website
Adding quick links to important pages in the footer
Accessibility
The website was not meeting accessibility standards with extremely bright hues and poor color contrast.
Ideas for improvement:
Replace the purple background with a neutral color to lessen eye strain and improve readability
Checking the color contrast to ensure the website adheres to accessibility standards
Content and Structure
Many pages on the site had missing, outdated, and/or too much information, and the layout between similar pages (such as lab pages) were inconsistent. This contributed to the user's information overload and lack of engagement with the site.
Ideas for improvement:
Work with our sponsor to get updated information and rewrite content to be more concise
Create a design system to use across the site
Design templates for cards and lab/faculty pages to create visual consistency
Ideation
The new website design focuses on improved visual hierarchy, content organization, and clearer calls to action.
Our team split up to individually create our own sketches of core pages to generate as many ideas as possible. After discussing as a team, we narrowed down the sketches and I created wireframes of the best designs.
Design System
Establishing a UW-approved design system.
Before moving on to higher fidelity prototypes, I created a design system to serve as a reference and ensure visual consistency. This design system would also help the development team build the final website and aid the MMC in maintaining the website later on
Our design system is inspired by UW Medicine branding with the font choice and distinct purple and yellow colors. I introduced additional colors into the palette to give the MMC website a unique touch and add more visual variety.
High Fidelity Prototypes
Finalizing the website design and preparing for usability testing.
I implemented the design system and added interactions to the wireframes to create the high fidelity prototypes.
Usability Testing Part 2
With the final prototype done, we conducted another round of usability tests with our redesign to see if we had truly made improvements to the user experience.
The users we conducted tests on were a mix of those who participated in the original usability tests and new people who have only seen our redesigned version.
Task 1: Networking
You are a student interested in one of MMC's faculty members, Michael Crowder, and want to contact him to learn more about her work. Find Michael Crowder's email.
task 2: Seeking research opportunities
You are a PhD student who wants to get more actively involved with the MMC. Find where you can learn more about job opportunities in the MMC.
task 3: seeking educational resources
You are a UW student who wants to learn more about the different fields of health, such as cardiology, pathology, and molecular biology. Find resource(s) you can go to to hear from and/or speak with industry professionals.
task 4: seeking research publications
You are interested in reading about the new research the center has published. Find the most recent publication by Rong Tian.
Average difficulty score results
Iterating
Based on insights from our usability tests and feedback from our sponsor, we continually made changes to our design—especially the navigation bar.
Development
Finally, we built our the website to match our prototype as closely as possible, given the limitations of the site builder.
One constraint we had for this project was that we had to build the site on WordPress, as it is the standard website builder for all UW sites. Although my main role for this project was being the UX designer, I joined the developers to help build out the site and ensure that it was adhering to my designs as closely as possible.
During the development phase, our team worked on a sandbox site as to not disturb the current MMC live website. We used Divi Builder, a no-code visual drag-and-drop plugin for WordPress. It was extremely slow to work with and had limited designing options. Thus, our website ended up being a combination of Divi modules and hard code to achieve more complex layouts.
Final Design
The home page provides a better overview of the MMC and serves as a directory to redirect users to explore other pages of the website.
The faculty pages have improved visual hierarchy overall, providing in-depth information about people working at the MMC such as their research interests and selected works.
I standardized designs for all lab pages so users can easily skim and find contact information, news, and research opportunities for each laboratory.
Conclusion
To end off the project, our team presented the final website to the MMC faculty and received many compliments!
Throughout the project, Byung was our sole point of contact with the MMC, providing personal feedback and acting as the intermediary with other faculty members. Everyone was very impressed with our redesign and the professionalism of our presentation.
Final thoughts
Overall, this Capstone project was an extremely rewarding experience because it allowed me to apply my user experience skills on a real-world project. Throughout the 5 months, I was able to:
Lead the entire end-to-end design process, all the way from user research to actual website development and launch!
Serve as the lead UX designer in a cross-functional team of researchers and web developers, ensuring that my designs were accurately and effectively implemented on the website
Collaborate with our sponsor and work with real stakeholders who guided and informed our design choices
Create in-depth documentation of our work to hand off to future managers of the website
Most importantly, I want to thank my amazing Capstone team and our sponsor, Byung, who contributed to such a successful project!
See Next
Mirror
Turning wardrobe tracking into a tool for self-awareness and reflection through closet insights, considered purchasing, and pattern recognition
Passion Project
AI Concept
Zocdoc
Enhancing Zocdoc’s marketplace experiences through cross-functional collaboration, UX audits, and systematized design updates
Internship
Shipped 2025/2026