The Maikel Salles logo. It's the initials MS jointed on a white and curved line with a blue dot in the bottom right corner.

Design System

I transitioned from Product Designer to fully focus on integrating the design system into the company's daily operations. My goal was to institutionalize its use and collaborate with the software engineering team to optimize performance and utilization. By developing processes and fostering cross-departmental alignment, we aimed to ensure the design system's seamless integration and maximize its benefits across the organization.

Recognizing the need for leadership to streamline internal processes and reduce excessive revisions in prototype development, so I volunteered to lead the design team. At the time, with only four designers reporting directly to product owners and minimal communication among them, I saw the opportunity to establish clearer channels of communication, standardize processes, and enhance the efficiency and quality of our design outputs.

Problem solving approach for legacy design

I embraced the task of building a design system to unify multiple legacy projects with old and inconsistent designs. This involved auditing existing designs, defining clear design principles, creating a comprehensive component library, establishing design tokens, documenting guidelines and best practices, implementing gradually across projects, and monitoring ongoing usage.

Through this systematic approach, I ensured consistency, efficiency, and scalability, harmonizing disparate designs and enhancing the overall user experience across all projects.

The details of this project are confidential, however, I can provide a brief overview.
A print screen from Azure DevOps showing a kanban board with tasks.

Team work and collaboration

I organized workshops to empower the IT and design teams to actively maintain and update the design system, providing hands-on training and guidance. This ensured that both teams were equipped with the skills and resources needed to sustain the system's relevance and effectiveness over time.

Library of components

I developed the components in an Angular 17 library and documented them using Storybook 8. Additionally, I updated a playground for developers to conduct testing and development with the legacy and new components to measure the impact and compatibility on development within legacy platforms. All these efforts were guided by best development practices and standards, with a continued commitment to accessibility. This approach ensured not only the consistency and efficiency of the system but also its user-friendliness and accessibility for all users.

The image is half with Storybook showcasing some components and the other half is the VsCode showing code.
Back to Portfolio