23andMe Brand

About the project and my role

23andMe is a company with a mission to help people access, understand, and benefit from the human genome. When we relaunched the product with FDA authorization of our carrier status reports in 2015, the brand team worked with an agency to refresh the visual voice of the company and pull it through to its marketing channels.

My role in this project was to pull through the brand’s building blocks that the team created, and to guide the growth of 23andMe’s visual brand. This included designing our public-facing website, the saliva collection kit, and various campaigns.

ChromosomesChromosomes

The 23 Pairs of Chromosomes

U.S. Pat. No. D785,672

I designed the 23 Pairs of Chromosomes as a part of a brand refresh at 23andMe. My goal was to create a visual element that embodied the company's mission of educating people about genetics while keeping a friendly and approachable tone. These chromosomes were pulled through to key aspects of the brand (marketing site, kit, product site, social, etc).

To keep the usage of this visual consistent throughout our brand, the following were my contributions to the styleguide.

When I designed the chromosomes, it was done with animation in mind to educate the users on variants and SNPs and the corresponding chromosomes. This style of animation was used on various display ads and social media assets.

THE SALIVA COLLECTION KIT
I co-designed the saliva collection kit in collaboration with another visual designer. The kit design is a core part of our user’s experience as well as a strong theme in our user-generated content. Because it is such a large part of our brand, we received many rounds of feedback from the brand team as well as the executive team. The chromosomes start on the left edge and go all the way around to showcase all 23.

Map of the World

I created this colorful vector image of the world to be used in various projects for 23andMe. The original version reflects a color scheme similar to the one in 23andMe's Ancestry Composition report, but is set up so that it can be manipulated.

map@2xmap@2x

I created this video for the social channel to promote the launch of the Ancestry only service. This video serves as a teaser for the Ancestry Composition report, in which the color wheel is a predominant feature. My goal was to bring life and meaning to what the colors mean in a clear way. This was in alignment with the overall brand goal of educating users in a bright, friendly way.

Creating a Visual Voice

23andMe is a brand that is continuing to evolve. With the strong mission as a guideline, I was able to help shape the direction of its growth. Here are some assets I’ve designed for 23andMe.

23andMe.com

The main goals for the 23andme.com website was to 1) embody 23andMe’s new brand, 2) present the information in an approachable way, and 3) sell kits! That last point also meant that the team wanted to create a modular website optimized for A/B tests. To accommodate, content was broken down into modules that could be easily swapped out.

I was a designer on the team that re-designed the 23andMe website in 2016. My responsibilities included designing, prototyping, user testing, and iterating as the product grew. I worked very closely with the engineering team, and continued to design the site for various marketing campaigns and to improve the user experience until I joined the product team in May 2017.

screensscreens

After the first round of designing, I created prototypes on invision for user testing. The team’s main objective was to test the easiest way for users to understand what they were receiving with the service. One of our learnings was that one of the first things that users looked for was a complete list of reports that 23andMe offered.

I designed this modal so that the user can easily see the full list, and then navigate back to where they left off.

This was a successful functionality for serving the user with relevant information without distracting them too much from the overall flow of the page. I later leveraged this design to make the FDA information more easily accessible as well.

important_modalimportant_modal

About a year after we relaunched the product, 23andMe added its second service: ancestry-only. This meant that the website needed some key changes to sell this additional service without confusing the users.

I designed a dropdown nav to make it immediately clear to the user that we now offered 2 services at different price points. This design went through moderated user testing to make sure that it was clear to potential customers.

The availability of two products was iterated again through the use of cards on the homepage and a new page in our site architecture that showed the differences in detail. I also designed new modules for the ancestry service page as that product became more robust.

Campaigns

The website showcased numerous campaigns that aligned with the creatives presented throughout multiple social channels. These are some of the designs for the homepage or landing page that I’ve worked on.

Despicable Me 3 landing page

Roots banner on homepage and dedicated campaign landing page

WHAT I LEARNED

As I worked with the brand team, I learned how to tell a story through visual design. Since I was able to contribute to the brand styleguide in addition to working on its application, I developed skills that allowed me to use the styleguide as a tool and not a restriction. Being intentional with my design helped me stand up for visual decisions that I believed in. The numerous assets I created also strengthened my knowledge of creating successful designs on various platforms.

Designing and iterating on the 23andme.com site improved my ability to communicate and work with our very talented engineering team. I learned a lot from them on responsive design, handing over specs, creating efficient templates, and most importantly on compromises and trusting each other’s expertise to successfully deliver the final product together.