Evolving User Experience Inclusively

A design system is a collection of design elements, guidelines, and rules that an organization uses to create consistent and recognizable products. Accessibility, on the other hand, refers to the practice of creating digital products that can be used by as many people as possible, regardless of their physical or cognitive abilities.

A design system is a product for making products. 

A well-designed and implemented design system can play a crucial role in ensuring the accessibility of digital products. This is achievable through the creation of inclusive design components that adhere to accessibility standards and guidelines, thus allowing everyone to use digital products with greater ease and independence.

The widespread and established use of the design system also has an impact in terms of:

• Experience efficacy: increasing consistency, coherence, and recognizability across all channels and touchpoints;
• Internal efficiency: optimizing time and costs in producing new products or services;
• Product or service quality improvement;
• Scalability: design systems are designed to be scalable, so they can easily manage product changes and evolutions.

How to design a design system

The process of designing a design system can vary depending on specific needs and context, but there are some general stages that can help guide the process.

Analysis and Research

The first phase of the design system process involves analyzing the context in which the system will be used. This phase involves a thorough evaluation of user needs, technical requirements, and business needs. The current design and development processes should also be examined to understand how the design system might integrate with them.

Design Principles Definition

After completing the analysis, it is possible to start defining the design principles that will guide the development of the design system. These principles should reflect business goals, brand values, and principles, and user needs. Through specific workshops connecting various system actors and emerging needs, we manage to build:

• Foundation: these are the fundamental elements that constitute the basis of the design system and serve as a starting point for creating consistent and cohesive components and user interfaces. Typically, the foundations of digital products include elements such as typography, colors, layout grids, iconography, and spacing;
• Tone of voice: a collection of definitions for verbal communication to convey the personality, style, and character of the brand or company through the user interface. Its main goal is to create a consistent and enjoyable user experience.

All these elements need to be defined clearly and consistently to ensure a consistent user experience throughout the system.

Creation of Components, Patterns, and Templates

Using the simplest elements, the foundation, designers create a pattern-library, a library of components such as buttons, input fields, modals, and navigation bars, which can be reused throughout the project. Patterns are then developed, predefined solutions for common design problems, such as managing user input or arranging elements on the page. Once components and patterns have been defined, templates are created, providing guidance on the structure of pages and layouts. Templates help ensure visual and functional consistency between different sections of the digital product.

Testing and Evaluation

The testing phase of the design system is a crucial moment in the development process. During this phase, developers and designers test the system to verify that all components and interactions are correctly implemented and function as expected. Testing can include compliance verification, system accessibility evaluation, design system consistency evaluation across different platforms and devices, and evaluation of the system’s flexibility and scalability.

It’s important that testing is conducted systematically and accurately to ensure that the design system is complete, functional, and reliable. User and stakeholder feedback must be considered during this phase to ensure that the system meets user needs and has a positive impact on the overall user experience. The testing phase should be conducted iteratively, with repeated tests and continuous improvements to ensure that the system is optimized for user needs and the conditions in which it will be used.

Adoption

Adoption means integrating the designed system into the organization so that it is actually used to create products. During this phase, it’s possible to define the evolution and customization of the design system components to meet the specific needs of the organization; plan and coordinate the training of design and development teams on design principles, various available resources, and the integration of testing tools to continuously monitor their effectiveness.

Improving quality, defining the evolutionary path, and optimizing costs and times, are all possible only if the design system is adopted and managed by those who have to produce products or services.

Evolution of Design Systems

Design systems continuously evolve, integrating new needs derived from tests and the evolution of the product or service they represent.

Accessibility is the ability of a product or service to be used by any user, regardless of their physical, sensory, or cognitive abilities.

The elements that define the design system, such as UI components and guidelines, can be designed with a high priority on accessibility. This means that the design system will have to include components and styles that comply with accessibility standards (WCAG "Web Content Accessibility Guidelines") and that can help improve the user experience for people with disabilities. For this reason, during the early stages of building a design system, we consider some accessible design principles important:

• Enhancing content understanding: evaluating the use of colors to ensure high contrast and not being the only means to indicate action; defining typography so that a hierarchy and structure of the content are distinguishable, to increase readability; avoiding images with text and providing alternative texts for content description;
• Improving interactive experience: verifying that colors and element aggregation allow high contrast text and easily distinguish interaction on various elements through a definition of element states; ensuring that text is also responsive to larger dimensions and is not constrained by a layout; ensuring that the reading and navigation order is logical and intuitive.
• Considering the use of assistive technologies: designing user experiences so that they are testable with technologies such as screen readers and keyboard-only navigation.

A scalable bottom-up design system means creating a system that allows building products from "base" elements to obtain increasingly complex compositions. If we include these design principles during the design and definition phases of the design system's base elements, we will build an accessible design system for accessible digital products, anticipating solutions to tomorrow’s constraints.

An accessible design system not only improves the user experience for any type of user but also represents a competitive advantage for the company or organization, as it allows designing quality products and reaching a wider and more diversified audience.

Designing the Future

Designing the future means imagining and creating a vision of the future we want or believe is possible, using our skills, knowledge, and experiences. In other words, it’s about envisioning the future as we would like it to be and then working to make it happen. The ability to understand the needs of all people and the ability to anticipate and adapt to changes are important aspects of an ongoing process.