Every conscious and dynamically developing company in the production of its digital products first builds and then develops its design system. Thanks to it, creating new applications and websites is much easier because you get the basics that can then be freely modified and developed according to your own needs and expectations. This elementary knowledge significantly increases the dynamics of digital production, thanks to which the brand is perceived as modern, progressive, ahead of the competition, and attractive. What exactly is a design system? How does it affect the aesthetics of design and the business itself?  

What is a design system? 

The design system takes the form of a library with ready-made, standard solutions used by designers in their work. It’s not just a visual presentation but something much bigger. The individual elements of the project are implemented in such a way that their operation is consistent with the available documentation and the so-called best practice. The design system significantly speeds up the work of entire production teams, including developers and designers. This definitely works in the so-called agile methodologies because the ability to update or correct one component has a positive effect on the entire design of the system. Quick delivery of the system also gives the opportunity to test its effectiveness on directly implemented solutions, not only on their prototypes. 

It should be remembered that the aforementioned library of design system is intended to increase the efficiency of designers’ work and is a library of pre-built components. However, all components have already been properly tested and implemented in other projects from many industries and branches of business.1 

How do design systems go beyond the visual aspects of design? 

As we already know, the design system functions in the form of a library, which contains extensive knowledge about code components and how they can be used in digital and business solutions. Thanks to the fact that they have already been tested, they are fully ready for use and often contain information on how to implement them in the code of a given digital product. 

The use of such a component makes the language of a given software or application consistent and standardized. This is extremely important because, during the implementation of a given project, organizational changes and changes within the team may occur. 

Examples of business outcomes influenced by design systems 

Properly used possibilities of the design system can result in many benefits for the business. They significantly improve business outcomes. Thanks to them, the ROI (return on investment) indicator, which determines how effectively a given business conducts its activities, is significantly improved.3 

System design increases the interaction and involvement of people using a given digital product. It also positively affects the user experience and improves business value by maintaining brand consistency and consistency in the operation mechanics of the entire design system. All these factors have a big impact on the business and its success. 

Below are some examples that show how system design can influence many business aspects, including revenue growth, increased efficiency, reduced development and customer satisfaction. 

Read also: The 10 most useful lessons from more than a 10 years of experience in building digital banking platforms

Sparkbox case study 

One of the proofs of the effectiveness of the design system is the case study provided by Sparkbox. A team of eight developers was tasked with developing the code for the contact form in Figma. Two methods were used for this purpose. First, the code from scratch was developed. It was then developed with the help of the Carbon design system. While developing the code, developers were timing themselves. 

Using the design system increased time savings by 47%. Developers developed code that was more visually consistent with the design and more accessible.

Shopify case study 

Another example could be Shopify. By taking advantage of the design system, they significantly reduced their development costs by 50%. At the same time, their developers devoted much less time to their work. They could focus not only on developing the basics but more on improving them and increasing their functionality. To scale their features and make their application consistent, they currently use Polaris—their own design system.

Design systems not only accelerate the work of the development team but also completely change the way of thinking about how to perform duties. The design system significantly improves collaboration between team members, even if they are scattered around the world. It also increases the quality of work and allows you to focus on new tasks thanks to design patterns. The component library reduces the time needed to develop a project8 and increases the dynamics of competitiveness in business. 

How does a design system contribute to the efficiency of design and development teams? 

Design systems significantly improve the efficiency of design and development teams. Most importantly, they are a source of components that are ready to use and complementary to existing code. Thanks to the established guidelines, their use is not problematic and is clearly explained step by step. 

Development teams also don’t have to spend time on “reinventing the wheel”. The developed code is transparent, understandable, and effective, and the possibility of error in the code is significantly minimized. At the same time, it is consistent with the other components used in the code. And the unified language increases the effectiveness of work, because it is understandable for each project and each project participant. Designers, developers and other employees can effectively use one source, which is the design system.

 The graphic below shows what the efficiency curve of a design system looks like. Initially, performance is reduced, but with the progress in the development of the design system, productivity increases significantly. 

How do design systems enhance and accelerate the product development process? 

