The Challenge

In mid-2022, the redesign ArchiPro platform UI was completed and signed off. However, the new UI ArchiPro platform needed a formalised design system and a centralised system for designers and developers to access resources.

What Is a Design System?

A Design System is a systematic approach to product development complete with guidelines, processes, components, and code. It is a single source of truth for teams that simplifies product creation, testing, and development and ensures consistency across different pages and channels.

Why We Need a Design System?

We found all the different styling variations, colours, font sizes, and spacing values in the latest UI ArchiPro platform in the Figma file are conflicting UI, inconsistencies across the pages, and duplication of standard components. This created inefficiencies for each team, inconsistencies within our platform, pressure for agile solutions, and potentially siloed teams working with disjointed communication.

How To Develop a Design System?

Developing a design system is a collaborative effort that involves everyone on the team, including designers, developers, stakeholders, and brands. As the designer responsible for the design system, I gather and consolidate all stakeholders' input and create a unified platform to house this valuable information.

By creating a centralised design system, we aimed to:

• Align our teams by giving them a more structured and guided way to build products.
• Saving a lot of time, our design and development process with a ready-made library and patterns team can create and test the layout.
• Reducing complexity and ambiguity.
• Improve brand perception and user trust through consistent experiences that work for everyone and allow users to accomplish their goals.

Where To Start?

We recognised that this project would demand substantial resources, careful planning, and significant time commitments. However, we were confident that this endeavour was a justified long-term investment, benefiting our company, brand standards, and, most importantly, our valued customers.

We ran the design sprint and process following steps by creating a design system.

1. Find all styles of the new UI pages in Figma.
2. Find all the components of the new UI pages in Figma.
3. Define the layout and the spacing.
4. Creation of Styles. Colour, text styles, shadow, etc.
5. Creation of Components: button, input, dropdown, modals etc.
6. Build Screens: mobile, tablet and responsive desktop.
7. Document the usage of styles and components in Figma to share it with stakeholders and developers.
8. Developer to create styles and components for the Storybook.
9. Developers to implement styles and components to the platform.
10. Test and Launch.

The Design System anatomy

Colours

Typography

Miscellaneous Styles

Spacing Grid and Layout

Components

List of components:

• Icons
• Buttons
• Inputs
• Dropdown menus
• Tags
• Avatars
• Tooltips
• Checkboxes, Radios and Switches
• Toasts
• Cards
• Modals
• Others

Some Screenshots Document the Usage of Styles and Components

What's next?

In December 2022, our work stopped due to company restructuring, and teams were effectively laid off. The design system is an ongoing project. We iterate, change and learn a lot in the process. We have a set of essential components ready. Anyway, any team moving forward can easily pick up the adoption of this system.

Some stakeholders are reluctant to create a design system because it means time and money, but the value is revealed when in place. The product or design team won't need to develop over-and-over components; they will be able to focus on what matters the most. All groups will use the source of truth, avoiding the fact that each team is recreating the same UI elements, which will reduce time and save money.

Reflection

It was an 'Everest' challenge. I learned much about resource management, coordinating moving parts, and syncing with developers. I am proud I convinced management to give the design system initiative a well-deserved try.