Template Design System

For Onpoint Global - In collaboration with the UX/UI Team

Creating a cohesive and scalable design system is fundamental to ensuring consistency and efficiency across digital products. In this project, I developed a fully functional design system structured using atomic design principles while integrating design tokens in Figma to standardize basic elements.

The Challenge

The project aimed to standardize UI components and design decisions within the company's core template, ensuring consistency across future implementations and variations.

At the same time, the tech team was redefining their code structure, presenting an opportunity to align design and development processes.

My goal was to create a scalable design system that streamlined workflows, improved collaboration, and established a shared language between designers and developers; ultimately making both design and development more efficient.

The Process

Before establishing the design system, we collaborated with the tech team to understand their process in the new template's development. Their approach included some foundational elements from Bootstrap, so we studied it in depth to determine which aspects could be reused or adapted, ensuring minimal challenges for developers.

We weren’t just designing components; we were building a shared language between design and development.

Tokens

I began by establishing core design tokens for colors, typography, spacing, borders and shadows, ensuring flexibility and scalability. These tokens became the foundation for all components, allowing for quick updates and ensuring consistency across different platforms.

Atomic Design Structure

Using atomic design methodology, I structured the system into:

Atoms: Fundamental elements such as colors, spacing, typography, and icons.
Molecules: Combinations of atoms, such as buttons and input fields. For components like buttons, we ensured all necessary states (hover, active, disabled) were included.
Organisms: More complex UI components like navigation bars and modals.

This modular approach allowed for better reusability and adaptability across the product.

Collaboration with Developers

To bridge the gap between design and development, I worked closely with engineers to ensure that both teams used the same naming conventions and component structures. This alignment helped optimize code, reduce inconsistencies, and speed up implementation.

Reconstructing the Main Pages

With the components fully defined in the design system, I proceeded to redesign the main pages of the template, ensuring that they adhered to the established guidelines and design tokens. By carefully applying the components, the result was an enhanced version of the original template, characterized by extreme tidiness and consistency. This refined version was now ready for the tech team to implement the design system, validating its effectiveness and ensuring a seamless transition between design and development.

Outcome

The design system successfully:

Reduced design and development time by providing reusable components.
Improved consistency across different platforms and user touchpoints.
Streamlined collaboration between designers and developers, ensuring a shared language and efficient workflows.
Enhanced scalability, allowing the system to evolve with new product features without compromising quality.

This project not only improved design efficiency but also aligned teams on a single, scalable foundation, reinforcing best practices and ensuring long-term sustainability.