The digitization of companies and more broadly of our society brings a major change in the world of design. We go into a logic of globalization and generalization of our digital usages. To meet this demand, more and more digital services are interfering in our daily life with a variety of devices and media which constantly evolve. The design must follow this evolution and go into this logic of industrialization. This is why the Design System comes in to answer to these new challenges.

1. CW
IN
CAPGEMINI
WEEK OF
INNOVATION
NETWORKS
Unify your User
Interface through a
single Design System
Simon Gomez, Toulouse, September, 27th

2. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 2Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Contact:
Simon Gomez
UX Designer
Toulouse Creative Studio
simon.gomez@capgemini.com

3. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 3
BRAND IDENTITY

4. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 4
It’ is the perception of the
company in the eyes of the
world.

5. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 5

6. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 6

7. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 7

8. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 8

9. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 9

10. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 10
BRAND CONSISTENCY

11. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 11
It'is the delivery of the brand
identity through all
stakeholder touch points.

12. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 12

13. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 13

14. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 14

15. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 15
Why is also important
in a digital context

16. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 16
The added value
is no longer in the
product but in the
service and the
experience.

17. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 17
The digital
transformation of
companies places
digital services and
HMI at the heart
of the business.

18. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 18
Let’s start to create
a design system

19. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 19
The madatory resources for
creating consistent web solutions in
terms of visual guidelines, code and
usage, for delivering the best digital
experience to users.
What’s a Design System

20. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
What’s a Design System
Design
UsageCode

21. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
UI Kit
DocumentsHTML/CSS/JS
& Tokens
What’s a Design System

22. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Alive Agnostic Universal Atomic Inclusive
Design System main principles

23. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
COST SAVINGIMAGE UX CONSISTENCY
Companies need to have a
strong and consistent brand
image to support it’s digital
services.
Companies need to offer the
best digital user experience to
its customers in terms of
usability, visual design and
language.
Create and develop a specific
design for each application is
expensive. Companies need to
reduce design costs and have a
better management of design
changes.
Why a Design System

24. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 29

25. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 31
How create
a design system

26. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Project ManagerUX Designer UI Designers Front-end
developers
Create a squad of multidisciplinary experts

27. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
A design
system is not
a project, it’s
a product Build Sustain
Design system phasing

28. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Inventory Design Code Documents Publish
How build a design system

29. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Buttons
Field
Range Pickers
Segmented control
Toggle
Have a macro vision of all
company ecosystem and
a complete components
and patterns inventory.
Invetory

30. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Design visual assets,
create a UI kit.
Design

31. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Code visual assets in
CSS and HTML
language. Implement
SASS environment.
Button
Tabs
Usage
Code

32. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 38
Document design, code and
usage guidelines to explain
how to build and use
components and patterns.
Visual
Code
Usage
Documents

33. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Publish documentation
(pdf or website) and
share assets.
Design System
Core documents
PDF
UI Kit
Download or library
Code
Download or Repository
</>
Publish

34. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
Version Communicate Upgrade Support Inspect
How to sustain a design system
Design System Leaders

35. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved. 41
In conclusion, 10 best practices to success
• Have a strong sponsorship of the direction
• Get the validation of the brand or communication team to become mandatory
• Start with a small perimeter (with a MVP for example)
• Well define the type of solution (web apps, mobile, website, TV...) and code (HTML, CSS, react,
angular, ...)
• Think scalable
• Always start with an inventory
• Create a multidisciplinary team of builders (designer, developers...)
• Be easy accessible to all stakeholders
• Never provide a design system without explanations (documentation and oral)
• Create Design System Leader to sustain it

36. Design System | Simon Gomez | September, 27th © 2018 Capgemini. All rights reserved.
This message contains information that may be privileged or confidential and is
the property of the Capgemini Group.
Copyright © 2018 Capgemini. All rights reserved.
A global leader in consulting, technology services and digital transformation, Capgemini is
at the forefront of innovation to address the entire breadth of clients’ opportunities in the
evolving world of cloud, digital and platforms. Building on its strong 50-year heritage and
deep industry-specific expertise, Capgemini enables organizations to realize their business
ambitions through an array of services from strategy to operations. Capgemini is driven
by the conviction that the business value of technology comes from and through people.
It is a multicultural company of 200,000 team members in over 40 countries. The Group
reported 2017 global revenues of EUR 12.8 billion.
About Capgemini
Learn more about us at
www.capgemini.com