Ancestry Mosiac screens with content cards on either sides

Ancestry Mosaic

by John Wayne Hill

Discovering the culture and traditions behind your DNA

Role Director of Design Teams 2 Full Teams Released Dec. 2019

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.

Ancestry Mosaic - Home and Discovery Belt screens

Confidential

Speak Friend and Enter

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.

illustration of 3 people working on laptops together

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

illustration of two people high fiving in a forest with fireworks overhead

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.

Ancestry Mosaic. Details of the Discovery Belt feature, used to save cards and discover what does it mean to be irish.

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.

Ancestry Mosaic. Discovery Packs of content about the cultures and traditions from your DNA.

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.

Ancestry Mosaic - Detail screen, Mosaics page, and End of Discovery Park Card Survey

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

Additional Details In Person

Thanks for checking out my work! This is just a high-level overview for this particular case study. During in person interviews and presentations I go over additional details such as strategy, process, my direct contributions, and more. Get in touch if you'd like to learn more!

Contact Me