Building a Design System for a global web application for improved user experience

Overview

Design inconsistency is a common problem, especially in complex global applications with responsive design. Our client struggled with the lack of consistent visual language. This caused a sense of confusion among the users, who perceived the application as lacking polish and regularity. Our first challenge was to improve customer experience. The other one -

to change the way designers and developers work together and build a seamless development environment.

Approach

The initial research and review showed there was a lot of content across the application. Multiple UI solutions were often associated with the same action and many different designs were used for the one component. Inconsistent use of typography and colours made it very difficult for users to navigate through the application.

We took a modular approach to design the components and made them easily scalable and reusable depending on the hierarchy of the content. We set the rules for all main features of design such as the use of colours, typography, signifiers, interactions and animations addressing all breakpoints. Because the client was present in 7 different markets and used 4 languages, we also ensured support for all the language versions.