Mizumori Lab Case Study

Scope

While discussing with Dr. Mizumori the scope of the project, we determined a timeline and what would be included as deliverables:

• Guide the Lab through choosing a new hosting platform (originally the site was hosted on WIX)

• Audit original design & design sketches for the new design based on audit findings

• Build website in the new hosting platform (Squarespace)

• Handoff the new site to the Lab for website management

By the end of this project, the Lab needed to be able to manage the site themselves and easily make changes to the content without changing the over all design. This is why, as a team, we chose Squarespace as the new hosting platform: it allows for some customization in order to design for better clarity and ease of use, and by using a template, provides cohesive branding and design across the site.

Assessing the Original Design

Before meeting with the Lab, I reviewed the original site to gather initial insights and impressions since I was experiencing the design for the first time.

Interviewing the Lab

I interviewed the lab members remotely, via Zoom for a little over an hour. The lab members included in this discussion were the labs graduate students (of different years), and Dr. Mizumori. In this conversation, we also reviewed the branding of the lab and the atmosphere that the students and PI felt the lab embodied and came up with characteristics to describe the Mizumori Lab Brand:

Empower * Collaborate * Investigate

Personas:

Sketches based on my findings

After interviewing the lab and determining the branding, I created sketches for each screen and narrowed down the ones that aligned best with the brand and were easy to use.

*The chosen screen is lightly highlighted in blue.

Building the Site

After determining the path forward for each of the page (the first image in each of the above galleries) based on the characteristics of the Mizumori Lab and to help balance hierarchy and break the text up, I started building the site in Squarespace. Within Squarespace, there are some limitations as to the spacing and font size, how you can configure images and crop pictures, etc., but we overcame these challenges to create a site that is easier to use, maintain, and find information you’re looking for.

Build Iteration #1

Usability Testing

To test the changes to the Mizumori Lab site, I conducted a mix of remote and in-person usability testing with five people via Zoom and Slack. Participants ranged from graduate students familiar with the lab, to graduate students unfamiliar with the lab, to others with no experience in academia post undergraduate degree. During these tests, I wanted to learn the answer to these questions:

• Did the re-branding and new color palette have the intended effect of showing the personality of the lab?

• Were the users able to move through the site easily and without friction?

Lastly, I wanted to identify any points in the experience that caused friction for the users.

Test Script:

Going into these usability tests, I asked users to perform tasks that an actual visitor might:

1. Find the lab’s area of focus

2. Who is a part of the lab, and what do they do?

3. What is your overall sense of what the lab would be like to work in?

4. Find a publication that interests you

Findings:

• The site felt clean and simple

• Branding aligned with the lab - collaborative, empowering, modern

• Improved scannability was a relief to users

• Contrast of the Logo and background image on the Home Page was slightly alarming to some users

• Users wanted to be able to visit the about page from the menu and may have missed it on the home page

• Users were concerned with when the site was last updated and are used to going through multiple hoops to find out

• Users wanted to know more about projects that are currently being worked on

• Users had a hard time finding the picture carousel on the Team Page, but all liked to see it and spent time looking through the images

Handing off the Site Management

Now that usability testing is done, the site works as intended, and the re-branding has the desired effect on visitors, I am ready to hand off the site to the lab members to manage! This process included a handoff meeting to show the lab members how the pages interact and how to continue to make updates and changes to the site to keep it modern and up to date. To handoff, we met remotely over Zoom. I presented the overall set up of the pages, then had the members interact with the components to get a feel for how to make changes going forward.

Reflections & Learnings

Handoff is complete! The site is live, linked to the appropriate places (the UW website, and email signatures) with the new domain name. This project was a really enriching experience, allowing me to stretch my design and research skills in order to find out from the client what they wanted to see, and balancing that with the usability of the site. There were times during our meetings that the client would question a design decision (such as bolding or spacing for scannability), so I was able to share with them my reasoning, and we moved forward on the project together.

Learnings:

• Through this project, I learned to balance the requests of the client with the usability of the site in order to maintain a collaborative environment and create the best product for them

• This project reinforced my value in interviews and research - I can learn the most from the people that use the product

• The designs and how information is presented differs by industry and environment - as my first project in academia, there are ways in which users are familiar with information being presented (i.e. APA format for Publications) and thus used. Had I not had interviews and been sensitive to interviewees feedback and experiences, I may have designed a product that was usable for the general public, but not for the target audience.