Thanks to design systems, it is possible to enhance and accelerate the product development process. The design system is the source of code snippets, documents, and other digital assets that are reusable and design-established. 

Work on the product can take less time, and thanks to pre-tested components, you can focus on further development rather than on generally available basics. This significantly increases productivity. Developers and designers can focus on iterations and deployment of new features. 

Developers can take care of the dynamic development of the product and increase its consistency and availability for the end user. The design system can also be developed in a way that takes into account the WCAG guidelines. In times when the product life cycle is shorter, the ability to automate and use components in different versions allows you to keep up with changes and quickly implement new solutions.10 

How does a design system contribute to creating a consistent user experience? 

The components that are available in the design system are pre-tested, or they are built based on an already existing, implemented solution. However, it is impossible to determine the usefulness of a given component reliably. Whether they are understood by the user and function correctly depends on the context in which they are used. When a certain variant becomes common in many solutions, the user develops certain habits. He expects a particular component to perform a function he already knows. Therefore, they are known to increase a consistent user experience because they become visually friendly and identifiable. 

Also, combining them together is not a problem. It is also common to create components that are developed in several variants – each variant for a different device. Thanks to this, they will be displayed differently on devices with a desktop resolution than on mobile RWD running on a computer. The variant developed for mobile resolution displayed on the phone with the use of the device recognition function will look even different. 

The individual elements work together, thanks to which the final product is responsive and responds to the needs and expectations of users on different devices and operating systems. The aforementioned visual consistency significantly supports UX design. Users can use features that are visually consistent throughout the application or website. 

The design system makes it possible to create a coherent image of the brand and its products that function in the same way, and the product structure is visually recognizable across all screens for each user.11 

Can consistency in user experience impact customer satisfaction and retention? 

Definitely, consistency can have a big impact on whether current users will be satisfied with using a particular digital product or rather turn to the competition.  

Products and services with coherent components increase the intuitiveness of use, build trust, and make it easier to navigate the website or use the product. Familiarity is a way to increase the simplicity of use, which allows the end user to quickly and effectively achieve the intended goal. 

Consistency can therefore affect the loyalty of the user and encourage him to continue using the services or products of a given business. Therefore, it affects the overall experience and reduces cognitive load. 

Nowadays, users interact with the company through many sources. These are social media, websites, web applications, software, mailing, etc. The lack of brand cohesion can be disastrous for the entire business, reduce the customer’s trust in the business and cause they will no longer identify with it. 

Read also: What is project risk?

A study by Lucidpress – the impact of brand consistency on sales results 

A study by Lucidpress clearly shows that consistency has a big impact on users and can increase business revenue by up to 33%. However, according to a survey conducted by McKinsey, a strong brand can increase sales and increase the likelihood of a customer buying from a given company by up to 3.5 times.12 

Can a well-implemented design system influence a company’s brand reputation? 

Using the solutions offered by the design system and their proper implementation can have a positive impact on the brand’s reputation. Carefully implemented components of the design system make the brand visually consistent across all sales and promotion channels. This inspires trust, enables customers to identify with the brand, and proves its reliability in the message addressed to the final customer.

A well-implemented design system is a system where attention is paid to details. The visual version represents full professionalism, responsible and serious approach to creating the presented solutions and to the user himself. It is also a business commitment to provide a high-quality experience which users appreciate and demonstrate in their loyalty to the business. 

Well-used design system capabilities make the brand more recognizable, and competitive, evoke positive emotions, have positive associations and make users identify with it. Over time, they can also recommend specific products or services themselves, thanks to which they become, in a way, ambassadors of a given brand.

Case studies demonstrating the impact of design systems on business outcomes 

The results of the survey directed by Sparkbox show how much the design system affects the business outcome. 

Information was collected from two groups of respondents. One of them were in-house respondents representing their own experience with design systems. The second group of respondents were people representing the customer’s point of view. 

As you can see in the picture above, the biggest priorities and challenges include encouraging adoption, engaging contributors, and overcoming debt. 

The photo above clearly shows that many teams believe that their design systems create debt. 

What did the respondents consider to be the reason for debt? 

