Creating a scalable product through a holistic design system
Leveraging my understanding of people and design to help teams simplify complex experiences and create scalable products.
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It is a systematic approach to product design and development with guidelines, processes, components, and code. A single source of truth for teams to simplify the product design, development, and testing, and ensures consistency across different products, pages and channels.
Building a design system for a multinational company means cataloging every component in meticulous detail. It’s a massive undertaking that calls for both a big-picture view and a focus on specifics.
The goal was to knit together a consistent look and feel for the multiple software products of the company. Create and maintain a custom design system while making it accessible to product owners, designers and developers across teams.
Team
I was part of OSN’s 6 person design system team. Scaling the library of components and patterns depended on maintaining openness and transparency, with an emphasis on extensive documentation.
Duration
3 months
Our Goal
Stakeholder Buy-In
In order to ensure the success of this project, it was important to get stakeholders on board before we start building our design system. We systematically promoted the initiative via:
Approach
Benchmarking Study
Prior to laying the foundation stone, we studied about existing Design Systems, how companies were building and organizing them. We did a benchmarking study and took away some good insights Material Design, Carbon Design System (IBM), Edison Design System (GE).
Accessibility
From early on, we focused our efforts by putting accessibility as a pillar of my design system. Took into consideration the OS Guidelines and made sure everything was on point (Native fonts / colors contrast / touch target).
Content Strategy
The best design systems are not simply engineering manuals or style guides – they need to illustrate the toolset and explain why one should use a component over another. We invested heavily in defining the principles of our design system as well as developing guidelines for accessibility that were baked in from the start.
Layouts and Grids
OSN Design layouts use uniform elements and spacing to encourage consistency across platforms, environments, and scalability in screen sizes.
Predictable : Use intuitive and predictable layouts with consistent UI regions and spatial organization.
Consistent : Layouts should use grids, key lines, and padding consistently.
Responsive : Layouts are adaptive. They respond to inputs from users, devices and screen elements
Layout regions are the foundation for interactive experiences. They’re a layout’s building blocks and are composed of elements and components that share a similar function. Layout regions can also group smaller containers such as cards.
A large screen layout has three main regions:
App bars | Navigation | Body
When creating a responsive layout system, it’s helpful to establish minimum and maximum dimensions for the body and margins, as well as scaling behavior that allows each region to adapt to different form factors.
Responsive Column Grids
The responsive column grid is made up of columns, gutters, and margins, providing a convenient structure for the layout of elements within the body region. Components, imagery, and text align with the column grid to ensure a logical and consistent layout across screen sizes and orientations.
As the size of the body region grows or shrinks, the number of grid columns changes in response.
Typography
We wanted to go with a clean and versatile font for the design system. We chose Open Sans and Frutiger LT Arabic because the geometric shape of the letters and the spacing between characters is perfect. It is a versatile font and has multiple variations in weight which allows it to act as both a header font and body font. We also factored the right to left orientation of Arabic script and layout.
Color Palette and Gradients
Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.
This includes colors for:
- Primary and secondary colors
- Variants of primary and secondary colors
- Additional UI colors for backgrounds, gradients, surfaces, errors, typography, and iconography.
Hierarchical : Indicating which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.
Legible : Text and important elements, like icons, should meet legibility standards when appearing on a screen
Expressive : Show brand colors at memorable moments that reinforce your brand’s style and message.
Iconography
System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics. Icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity even at small sizes.
Components
Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.
Each component has been designed and coded to solve a specific UI problem, such as presenting a list of options, enabling submission of a form, providing feedback to the user, and so on. All of the components in the design system have been designed to work harmoniously together, as parts of a greater whole.
Design System
Results
The design system will always evolve and most probably keep growing. Through this case study, I wanted to share with you my process and a bit of what I learned along the way. Design systems are living ecosystems – they require consistent maintenance and care. With the initial design system live, my team is focused on expanding the system itself and integrating more teams.