Idea of Design System

What’s the idea behind design system? Since 2017, the term ‘Design System’ has come up as a hot requirement in organisations for well established UX development. Its not something new in UX design, process or technology that most of the designers not practiced. But in parts and not as whole because its a big product and requires team work. Under basic definition — its a superset of design data, which is well designed, organised and documented for designers, developers and for all who are involved in product interface development.

“Design system is the superset of design data (pattern, library, style guide, typography, visuals, code etc.) which is very well designed, organised and documented for designers, developers and for all who are involved in product interface development.”

It should include everything required for design development like components, patterns, guidelines, visuals, typography, transitions, micro interactions, design codings etc. Examples — Google Material Design, Microsoft Fluent Design, Salesforce Lightening and more.

To understand the concept of design system, I picked two best examples — the ‘Departmental Stores’ and the ‘Lego Toy System’. ‘Departmental Stores’ because as they are organised and ‘Lego Toy System’ as they are designed. (Though,”Organising is also Designing”, will look it in another writeup :)

Design Systems should be well organised like a ‘Departmental Store’

Design systems should be well organised like departmental store as one stop reference where designers and developers can access ready design components for design and its development.

If I scenario — “A customer (designer or developer) enters (accesses) into the departmental stores (Design System) he proceeds (navigates) easily to labeled (guided) aisles (sections) to look (browse) his required items (design piece). Picks the appropriate item (design piece) as per his requirements and reads the instructions (guidelines) about usage, do’s and don’ts (rules, principles and constraints). On his experience and knowledge (role, goal, task), he selects (components to be used in design) the items (components) which best fits to his requirements (design use-case).”

and if I pick only bold texts -”Design system allows designers and developers to easily navigate guided sections and browse required design components. Picks design pieces and reads the guidelines about its usage, rules, principles and constraints. As per their roles, goals, tasks he decides which design piece fits best on use-cases of design and development.”

Design Systems should be well designed like a ‘Lego Toy System’

How kids translate their imagination to various form and shape by careful selection and joining tiny molecular modular lego pieces. Each piece in assembly completes the creation of each toy and its purpose.

Its interesting to understand the lego toy system as a basic concept for UX design system. Deciding pieces of the system to be designed, how they will connect together for various meaningful forms, shapes and how they go through complete process of design, strategy and architecture, is similarly all about how designers consider various aspects in application designs.

Considering what will be the size, thickness and how to provide strength to those pieces so that they can function with intuitive experience, is similar to how developers consider UX design technicality, code and development.

Kids (users) pick lego pieces to make various forms and shapes, follow ‘how to use instructions’, join them in various playful forms and shapes and bring great experiences. Similarly, using design system, designers and developers (users) picks design pieces like input fields, tables, buttons etc., follow well documented rules, guidelines, constraints etc., design intuitive applications and achieve both — get themselves a great experience while designing and provide great experiences to its users in their designed applications.

Its an important aspect that any number of toys made using these pieces have consistency in assembly pattern and appearance from atomic to structural level and provide intuitive and a brand experience. Similarly, any application designed and developed in an organisation using UX ‘Design System’, provides consistent and branded experience in its behaviour, appearance and patterns from atomic to structural level. All this get achieved saving lot of time and money.

Now, establishing design system in any organisation is an important UX foundation, strategy to save lot of time and money. It’s crucial to design every single tiny piece involved in design system carefully, as each one in system is master piece combination of art, craft and technology. While designing design system, one/team should take care of all type of micro to major use-cases, scenarios, components, actions, navigations and layouts for all channels and apply the design thinking from atomic to molecular to structure level designs in super organised manner.