Ramon CliquetFull-stack Senior Designer

www.ramon.im

Design Systems:Delivering a Consistent Design-led Customer Experience.

What we will cover .

1. Industry facts and challenges

2. How a design system can help

3. What a design system really is

4. How to create a design system

5. The adoption of a design system

6. Q&A

Olá!About me.

● From Brazil, settled in Perth WA

● 15+ years of design experience cross discipline

● Co-created apps & sites used by millions of people

● Involved in the creation and governance of three Design Systems

So,First things first.

#1------------------------------------ The Problem.

Brands are investing in design to go digital.

But digital is complexand is everywhere.

Customers are demandingfor disruption and innovation.

But 79% of products miss their launch dates* . * Source: 1CGT/Sopheon Survey

Fellow designers, It is time to productionizeour services.

We must empower our teams and customers .

The digital design drama. 0_0

Rapidly growth with too much demand

Tailor -made for individual problems

Difficult to scale and maintain consistency

Slow response to metrics and data collection

Hum.But how can a Design System save us all?

#2 ------------------------------------- The Solution

A Design System aims to enable empower and enforce great experiences :)

Allow internal and external teams to speak the same language

Accelerate product development and design hand-over

Provide a consistent and unique experienceto your customer

This is why corporations like Google, Apple and IBM have created and shared their design systems.

http://styleguides.io/

https://material.io/design/

http://carbondesignsystem.com/

https://atlassian.design/

https://developer.apple.com/design/human-interface-guidelines/

Let’s not only make great design.

Let’s make design great.For everyone.

Let's make design

reusable.

Let's make design

consistent.

Let's make design

efficient.

Let's make design

robust.

Let's make design

reliable.

Some core benefitsof a Design System.

Avoids duplication and re-work

Creates unification, alignment and consistency

Provides ready-to-use material

Saves time, money and hussle

Cool.But what da heck a Design System really is?

#3 ---------------------------------- The Approach.

Design System is your product interface & experience, living & briefing one single source of truth.

It should include your GUI elementsdesign, code and documentation- Part 1.

Colors:

Hierarchy, usage, combinations, reserved, etc.

Typography:

Size, weights, typefaces, line -height, etc.

Visual Layout:

Grids, spacing, positioning, structure, etc.

Visual Assets:

Logos, icons, images, illustration, etc.

It should include your GUI elementsdesign, code and documentation-Part 2.

Common components:

Buttons, forms, tables, cards, etc.

Common Patterns:

Validations, do’s and don'ts, etc.

Content tone and voice:

Use of words, sentences, etc.

Motion, sounds and gestures

Interaction specs for touch devices, etc

But it could easily go beyondthe visuals.

Principles And criterias:

Guidelines, accessibility checks and etc.

Processes and activities:

Ways of working, design stages and etc.

Team structure and roles:

Responsibilities, deliverables and contact details.

People, you don’t need to start from scratch.

Awesome.How do I create a Design System then?

#4 ------------------------------------ The Process.

You might just get started as a side project.

But at some point, you will need a working team.

Bear in mind:

A design system is meant to be a ever evolving product.Not a project.

Organisingyour Design System.

● Principles

● Basics

● Components

● Patterns

● Areas

● Layouts

Hey,ensure a design pack.

● Components and symbols

● Team contribution and visibility

● Version control

● Naming conventions

● Peer review

● https://materialdesignkit.com/android -gui/

Hey,ensure a code base.

● Self-contained components

● Standalone dependency

● Code snippets and formatting

● Naming conventions

● Version control

● Code review

● GIT YARN and NPM packages

Hey,ensureusability .

● Mobile-first approach

● Built in accessibility from component level

● W3C compliance checks

● Check components and page performance

● Interactions responses and consistency

Hey,ensure testing .

● Use your design system to build your design system

● Test regularly cross device

● Use packages to facilitate adoption

● Provide confidence in your code

Boom! Implemented.Now what?

#5 -------------------------------- The Governance.

Now, here comes the hard bit !Believe me. 0_o

Buy-in and Adoption

Feedback and Communication

Governance and Collaboration

Storytelling and documentation

It must evolve. Listen to users feedback andreimagine it.

Revisit content and structure

Regroup elements and components

Rethink solutions and purpose

Rewrite code and performance

Reduced design and production effort

Source: https://gel.westpacgroup.com.au/case -studies/summary/

Consistency guides a userthrough a product.

You’ll havemeaningful conversationsabout your product.

Some examples and references

http://styleguides.io/

https://www.designbetter.co/design -systems-handbook

http://atomicdesign.bradfrost.com/

https://theblog.adobe.com/building -design-system-speed-scale-collaboration -innovation/

https://designmodo.com/design -system/

Let’s keep in touch!

ramoncliquet@gmail.com

www.ramon.im

And that’s a wrap.Questions?

#6 --------------------------------------------- Q&A.

Ramon CliquetFull-stack Senior Designer

www.ramon.im

Design Systems:Delivering a Consistent Design-led Customer Experience.