How UX team empowers software development with design systems

Our UX design process touches many departments, and we need to collaborate effectively with all of them to ensure the product is a success. From my perspective, as a UX Specialist it’s never been more important to innovate, and that often means designing new products and features for our clients. Ideas are often developed by stakeholders, engineer teams, designers, testers or business experts where each of these groups adds a valuable perspective to the creative work. However, when multiple people engage in the same design pursuit, common questions emerge. Some of the answers might not be readily available or easily understood, we might get design inconsistency. We are reaching the point where I can’t innovate on products without first innovating the way I build them.

This is why in Idego I get the UI/UX designers involved with innovation work. We, as a team, understand what true collaboration means, that all people involved in the project are sharing the responsibility to build a quality product. Furthermore, we should reduce the barriers, support, guidance and empower the development team in a design process. We don’t just design applications in user-centric methodology, to be creative or evaluate other people’s ideas. Instead, we do research and build design systems. It serves as the foundation of our creative work.

What is a design system?

Design systems¹ include the resources to create a consistent user interface for any software application. Specifically, they help to document and share design projects, tools, patterns and components libraries. Rather than focusing on which elements to use, where to place them, how to implement our finely tuned designs and which layout is more appropriate, developers can focus on application logic. 

Core aspects:

1. Helps in efficiency of both development and operation of any application screens.
2. It’s a living style guide which serves as

• A patterns’ guideline for color palettes, typography, iconography,  layout, accessibility and writing style,
• A library of components with specifications such as modals, dropdowns, headers, search tools, data grids, etc. that are available to use.

3. During the front-end development process, it also serves as a coded component library.

Design system is a shared language between designers and developers. Christopher Alexander, who wrote a book “The Timeless Way of Building”² about the understanding and configuration of design patterns, he states that “when language is shared, the individual patterns in the language are profound.” I’ve found that when I present a design system to any team involved in the project, it sparks conversations around design decisions. It helps to identify and solve design problems at an earlier stage due to collaborative effort. In other words, it is truly Agile, as a “democratic way of developing software!” Everyone in the organization is an owner of the design system. And everyone is able to contribute because it’s in our development culture. 

Defining the design principles

The principles behind a product’s design philosophy allows an organization to assess whether a prototype adheres to its general guidelines. It’s important to remember that we build design systems to focus on common ingredients that follow core design principles: unified, universal, conversational, essential and memorable.

Unified

Users need a product that’s consistent, highly functional and delightful. We’re consolidating UX and brand design experience to create a unified design system with the client’s corporate identity. We aligned design decisions with their style guide to create a key reference across all touchpoints that share unique visual and verbal communication, in any part of the world. Likewise, we adjust color palettes, typography and layout with digital standards to find a compromise with the brand values. We’re also involved in finding the right writing style in the application to be understandable by all users. 

Universal

I create a user interface for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities using atomic design methodology³.

Atomic design is a framework for thinking about user interface, it describes in detail how to successfully introduce modular (atomic!) design systems.  The smallest unit is the atom – the smallest component like input field, button, header. Atoms combine to form molecules – like containers with related news, input form. Molecules continue to build complex organisms – like sidebars, newsfeed. That helps us to create page-level objects, content structure of any page or screen. 

It is not a linear process, but rather a mental model for approaching UI design. This gives me a better overview on hierarchies, techniques to transform a team’s design and development workflow to create effective pattern libraries that are compliant with accessibility standards, like WCAG⁴ for web applications. I welcome any constructive input from multiple stakeholders, subject-matter experts, marketing teams or developers to prioritize potent solutions over dogmatic formulas.

Conversational

UI/UX Designers to combat inconsistencies, we share our knowledge with each other. We create libraries and open source them in documentation that is accessible and able for commenting. Our work helps people create and collaborate with each other in natural, intuitive ways. We investigate the code as a design tool. Moving closer to working with assets that don’t only include layout and design, but also logic and data. This helps bridge the gap between engineers and designers, thus reducing the need for design specs–or redlines–and the steps between vision and reality.

Essential 

I design for clarity and focus. My work helps users do the right things in any application through feature prioritization, visual hierarchy, and contextual awareness. 

Memorable

Alla Kholmatova recently wrote in her book, Design Systems⁵, that design principles must be relatable and memorable. We are here to help you with figuring out the right UX strategy for establishing and evolving a new design system, or enhancing the existing one in your organization. We’re delivering the promise of the client’s brand, by reflecting the energy that users are putting into growing businesses. Our work on design systems are meant to help the final product to grow. But it’s important to remember who will benefit from using it? Users? Customers? Developers? You? The answer is simple: People. 

These standards were designed for people. This is our purpose. To be open-minded, honest, inclusive, transparent with our work when we can. To share our thoughts to create better products that serve people!

Footnotes

¹Design Systems 101 – Nielsen Norman Group – https://www.nngroup.com/articles/design-systems-101/

²Alexander, Christopher (1979). The Timeless Way of Building. Oxford University Press. ISBN 978-0-19-502402-9. https://en.wikipedia.org/wiki/The_Timeless_Way_of_Building

³Atomic Design – Brad Frost https://atomicdesign.bradfrost.com

⁴WCAG – https://www.w3.org/WAI

⁵Design Systems: A Practical Guide to Creating Design Languages for Digital Products – Alla Kholmatova https://books.google.pl/books/about/Design_Systems.html?id=UWhMswEACAAJ&redir_esc=y