Design Thoughts

Design System
Design system

What is a Design System?

A Design System is a complete source for all elements the team may need to design, develop, and improve a product. It consists of a group of deliverables that should be continuously updated with the product and current technologies. In other words, it is a whole process that the company builds and maintains to strengthen their brand and to deliver excellent user experiences.

What are the Elements of a Design System?

Design_System_Elements

The system can contain numerous elements, such as:

Brand Guideline

The brand guidelines are the way the company represents itself as they intended. It is a handbook of how to represent the brand in any scenario to avoid wasting time on small decisions when it comes to how the company’s identity should appear. Furthermore, the guideline unifies the company’s image regardless of the number of people producing collateral pieces and always ensures an excellent user experience.

The brand guideline usually includes: 

  1. Color Palettes: The primary color palette used in the logo as well as the secondary color palette to be used as supporting colors including all colors’ exact names and numbers in various uses.
  2. Logo Variations: Logo color variations (black and white, on light background, on dark background, full color, etc) and logo tagline variation, and logo shortened versions if any (abbreviations or acronyms). 
  3. Typography: The fonts and typefaces used to represent the company. It includes the main fonts and secondary fonts for headlines and body.
  4. Space requirements: the minimum space required around a logo or how much space is needed when placing the logo near a margin.
  5. Placement: How is the logo presented in different platforms and environments such as websites, social media, presentations, printed media, etc.
  6. Brand Tone: The language used for communications whether it’s formal or informal and their grammar.
  7. Examples of acceptable and unacceptable uses: How the brand guide elements should be used in different situations and sizes, and how it should not be used to maintain the company’s image.

Atoms

Atoms are small individual designs that serve a purpose and can’t be broken down any further without losing its functionality. For example a button on a mobile app or a header text in a website. All those small designs still need to represent the company and its brand.

Components

They are smaller parts of the design system, yet larger than atoms, that can be reused in different combinations to serve various purposes while adhering to the Brand Guideline.

UX guidelines & Principles

The Design System must follow UX guidelines to deliver an excellent user experience such as: Hierarchy, Consistency, Confirmation, User Control, Accessibility, and more.

Why Do you Need a Design System?

When struggling with inconsistent UX of your products and services or incurring recurring costs for designing new products/services/platforms, that’s an indicator that a Design System is needed.

The absence of a Design System can result in incomplete use case scenarios that correspond to a component or a pattern. For example: When “Progress indicator” component guidelines do not include “determinate” indicator scenarios.

When a Design System is not executed correctly, it can cause a lack of shared purpose when the design system organisms are not in complete harmony with the product’s purpose and the brand. Issues can reach the programming level when equivalent “Code” can not be effectively created for the Design Modules in the system which causes poor synchronization with engineering.

HUED Success Stories

Monshaat Design System

MONSHA’AT

First ever Design System for a governmental entity in KSA. We did it when Design Language Systems were starting to become mainstream.

AL RAJHI TAKAFUL

The most robust enterprise level Design System. The new DS enables Al Rajhi Takaful to build new digital solutions that offer consistently delightful user experience.

Impact of Design Systems delivered by HUED

The Design System brought significant benefits for Monsha'at, helped in designing new services & platforms and in unifying the design language across different platforms by using the common principles, UI components and assets without needing to invest in an external design partner. Much of the work is being carried out by the in-house team since the Design System came into existence.
Monshaat
Abdallah Alemran
Digital Platforms Manager, Monsha'at

Design Studio

We are constantly trying to make the dent, make the positive difference.
Innovation Labs
PRODUCT INNOVATION
UX DESIGN
SERVICE DESIGN
Research &Insights
UX Assessment
HUED Creative Studio