• lack of complete documentation and reliable technical implementation, 
• implementation of design system components when the product is already along the lifecycle, 

• making changes only after the product has been released. 

To sum up, in order to gain maximum benefits, it is important to convince yourself to the adoption stage and increase the involvement of employees in working on the design system.   

It is also essential to track design system metrics because these data allow for a clear recognition of the correlation between the design system and business success. Then it is easier to determine that successful design systems allow businesses to benefit greatly from them. It is also significant to realize that this is only a path to success and not the only exclusive means to achieve it. But it can still be seen that design systems contribute to revenue generation and should be treated as an investment in the future of business.

How does a design system help in the long-term reduction of project and technical debt? 

Using the design system is an investment that contributes to reducing project and technical debt in the long run. It is a source of established components that can be reused without having to re-develop them from scratch. 

It is also a way to avoid duplicating tasks that employees have already done and reduce the likelihood of inconsistencies. The use of standard solutions provides the basis for maintaining high-quality code.  

The design system enables the use of established solutions, which significantly reduce the risk of errors, and the code is manageable and easy to maintain. 

The design system provides clarity and a solid foundation for understandable communication between all employees and project groups. With a design system, communication between people involved in designing an application or website will be easier and more convenient.  

Thanks to a well-developed design system, you can avoid many mistakes and quickly reduce project and technical debt in a relatively short time. 

How can design systems support scalability as a company grows? 

The design system supports scalability for large and complex products. It is also the best solution for a business that implements long-term projects. Design system effectively supports the work of large and extensive teams.

This means that thanks to the design system, you can effectively develop a small, single product and efficaciously work on creating a multi-product offer. The centralized design system makes it easy to maintain consistency and libraries available in multiple technologies. 

What are the consequences of using a design system in terms of cost savings? 

When do the costs associated with creating a design system pay off and allow you to save money? This moment is the next project to work on in a particular business. A growing company collects a database of information, knowledge, and code samples that can be used in future projects. Predefined components are reusable, which saves time and money.18 

Cost savings are also based on the use of established design patterns, increased design efficiency, and shorter time spent on product or service development. The design time can be significantly reduced because the low-fidelity issue can be completely omitted, thanks to the design system. In this way, you can go straight to creating projects that do not require as much work to achieve a ready-made solution. Also, the business itself receives the finished project much faster because it can familiarize itself with High-Fidelity projects much more efficiently than low-fidelity projects. 

Saving time means saving money and is also determined by the minimized number of bugs that would have to be debugged. All individual elements contribute to large savings in the business and the opportunity to allocate this time and money for even more dynamic development. 

How does a design system facilitate better collaboration between designers and developers? 

It is not without a reason that the design system is referred to as a single source of truth.19 It makes collaboration between designers and developers more efficient. They communicate using one unified language and can rely on the components that underpin their work. They receive a unified source of information and documentation that they can implement without the need for repeated consultation about the basic aspects of the brand and the assumptions of its visual presentation.  

How can a design system assist in onboarding new designers or developers into a team? 

The design system is a great help for new team members. It is a source of well-documented knowledge about unified design language, guidelines, and resources. This is the basis of the work of all employees, which is used by both groups of designers and developers. 

Providing new employees with access to this knowledge base will give them a chance to quickly implement and understand the basics on which a specific project or even the entire brand is based. New employees gain self-confidence and quickly adapt to the expectations of the brand.  

After they master the unified language, they can immediately propose the development of existing solutions and participate in effective collaboration between teammates. What is important, new developers and designers can always return to the design system and use it as a fundamental source in their work.

What is the role of design systems in reducing errors and inconsistencies in the final product? 

Considering that the components included in the design system are well-tested and proven, using them greatly reduces the number of errors made. Placing these components in the design system means that they are based on established design principles. Applied as recommended, they will not cause errors. 

When do errors occur? The problem arises when decisions about a given component are made ad-hoc or components from the design system are not used at all in the developed projects. 

No need to develop basic solutions from scratch also results in better code quality, its readability, and finally greater consistency of products developed for a given brand. 

