MobiLab’s Leap into Design Systems: Steering an Evolving Design System with a Software Mindset

Our ultimate goal at MobiLab was to create a “White Label Solution” Design System that could serve as the backbone for all our projects. The system needs to encompass comprehensive documentation, reusable design components, and guidelines that ensure uniformity and alignment across all applications.

As the Design System lead at MobiLab, I aimed to create a “White Label Solution” Design System that could be applied across various projects. We aimed to provide our team with a flexible toolkit that could seamlessly integrate into their workflows.

The benefits of our Design System extend beyond just internal efficiency. For our customers, this means faster time-to-market, reduced costs, and a more cohesive user experience across all digital touchpoints. By standardizing components and design practices, we’ve drastically improved our workflow, enabling Designers and Engineers to collaborate more effectively. This not only enhances the quality of our deliverables but also allows us to focus more on innovation and less on the repetitive aspects of design and development.

Today, we have been actively transitioning our Design System components from design to code, ensuring they are accurately implemented across all our digital products. By collaborating with Frontend Engineers, we aim to maintain design integrity while optimizing for performance and scalability.

In parallel, we are building a component library with clear coding and documentation guidelines to ensure consistency across projects. This ongoing process of designing, coding, testing, and refining helps create robust, flexible, and user-friendly components that adapt to the evolving needs of our projects and customers.

A critical component of this initiative was choosing the right digital environment. Our first major step was transitioning from Sketch to Figma. Sketch did not meet our expectations, lacking some key collaboration features. The transition to Figma allowed us to gain real-time collaboration and establish a centralized repository for our design components.

Figma’s advanced features, like Dev Mode and variables, allowed us to streamline the handoff between design and development, making the process more integrated and efficient. Engineers can directly access design specifications, CSS code, and assets from the design files with Figma’s dev mode. This significantly improves the handoff process between Designers and Engineers. Additionally, Figma’s variables feature allows us to create and manage design tokens, including colors, typography, and spacing, in one centralized place, ensuring consistency and flexibility across all design components and projects. These capabilities made Figma the ideal choice for our needs, enabling us to create a more integrated and efficient workflow.

Switching to a new design tool required the team to adapt to new features and workflows. However, the transition to Figma was worth it. It made our team better aligned and more in sync with each other while gaining a centralized repository for our design components.

Identifying core components was another critical milestone. By auditing our past projects, we pinpointed the most frequently used elements, which then became the foundation of our Design System. This iterative process involved close collaboration within our team, prioritizing components that would have the most significant impact across different projects.

This approach allowed us to establish a practical framework that bridged the gap between Designers and Frontend Engineers, fostering a deeper understanding of how design decisions translate into code.

Working with these initial components provided a strong starting point for testing our new Design System. It allowed us to identify what worked well and what required refinement. Moreover, it helped us understand the constraints we faced as a team when creating and implementing design system components. This stage was crucial for setting the foundation for a more iterative and collaborative design process moving forward.

As we continued to refine our Design System, we embraced the “Shift Left” approach, a strategy commonly used in software development and IT that involves integrating testing, feedback, and collaboration earlier in the development process.

Design systems are inherently complex and often involve navigating different perspectives and preferences within the team. Aligning component definitions, naming conventions, component states, and their specific roles within our projects proved to be a significant hurdle.

We swiftly took action by reevaluating our previous practices and design processes. We established a more structured framework for creating and reviewing components, which involved closer collaboration with our Product Owners and frontend colleagues. This collaboration was essential to ensure everyone was aligned on the goals and standards of the Design System. Additionally, we introduced a comprehensive design documentation review process to clarify component standards and provide explicit guidance on their usage.

These initiatives significantly improved our team’s alignment and boosted our confidence in the Design System we were building. By fostering an environment of continuous feedback and collaboration, we were able to iterate more effectively on our components and make informed decisions that enhanced the quality and consistency of our Design System. As a result, we were better prepared to introduce our Design System to new projects with greater clarity and cohesion.