Building a Design System for a global web application for improved user experience
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.
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.
We achieved a consistent visual language and significantly improved user experience. The development process was streamlined by building a Sketch library of symbols (cloud-based) and page templates which all of the client’s designers could use for future designs. We also built online versions of live components, which developers could easily reuse, addressing the inconsistency issue.
consistent visual language
improved cooperation between teams