How can a design system help in maintaining overall product quality? 

The great advantage of the design system is that it is treated as a centralized repository for all employees, in particular, designers and developers. 

However, the quality of the product itself is based on consistency and offering the final customer a flawless solution. Reusable components and best practices make it easier to maintain dynamic product development at the highest level while taking into account a better user experience. 

How can design systems help align business goals with user needs? 

Design systems is not a way to align business goals with user needs. It’s just a middle ground, a collection of proven design fundamentals and code snippets that have worked for previous projects and helped them succeed. 

Their targeted development can have a very positive impact on business goals. It can also facilitate the direction of change and development that focuses on the needs of the user. Therefore, it will be a means to create user-friendly products that will enable the fulfilment of business goals. 

How does the iterative improvement of a design system contribute to continuous improvement in business outcomes? 

The design system is a product itself. It should not be treated as a finished tool, but a living project that requires improvement and work on it. That is why it is so important that the components and the knowledge gathered about them are updated, tested, and adjusted. 

The graphic below shows what the iteration process should look like. 

Changes in the design system should take place along with the evolution of the product. It is necessary to take into account the changing user needs and user feedback, technological advancement while not forgetting about creating user-friendly products, consistency essential for the brand and achieving business goals. Continuing iterative improvement and maintenance is inevitable and essential for business development. 

What are the challenges companies may face during the implementation of a design system, and how can they be overcome? 

Many companies believe that they should decide to introduce a design system. However, there are many obstacles that block businesses from initiating change. We are talking here about difficulties with adoption, technical debt, and maintaining consistency while the company still uses different technologies. However, changes may proceed step by step: 

How to deal with the changes and the challenge, which is undoubtedly the introduction of the design system?  

Adoption can be approached progressively. Work on the implementation of the design system should be based on providing employees with appropriate documentation that will enable the development of the system. Throughout the entire process, there must be constant support, training, and clear communication between all business representatives who work for its development. These are stakeholders, designers, and developers. 

It is important that each stage of change clearly defines what it concerns and what its deadline is. To avoid the feeling of being overwhelmed, it is worth discussing the individual stages with the participants of the changes. 

It is also significant to remember that every existing product may have its limitations. Some of them will only partially adapt to the changes and implement the design system.

What does the future of design systems look like, and how can they impact business outcomes? 

The constant development of the design system is the key to keeping it up-to-date and beneficial to achieving business goals. Considering that modern and advanced technologies are already used in these systems, it is only a matter of time before automation, and AI will take part in their management and development. 

Thanks to automation and AI algorithms, adaptation to changes will be more efficient and faster, with less emphasis on employees’ personal involvement. 

Contrary to appearances, an evolutionary, not a revolutionary, approach to change can bring many positive effects for business, including increased productivity, improved business scaling, and faster iterations.  

Are you looking for a professional business partner who can help you with creating a design system for your company? You’re in the right place! Just drop us a line, and we’ll take care of the rest. 

If you want to create products that work for different groups of customers, you need to stick to the six crucial commandments of inclusive design. This way, your products will be fully functional and intuitive to use for different users. But what are these commandments? And how does inclusive design differ from universal or accessible design? Let’s have a look.

As we probably all know, inclusive design is an approach to designing products/apps/services that asserts there are no “typical” or “standard” users and that whatever you design should be adjusted to people with different preferences, needs and capacities. First, I wanted to show you, how this is different from accessibility and universal design.

Inclusive design vs. accessibility and universal design

At the start, these three terms might seem similar, but they have some differences. Accessibility aims at creating products that can be used by users with various disabilities – physical or cognitive. To help these users consume web content without any problems, web developers and designers stick to Web Content Accessibility Guidelines (WCAG). And what about universal design? Here, the goal is to create a single design that can be accessed and used by as many people as possible without the need for any modifications or adaptations.

The inclusive design follows a different path. Here, the design is adaptable and adjustable so that there are many ways of achieving the same desired outcome. There is no standard in the inclusive design, and every user can access the version of the product or service that meets their needs and expectations best. In other words, inclusive design addresses things like accessibility, age, culture, economic situation, education, gender, race, location, language and other elements that differentiate users.

