Ancestry Mosaic icon

Ancestry Mosaic

Discovering the culture and traditions behind your DNA

  • iOS
Role
Director of Design
Teams
2 Full Teams
Released
Dec. 2019
Ancestry Mosaic screens with content cards on either side

Overview

What does it mean to be Irish? Through user research and generative methods, we found an unmet need in the world. Customers wanted to explore deeper into their DNA, beyond a pie chart, and know “what does it mean Irish/Norwegian/German” and more.

Mosaic helps people connect with cultures, traditions, values, lifestyles, foods, and more from the DNA they inherited from around the world.

About

Background and Team

Working with VP’s of Design and Product, I lead a team of designers through multiple, iterative design challenges to find a single, simple way for people to explore cultures related to them. Our team consistend of 4 designers, plus myself as a contributing designer, along with 14 engineers and 2 product managers. This was a tight-knit bunch set of releasing a brand new app within a 10 week timeline.

Engineers

14

Designers, including me

5

Product managers

2

Ten weeks from design start to release on the Ancestry DNA app.

About

Getting There

We started with a large set of teams utilizing design sprints to get started. Teams worked from a prototype showcasing the product vision and strategy. Through multiple iterations and beta releases on the web, we found that customers were seemingly not interested in the experience. Our product lacked cohesion and rationale, and was complicated with messy navigation.

In the last half of the year, the design team came together to formulate a new strategy. We focused on a sole platform and worked to create a simple experience that could span and scale. Multiple concepts were created and tested, eventually simplifying down to a core experience. But we had a tight timeline to release by the holiday season. With ten weeks of design and development work, we released Mosaic on the Ancestry DNA app on December 20, 2019. Over the next month we measured our metrics and hypothesis and found that our new experience was hitting on all metrics.

Showing the process of designing Ancestry Mosaic with whiteboards and sketches

Overview

Highlights

Key moments and responsibilities

  • Designed and created vision prototype for experience
  • Lead multiple teams through design sprints
  • Learned from failures on the web
  • Designed custom drag-to-save interaction (patent pending)
  • Drove new visual design for the app
  • Released MVP after 10 weeks of design and development
  • Personally dove into design work, content creation, and JSON feed help

10 weeks

from design start to shipping on the Ancestry DNA app

Released 20 December 2019, after a year of learning from the web.

Design Details

Ancestry Mosaic was a breakthrough experience allowing customers to dive into the traditions and cultures of their past, which are often lost over time. This product was released as a Beta in December 2019, and was just a small sliver of the entire product we wanted to release. The following screens are shown via the iOS app.

The main interaction of Mosaic is a simple drag-to-save micro-interaction. This came about after multiple iterations and testing. Haptic feedback was used while dragging for customer feedback, and saved cards/content are displayed as a stack of cards at the bottom of the screen.
For the onboarding, we wanted to get customers curious to find and explore more about themselves, as well as teach them the basic interaction of dragging to save cards and content. We created a custom animation with motion design to celebrate the success of the interaction, and brought the why back into play with a subtle reminder.
Left: Showcasing the start of our onboarding for the Mosaic feature. Middle and Right: Showcasing new content, displayed as weekly 'packs' based on the customer's DNA and indicated interests.
Left: Users could open any card into a detail view. Middle: the Mosaics view to see Cards and Mosaics you've saved. Right: At the end of a Discovery Park, we ask a simple survey question and thank the user.
Example Card types for various media types

This is a high-level overview. In interviews and presentations I go deeper on strategy, process, and my direct contribution — get in touch if you'd like to see it.