by Daniel Alshriky

Design System is an adaptable set of mediums, rules, and blueprints that help establish the regulations between collaborative, expandable teams and scalable product and application.

Design System supports designers, product management, and developers to have a common language during the implementation. It helps save time and manage massive product or application, and ensure that style, experience, and functions are consistent across.

Design System is not a rigid set of mediums. As stakeholders, we should keep it refined and aligned with the business objectives and leave the door open for any enhancement. This happens through collaborative work and involves many stakeholders, like content strategy, marketing, product managers, and many more that’s because design system will have an important role in each step of the creative process of product or service.

Design System Structure

01- Design and Development teams
Improve the maturity of design teams and the work environment as well as highlighting the benefits of the design system and integrate that within the design process.

02- Designers and Developers tools
Tools like manage assets, monitor and establish a solid connection between the multidisciplinary team and assets.

03- Design System Assets
Design system assets is a combination of many parts like Principle Salesforce Design System (clarity, efficiency, consistency, and beauty), interaction rules, visual assets, UI pattern, UI motion, visual pattern, code component, and content strategy which we then document all these parts under style guides.

The Process of Building the Design System

Step 1: We have to answer these questions: Do all companies need design system? What are the goals and impacts to build a design system? Companies have multiple products — we need to make sure products, services and application have the same tone?

Step 2: Elevate the level of maturity of the importance of design system between all stakeholders by conducting meetings and workshops to explain the benefits and impact that on all company’s sections.

Step 3: Conduct reviews covering both design and code of the current product, application and all touch-points (website, mobile apps, wearable apps, kiosk, etc.) then measure the impact on the user experience, performance, and efficacy of works. This kind of process usually takes time because many departments and stakeholders are involved in it. This step is important because we do planning to build the design system — what should be included and who should build it.

Step 4: Unify communication and management rules and tools between all design and development teams. This will establish a solid ground to build a design system and establish a strong methodology to apply for design system access on all products and apps.

Rules: Folders & Naming, Grid System, unite(px, pt, ), …
Design tools: SketchApp, Adobe XD, UxPin,….
Communication tools: Slack, Microsoft Skype or Teams
Management (Version control): Abstract, Atlassian
Storage and sharing tools: Google Drive, DropBox, Microsoft SharePoint
Documentation tools: Google Doc, JIRA
Prototyping tools: InVision, Axure RP, Flinto, Proto.io, Prototypr.io, Framer, Principle
Host code snippets: Github,

Step 5: Create a visual element representing the core components — elements like colors, typography, layout, iconography, imagery, and others

Example of the Design System

Wrapping up and Advice

Reference

User Experience Lead | Data-Driven Design