Of course, it doesn’t mean that accessibility, universal design and inclusive design are three completely different things. At some point, they can overlap since many accessibility principles are vital to inclusive design. After all, products that work well for people with accessibility problems work well for everyone else.

For obvious reasons, inclusive design works best with digital products because they are relatively easy to modify. There is even an online initiative called Inclusive Design Principles that aims at promoting this way of thinking about product design.

The benefits of inclusive design

Undoubtedly, inclusive design requires more effort (compared to universal design), but the juice is definitely worth the squeeze. Products that are inclusively designed have, in general, a much better UX, which means that they attract many different users and retain them for a long time because they are simply satisfied with the service provided. No one feels excluded or rejected.

And then, there is the question of social impact. It may not be measurable per se, but nowadays, people simply appreciate this way of designing products and services. If you want your company to be socially conscious, inclusive design is the way to go.

Read also: The 10 most useful lessons from more than a 10 years of experience in building digital banking platforms.

How to design inclusively

Inclusive design is all about understanding the needs of different people and responding to them. When you follow this approach, you design one product or service that’s next being adapted to many different user groups. There are six basic inclusive design principles. Let’s have a look at them.

PRINCIPLE 1: PROVIDE COMPARABLE EXPERIENCES FOR ALL

Your product should provide similar, high-quality experiences for all users so that they can use it in the way that suits their needs without compromising usability or the quality of what they get.

Here, a good example is a mindfulness app called Headspace. It’s almost fully customisable, and users can adjust navigation (they can use screen and text reader, keyboard navigation and even voice commands), colours (dark/bright mode, background colour, monochromatic version), and the content itself (fonts, descriptions and text size).

Source: Headspace.com

PRINCIPLE 2: GIVE CONTROL

All users should be in control. In other words, they need to have the possibility of interacting with your product in the way they prefer; nothing should be imposed. Maybe a few examples:

1. If you have videos or animations as a part of your product, disable auto-play

2. Avoid so-called infinite scrolling on your website or in your app

3. Enable adjusting visual elements, such as the orientation, font size, colours, zoom and contrast

This way, each user can “design” the perfect experience for themselves, and that’s what you want to achieve. Here, CBC is a good example. Their mobile app comes with dark mode and text resizing features. Additionally, they offer the “skip to content” feature that enables quick access to the main content on all their platforms.

Image source: Play.google.com

PRINCIPLE 3: GIVE CHOICE

In short, provide alternatives for layout and task completion options. Here, generating the same information in different file formats is a perfect example. Some of your users will prefer Excel files, whereas others – a standard PDF file. Some will want to perform a given action in one way; others will choose something different. Here iPhone is a good example. This operating system enables users to open apps in three different ways:

1. By clicking the app icon
2. By saying the app’s name
3. By typing the app’s name in the search box

And here’s another example: WhatsApp. This mobile messenger enables users to select the preferred skin tone when using human emojis:

Image source: Techentice.com

Read also: Banking in Pandemic Times

PRINCIPLE 4: TAKE CIRCUMSTANCES INTO ACCOUNT

Products are being used in different conditions. Some of your customers use them at work, others at home or outdoors, or in public spaces. Take that into consideration. For instance, loud auto-play is a perfect example of a poor design. Your app should also offer high contrast options (so that it can be used outside), a reasonably large font and a clear typeface.

And here’s the other example – map applications. If you use them at home, you can focus on all the little details and many options, but when you drive a car, you don’t want to be distracted – the app has to be clear and easy to navigate (bigger buttons, visible instructions). Waze is a good example – this app blocks some of the functions when it detects that you’re driving a car.

PRINCIPLE 5: BE CONSISTENT

If you offer different versions of your product (or using different channels) make sure each version is consistent, offers the same functionality and is of the same quality. For example, your desktop and mobile website or app should have the same (or similar) layout and functionality. Here, Google Maps is a good example. You can use this service on your smartphone, tablet or PC, and it works the same every time. Compare desktop and mobile screen for the same feature – looking for a nearby store:

