back

Your free e-book!

See when it is not worth using Scrum.
"Why Scrum Doesn't Work" Download

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 systems1 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.
  1. 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”2 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 methodology3.

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 WCAG4 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 Systems5, 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

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

2Alexander, 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

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

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

5Design 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


cto - Chris Gibas

Free 30-minute consultation with our CTO

Chris Gibas - our CTO will be happy to discuss your project! Let's talk!

More blog posts
Outsourcing — where is the best place to find a solid contract developer?

Idego

Substantive support - Oleksandra Bilokrys

Outsourcing — where is the best place to find a solid contract developer?

Stepping into the world of blockchain is not easy. Being a blockchain developer requires a unique set of skills. Talented and experienced Solidity developers are not easy to find, and they are quite expensive. Do you want to start applying a system of smart contracts within your company? Allow us to explain who the Solidity contract developer is and how […]

Why is it worth hiring a blockchain developer remotely?

In recent years, blockchain and cryptocurrency have gained a lot of attention. As it turns out, this technology has enormous business potential and there are already many companies all over the world that decided to adopt it for their various operations. Yet, even though blockchain’s popularity is growing fast, there are still only a few blockchain developers experienced enough to […]

Why is it worth hiring a blockchain developer remotely?

Idego

Substantive support - Oleksandra Bilokrys

Machine learning and Python — why is it a good combination?

Idego

Substantive support - Oleksandra Bilokrys

Machine learning and Python — why is it a good combination?

In the world of business that becomes more and more data-driven, it is important to stay updated on the topic of the most popular technologies. The group of languages that are most often used for machine learning includes Python. But, is it a good choice for those interested in implementing ML-based solutions in their companies? Machine learning-based systems already partially […]

What do you need to know about the UX design process?

Application design is not only about how an app looks, but also how it works. The total satisfaction from using an app, software, or website is called user experience (UX). A properly designed UX is very important for the brand’s success, especially if the company is functioning mostly on the Internet, like in e-commerce or entertainment applications. Learn how the […]

What do you need to know about the UX design process?

Idego

Substantive support - Oleksandra Bilokrys

Get a free estimation

Need a successful project?