adMarketplace Design System
Rebuild and maintain design systems for AdTech internal platforms, enhancing design and dev teams workflows

Role

Sole Design System Designer
Revamped information architecture
Created UI kits with responsive and configurable components
Addressed code ⎯ design discrepancies

Impact I brought

Quality product with scalability and responsiveness
Time-saving through enhancing workflows
Enhanced collaboration and communication

Team

1 Design System Designer (Me)
2 UX Designers
2 Engineers

Company

adMarketplace

Tools

Figma, Storybook, Google Suite

Duration

3 months, Summer 2023 (ongoing)

The Problem

The Solution

Process

Collaborating with designers and developers, I analyzed design files, platforms, and Storybook. I revamped the information architecture and created components with enhanced properties for efficiency.
‍
*Not within the project's scope: The focus was on constructing the information architecture and developing UI kits. However, brand guidelines and component guidelines were not fully covered within this project.

Stakeholder Interviews & Revamped Architecture

Through meetings with the dev & UX team, and end-users (including the sales and campaign management teams), identified pain points and requirements.

Creating consistent and configurable components

Starting with atom-level components, I created a UI kit comprising elements that guarantee consistency, responsiveness, and efficiency. Analyzed discrepancies of components among the actual platforms, developer's UI library, and design files.

Error State Standardization

The previous error states in various components have inconsistent field styles and error messages. I established rules for error states following two use cases to standardize previous inconsistency.

Introducing Responsiveness

Adapting to limited desktop platforms, I proposed responsiveness with layout breakpoints at Mobile (414px), Tablet (834px), and Desktop (1440px), each with distinct margins and grid systems, and created responsive components.

Scalability through Design Tokens

Utilizing tokens ensures scalability and consistency in style values across designs and codes. This facilitates the process of building and maintaining products within the system.

Global & Purpose Tokens

Global tokens encompass fundamental values such as colors, sizes, corner radius, and stroke width. The purpose tokens facilitate clear communication regarding the intended function of each token.

Be specific

Documented component specifications and guidelines to ensure consistency and usability across all interfaces and platforms, and to foster clear communication.

Takeaways

Systematic thinking

Design system is a collection of documented elements that covers UI kit, style guides, UX principles, and the best practices. I've learned how to define and revise interconnection of components. I developed abilities to delve into details as well as look at the high-level hierarchy.

Negotiating design decisions

I learned to gather stakeholder requirements and negotiate when there is a conflicting requirement, including the information architecture, component properties, and style usage.

Found my passion for design systems

Getting fascinated by the impact of design systems through this project, I started delve into design systems, learning through mentors and design community resources, on how to better communicate, document, and ensure accessibility within the systems.