TC - Design System & Ops

Lucas Lima

0

Design Token

Design Systems Specialist

UI Designer

Figma

Storybook

Background

TC is LATAM's largest investment community, we want to go beyond sharing ideas. Our vision is to be a one-stop shop for investments.
As the DesignOps Lead, my job was establishing the Design System, creating a scalable team structure for the Design Operations, and guiding all designers towards best practices while ensuring high-quality design deliverables.

Goals

1 - Scalable structure of the Product Design Team

We embarked on our journey with a team of 8 talented designers, most part mid-level. Although we faced challenges with our process and lacked maturity in certain specialties such as research, content, and user interface design. Our goal was to triple the team in 1 year.

2 - Create our Design Process and Practice

Create a scalable, efficient, and simple design process that can be applied in different contexts throughout the company. This will enhance design deliverables, increase stakeholders' confidence and demonstrate the value of design.

3 - Build a Design System from scratch

One of the team's biggest challenges was inconsistency. To overcome this, we created a design system. This helped us achieve visual consistency and made our team more efficient in the prototyping phases.

DesignOps Solutions

1 - Create a scalable team structure for the Design Operations

A federated team of 27 designers collectively makes decisions taking into account the decisions of other teams or sub-teams supporting not only the operation itself but also the people involved. This helps us to collaborate with the marketing, customer success, data, engineering and other areas in a horizontal and transparent way.

2 - Stablish Design Principles

It is important to highlight principles that guide the use, maintenance and evolution of our design system: Consistency → reduce the user's cognitive load; Productivity → not reinventing the wheel and generating countless versions of a single item; Scalability → more than unify design decisions, expand communication and decision making.

3 - Collaborative creation of our Ways of Working

By defining the product vision and design backlog, the design team created a strategic environment for the business. Design ceremonies were structured, allowing designers autonomy to execute processes in their way. The Double-diamond process was the standard, and the team had the flexibility to involve different business units as needed. This approach positively impacted the business and cultivated a culture of collaboration.

Design System Solutions

1 - UI Kit and Design Artifacts

In order to fully utilize the potential of our design system, we highly study a variety of plugins, tools, and toolkits. Along with these key features, we also provide a comprehensive set of resources such as detailed documentation, customizable design libraries, industry-leading best practices, design tokens for enhanced consistency, and component libraries for development and design professionals.

2 - Library structure

To create prototypes that can be scaled and are in line with all TC design definitions, we defined three different types of libraries: 1. Foundations: Design Tokens have adaptive logic that works across Dark/Light themes and Web/Mobile devices. 2. Components: Core libraries that contain all the components that are required for the project. 3. Artifacts: Elements and templates that help to support the UI and the process of building it.

3 - Code repositories

Developers replicated the design system structure in code repositories, using their own toolset. This allowed them to have the same resources and effectiveness as designers. By defining these structures in code reviews and approvals, we were able to improve adoption and governance. We successfully achieved an 80% adoption rate!

Conclusion

We have established a federated team that consists of 27 designers. The team is structured in a simple manner that involves design specialties, leadership roles, and collaboration between different teams. We aim is to ensure that we deliver high-quality design work, have an effective design process, and reduce the time it takes to develop a feature by 30%. We achieve this through the use of the Design System strategy.
Like this project
0

Posted Nov 7, 2024

Manage and structure design operations, processes, and best practices such as team models, design principles, ways of working, and design systems.

Likes

0

Views

2

Tags

Design Token

Design Systems Specialist

UI Designer

Figma

Storybook

Dattos - Process Automation Tool
Dattos - Process Automation Tool
Copy Trade - Mobile App
Copy Trade - Mobile App