Snap Enterprise Design System & Ads Manager Redesign
My Role
Systems Designer
Background
Snap Design System, internally known as SDS Enterprise, is one of 3 designs systems at Snap, Inc. In my role as a Systems Designer, I managed SDS, which supported all Enterprise software for the company. The primary Snap product using using SDS is Ads Manager, Snap’s self service ads tool. Ads Manager allows businesses of all sizes to design, manage, and launch ad campaigns on the Snapchat app. In the early months of 2024, I redesigned SDS Enterprise.
Systems @ Snap
When I started at Snap, SDS had been in production for 7 years, and was one of three corporate design system. It included it’s own primitives (Icons, Type, Spacing, Color) and 75+ Components.
Problems & Challenges
Over time, problems emerged from SDS due to Figma/Codebase misalignment, gaps in the engineering structure, and a lack of unity across the 3 systems. I talked to designers, engineers, and PMs on the ads team to better understand these problems. I also worked with SIG Design System manager to understand how similar problems played out across the Snapchat, and how we could explore solutions at the primitives/foundation level that would then branch out to all systems. Key problems and challenges included:
Eng Structure & Misalignment of the Codebase
SDS had no dedicated engineering resources, so components had been implemented on a project-by-project basis over time as designers used them and engineers had bandwidth to add new components to the codebase. This created a large number of inconsistencies across the codebase, the Figma file, and production, both in design and semantic naming. None of these inconsistencies had been documented.
Disconnected Systems
The 3 design systems at Snap shared no foundations, primitives, or design principles. This created an overly complicated code structure, as well as a disconnected brand experience for people using Ads Manager and the Snapchat app.
Documentation
SDS had no documentation or source of truth for components, patterns, or system principles anywhere.
Components/Patterns/Primitives
Many of the components, patterns, principles, and foundations of the system had become outdated, inconsistent, or had been flawed from initial design/implementation. I audited large sections of Snap Ads Manager to understand how these problems played out in production. Examples include:
Too many grays and too much use of elevation had created a muddy, convoluted UI that lacked crispness and delineation.
Navigational selection patterns were inconsistent across Nav components, with no Selected Hover State defined.
Disconnected Container/Header structure
Forms don’t scale to different color backgrounds, have inconsistent interactions, and break status principles.
Overly complex primitives structure, lack of semantic naming and defined
variables for Type/Color/Spacing, and outdated Iconography.
Ads Manager Resdesign
We leaned heavily into a redesign of Snap Ads Manager to inform the larger redesign of SDS Enterprise.
We started broad, exploring many different visual styles, layouts, and brand applications. We looked at container structures and foreground/background surface relationships, Inputs & Controls, CTA, nav selections, borders & elevation, and dimensionality.
We progressively tightened up our explorations into a more professional set of themes. We considered the brand heavily in this phase and experimented with how Snap’s primary brand colors would play out across CTAs and interaction patterns. We also redesigned the Header & Footer components, opting for for a Dark Mode Global Header for contrast and brand presence, as well as a redesigned Page header that sticks to the top of the page and offers a more robust set of functionality.
Full Header Component
As part of the process, we often abstracted our designs and blocked out detailed content to make sure the weight, balance and organization of each page felt right and on brand.
We opened up spacing everywhere in the product to UI elements breath and create a less overwhelming experience, especially on pages with large amounts of content.
Final Ads Manager Recommendation
Our final Recommendation for the Ads Manager redesign displayed a minimal, professional, and largely black and white color palette, utilizing Snap Blue for the primary CTA and Brand Yellow in the Global Header. Nav selection, inputs & controls, CTAs, icons, and borders were all reimagined. We removed elevation from the system almost entirely, opting for thin gray outlines as a delineation strategy. Additionally, we brought headers inside their containers, and created container components with all of the spacing and type hierarchies predefined.
Additional Screens - Manage Ads Table and Mobile
SDS Enterprise 2.0
After completing the Ads Manager redesign, I applied all the new styles and principles to the SDS-E Design System. Every component received some sort of stylistic change, and many were completely rebuilt with improved flexibility, functionality accessibility, and responsiveness.
Disabled States
Utilizing only two shades of gray, we aligned disabled states system wide to ensure users know what it means for something to be disabled, and to contribute to a consistent and intuitive user experience.
New Primitives
I created a new foundation structure for SDS 2.0, including new and simplified Semantic Color, Type, and Spacing Palettes. I also redesigned the entire SDS Icon Library according to Snap’s new Iconography principles.
Shared Foundations
In collaboration with the SIG Manager, we set up both the SIG and SDS systems to share colors and icons at a primitive level. This allowed for greater brand consistency, more efficient development cycles, and a step towards a future vision of unifying all systems at Snap.
Variables
I set up all primitives in the variables tables of the Figma Library, which allowed us to apply them to all components, make sweeping changes throughout the library, and offer them as design tokens for designers to use.
New Library Structure
