Design Systems with Soul: An Introduction to Designing Systems with Values & Principles

"Users don’t fall in love with components, users fall in love with values."

Every element of your design should reflect the soul of your product—yes, its soul. In design context a “soul” refers to the purpose, set of values, and sense of character that your product possesses.

A design may have an aesthetically-pleasing color implementation, acute icon arrangement, and a perfect use of graphics. Yet, if these factors are not coherently and intentionally combined, organized, or represented, it could make it unlikely for users to adopt your product. At its worst, users will abandon your product early and refuse to incorporate this product into their daily lives.

The difference between a good designer and a great designer is their capacity to incorporate their target users’ needs into their designs and balance potential customer needs with business objectives— it’s their ability to elicit certain emotions, such as trust or satisfaction, from their users through comprehensive design. Ultimately, it’s their ability to make users connect with the design they are using. Understanding your users’ needs will help you drive the values, principles, and character of your design.

But how can design teams do this? Great designers mustn’t merely “check the boxes” for their designs, but create designs that are well-informed through adequate research and in-tune with their target user’s values, needs, and principles.

This article will discuss the importance of incorporating values while designing a system or product; it will further explain how the importance of incorporating value-based (and user-centered) design supersedes certain components when designing a user-oriented system. Though the components of a design system include the essential building blocks for a product, people hold certain emotional tendencies that can be tapped into (or ignored) during the design process. And it’s attention to these emotional tendencies that will make, or break, the success of your product design.

What is a Design System?

A design system is a set of standards that allow for the reusing of a collection of components.¹ These components can be interconnected and reorganized to build new systems, and each of these components should reflect your brand’s values and character.

Design systems are created and used in order to:¹

• Create unified language and tone across cross-functional teams.
• Quickly replicate designs at scale for a particular product design (while keeping all designs “on-brand”).
• Reduces strain on design resources so that teams can focus on larger, more complex challenges.
• Create visual consistency in your product (more brand consistency).
• Serve as an educational tool for lower-level or junior designers.

Before completing or building a design system, various components must come into play. Components refer to User Interface elements that give a design process its direction, purpose, brand, and more. Examples of components include accordions, carousels, buttons, cards, dropdowns, checkboxes, sidebars, and search fields. Components are critical to effective design, as they make up the structure of an entire design system. Still, to create a design system with “soul”, one must examine these elements further and organize them in a fashion intended to meet users’ needs.

Design system repositories (often containing style guides, component libraries, and pattern libraries) are frequently used by design teams for each product to maintain use of uniform components across all channels.

Through something called atomic design, the user experience design equivalents of atomic elements, like atoms, molecules, and organisms, can be combined in a product’s design to create intentional designs with “soul” that meet the needs of customers.

“Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Each of the five stages plays a key role in the hierarchy of our interface design systems. Let’s dive into each stage in a bit more detail.” - Atomic Design, Brad Frost.²

Implementing the pattern and visual design language refers to when designers integrate a company’s values into its product’s design. The implementation of the pattern and visual language provides solutions for what consumers need, what actions you want the users to complete, and how you want to leave them feeling— fulfilled or unsatisfied.

The principles of a product’s design are like real-time working ethics that remain when the components are transformed into patterns, as well as when visual language is added to give an identity to your product.

The final documentation before the proper development begins can either be in the form of implemented codes which are written in either Python, C++, or any other programming language, or in the form of a design artifact that repeats the workflows which allow for the final open-source code implementation.

What are Principles and Values in Design?

The two governing factors that house hundreds of other elements—design principles and values—are some of the most important to include when creating a valuable design system. But what are these factors?

Discussing these two factors extensively would take hundreds of pages, but in simpler terms, values describe the feeling elicited by users when they use your product and interact with its design.

Principles, on the other hand, drive each of your design decisions and help complement the integration of values. Principles include the list of processes that comprise elements, components, processes, and interconnections meant to achieve optimal functionality of your product and satisfy the goals of your values.

The synergistic use of these two factors together will contribute to a better user experience and a more emotional connection to your product, which is the key to integration and user loyalty.

These factors are not only important, but necessary. But what truly qualifies an excellent design system lies in its attention to values, principles, and character.

Some values of your product may include:

• Leadership.
• Quality.
• Trust.
• Integrity.
• Accountability.
• Diversity.

Common principles in design may include:

• Meet the users’ needs.
• Have a clear hierarchy for how content and information is organized in your product.
• Keep your design and components consistent.
• Provide context.
• Use simple language.

Giving Your Design Principle and Values

Before designers begin coding or implementing other features, they must conduct research to understand what kind of experience consumers want in a specific digital product. Here, WANDR’s team of exceptional, results-focused designers can plan the goals of your design before development commences.

Our skilled designers will collate all the crucial values you want the design and development to exhibit and match them with the corresponding values the target audience wants to encounter.

WANDR does this by assessing and gathering data on your proposed target audience by sending out google forms, conducting a one-on-one interview, organizing workshops, and creating online surveys. You can read more about the best methods for conducting UX/UI research in our blog about UX/UI research methods.

Giving Your Design System a Character, Tone, and Voice

Tone, character, and voice are frequently overlooked and undervalued in the world of design.

The way that a design system speaks to consumers matters. The use of one word in lieu of another can drive a user to take action or leave them confused. The tone of the digital product depends on the public view of the brand.

When a consumer goes through a new design system, 90% read the descriptions internally. This is like someone talking to them and the someone here is a brand. Besides functionality, the tone of the response to the users matters can cause them to feel confused, supported, trusting, frustrated, or a sleuth of other emotions.

Every icon and component has some kind of personality and altogether is the overall behavior of the brand. To ensure that your users experience your design in the way that you’d like them to, take time to examine your product’s internal language’s tone. Make sure it’s user-friendly, easy to understand, and gives consumers clear direction when they interact with it.

Why Does Giving Your Design a Soul Matter?

Without a “soul”, design is ineffective and unremarkable. It likely won’t leave your users feeling satisfied, and it certainly won’t become a staple in users’ daily lives.

The idea of giving your system a soul is to connect with the consumer's soul; it’s feeding the consumers what they need as the design environment provides and actors to each of their needs. Why do you think the most visited digital products are always the ones with the blandest visual design, but what do you think drives the consumers back? The reliability of the design’s soul.

Let every action, components, and design tell the consumers a backstory of the product. Once businesses harness the power of the design system's soul, then success is just the limit.

Rather than solely focusing on the components of your product’s design, try focusing on your product’s brand, identity, reliability, and how it will converse with your target users. From the most basic to the most complex design, let every action be intentional and pay mind to your consumer’s needs. To discover more about how you can incorporate soul into your design, contact WANDR today.

Sources:

Design System of nngroup

Design System of atomicdesign