Ancestry Mosaic by John Wayne Hill, Design Director and Lead.

Discovering the culture and traditions behind your DNA

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.

Showcasing a two screen user onboarding flow for Mosaic

Ancestry Mosaic - Home and Discovery Belt screens

The main Home and Discovery Belt screens

Confidential

Speak Friend and Enter

Getting There

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.

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

Part of the design process for Ancestry Mosaic

Highlights

Key moments as the Design Director, Lead, and contributing I.C.

Designed and created vision prototype for experience

Lead multiple teams through design sprints

Learned from failures on the web

Strategically pivoted to iOS native app

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

Animation showing our custom drag-to-save interaction via the Onboarding experience

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.