Rare Genomics Institute Web Redesign


Goal: To redesign the frontpage and CTAs for the Rare Genomics (RG) Institute, a 501(c)3 non-profit within a two-month timespan. Starting from cross-functional team strategy to execution within limited volunteer hours.

THE CHALLENGE

REDEFINING THE STORY

As a volunteer, I’m extremely proud to support the non-profit 501(c)3 non-profit organization, Rare Genomics Institute as my first real UX/web design position after completing my CourseEra UX certifictions. Their mission? To help all those struggling with rare diseases to have a hope to progress and cure for rare diseases through utilizing the power of crowdfunding.

The first thing that jumped out to me immediately after my onboarding was that their website was not being utilized optimally. To me, this was a huge oversight as the organization is largely digital-based, so having a website or homepage that could tell their story better was an absolute must. What immediately threw up red flags to me was that their donation CTAs and mission statement were getting lost on the original homepage as the content was all crammed together without any way to quickly discern what was what.

Design constraints included:

  • Two-month timeline to produce a redesign website by the end of February 2019.
  • Limited amount of time, max of 10, that team members were allowed to volunteer per week.
  • The existing Rare Genomics website was using a limited version of Squarespace.
Rare Genomics Website 2016-2018

Rare Genomics Website 2016-2018


MY ROLE

ADVOCATING FOR UX DESIGN

As a volunteer web/UX designer that was working within the marketing department, it fell to me to utilize my years of digital marketing experience, graphic/web design and UX/UI knowledge to help prepare the organization for their upcoming website push for Rare Disease Day 2019.

Since the organization was in a very young UX state, I also had to advocate for improving processes to executive teams as well as coordinate collaborative design efforts during weekly remote meetings. This involved basic wireframe sketches and prototypes for the team as well as explaining what UX/UI and why we had to use it to improve the basic website flow for Rare Genomics.


DISCOVERY

OPTIMIZING WITH SQUARESPACE

rg_process-2

Quantitative Research

Building the hypothesis
As the organization already put a significant investment into Squarespace, I was a bit restricted in the design aspects of building a revised website. By performing a relatively short QA check on the site as well as checking the company’s Google Analytics I was able to form several hypothesis. According to the analytics, users were often spending a lot of time on the homepage looking for things like donation button as well as the company’s story and navigation and were then bouncing off of the site out of frustration. As a result I proposed to make the site more scannable and placing an emphasis on the organization’s mission.

RareWear homepage redesign documentation

Redesign proposal to the executive team.

Qualitative Research

Usability Testing
As the executive team wanted to get the site relaunched by Rare Disease Day, February 28, I had to work within the amount of time that other volunteers could allocate to work as a cross-functional team. This was easily a huge challenge as there was potential for a huge amount of bottlenecks. With this in mind, setting up milestones for myself was an absolute must.

As a result, the MVPs had to be built quickly to allow the team to internally test the website a week prior to launch. Although I had to solely rely on unmoderated remote testing for feedback, we were comfortable enough relaunching and made the deadline.


DESIGN

EMPHASIZING SCANNABILITY

Low-fidelity Wireframe
As I had to rely solely on Google Analytics as the only indicator of user behavior, my research told me that one of the major issues was that people were getting overwhelmed by having to search the homepage for things they needed. By moving it to a more visual z-pattern from its original F-shape, I felt that it would help achieve several things for the organization:

  • Bring the non-profit’s story to the forefront.
  • Declutter the website’s navigation unorthodox rightside navigation.
  • Give the donation button additional visibility.
rg-mockup-022619

Balsamiq mockup.

Prototype

Since the organization was using Squarespace, I duplicated the website and built a live prototype using the site’s drag and drop features for usability test amongst the team. Although I was not able to get it out to customers to test, we were able to catch all bugs and areas of improvement using this methodology.


MVPs

SIMPLIFYING THE DONATION PROCESS

The first major piece of work for the relaunch was creating the MVP. As the site was being underutilized, the team and I decided that we would start with creating a more prominent donation button and to place it in the top-right corner of the navigation bar. After tinkering within the limitations of Squarespace, I eventually managed to develop a solution that works across most screens.

While it isn’t perfect due to Squarespace’s lack of flexibility, it works for what we need it to do. So far, it’s led to a higher amount of visibility as clickthroughs to our causevox page went from only about 14% on average the previous year to over 40% after I implemented it. This proved to us that we were heading in the right direction for the redesign by rolling out the donation feature first.

rg-new-022719

The “donate now” MVP.

In addition, I had the foresight to simplify the company’s donation page which originally featured two CTAs without giving the user a proper explanation of which button went where. Although I was unable to validate it, I felt that it led to user confusion as users weren’t sure what exactly they were donating to. In the end, I was able to help the organization receive more than a 500% donation increase over 2018.


Through improving Rare Genomic’s website experience and marketing contributions, I was able to help raise over $5,000.00 for Rare Disease Day.

A NEW INITITATIVE, A NEW LOOK

While much of the design work only involved using what was already in place to enhance the site and streamline it, I did have an opportunity to create additional landing pages that used the existing visual design and combined it with what I learned from my online classes at Coursera. This was best exemplified with the online landing page for our newest initiative RareWear where I had to take an existing flyer and use that as a template.

For this page, it was crucial that we use it to try and attract more potential partners to the program. Hence my personal decision to design three large icons that would provide enough context to explain why someone should work with Rare Genomics and leaving tons of whitespace on the page. After review from multiple teams, they all loved the design and thought that it worked great in conjunction with the rest of the site.

Although the page has now been updated to reflect the product’s actual launch, it was a critical marketing piece that helped the product become a success today.

rarewear-page

RareWear Landing Page

A NEW LOOK FOR 2019

While most of my available bandwidth was dedicated to improving the donation process and building out the RareWear page, we were also working on documentation and mockups for how the homepage would look and act. As we wanted to make things as easy and clearcut for the user as much as possible, we decided to implement a zigzag pattern to the website to help place emphasis on the company’s marketing initiatives.

After designing some potential mockups on Balsamiq, the team and I decided to place the high-contrast dark purple buttons strategically and guide the user so that it would end at our last CTA. That way people could learn more about volunteer opportunities and about our donation process. Two things that our executive team decided that we need to place a huge emphasis on for a redesign.

rg-new-cta-022719

The New CTAs

In the end, my efforts were able to dramatically help improve the performance of the homepage and website, decreasing the bounce rate from a staggering 60% to much more manageable 25% and reducing the amount of time that users had spent looking for things on the previous homepage.


CONCLUSION

LEAVING A LASTING IMPACT

Although I had only volunteered to the organization between October 2018-May 2019, I thoroughly enjoyed my time there and learned a lot about the lean UX process. By building various hypothesis and then testing them on a live site, I felt confident in pursuing future UX/UI opportunities as it gave me a solid start to my journey. Knowing that my actions could impact an organization for the betterment of users and company’s bottom line alike solidified my beliefs that I want to become a UX designer. I’m happy to report that the organization is still using much of the layout changes that I had implemented to improve their user experience.

It was using my foresight that I wanted to leave it as easy as possible for the team to make changes after my departure as well no matter the person’s technical level so I had to work within their template’s constraints. As it took all of the knowledge that I had accumulated in marketing, design and web development throughout my career as a designer to improve their site, it felt like the perfect next step in my career!