UX/UI
Design system
Design system
overview
In 2021, when leadership at Act-On decided to invest in user experience and revamp the product, the design team faced a challenge: Act-On would now be competing with all the marketing automation competitors, and over 10 main features spread across more than 300 pages needed to be redesigned. This meant that at anytime when a new designer onboarded, the team needed to create similar experience that speaks Act-On’s brand language.
The design principle guiding this extensive overhaul effort was not merely about reskinning the product; it was about achieving clarity and consistency. We wanted to develop a scalable design language that users could easily familiarize themselves with by using the product. To achieve this, components became central to our strategy - ensuring a unified experience and identifying the needs for new components.
The design principle guiding this extensive overhaul effort was not merely about reskinning the product; it was about achieving clarity and consistency. We wanted to develop a scalable design language that users could easily familiarize themselves with by using the product. To achieve this, components became central to our strategy - ensuring a unified experience and identifying the needs for new components.
PROJECT DETAILS
Role
Duration
Product Designer - Design System
2021 - Present
KEY CONTRIBUTIONS
Design and maintain components
PROJECT GOAL
Establishing a design system across Act-On’s platform allows designers to work more efficiently while maintaining consistency.
Results
In my role as one of the four product designers on the design team, we dedicated one day every week focused on updating existing design components and creating new ones identified in various initiatives.
By the end of 2023, we had updated approximately 35 components and added about 20 new components to the design system.
50+
Total components created
300+
Total component variants
380+
Hours spent working on design system
20+
New components identified and still counting
The foundations of design
When the design team embarked this UX/UI overhaul journey in 2021, it became evident that upgrading the design system was necessary. Act-On had just rebranded itself and was continually releasing new features. However, the design system, at the time still relied on old branding materials and lacked certain components.
This period also marked our migration from Sketch to Figma as our design tool. The entire design team collaborated on rebuilding the design system from the scratch, which involved updating fonts, refining color palettes, and creating essential components. The component creation process wasn’t entirely new ground. The traditional processes were still in place: research, design, followed by development. Throughout the process, I became proficient in using Figma’s Auto Layout and component-related features.
Below are some examples of the components we created, each encompassing different states and variants.
This period also marked our migration from Sketch to Figma as our design tool. The entire design team collaborated on rebuilding the design system from the scratch, which involved updating fonts, refining color palettes, and creating essential components. The component creation process wasn’t entirely new ground. The traditional processes were still in place: research, design, followed by development. Throughout the process, I became proficient in using Figma’s Auto Layout and component-related features.
Below are some examples of the components we created, each encompassing different states and variants.
The mechanics of creating a component
One of the components on which I spent the most time is the Table component. This component is considered one of the most complex within the design system, including 15 dependent sub-components and 136 variants.
Some of the variants include different combinations for the table header: button (with button=True/False), search bar (with search bar=True/False), and microcopy (with microcopy=True/False). It also includes column width variants: XXS, XS, S, M, L, XL, XXL, and various table types such as radio, multi-select, icon, drill-down, and chunky row. The video below provides a high-level overview of how this component is designed.
Some of the variants include different combinations for the table header: button (with button=True/False), search bar (with search bar=True/False), and microcopy (with microcopy=True/False). It also includes column width variants: XXS, XS, S, M, L, XL, XXL, and various table types such as radio, multi-select, icon, drill-down, and chunky row. The video below provides a high-level overview of how this component is designed.
