REDESIGNING A RESEARCH LAB WEBSITE

UX Audit / UX Design / Website Redesign

BACKGROUND

The Sadoshima Lab has garnered much recognition in the international scientific research community over the last 25 years. With over 350 publications, their contributions have led to breakthroughs in the field of basic heart failure research. This award-winning cardiology research lab came to me looking for a website redesign to update its content and make it responsive to engage more viewers. The website was created 9 years ago. With its outdated framework, adding and updating content was increasingly difficult.

UX Audit/UX Design

3 weeks: April - May 2024

Figma, Squarespace, EndNote

Hypothesis

The current website is outdated and suffers from a lack of accessibility and responsiveness. The lab would benefit from a website overhaul that speaks to the success of its organization.

My Approach

Conduct a discovery session to understand website redesign goals. Use competitive analysis to gauge industry standards. Give feedback on the current website’s layout, user functionality, responsiveness, visual design, and content. Redesign the entire website.

THE RESULT

Redesigning Collaboration: A Seamless, Accessible Experience for a Leading Research Lab

I redesigned the website to reflect the collaborative spirit of this renowned research lab, showcasing the team’s camaraderie while making its vast resources and publications easily accessible. The result is a responsive experience that works seamlessly on both desktop and mobile devices.

DISCOVERY SESSION

Through a Discovery Session with the lab's Principal Investigator (PI), I learned who the primary target audience of the website is, what they are coming for, and the desired call-to-action (CTA).

Who: Potential lab members and students as well as researchers and pharmaceutical companies looking to collaborate. Other users include organizations such as the NIH, healthcare workers, heart failure patients, and the general public.

What: To learn what the lab is researching currently, lab members (past and present), recent news (fellow wins an award), publication records, presentations, educational resources, experimental method protocols, as well as glimpses into the lab atmosphere and facilities.

CTA:

Contact the lab
Utilize technical information that is not publicly available
Collaborate with the lab

History: The website was created 9 years ago. Adding new content was a challenge because the layouts would keep breaking. It was a frustrating experience for lab members to update the lab website and an inconsistent experience for users viewing screens with patchy images and dense walls of text.

Business Goals:

Time: The request was to launch the website in time so that the lab could direct viewers to the new website during important conferences to come during the summer months. I gave myself 3 weeks to finish the website redesign and prepare for the launch.

UI: The preference was to keep the website shallow and have users click directly into what they want to see.

As part of the website redesign, it was a priority to make the website responsive on mobile devices to stay relevant and engage with more users. Since the lab website first launched, global website traffic from mobile devices grew from 31.1% in 2015 to 58.3% in 2023 (Statista).

COMPETITIVE ANALYSIS

I conducted a Competitive Analysis to get a sense of the industry standards and practices. Some of the lab websites were of researchers (colleagues and mentors) that the PI mentioned. Some were found through a Google search of cardiovascular research labs.

Keeping website goals in mind, I compared these 6 aspects and pulled them into a chart (click the image below to see full size in Figma).

Is the website responsive? (6/11)
Are the publications linked? (5/11)
Is it clear how to join the lab? (4/11)
Is the presentation of the mission and research clear? (8/11)
Is the website accessible? (4/11)
Is the website attractive? (6/11)

The Knowles Lab at Stanford Medicine was the closest (5/6) in achieving all 6 aspects, but lacked in accessibility.

Looking at the sites, I also picked out a few common themes:

Most lab websites are hosted through universities.
It is difficult to search a research lab unless you know the PI name.
It is the culture of the field that interested postdoctoral fellows contact faculty members directly and join the postdoctoral program through individual labs.

Sado Lab Case Study Competitive Analysis.png

WEBSITE EVALUATION

I performed a heuristic evaluation of the website in both desktop and mobile versions. Due to the site framework's lack of responsiveness, there were layout consistency issues. Images were different sizes. Text was confined to single blocks, resulting in long walls of small text. The result was a website that was both patchy and dense. For a user looking to explore the vast amount of resources and content within the website, the experience was clunky and difficult to read.

The menu made it easy for users to get the information they wanted directly without scrolling endlessly to find it. The issue was that the menu was long: 14 pages in the navigation bar. A priority would be paring down the menu while keeping the site shallow.

sado lab ajp podcast_edited_edited_edite

I realized I wasn't clear on what some pages had to offer. For example, the AJP Heart Podcast Series page (above) opens directly into a list of publication titles and 2 links following it. Immediately I had questions: What even is the AJP Heart Podcast Series? What is included in the links?

I saw there were opportunities for adding context to page headers and using hierarchy within the page, so that users know what they are looking at and where they are on the page.

sado lab current protocols with annotati

I was met with a list of links on the Protocols page. Clicking on the first link, a PowerPoint was downloaded on my computer. While this might be a good resource for a researcher, a general visitor would probably not appreciate having this automatically downloaded to their computer. I thought about how these documents might be presented in a digitized form.

