DesignSystem(s)

As a designer/developer/content editor/marketeer/agency, I want to quickly have access to the Visual Language / UI Components, Object Components, Patterns, Resources and Guidelines, So that I know which rules to apply in order to design / build / create while keeping consistency for the brand and stay true to its archetype.

The Design System - a systematic approach to design. It is a definition of elements such as typography, colors, UI components, codes and guidelines that we use repeatedly and consistently to build our websites and products across channels and mediums. It provides a better way of working.

Inconsistency in user experience across digital products can cause a decrease in learnability and confusion.

A Design System brings order and consistency to our digital products. They help to protect our brand, improve user experience and time to market and brings efficiency of how we design and build products.
It is a source of truth and a system of record for our design decisions.
It holds us to high standards, keep teams on the same page, and help to onboard new team members.
It documents the why, when, where, and how.

The design system is relevant for everyone in the creative and development space, such as:

• Designers
• Developers & Engineers
• Marketeers
• Content editors
• Creative agencies

• Design & develop in a more structured way
• Focus on solving real user problem instead of preventing or researching inconsistencies
• Faster development process, better code & quality and ensures scalability

In combination with the right audiences, it can promote a company wide design mentality which is useful not just for the creation of product design but can also influence the process of creating and marketing a product.

Separated teams: brand, marketing, product, development should be included as much as possible to ensure that everyone is working toward a unified brand and product.

The design team had a solid background in building and optimizing web based platforms and one of the most common issues agreed upon was inconsistency regarding visual representations of the same elements in user interfaces of digital products.

Inconsistency results in difficulty for user to (learn how to) navigate any digital product, thus there is a risk of decrease of trust in the company behind the digital product.

In a traditional approach the content is designed and saved in pages within the CMS. This results in content not being re-usable across channels. Therefore content editors have to entry the same content repeatedly.

There is a gap between the way developers think & develop and the way designers think and design. A design system solves this issue by providing an ecosystem of objects components that relate to each other, by enforcing a single source of truth.

As opposite to visualization of pages in images, which can lead to slow development and inconsistency of the end result versus the initial design the Object Oriented UX (OOUX) is a solution to end frustration for both designers and developers. OOUX is a framework and a way of thinking that supports researching, designing, developing and maintaining a digital product.

Components first.
Content first.
Mobile first.

By working object-oriented we ensure that:

• we keep simplicity and reduce complexity as we do not introduce unnecessary new design elements
• we are able to easily improve our UX by iterating on our existing objects without impacting the rest or creating clutter
• most important: build brands using existing objects and iterating on them by adapting the styling of the objects to the brand identity

Below a very basic example on how we started brainstorming for objects. Objects can be extracted from product goals. To each object we defined elements such as core content, and nested objects. As a final step we prioritize the elements and associate actions.

The core products of the each brand's offering. We use this for bikes, equipment, parts.

The design system follows the Object Oriented (OOUX) approach. To reduce friction during collaboration, components are semanticaly named based on known terms within our team.

• Overview - an introduction to our choice for Object Oriented UX, the brand, editorial and visual guidelines
• Visual Language - helps us distinguish between every element and every experience designed by / for Lapierre and helps the brand to differentiate from its competitors.
• UI Components - key building blocks, each component was design to solve a specific UI problem and work harmoniously together.
• Object Components - For all our brands we apply the principles of OOUX. It is a framework in which we think about core content and data as objects instead of artifacts we would normally use such as pages.
• Patterns - best practice solutions for how a user achieves a goal. They show reusable combinations of components, objects and templates that address common user objectives with sequences and flows.
• Guidelines - What you need to get started with designing and developing, libraries and assets.

Design systems exist to handle and encourage change. However this can only happen if everyone plays by the same rules based on collaboration and partnership. The challenge of design systems is to find the balance between scalability and creative freedom.

• opened the Design system for feedback and input from all disciplines and as a result components perform better.
• I've invested time in labeling everything precisely. A designer or a developer can quickly understand and locate what they're looking for, solely by the name. The Object Oriented UX approach from the design system and naming conventions are followed across disciplines.
• I've designed flexible building blocks right at your fingertips. Implementing a new module with a heading, body copy and a call-to-action(CTA) is as easy as grabbing those components from the design system.
• Everything was designed to be component based so that commonly paired elements can be fully assembled in sections using the same basic elements from our design system.

Unfortunately we had to leave out the most-wanted feature, the connection between Sketch and Storybook. This is a must-do to ensure the components are always in sync. The source-of-truth needs to stay up-to-date across tools. By not evangelizing the importance of this connection within your organization you'll greatly increase time spent on maintenance.
During development there's a process loop of ideation where Sketch components can loose their status of "truth".

Sketch/Figma(Design) - Code(Development) - Storybook(UI Components directly from code). Storybook components can be and should be used in Sketch(or Figma).

While the design system offers the same set of components, to expand it across multiple brands requires the use of:

• Design tokens - global and brand specific. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates.
• Brand configuration system - One code different results. Design Tokens take care of the styling but there are situations when layout needed to be handled differently and accordingly to a brand needs.

• Layout changes - sport vs. lifestyle brands
• Object Components - specific content
• Payment methods - localization specific
• Distribution - dealers, click & collect
• eCommerce - only certain brands, at times even only certain countries wanted to sell online
• Theming - light/dark mode

The brand configuration system acts like a switch by changing the values within the design token.

Design Systems are like ecosystems - they thrive within an environment where teams from all involved disciplines work together to form great user experiences. Building one is fairly easy to begin with. Start with the most basic of design principles and all the rules that come with the best practices will follow. It can expand pretty quickly to create an entire new world set by rules of guidance and usage, but always remember and never forget that the devil is in the details.

The experience of a more consistent UI, thus making it easier to learn, navigate, find and complete a task, be it either to find information or make a purchase.

Easier and faster to design, develop and maintain while keeping consistency. This helps business on focusing on actual problem solving for customers and as a result yield better comercial results as well as lower costs.

• Report on concept and structure in Atlassian Confluence (how to get things started)
• Atlassian JIRA Roadmap
• UI Library in Sketch
• Documentation
• Code (for UI Components)
• Assets
• Design Tokens
• Prototyping
• Zeroheight for Raleigh & Lapierre

When designing components in your tool of choice, be it Sketch or Figma, it's important to consider how other designers operate, utilize and want their component to behave. This responsibility expands when working with developers. Components need to be properly named, thus friction is reduced during collaboration.
While design systems need to be documented, they also need to allow enough flexibility so that designers don't feel that their creativity is hindered.
In hindsight I should have promoted the Design System more.