Jonathan Lainez discusses the significance of design systems for ensuring visual consistency in digital products. A design system comprises reusable components, guidelines, and tokens that enhance collaboration, improve user experience, and facilitate scalability. The document also outlines the process to develop and maintain a design system effectively.

1. Welcome

2. JONATHAN LAINEZ
Your Host
• Ortusian since 2020
• Passionate UX/UI designer
• I started as and front-end developer
• Creating intuitive and visually appealing
digital experiences.
• Problem solving
• Hyperactive
Senior Designer at Ortus Solutions Corp.
jelainez jlainezsv

3. Design System
The basis for a consistent design
LED BY
Jonathan Lainez

4. Purpose of this session:
Establish the importance of
visual consistency in design
and how a Design System
can help.

5. Consistency
INTO THE BOX 2024

6. How do we ensure that our brand and
products offer a consistent experience?
Implementing strategies and practices that guarantee
uniformity at all points of contact with users.
INTO THE BOX 2024

7. Why is important?
• Increases user confidence.
INTO THE BOX 2024
Visual Consistency

8. Why is important?
INTO THE BOX 2024
• Facilitates navigation and
understanding.
Visual Consistency

9. Why is important?
• Reinforces the brand identity.
INTO THE BOX 2024
• Generate a memorable
experience.
Impact on the Brand

10. Design Systems
INTO THE BOX 2024

11. What is a Design System?
• Fonts
• Colors
INTO THE BOX 2024
It is a structured set of reusable design elements, guidelines and rules
that provides a consistent foundation for product development and
design, ensuring visual consistency and efficiency throughout the process.
• UI Components
• Tokens

12. What is a Design System for?
INTO THE BOX 2024
To build high-quality user
interfaces from a well-considered
set of reusable components.

13. Benefits of a Design System
INTO THE BOX 2024
• Use of predefined components.
• Avoid reinventing the
wheel on each project.
Efficiency in Design & Development:
• Facilitates communication
between designers and
developers.
• Establish a common
foundation.
Improved Collaboration:

14. Benefits of a Design System
INTO THE BOX 2024
Consistency: Across all design elements, from colors to interface
components.
1
Development efficiency: Development teams can work more efficiently by not
having to reinvent the wheel every time new functionality is added.
2
Collaboration: Facilitates collaboration between design and development
teams by providing a common base of design elements and rules. This is
especially important in large organizations with distributed teams.
3

15. Benefits of a Design System
INTO THE BOX 2024
Scalability: Provides the structure needed to effectively scale design
and development as a project grows.
4
Sustainable maintenance: Simplifies long-term maintenance by allowing
centralized changes and updates to propagate consistently throughout the
system.
5
Improved user experience: Contributes to a more positive and predictable user
experience through consistent and familiar presentation, which can improve
user retention.
6

16. Do I need a Design System?
INTO THE BOX 2024

17. Do I need a Design System?
INTO THE BOX 2024
Let's define the two paths where a DS could go:
A quick way where we build exactly what we need for a single
product.
1
A more robust structure that works for several products.
2

18. Where to start?
INTO THE BOX 2024

19. INTO THE BOX 2024
Nathan Curtis put it this way:
Design systems are
systems of systems
Nathan Curtis: Founder of EightShapes and designer, engineer, leader, author and
speaker on the topic of design systems in digital product development.

20. DS: A system of systems
INTO THE BOX 2024
It includes elements such as colors, fonts,
iconography and other visual elements that
maintain aesthetic coherence throughout the
user interface.
Visual Design System
It consists of a set of reusable components,
such as buttons, forms, cards, etc., with rules
and guidelines for their implementation and
consistent use.
UI Component System
Defines guidelines and principles for user
interaction with the interface, such as
animations, transitions, and specific
behaviors.
Interaction System
It includes detailed documentation that
describes how to use and apply the
elements of the design system, as well as
tutorials and examples to facilitate
implementation.
Documentation System
The organization of space is key to every
great design. Spatial systems, grids, and
layouts provide rules that give your designs
a consistent rhythm, constrain decision
making, and help teams stay aligned.
Space, grids, and layouts