Desktop version	Mobile version

The goal is to help your users scan and navigate to key elements and content they’re after. If users have to “learn” each new channel, that’s not a good inclusive design practice.

PRINCIPLE 6: FOCUS ON CORE TASKS

Make sure your interface is intuitive for different users. Prioritise crucial elements so that people can concentrate on core tasks (and one task at a time). When designing a specific feature/product, consider its core functionality and focus on it. This way, people won’t feel lost using your product. Smartwatches are good examples – usually, they offer one function per screen so that users don’t have to think about where they are and what they should do next.

Image source: Samsung.com

Summary: opt for inclusive design

In today’s world, inclusive design is a smart and beneficial thing to do. That’s what consumers expect; that’s what makes them feel like they belong. And if you develop digital products, inclusive design isn’t as challenging as you think. It all starts with the right mindset – put your users at the very centre, think about their needs and preferences and make sure that your product reflects that comprehension.

When it comes to large, widely-used systems it is generally a good idea to separate things. It’s easier to maintain only one piece rather than the whole. One of the first thoughts should be the design system for your application. Why? Even if you are the creator, it’s extremely hard to remember all of the variants and specific usage of each component. On the other hand, if you are joining an existing project, you can focus on your main task without wondering if you should create another component or just extend an existing one.

During the whole process of developing the design system there are many decisions to make and many traps to fall into. We will describe most of the concepts that we followed. We’re going with ReactJS and Styled Components throughout the rest of the article.

Main principles

The successful creation of a good design system includes strict collaboration between development and design. The former should translate all the visual concepts into well-maintained code and the latter should direct their creativity into the principles established at the beginning.

This is really important because things that are super simple at first sight, might be really difficult to implement at a later stage – for example adding a new color when you have a specific naming system or putting another space variant between large and huge – when all teams have been using your library for a year. It really is a core thing to have all this clear from the start of your project.

Always be prepared to expand your component

If at the start of your project you see two variants of an action, primary and light, beware of creating the component <Action /> with the primary color as a default and <Action light /> for the opposite. Sooner or later you’ll end up with something like:

And with multiple ifs in your code to maintain all this mess. Furthermore, what if you have two props at one time? Which priority is higher? As you can see, it creates a lot of problems to be handled, but it doesn’t have to. It’s much safer to create a variant prop which will hold an infinite amount of colors and you can create a separate config to have it all in one place. Doesn’t it look better?

Read also: Painless Changelog

Always think if your functionality might not be needed somewhere else

It is a general rule that will always be applicable but if you feel that you’re writing the same thing repeatedly, it’s definitely a good idea to shrink it into a single util and share it between your components. Later you will be able to reuse small pieces of code easily. Isn’t it great just to run setGradient(from, to)’ instead of writing specific rules again and again?

Think widely about component usage 

Where is the difficulty in creating a simple list with an avatar and some description? Technically there is no difficulty but you actually have to ask yourself some questions. Plenty of them are more obvious, for example how the list should be displayed at a different screen size, but others require some effort.

Like if a long description should be truncated or not. If there will be pagination or lazy loading in case of a large amount of data. Whether the data can be loaded asynchronously and you should use some kind of loader to avoid content jumping. It’s easy to forget about that and end up with an endless amount of bugs – but unfortunately the number of releases doesn’t lie. As a general rule, you should think about the most common contexts and prepare solutions for them.

Think about tree shaking from the beginning

Of course it is very tempting to start writing core functionalities immediately, but firstly you should wonder how your library will be distributed in the future. If you’re creating a bunch of small, reusable components, there is a high possibility that a given project will need only a few of them – so there’s no reason to download the whole bundle. You should allow the import of your components separately – modern module bundlers like webpack or rollup have this feature built-in.

Use external libraries wisely

Along the way you will have to make a lot of decisions whether to use an external library or write a custom module to fulfil a given task. In general we recommend following this rule: the more precise and narrow the application, the more sense it makes to use external libraries. When it comes to such specific subjects as animating height or debouncing, there are well-known and tested modules to handle this. There is a pretty small chance that library behaviour would differ from that required. On the other hand, if you need a robust solution, which is highly likely to undergo future changes, then try to write your own module. At first, it may not seem such a good idea to dismiss a component library written with a Material Design approach, when you have to add an input component very similar to one from the library.

