Portfolio

Portfolio Archive                

Client

23andMe, Inc.

Project

23andMe - Ongoing Development, Design, and More

Brief Summary

We started working with 23andMe near the end of 2012 and have been enjoying the on-going collaboration ever since. 23andMe keeps us busy on everything from updating their public website, to creating new landing pages for various campaigns, to email templates and much more.

View Site

23me_572x780_post_image_1

The Inner-Workings

An Extensive Team Effort

The very first big project Immersus Media did with 23andMe involved crafting a landing page to coincide with their advertising campaign on PBS’ “Finding Your Roots with Henry Louis Gates, Jr.”. It’s an honor to work with an organization doing amazing things.

One of our main functions has been to perform regular updates to the public site. With such a large company this was no small task. It included general updates, such as adding new sections to various pages, swapping out images or graphics, adjusting copy, and updating to the overall aesthetic of the site.

Long Term Client

A couple of years ago, 23andMe went through a visual re-design of their public website and Immersus Media was there to support the re-launching. In cooperation with 23andMe’s engineers, we worked on the front-end development to build out the new public site. This required a strong working knowledge of HTML, CSS, and JavaScript, as well as being able to adjust 23andMe’s Python templates, as needed, while working according to their release cycle.

The front-end redesign was quite extensive and included items such as:

  • Front-end development for the new site overhaul
  • On-going updates throughout specific sections of the site
  • Building out various pages in collaboration with 23andMe staff
 

A Team

Although Immersus Media is a contractor, we have worked so consistently with 23andMe’s marketing department that it is as if we are a member of their team. Regular on-site meetings, weekly conference calls, and the occasional stand up meeting were just part of the business relationship.

In support of various marketing campaigns, Immersus Media created a myriad of different short run landing pages. We developed several updates to the public site that sometimes never saw the light of day – iteration and evolution is simply part of the process.

DNA Melody Player

Immersus Media also had the opportunity to do design and front-end development of the entire page of an Ancestry Lab, part of the logged in experience, including the DNA Melody music player housed therein. The custom tool takes the structure of your DNA and uses that to create a short little musical melody.

23me_554x657_post_image_11

23me_572x664_post_image_10

23andMe Media Center

We designed and developed a custom WordPress site so that the Public Relations department at 23andMe would have an easy way to update their public presence, with press releases and pertinent media content, without being restricted to the main release cycle of 23andMe. We built a completely new WordPress theme just for the purposes of this site. It is worth noting that we didn’t build on another template or buy a pre-made version of a theme. At the time, 23andMe was using the front-end framework called Bootstrap on their public site so we incorporated Bootstrap into the theme.

The custom features within this website are numerous. When developing features we work towards optimizing the front end user experience and simplify the back end. In the example of the 23andMe media center we created custom post types in the WordPress backend so that individual updating the site has a highly functional and user friendly experience.

23me_300x225_post_image_01As specifically requested by the client we implemented a special filter that organizes all the posts on the page into an accordion sorted by year. One variation of this page includes the functionality of adding thumbnails.

23andMe Blog

Formerly referred to as ‘The Spittoon’, the 23andMe blog was yet another custom website that was designed to match the look and feel of the main website. We built this site completely from the ground up. The WordPress theme was custom built and specialized exactly to the requirements and requests of the client. Here is the original version we created before the brand re-design. Immersus Media also had the privilege of redesigning the blog logo.

The blog had a large amount of pre-existing content. Not only did we build a completely new WordPress theme, we made it all work with the years of posts that were already on the site. Some development highlights from the blog project include:

  • Homepage slider utilizing an adapted version of AnythingSlider jquery plugin with integration via a custom post type for easy updates
  • Latest posts from each major category automatically display on the home page
  • Accordion of recent, popular, and random posts on home page
  • Related posts show up on individual post pages
  • Incorporated Disqus comments to replace the default WordPress comments
  • Previous and Next link on individual posts
  • Ability to have different content in the sidebar on various pages

23me_572x578_spitton_blog_image_01

23me_672x797_post_image_09

a_b_testing_design_004

A/B Testing

We helped 23andMe run A/B testing on several projects in order to refine web pages to increase engagement, interaction and conversion. This included setting up tests on section of their three public sites via Optimizely. These tests often included fairly advanced changes to HTML, CSS, or JavaScript on the page(s).

Email Campaigns

Email campaigns with customized email templates are a great way to generate traffic and sales. This was another fundamental part of our involvement with 23andMe’s marketing. Although we can handle all aspects of custom email template design and development, for 23andMe we managed the coding, initial testing, and templating portion of several email templates over the last two years.

We added a unique automation feature to the blog’s email template that 23andMe found particularly effective. After a user subscribes to the email they would receive weekly updates of new content that was added to the blog, all without any additional work on the part of 23andMe. This automated process includes a feature to ensures that a user is never sent the same content twice.

23me_798x773_email_image_03

Banner Advertisement Design

We also designed several online banner advertisements optimized for various display sizes. Professional design becomes very important when working with such a tight canvas, and having viewers attention for a short amount of time. Notice that the layout flow accents the brand and includes a firm call to action.

Longterm Success

We’ve worked with 23andMe for over two years while they have continued to grow immensely. When we first started, they had a very limited marketing team but over time their marketing efforts and department grew substantially. As their marketing efforts evolved so has our involvement with the company. Regardless of the degree of our involvement, our goal and relationship has always been one of support, and to assure that we help their company succeed.

You may also be interested in:

       
       
Like what you see? Get in touch
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-3884159-1');