23andMe
Learning about your ancestry couldn’t be easier
Our long term support for 23andMe included: building out portions of their public site(s), supporting marketing efforts, A/B testing of site performance, and much more.
We started working with 23andMe near the end of 2012 and worked with them for several years as they built out their own internal public marketing and design team. We also had the privilege of working with their internal product team.
Services Rendered
- Web Design
- Web Development
- Custom Illustration(s)
- Banner Ad Design
- Marketing Support
- A/B Testing
- UI Design
- Email Template(s)
The Inner-Workings
A Collaborative 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”.
One of our main functions with 23andMe was 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
At some point during out time working with them, 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
Part of the Team
Although Immersus Media acted as a contractor, we worked so consistently with 23andMe’s marketing department that it is as if we were an extension of their team. Regular on-site meetings, weekly conference calls, and routine stand up meetings 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 was simply part of the process.
A Special Project
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.
PR Support
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.
As 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.
Custom WordPress
23andMe Blog Rebuilt
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
A/B Testing
Getting Better Results
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 Marketing
Designing & Building Templates
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.
Banner Advertisement Design
We also designed nearly a dozen different online banner advertisements for 23andMe, each 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. Several of the banner advertisements had special requirements including animated effects, limited color palettes, and specific dimensions all while needing to adhere very strict file sizes. We got the job done and the client saw direct positive results.
A Successful Alignment
We worked with 23andMe for over two years and they grew immensely during that time period.
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 did our involvement with the company. Regardless of the degree of our involvement, our goal and relationship was always one of support, and to do what we could to assure that their company succeeded during our time working together.
