Duration
Jan - May 2024 (4 months)
My Role
User Research
Visual Design
Wireframing
Prototyping
Usability Testing
Front-End Development
Team
Brianna (Project Manager)
Claire (UX Researcher)
Devina (Web Developer)
Linh (Web Developer)
Me (UX Designer)
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.
1. Improve User Experience
The modern website should be accessible and user-friendly, with intuitive navigation and a responsive design for various devices.
2. Enhance Visual Appeal
Incorporating modern design elements to make the website visually engaging and professionally representative of the center.
3. Better Engagement
Integrating interactive features to increase user engagement and time spent on the site.
Research Methods
Market Analysis
Usability Testing
Surveying
Interviewing
Google Lighthouse
Metrics
11 Usability Tests
15 Survey Responses
3 Interviews
2 Personas
Target Groups
Researchers/Academics
Higher Education Students
General Public
Our team was given complete freedom for the visual redesign, so we decided to look to existing UW websites to get inspiration and ensure that our design was still visually consistent with UW 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.
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, organization, etc., as well as assigning them goal-based tasks to complete to test the functionality of the website.
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.
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. Each given scenario represents common user journeys that students may take when visiting the site. 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.
1. 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:
2. Accessibility
The website was not meeting accessibility standards with extremely bright hues and poor color contrast.
Ideas for improvement:
3. 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:
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 created wireframes of the best designs.
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.
I implemented the design system and added interactions to the wireframes to create the high fidelity prototypes.
We repeated the same procedure (asking for first impressions, conducting unmoderated testing, and asking the difficulty of completion) with our participants. 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.
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.
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. This presentation not only allowed my team to show off all of our hard work and accomplishments to him, but for us to also engage in conversation at the end with other MMC staff whom we had never talked to before. Everyone was very impressed with our redesign and the professionalism of our presentation.
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:
Most importantly, I want to thank my amazing Capstone team and our sponsor, Byung, who contributed to such a successful project!
