Select Page

Takeoff – a new way for Apollo.io to design system

For a growing company such as Apollo.io, having a good design system is crucial as it establishes consistent and coherent user experiences across the product. The new design system “Takeoff” would play a critical role in ensuring that users have a consistent and seamless experience throughout the entire product. It also would serve to facilitate effective teamwork and enhances scalability by providing a solid foundation for future growth. Additionally, the design system maintains visual consistency, which strengthens the brand identity of Apollo.io. With streamlined design and development workflows, the company would be able to efficiently meet user needs and stand out in a highly competitive market, thereby boosting overall productivity.

Components

Overview

My Role

Lead Product Designer and UX Researcher

Team

Product manager, 2 product designers, front-end development

Tools

Figma, Zeroheight, Notion, Slack, Storybook

Deliverables

Strategy, process, management, research, governance, components, support, user testing

The Problem

Apollo’s previous design system lacked consistency, resulting in fragmented user experiences and an extended time-to-market. The absence of one centralized source of truth and the proliferation of contributions led to difficulties maintaining 1:1 parity with engineering. To address these challenges, there was a clear need for a centralized design system offering flexible and user-friendly reusable components, along with standardized documentation practices and strong governance. Through the implementation of this design system, my goal was to optimize workflows, foster better collaboration between designers and developers, ensure visual and functional consistency across various products and platforms, increase productivity, and enhance our brand identity.

Card

A fresh Figma file organization

My initial priority was to establish a foundational framework for organizing the system effectively. It was imperative to devise a structured format that would facilitate seamless component and pattern access for both designers and developers. To achieve this, I introduced the following structure:

Old
new

Figma file structure

I effectively transitioned our organizational approach from maintaining separate files for each component to consolidating them into five pivotal published libraries:

Foundations

Colors, typography, iconography, elevation, spacing, motion/timing, grid and breakpoints

Components

All core components in their most generic state

Patterns

Fleshed out examples of our core components in actions

Templates

Full page designs for each feature surface

Data viz

A library for all data visualization including charts and graphs

This structure would allow for easier editing and publishing as well as and provide product designers an easy way to locate the component or pattern they would need to use.

Anatomy

Documentation

Our 1.0 version of the design system did not include any documentation. 

“If it isn’t documented, it isn’t a system”

We needed to get documentation in place for our new system to allow designers and developers to have a comprehensive reference guide that provides clarity, consistency, and standardization for designers, developers, and other stakeholders, ensuring seamless collaboration and facilitating efficient implementation across various projects.

I set up ZeroHeight for documentation and ensured it followed the same structure as Figma so that designers and developers could find what they needed quickly and easily.

Governance

To have a successful design system while working with multiple designers and developers to create high adoption, design systems must be systemized from the team up. One of the first things I did before even beginning the design work was to set up these processes. 

A comprehensive design, intake and governance process

Requests
d

A backlog and intake process

I instituted a backlog and intake system to keep track of requests and bugs and also created guidelines for how we make decisions on what new components and variances we take into the system. This process also included how we track our progress internally as a team with excellent visibility.

t

Questions anyone?

At Apollo, we utilize Slack as our communication platform. Recognizing the need for both designers and engineers to have a dedicated space for addressing non-urgent inquiries, I established a unified Slack channel to serve as a centralized hub for such questions.

b

Handoff

In collaboration with our engineering team, I developed a structured handoff and quality assurance (QA) process tailored to our specific needs. This encompassed the documentation protocol for component handoffs, communication procedures, and the method by which we conducted QA, which involved manual inspection in both Chrome and Figma.

v

Announce and release

Furthermore, I created a structured framework for communicating changes and updates. This multifaceted approach involved utilizing Figma’s version history, comprehensive documentation in Zero Height, announcements through our dedicated Design System (DS) announcement Slack channel, and dissemination during our regular weekly design meetings.

Tokens

Working with eng, we created a token schema that would be flexible enough to span a growing system with goals of theming.

    $theme-category-subcategory-item-subitem-variant-size/scale

      Spacing

      Takeoff uses 8-pixel spacing as a fundamental principle to create consistent and visually pleasing designs. This consistent spacing helps to create a sense of balance and organization within the design. The 8-pixel spacing system also allows for easy scaling and responsive design, as the spacing can be adjusted proportionally to fit different screen sizes and resolutions.

      Type

      To establish a captivating typographic hierarchy while remaining true to our design ethos, we devised a cutting-edge type ramp. This system employs a foundational font size of 16px/pt/dp.

      Auditing

      Prior to commencing any product surface or component redesign, it’s crucial to conduct a comprehensive audit of the existing elements while capitalizing on insights from prior research endeavors. In the case of Apollo.io, we identified substantial usage of tables, though accompanied by significant inconsistencies. To ensure a thorough audit, I not only visually assessed these components but also diligently documented their relationships and placements within the product, making efficient use of Notion for this purpose.

        audit

        Piloting & testing

        Faced with the challenge of introducing a design system to an already-built product, I took a strategic approach. I initiated a pilot phase, collaborating with key squads, including prospecting, deals, and communication intelligence, to fine-tune new components. In total, we launched 37 components tailored for these squads and successfully completed our card template. Our dedicated efforts demonstrate our commitment to excellence and set the stage for a more cohesive and dynamic design system.

        header

        Before/After

        Next steps

        In conclusion, our project has significantly enhanced our entity pages. We plan on gauging their success in Q4 of 2023. In addition, within the next quarter, we aim to deploy 100% of our table and filter components to Storybook. Furthermore, we will have successfully validated our searcher and sequence/email workflow prototypes through thorough research.

        Looking ahead, we have ambitious goals for the remainder of 2023. By the end of Q4, we aim to have 100% of our components deployed to Figma, totaling an impressive 66 components launched. Additionally, we are set to embark on a design system pilot with four new squads, fostering greater synergy and consistency in our design practices.

        To ensure our project’s continued success, we are committed to providing design system training workshops for both our design and engineering teams, promoting a harmonious and efficient workflow.

        Our journey continues with unwavering enthusiasm, and we look forward to the achievements that lie ahead in this exciting project.