Samsung Ads Design System
Scaling Design Ops to Improve Velocity
Context
As part of the 2020 product strategy, we decided to allow external media agencies to leverage our AdGear Trader Demand Side Platform (DSP) to run their own marketing campaigns. This platform was originally built as an internal tool for employees, so the overall user experience was never properly prioritized.
Misalignments of UX patterns, UI components, and odd behaviors created usability issues. There was an urgent need to improve consistency for users, efficiency for the front-devs team, and enhance brand perception.
The VP of Product & Engineering gave us the mandate to rebrand the AdGear Trader platform to Samsung DSP (Demand Side Platform). To support this effort, I proposed to the leadership team to invest in the creation of a component library and requested a dedicated team of 4 front-end developers. The project was approved.
Mandate & Tasks
As a pioneer of this new Samsung Ads Design System, I collaborated with Product Designers, Front-End Developers, PMs, and Architects to build and scale this new component library. I needed to establish a collaboration model that would ensure that we would make a significant impact on the platform within the first 6-months, to improve the UX to our users and demonstrate impact to the leadership team. I analyzed and listed all the components we had on the current platform. I prioritized them in order of visibility and usage. This provided a prioritized list that could be tackled with the front-end devs. We could better assess the sub-dependencies between these components and tackle them holistically in a better logical order. Effort-level T-shirt sizing also provided better context on the complexity of some components.
I defined the overall vision, assembled a team, and remained responsible and accountable for delivering improvements of the design system components. We leveraged Atomic Design Principles in our approach.
Actions
Brand Look & Feel
I collaborated with the Creative Services team and ensured we respected the Samsung Ads brand style guide and the overall brand look and feel.
Gather Requirements
I collaborated with product designers to gather requirements, identify existing variants, and understand their current and desired functionality to propose common versatile ones.
Define Acceptance Criteria
We worked closely with front-end developers to clarify the specific acceptance criteria. We clearly explained what users are trying to achieve and designed micro-interactions that help them complete their tasks at the component level. We also combined various components that shared similar patterns despite having different codes and behaviors.
Propose Improvements
When new functionality was required, we evaluated the needs as a team and proposed improvements or new components.
Maintain backlog and implement
We collaborated with front-end devs to build, scale, and maintain a comprehensive and optimized component library. We helped maintain a clear prioritized Jira backlog and Storybook release sandbox. We iteratively replaced legacy components with new ones.
Document
We collaborated with Product Designers & Front-End Devs to build, scale, and maintain extensive documentation in Figma, Zeroheight, and Storybook. We enabled implementation on both React and Angular.
Scale
Over the years, we scaled the component library to develop about 45 components.
Outcomes
Quantifying the exact Return on Investment (ROI) of a complete design system is complex.
There are overall benefits that directly reduce costs and salary charges while improving overall revenue.
Credits
Product Designers
Francis Benoit, Julien Héron, Guillaume Roy, Jeff Shih, Brenda Gutierrez, Jodi Lam, James David Posey, Abhishek Prasad, + so many other contributors
Front-End Dev / Eng
Mathieu Beauché, Ash Kumar, Ricardo Joenck, Jorge Cook, Mariana Souza, Priyanka Pathak, Amr Abdelhadi, Charbel Chahine, Aengus Hearne, Adam Sienkiwiecz, Zbigniew Stolarski, Jimmy Guay, Pascal Deschenes, Ben Bazso, + so many other contributors
Architects
Sean Zehnder, Alexis Regnaud, Alexandre Billay, Boris KuzmanovicSean Zehnder, Alexis Regnaud, Alexandre Billay
Product
François Fortin, Adam Dhanens, Desmond Choi, Amine Bendahou, Anirudh Gorthi, Sreejit Ramakumar
Other Projects
