Treating Users Like Family: How Ancestry Optimized the UX for Its New Feature AncestryDNA Traits

Illustration: Justin Cheong.
Treating Users Like Family: How Ancestry Optimized the UX for Its New Feature AncestryDNA Traits
Adobe Products Featured

Those who use Ancestry.com tend to share one thing in common: they’re looking to better understand who they are and where they come from.

If they’re not digging through the extensive genealogy records to piece together the branches of their family tree, they’re discovering the makeup of their own unique DNA, which is obtained by taking a simple at-home saliva test that is then mailed to the company for analysis.

From a designer’s perspective, what this amounts to is a heck of a lot of data. More than 10 million users have taken the at-home DNA tests. Each test provides insight into a user’s unique ethnicity and genealogy, and a new product takes that one step further. AncestryDNA Traits, which launched this past Thanksgiving, provides users with insight into traits such as their likelihood of having a certain hair color, freckles, eye color, or a taste for cilantro, then compares it to other users who share aspects of their DNA.

“We wanted to leverage our strengths as a company and that’s our records, our science, our matches, and our ability to compare and give matches⏤that’s something that other companies are not able to do,” said Angela Alarcon, UX lead at Ancestry.

This mobile user flow built in Adobe XD provides users with insight into why their DNA indicates that they’re more likely to have darker hair.
This mobile user flow built in Adobe XD provides users with insight into why their DNA indicates that they’re more likely to have darker hair.

DNA doesn’t always tell the full story, Angela explains. The tool aims to break down the science behind trait-based DNA results and educate users on how they may have inherited certain traits and where those DNA connections come from. For example, your DNA may suggest you’re more likely to have brown hair, but you came out blonde. It’s an interactive education product that deepens the exploration of where a user’s unique traits are rooted.

Translating this data to easy to comprehend, informational, and powerful user experiences is no small feat, nor is it something the team takes cavalierly. To produce a new net product and launch it in 11 months required copious amounts of iterations and user feedback to bring DNA Traits to life. A process that relied on tools like Adobe XD to enable quick, quality designs.

Treating users like family

Using Adobe XD, the team designed simple UX and UI flows that allowed them to iterate quickly and easily, refine their process and develop beautiful, functional solutions across multi-platform experiences. The simplicity of use for the creative team helped them bring their ideas to their most important stakeholders: the users.

“We’re really close to our users. It’s almost like you’re in the service industry in some way as a designer because you want to deliver something that is useful, that will change their lives, and create stories,” Angela said.

The team had a hard goal of delivering DNA Traits before Thanksgiving. They wanted to give their users something to talk about during their family dinners because that “spark of connection,” as Angela describes it, is such a vital part of their whole user experience. The team has heard countless stories from users about how Ancestry has connected them to long lost family members, biological parents, and now, through Traits, helped them understand where certain traits of theirs come from.

This mobile user flow built in Adobe XD shows some of the information presented to users on the AncestryDNA Traits homepage. Users can click in to learn more about appearance traits, sensory traits, and more.
This mobile user flow built in Adobe XD shows some of the information presented to users on the AncestryDNA Traits homepage. Users can click in to learn more about appearance traits, sensory traits, and more

Having such a close dynamic with their users has enabled the UX team to get to the root of many of the design challenges they’ve encountered over the years. For example, one feature that Ancestry is really proud of is the platform’s ability to connect users with other users who share similar DNA. The team created a messaging app to allow the users to connect with one another, but they weren’t getting the usage they expected.

“A lot of designers would be like, oh, we just have to create a better messaging system,” Angela said. “But if you keep talking to the users, you discover the problem is not the messaging system. The problem is that the users are afraid to be vulnerable.”

Angela is an empathetic person by nature, so she can better relate to and address a user’s pain points, something that has served her well in her role as a UX designer. She sees the emotional aspect behind what users actually need, and by talking to them through regular research sessions, she’s able to better understand what’s inside of that.

With the messaging system, her team realized the design of the messaging app wasn’t the issue, it was that the users felt vulnerable and hesitant to reach out to someone they hadn’t met before. What they wanted was something to break the ice, so the team built out a feature that shows the users what they have in common with the other user and gives them some talking points to help alleviate some of that hesitation.

“Instead of just describing the solution, you have to listen and think about what they actually want. This is a people job. You have to love what you do. You have to love your users. You have to care about them. What do they really want? What are they really saying?” Angela said.

This requires UX designers to truly listen to users. Angela is reminded of the popular quote by Henry Ford, “If I had asked people what they wanted, they would have said faster horses.” What they really wanted was to get places faster. What that meant was so much bigger than the obvious assumption of faster horses.

To learn more about AncestryDNA traits, head over to Ancestry.com, and for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

Adobe XD

Design. Prototype. Share. All in Adobe XD for FREE. Build your chatbot strategy with Adobe XD, the first all-in-one tool for creating and sharing website and mobile app designs.

Learn More Learn More

Recommended Articles