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.
Lead Product Designer and UX Researcher
Product manager, 2 product designers, front-end development
Figma, Zeroheight, Notion, Slack, Storybook
Strategy, process, management, research, governance, components, support, user testing
Apollo’s previous design system lacked consistency, resulting in fragmented user experiences
A fresh Figma file organization
My initial priority was to establish
Figma file structure
I effectively transitioned our organizational approach from maintaining separate files for each component to consolidating them into five pivotal published libraries:
Colors, typography, iconography, elevation, spacing, motion/timing, grid and breakpoints
All core components in their most generic state
Fleshed out examples of our core components in actions
Full page designs for each feature surface
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.
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.
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
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.
Announce and release
Working with eng, we created a token schema that would be flexible enough to span a growing system with goals of theming.
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.
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.
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.
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.