Ancestry®

Client

Ancestry®

Year

2019

Services

Web Design

Design system

Ancestry® is the largest American genealogy company with a long and rich history. It's a huge ecosystem with many divisions and the largest data archive in the United States. We faced a large-scale task of creating a universal design system concept that would bring together all of Ancestry's products and services. This involved developing a component library, defining rules for how elements interact, and compiling all of this into a user-friendly and detailed style guide.

Concept and Components

As Ancestry's products cater to a diverse range of users, accessibility became a key principle for us. We began by simplifying and geometrically refining the logo. The design system was also built upon the visual style and organized structure of the library archive, making it easy to find necessary information.

We refreshed the color palette, assigning each product category its unique set of colors. Regarding fonts, we minimized variations in font size to streamline the work for both designers and developers. In addition to a strict modern grotesque, we introduced a distinctive and refined antique font. Ancestry's design system employs a single grid system, meticulously crafted to facilitate working with content, whether for promotional landing pages or interfaces.

The Leaf

In addition to creating a design system, the task included enhancing recognition within interfaces. To achieve this, we refined Ancestry's key symbol — the leaf. We simplified its shape and introduced various uses for this element in both visual communication and interfaces, such as employing it as a form for avatar photos. The leaf functions seamlessly across different backgrounds, sizes, and includes an additional element — a stick-like stem.

Icons

Icons are constructed on a refined grid, inheriting various line thicknesses, fill principles, and protective margins. As a result, all of them, including the smallest ones, are clear and predictable.Even in the simplest elements of the design system, we incorporated unique states. Additionally, we meticulously outlined the rules for designers to interact with the component library in Figma, ensuring ease of use.

Illustrations

We developed three illustration styles for Ancestry. Each strikes a balance between uniqueness and universality, simplifying the process for designers when creating new visuals. The main style operates on the Mix & Match principle, allowing images to be adapted and extended by combining existing elements. The second is designed for detailed one-color illustrations, and the third involves simple, less detailed pictographic images.

Cards

We introduced original solutions for Ancestry's editorial content as well. We designed a card system that functions like a set of modules with an infinite number of combinations. Each component can be combined with others, creating a new element.

Layouts

Layouts designed for more complex content, such as articles, were also added to the design system. On these pages, we enhanced typography, making it aesthetic and expressive.We created several playground files where you can explore the functionality of the design system. Additionally, there is a guide available online that covers all the principles of the system, providing a detailed description for each section.