I struggled to understand the purpose of several of the links in the Links page. I did a thorough audit of links, making note of which were still available, up-to-date, and relevant. Some links were only accessible to university members. I started ideating a Resources page with distinct sections that catered to a specific audience, such as useful databases for researchers or step-by-step protocol methods for students.

sado lab publications mid way_edited.jpg

If users wanted to read a journal article listed on the Publications page, they had to copy and paste the citation into the browser. Because there were so many articles spanning many years, they were overwhelming to look at and served little functionality.

IDEATION

I sought inspiration from sources as varied as NYU Langone, Spotify, and the San Francisco Ballet as I ideated the layout of the new website.

LOW FIDELITY WIREFRAMES

Sitemap: While still keeping the wishes of the client, I streamlined the navigation in the website by consolidating similar sections and using succinct titles. For example, a single page entitled People could hold what formerly was 5 different pages.

People page on mobile and desktop.

The Publications page would have journal articles linked directly to the PubMed page. The most recent publications are highlighted and organized by year of publication.

The AJP Heart Podcast section would feature cards with the title of the podcast episode, a brief synopsis, a button to listen to the podcast, and a button to read the article.

CHALLENGES & LEARNINGS

At this point in the design process, I gained access to website analytics and gained more insight into website traffic and engagement.

Learnings:

The vast majority of site visitors came through Windows PC (Chrome).
There was high engagement on the pages (News and Gallery) that showcased the lab atmosphere and activities.
There was no engagement on the Podcast page.
The nature of the site content, such as protocol resources is better viewed in print rather than digital form. Users prefer having a downloadable file (PDF or otherwise) that they can print and read in the lab.

Challenges:

Prioritize the architecture of the Publications page because it held the most content and would continue to grow. So that users could quickly view journal articles, each one would need to be linked to its publication page.
As there were hundreds of articles spanning 30+ years, I needed to organize the information in a way that was not overwhelming. I broke down the publications by year (until 2020) and decade thereafter.
All publications had to be numbered to differentiate between them and numbered from greatest to smallest in the order they were published. This required retrieving the publications from EndNote, transferring them to Excel, and then Word to properly format them.

INITIAL FEEDBACK

After talking over my evaluation and low-fidelity sketches, I received an initial round of feedback from my client.

Publications: It was preferable to link articles through PMCID via the Pubmed website. By linking the articles via PMCID, the articles can be read for free (after a 6 month journal copyright).

Media: Due to it being a low-priority feature, the podcast section could be put on backlog for the initial launch of the website. Instead, a Media page would feature lecture videos from YouTube.

Another development was a request for a Journal Club page. The Journal Club is a weekly event in which the Lab discusses a research article chosen by one of the lab members. The request was to update the page monthly to let users see which articles are being discussed by the Lab. To make the page easy to update, I decided to utilize a blog template.

FINAL DESIGN

You can view the full website live here: https://www.sadoshimalab.org/

I built the website for mobile and desktop in Squarespace, the original website host. I went with a blue primary color to convey trust and calm and kept a simple aesthetic, letting the content speak for itself. Featured publications are linked for easy access, while additional information is tucked into accordions so that they don't overwhelm the user when viewing the page.

IMPACT

Since redesigning the website the lab gained 650 visits in 3 months. Compared to the same time period as last year, mobile traffic increased from 127 to 194, an increase of 11%, while Page views increased from 1.9K to 2.8K.

By creating a blog-style template for the Journal Club and a buildable News section, the site stays adaptable to updates. It is easy to input new information and keep the website up-to-date with the latest news.

KEY LEARNINGS

This was one of the most fulfilling projects I've ever done because it allowed me to redesign an entire website for an established client. The lab had an impressive archive of research, content, and media that needed to be translated into a website that users could comfortably engage with.

One of the biggest takeaways was learning the user preferences of academia and the scientific community. What is common or trending in the general population does not necessarily translate to every user base. In this case, I learned that content is better accessed as downloadable PDFs as opposed to a web page.

A minimal aesthetic is not always functional or the best choice. While I immediately wanted to cut down on the number of pages in the navigation bar, I understood through my client that he would rather have a shallow website to mitigate users clicking endlessly to find what they are looking for.

It was only after I sketched low fidelity wireframes and began moving my designs to higher fidelity that I got access into the Squarespace platform and saw the website analytics. I went so far as working on my designs for the podcast page when I realized that people were not engaging with this page at all. Given the time constraint, we decided not to prioritize creating this page in the MVP. Had I noticed this before, I would not have spent time on a low priority feature. In the future, I will ask to gain access into website analytics as soon as possible.

Lastly, I navigated how to translate my design from Figma to Squarespace. Utilizing some coding for customization and learning the ins and outs of Squarespace capabilities, I was able to work efficiently and strategically in the 3-week timeline.