Experience Strategy
With Ancestry’s interview data on predisposition and diagnosis, we identified a key insight: though genetic conditions are often manageable — if not entirely preventable — their perceived inevitability frequently leads to despair. Further, the stigma associated with discussing health often prevented patients from taking further action, despite the clear consequences to their health or relationships.
We set out to create a responsive web product that would securely learn about a users genetic health through DNA sequencing and family health history, and provide them with rich, actionable health and wellness reports with a focus on user comprehension.
Experience Vision
We created an experience vision to guide our process throughout the project that aided in establishing long term product goals, creative pillars, information architecture, spatial models, visual styles, and to fuel the design system.
We worked with content writers, scientists, genetic counselors, and medical partners to create a beautiful editorial reading experience, over 15 health and wellness reports, an interactive family health history tree, a chat based ingestion experience focused on bed-side manner, DNA kit tracking, and other onboarding education tools.
Design System
The project called for an entirely new design system. We needed the system to scale from 4 categories of over 15 highly customizable reports at launch to over 10 categories and several hundred reports. The system needed to allow for the creation of family trees with non-genetic and non-traditional family structures.
We worked to evolve and modernize Ancestry’s genealogy brand experience for the AncestryHealth system. We used large swatches of vibrant colors to contrast Ancestry’s black and white photography, while balancing white space and layout density for editorial focus and reading comprehension. The system needed to be able to quickly grow from serving web technology to serving native applications, it had to serve a variety of users in different emotional states of their health journey, and be able to deliver bad news with compassion, hope, and optimism.
Illustration System
In order to orient people and communicate scientific information clearly without negative emotional associations, we opted away from stock photography, that lacked representation, and graphic technical drawings, that can be uncomfortable, for an abstracted illustration language and system that touches every part of the experience. It uses color, shape, and opacity to abstractly categorize and scientifically represent reports, stylistically paint charts and graphs, communicate technical diagrams in an approachable way, and iconify glanceable information.
Implementation
The aggressive timeframe of the project required us to organize and balance design sprints and communicate with 4 in-house domestic and international engineering teams to build the product. We created and shared feature specific handoff documents, functional prototypes, animation reference, and front-end code samples. We also created production animation files and worked with their engineers to implement Lottie, an animation framework, to be able to display those animations in the browser with little engineering effort.
Launch & Onward
We went from concept to launch in just 9 months, and handed off a living design system for their internal product team. They’ve been learning from their customers and have received hopeful stories about how their experience drove them to seek a medical diagnosis and changed their lives.
The AncestryHealth platform was designed to help people understand risk for developing certain inheritable health conditions. While the initial product launched with microarray-based testing support, they’ve since been able to seamlessly scale to Next Generation Sequencing (NGS) for more comprehensive screening on the platform.