But you have to ask yourself questions about possible variations of this input – how high is the probability that in the course of time this component would require a prefix, custom behaviour of a label or totally different error handling? If you are 100% sure that none of these issues may become a problem in the future, then you are good to go. But in most cases you won’t be given the right to be so certain, because the only thing with design systems that is beyond doubt is constant change. Furthermore, another solid argument about custom modules is bundle size. If you are using only a few components from a library that contains tens of them, there is no need to load  them all. Of course external libraries can be tree-shakable, but that is another thing to check.

Start testing early

When you are creating small and uncomplicated components, tests may seem redundant but they are a crucial part of development. The library will expand a lot faster than you think and your users will expect it to work all through the process. Testing such essential features as passing onChange functions to inputs or `onClick` to buttons will definitely narrow down cases when you would have to release hotfix, because suddenly a passed onSubmit is not being triggered. To protect yourself from such events, simple snapshots tests won’t suffice. Write a lot of unit tests for util functions and integration tests for your components. People make mistakes as part of their nature and if you want to feel pretty sure about the output of your work then start testing early. You really don’t want to check manually if onSubmit works whenever a ticket is issued .

Read also: ISTQB certification for novices and experienced testers – is it worth it?

What was awesome

TypeScript

One of the most important decisions we made was to use TypeScript in our project. The number of benefits definitely outweighs any drawbacks. It makes the code easier to understand, maintain and refactor which directly results in a lower number of bugs. Additionally, by using VS Code IntelliSense we can enjoy such privileges as showing typing information and documentation in suggestions, hover info and signature help.

Styled components

There are plenty of ways of dealing with styles in the React application. We decided to use the styled-components library for many reasons. Firstly, it just looks like pure css, but it can do so much more. It supports scss syntax out of the box, it provides ThemeContext so you can create many versions of your application in an instant and crucially, you don’t have to worry about naming selectors, because it’s all scoped inside the component and final class names are generated. Apart from all that, all props can be passed to it, so you gain power to create reusable, customizable components easily.

Documentation

Nobody likes to write documentation, but it is essential in keeping a UI library. Users need to have a single source of information about props and component use. Fortunately, there is a quick solution to this problem. In our project we used the library docz, which in collaboration with TypeScript, documents the code almost by itself. All we needed to do was to write simple .mdx files with examples of usage. Props of a single component were read and displayed in a neat table by docz. To include props in your mdx we just had to add:

Our docs displayed a props table with available values and descriptions read from the props interface!

Versioning

To keep track of all changes we stuck to semantic versioning. For those unfamiliar with this system, its syntax is based on three numbers separated by a dot. The first number represents the major version, the second the minor version and the last one represents the patch. In our case we took this approach:

• major version: breaking changes to existing components (for example in props)
• minor version: adding new props or components to the library
• patch version: fixing components

Version management required from us planning and grouping changes in releases. We had to watch out for unintentional prop modification to keep our minor and patch releases compatible with previous versions. A list of all changes was kept in a single Changelog file for library users to bring themselves up to date with new modifications. During use, we found some difficulties in changelog management, especially during merge requests. We managed to solve this problem by adopting the concept described here.

RWD

All current projects are created for multiple resolutions and ours isn’t an exception. We needed to use ‘media queries’ in various contexts, for which we prepared solutions that fully cover them. At the beginning, based on a Responsive Web Design approach we prepared a file with settings containing the required breakpoint dimensions (in ‘rem’ units):

These settings are used by all components, as well as helpers controlling behaviour in different resolutions. This is an essential requirement to keep coherence between them.

The grid is based on a 12 column division, but nothing prevents it making these values totally different:

Component <Media /> is responsible for rendering components only for chosen resolution intervals and have attributes min and max, which take values from breakpoint settings.

