Rare Genomics (RG)
I worked as the lead web designer to update the Rare Genomics Institute’s website, ensuring it meets modern web standards and increases visibility for their cause. A case study on transitioning from Squarespace 7.0 to 7.1.
-
Rare Genomics is a nonprofit organization that supports individuals with rare diseases by providing access to cutting-edge research, genetic testing, and specialized medical care. Their website, a vital resource for patients and researchers alike, needed a redesign to improve usability, modernize the user experience, and better align with their mission.
My role as a Web Designer involved conducting research, designing solutions, and collaborating with stakeholders to deliver a website that caters to their users' needs.
-
Lead UX Designer (Me), UX Designer (Crystal Huynh) & Rare Genomics Marketing team
-
June 2024 - Present (In final stages)
Before
After
Problem Statement
The Rare Genomics website struggled with:
Outdated design that lacked a clear visual hierarchy.
Navigation challenges, making it difficult for users to find essential resources.
Limited accessibility for individuals with disabilities.
Inefficient content structure, which hindered users from understanding Rare Genomics' mission and services.
The redesign aimed to create an intuitive, visually appealing, accessible website that seamlessly guides users through information and resources.
Process
Discovery & Research
The Research and testing phase lasted two months, with one month of user research and one month of gathering stakeholder input and analyzing data collected from various sources.
Tree Jack testing: Performed testing to evaluate the website's information architecture.
Stakeholder Interviews: Collaborated with Rare Genomics' leadership to understand their goals, priorities, and challenges.
User Surveys: Conducted surveys with patients, caregivers, and researchers to identify pain points and desired features.
Competitive Analysis: Analyzed similar nonprofit and healthcare websites to gather insights on best practices and innovative feature
Web analytics & Insights: Analyzed page views, bounce rates, and eye-tracking data collected from Squarespace, Google Analytics, and Hotjar to gain deeper insight into the factors influencing usability and user engagement.
Tree Jack Testing
Tree Jack testing identified several issues with the current website layout. Specifically, new users had trouble finding key pages that we aimed to direct traffic to. Specifically, users had difficulty discovering the programs that RG offers. The diagrams below illustrate the testing demographic, along with my suggested changes after multiple tests on both the original structure and the modified version.
Stakeholder Interviews
The most common thread among stakeholder interviews was that the website was severely outdated and needed a refresh, both in terms of design and content. One stakeholder, the head of patient advocacy, emphasized the need for a more straightforward and accessible application system for the patients and patient families applying to RG’s programs.
“I’ve often heard from patient families that they had a hard time finding our programs on the website. While we can send them resources ourselves, it would be great to have an updated website that we can direct patients and their families to.”
The interviews reinforced the need for an updated website and provided direction on which areas to focus our efforts: the homepage and the program pages.
Design
After determining which pages needed our focus for redesign, I created a redesign checklist and split the pages between my co-designer and me. I focused on the homepage and a new programs hub page that summarizes each program and leads to more information on each, as well as some of the individual program pages.
Our redesign efforts included the following:
Wireframes and Prototypes: To outline the new structure, low-fidelity wireframes were created, followed by high-fidelity prototypes using Figma.
Style Guide: Developed a style guide featuring accessible color schemes, modern typography, and visual elements that align with Rare Genomics' brand.
Content Strategy: Collaborated with content creators to rewrite and restructure content for clarity and engagement.
Homepage
The redesign of the homepage involved creating a new hero image, introducing a way to direct users to RG programs, and optimizing the information-dense page to include only the most important elements.
After several iterations and feedback from the marketing team, I landed on the following hero image. I also designed some new logos for the RG programs, excluding Rare Share, which I included in a summary section towards the top of the homepage.
The ‘What is RG?’ section replaced an introductory video created over 10 years ago, providing a concise summary of the organization in its place. The box below it highlights and summarizes each of the programs RG offers.
A Heatmap of Rare Genomics’ previous homepage
A heatmap of the homepage revealed that very few users clicked on the video, with most instead going directly to the About page or the contact button. To the left is a 6-month heatmap of the previous homepage.
Another notable discovery was the popularity of the Rare Disease List (A page which details known Rare Diseases), which was confirmed through Google Analytics to be the most visited page on the website.
A Heatmap of the Rare Disease List from Rare Genomics’ previous homepage
Based on the heatmaps, Google Analytics page views, stakeholder interviews, and user surveys, I determined which sections of the homepage to keep and which to add or remove. In addition to the introduction section, I added sections for patient success stories, rare disease facts, and an overview of Rare Genomics’ impact. I removed a redundant social media section from the redesign, as well as the current homepage, and removed another video that was not gaining traction. The Rare Diseases list section was shortened, and the other links were optimized based on important touchpoints and popular pages.
Testing and Iteration
Testing and iteration happened throughout the redesign process. As page designs were completed on Figma, my co-designer and I would share them with our team for immediate feedback and make content or design changes accordingly.
Testing and iteration for this project included:
Usability Testing: Conducted remote and in-person testing sessions with target users to gather feedback on navigation, layout, and readability. I also plan to conduct additional tests once the website is launched.
Accessibility Audit: Utilized tools like WAVE and manual testing to ensure WCAG compliance.
Iterative Improvements: Refined the design based on user feedback and stakeholder input.
Development
After testing and iteration, the design was approved by stakeholders at Rare Genomics, and my co-designer and I moved to development on Squarespace. We decided not to redesign our version of Squarespace (7.0) since support for that version had ended, and instead recreated the site on Squarespace 7.1. Although Squarespace has a conversion tool, it was unusable due to the site's size and theme incompatibility.
Downloading Content from Squarespace 7.0: Downloaded all content from the current website and saved it onto a shared cloud drive.
Designing pages on Squarespace 7.1: Developed the Figma designs into web pages for the new version of the website. This involved applying styles, setting standard formats, and some custom coding. Other pages were copied as they were, with a few small changes and updated information where needed.
Preparing for launch: The website is being prepared for launch. APIs, newsletter contacts, Google Analytics, and the domain are currently being prepared for launch by the beginning of August.
Outcomes
The redesign on Squarespace is now complete, and the domain is being transferred to the new website.
Although the domain transfer is still underway, the small changes we have made to the current website, such as improving the blog structure, removing outdated content, and implementing SEO modifications, have helped increase web traffic, donations, and patient participation in our programs.
Next Steps
Ensuring consistent design across all pages of the website
Ensuring all content from version 7.0 of the website is backed up
Launching the new version of the website by the end of April
Monitoring web traffic through Google Analytics and Squarespace
Gathering additional feedback from subscribers