Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led...
Transcript of Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led...
![Page 1: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/1.jpg)
Ramon CliquetFull-stack Senior Designer
www.ramon.im
Design Systems:Delivering a Consistent Design-led Customer Experience.
![Page 2: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/2.jpg)
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
![Page 3: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/3.jpg)
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
![Page 4: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/4.jpg)
So,First things first.
#1------------------------------------ The Problem.
![Page 5: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/5.jpg)
Brands are investing in design to go digital.
But digital is complexand is everywhere.
![Page 6: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/6.jpg)
Customers are demandingfor disruption and innovation.
But 79% of products miss their launch dates* . * Source: 1CGT/Sopheon Survey
![Page 7: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/7.jpg)
Fellow designers, It is time to productionizeour services.
We must empower our teams and customers .
![Page 8: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/8.jpg)
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
![Page 9: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/9.jpg)
Hum.But how can a Design System save us all?
#2 ------------------------------------- The Solution
![Page 10: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/10.jpg)
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
![Page 11: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/11.jpg)
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/
![Page 12: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/12.jpg)
Let’s not only make great design.
Let’s make design great.For everyone.
![Page 13: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/13.jpg)
Let's make design
reusable.
![Page 14: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/14.jpg)
Let's make design
consistent.
![Page 15: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/15.jpg)
Let's make design
efficient.
![Page 16: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/16.jpg)
Let's make design
robust.
![Page 17: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/17.jpg)
Let's make design
reliable.
![Page 18: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/18.jpg)
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
![Page 19: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/19.jpg)
Cool.But what da heck a Design System really is?
#3 ---------------------------------- The Approach.
![Page 20: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/20.jpg)
Design System is your product interface & experience, living & briefing one single source of truth.
![Page 21: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/21.jpg)
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.
![Page 22: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/22.jpg)
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
![Page 23: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/23.jpg)
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.
![Page 24: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/24.jpg)
People, you don’t need to start from scratch.
![Page 25: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/25.jpg)
Awesome.How do I create a Design System then?
#4 ------------------------------------ The Process.
![Page 26: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/26.jpg)
You might just get started as a side project.
But at some point, you will need a working team.
![Page 27: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/27.jpg)
Bear in mind:
A design system is meant to be a ever evolving product.Not a project.
![Page 28: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/28.jpg)
Organisingyour Design System.
● Principles
● Basics
● Components
● Patterns
● Areas
● Layouts
![Page 29: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/29.jpg)
Hey,ensure a design pack.
● Components and symbols
● Team contribution and visibility
● Version control
● Naming conventions
● Peer review
● https://materialdesignkit.com/android -gui/
![Page 30: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/30.jpg)
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
![Page 31: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/31.jpg)
Hey,ensureusability .
● Mobile-first approach
● Built in accessibility from component level
● W3C compliance checks
● Check components and page performance
● Interactions responses and consistency
![Page 32: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/32.jpg)
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
![Page 33: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/33.jpg)
Boom! Implemented.Now what?
#5 -------------------------------- The Governance.
![Page 34: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/34.jpg)
Now, here comes the hard bit !Believe me. 0_o
Buy-in and Adoption
Feedback and Communication
Governance and Collaboration
Storytelling and documentation
![Page 35: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/35.jpg)
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
![Page 36: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/36.jpg)
Reduced design and production effort
Source: https://gel.westpacgroup.com.au/case -studies/summary/
![Page 37: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/37.jpg)
Consistency guides a userthrough a product.
![Page 38: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/38.jpg)
You’ll havemeaningful conversationsabout your product.
![Page 39: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/39.jpg)
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/
![Page 41: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/41.jpg)
And that’s a wrap.Questions?
#6 --------------------------------------------- Q&A.
![Page 42: Delivering a Consistent Design-led Customer Experience.€¦ · Delivering a Consistent Design-led Customer Experience. What we will cover. 1. ... The digital design drama. 0_0. Rapidly](https://reader031.fdocuments.net/reader031/viewer/2022011905/5f2bfb43a05dd5795928eddc/html5/thumbnails/42.jpg)
Ramon CliquetFull-stack Senior Designer
www.ramon.im
Design Systems:Delivering a Consistent Design-led Customer Experience.