MobiSupport

My contribution

As a DesignOps Team Lead, my role involved optimizing design processes, fostering collaboration, and supporting our design team to deliver high-quality work efficiently.

I transitioned the Design System from Sketch to Figma. This included planning and processes responsibilities as well as hands-on work.

Setting up the Design System

The design system was inspired by the Atomic Design (by Brad Frost). The methodology organises UI components into atoms, molecules, organisms, templates, and pages.

I was responsible for the following:

1. Foundation and Design Tokens: Colours, typography, elevation … etc. were defined as a central source for consistent styling across the system.
2. Component Library: Starting from basic atoms (like buttons) to molecules (e.g., form fields) and larger organisms (e.g., navigation bars) everything was also in parallel aligned with engineering.
3. Documentation: Details for each component including usage guidelines, variations, and code snippets were also agreed upon and documented.
4. Tools: Figma and Zeroheight were used to share, showcase, or document components effectively. Introduction of Figma to the Design and engineering teams was also part of the process.
5. Version Control: Components versioning was used to track changes and ensure governance of the design system.

All these helped establish a well-structured design system that enhanced consistency, scalability, and efficiency in your design workflow.

Atoms

Atoms are the main building blocks. Here are just a few examples below: Input drop downs, buttons, avatars stamps.

Molecules

They are usually a combination of Atoms and sometimes normal text or shapes. A search input element, a side panel header or a side panel footer are perfect examples.

Organisms

Organisms are already more complex and they are creating by putting together Molecules alone or sometimes a combination of Molecules and Atoms. Things like a page headers, navigation header or a complete side panels can be considered here.

Templates

These are already structurally quite complex. They still lack the real data but they serve as a blueprint for entire sections of a platform or app. Their purpose is to keep a high visual coherence across the different parts of the system.

Pages

Finally pages are the end result of all this and also the reason for all the other components to exist. This is what the end user is seeing and they include the real data.

Example of a page structure

Here is an example of a page with the different components highlighted. Reusable components are important as they promote consistency, scalability, and a cohesive UI. Because they are modular, this makes the code easier to maintain and update.

Components mechanics

Components need to behave according to certain rules and their functionality is defined by the purpose they need to serve. here area just a few examples of Figma components in Developer Playground.