21. DS: A system of systems
INTO THE BOX 2024
• Design Tokens
• Typographic System
• Color System
• Icon Set
Visual Design System
These subsystems come together to
help build high-quality user interfaces
from a well-considered set of reusable
components.
Each of the systems could evolve until it has
systems within it

22. Tokens System
INTO THE BOX 2024
• A marketing website
• A web application
• An Android application
• An iOS app
For accessibility reasons you decide to
change a color, the primary brand color.
Let's imagine that your company has many
interfaces and many platforms to maintain:
How many time will gonna take you?
How can yo guarantee you changed in all
the places were used?

23. Tokens System
INTO THE BOX 2024
In 2015, Spotify made changes to its
image and consequently updated its
brand guidelines. It took them several
months to spread the new green color on
all their platforms.
Applying a new color on multiple platforms shouldn't take months...

24. Tokens System
INTO THE BOX 2024
Now, thanks to the foundation of their design system based on
design tokens, it would only take them a few minutes.

25. Example
INTO THE BOX 2024

26. Tokens System
INTO THE BOX 2024
The purpose of tokens is to improve:
• Development efficiency
• Collaboration between teams
• Ability to adapt and evolve over time.

27. Tokens System
C

28. 5 pillars of the
Design System
INTO THE BOX 2024
Sale
Research
Design
Construction
Maintenance

29. Sale
INTO THE BOX 2024
Regardless of who the client is (the person or team that will or will not accept the
DS) you must have established the problem to which it will provide a solution.
• Discover what exists and understand the
expectations of the system.
• Collaborate with colleagues, users
(developers + designers), and sponsors.
Initial Investigation
• Evaluate the current component landscape.
• Conduct enough research to understand
the problem and propose solutions.
Technical analysis
• Develop value proposition and define the
scope of the design system.
• Identify resources necessary to achieve
objectives.
Preparation for Presentation

30. Research
INTO THE BOX 2024
• Analyze the current design in the organization to
identify strengths and weaknesses.
• Determine consistency and coherence in the use
of design elements.
Current State Assessment
• Maintain conversations with development teams,
designers and key stakeholders.
• Explore current expectations, challenges, and
experiences with design systems.
Collaboration and Interviews
• Perform a detailed audit of existing visual
components.
• Evaluate consistency in the application of colors,
typography, and other design elements.
Component and Design Audit
• Analyze other design systems to identify best
practices.
• Identify improvement opportunities based on
industry standards.
Competition Investigation
• Evaluate the current technical infrastructure and
its ability to implement a design system.
• Consider how the system will integrate with
existing technologies.
Technical analysis
• Identify the specific components and resources
that will be included in the system.
• Define the project scope and expected
deliverables, such as design libraries and
roadmaps.
Determination of Scope and Deliverables

31. Design
INTO THE BOX 2024
Finding the optimal balance between reduced components and improved functionality.
Start incrementally to avoid initial complexity.

32. Construction
INTO THE BOX 2024
• Create design components, such as buttons,
cards, forms, etc., according to established
specifications.
Component Development
• Apply defined tokens, such as colors, fonts, and
white space, to maintain visual consistency
across all components.
Token Implementation
• Perform extensive testing to ensure that
components behave as expected in different
situations and platforms.
Testing and Validation
• Develop detailed documentation that describes
how to use each component, including examples,
style guides, and possibly sample code.
• Documentation frameworks:
• The current code
• Interactive demos (storybook)
• A documentation system to add our
explanations (zeroheight)
Documentation Creation
• Provide training to development and design
teams on how to use the design system
effectively and encourage its adoption.
Training and Adoption

33. Maintenance
INTO THE BOX 2024
• Perform regular updates to add new features,
improve performance.
Continuous Update
• Establish a monitoring and feedback collection
system to evaluate how components are
implemented and used in final products.
Monitoring and Feedback
• Keep design system documentation up to date,
accurately reflecting available components and
providing clear usage examples.
Updated Documentation
• Perform extensive testing to ensure functionality
and compatibility across various environments,
browsers, and devices.
Rigorous Testing
• Encourage continuous collaboration between
development, design, and product teams to
address emerging issues and discuss potential
improvements.
Active Collaboration

34. Conclusion
INTO THE BOX 2024
The reason for a Design System is to simplify the
construction of other products, specifically user interfaces.

35. Questions?
INTO THE BOX 2024

36. THANK YOU