We have also used mixin ‘media’ for styled components, which allows us to write specific styles for every breakpoint. Each of them has an additional suffix (‘min’ or ‘max’) designed to define styles for the division and for smaller and larger sizes.

We have also prepared the hook ‘useMedia’, which brings back the object with Boolean values for every breakpoint defined in settings:

CSS variables for the win

As mentioned at the beginning, our stack is based on ReactJS and Styled-components. Crucial for performance within this library is the reduction of component re-rendering. And this is the perfect opportunity to move the responsibility of visual changes into css. It wasn’t feasible up until the moment when css variables were introduced. Instead of passing, for example, component dimensions as props you can create a css variable and pass it into your component. Just look at the example below:

Space component

The <Space /> component is one of our favorite solutions 🙂 The original requirement was to have a universal component responsible for spacing in each area of the application and  enabling quick assembly of layouts. Many libraries include a similar box component already, but we wanted to create our own adapted to the needs of the application. Let’s look at the situations in which it’s been helpful to us:

Responsibility for spacing

The props ‘value’ is made of three parts: property (‘p’adding, ‘m’argin) – direction (‘l’eft, ‘b’ottom, ‘a’ll, ‘h’orizontal, ‘v’ertical) – size (s, m, l… whose values are defined in settings). We can also pass these values for different screen sizes.

Centering elements

Layout with a footer glued to the bottom edge

Split into two columns

List of items

Setting background

Typography

Handling typography was another key feature that we are really proud of. We accomplished it by using a custom Text component, which accepted content as its children. In the early stage of the project our product designers pointed out several variants of typography and agreed to use them across the whole application. This enabled us to create a config with proper font styles and that was it. Later the user would simply add:

This simple delegation of a specific function to one component turned out to be pretty handy, because later on there was no need to add custom font styles in other components (maybe with the exception of inputs). Moreover, we extended Text props, so the component could align its content, set it to uppercase or change the display from block to inline-block in the case of nested Texts.

Red or blue?

The hardest thing for us turned out to be naming colors. We didn’t want to add “red” or “blue” variables, because we had in mind that in next week “red” could change to “yellow” and “blue” would be a gradient. Also shading was tricky as we didn’t want to bump into adding “dark” or “darker” suffixes. We prefer names that don’t represent color in itself, but rather its function. So we came up with some pretty abstract nomenclature – the main color of the application was named “primary” and the second-in-command “secondary”. Error messages were in “negative” and success messages in “positive” colors. Our design used a variety of dark and light colors with different opacity values. We didn’t want to reinvent the wheel and we turned to a concept adopted in Material Design. The scale of shades was sorted from the lightest to the darkest and each shade received a number suffix:

Using a theme

Another awesome concept was keeping the theme object accessible to all components. In our project we used styled-components, so accessing the theme was pretty simple. Generally we kept in the theme all properties associated with colors, such as background color, font colors, border color. Such an approach enabled a pretty fast switch of colors in the case of a sudden presentation to a new customer. A global object with common styles can cause developers to store in it all properties, for example border radius or dimension values. We strongly discourage taking this path as the theme can grow rapidly from now on, making it difficult to read. Moreover, width or height are values pretty specific to components. Any change to them should be well tested as it can easily break components. Keeping only variables that don’t generate unwanted side-effects in the theme enables less front-end oriented people to change the theme and play around with it, adjusting the look of the component to their preferences.

One to rule them all

Have you ever found yourself in a situation where you had to change all border radiuses from 2px to 4px, because of a design modification? I bet that every person in that situation would think “I should have assigned it to a variable so I would have to only change one line of code”. We thought about it at the beginning of our journey and created a settings folder in which we kept files with configs for transition times, border radiuses, padding/margin values etc. All thanks to close collaboration with our design team, which was mentioned above. Working with predefined values of common properties turned out to be painless and efficient. Also, in case of global border radius modification, we would have to change only one line of code.

Summary

As you can see from the article above, developing a UI library requires consistency and prediction. Every component should be created with deliberation and be extendable without crashing the rest of the application. But if you create some patterns and follow them strictly, working with this kind of project can be really enjoyable and the result is undeniably helpful to the rest of your team.