Design system

The Challenge

With every new project – our team were creating UI and developing back-end from zero years ago which took undesirable amounts of time and often resulted in being behind the schedule. In addition, every project had overlapping functionality and forced us to solve the same problems over and over again. The resulting design in projects lacked visual, interaction, voice and tone consistency, making us realize that we need to organize things in a rigorous way and to reuse parts of functionality as a means to shorten development time without sacrificing quality and ensure UI/UX consistency across different products.

The Solution

To begin with, we agreed on the long term vision at the management level. As a result, design principles were raised and communicated inside the organization.

Next, it was my task to standardize page layouts and demonstrate how basic CRUD interactions can be achieved in those different page layouts. The resulting diagram became a reference for developers to help them understand and decide how the UI/UX should be implemented.

Pic 1. CRUD interactions diagram for different page layouts

I have also identified the most demanded UI components, collected requirements for them, created HTML/CSS/JS samples with all variations and properties to have single source of truth. Later those samples were converted into helpers by the development team.

That’s how the design system was born – a living library of design principles, interaction patterns, guidelines and ready-to-use UI components. An enabling force for all of us at our company to do our job better.

Pic 2. Design system starter page, items list page, data view page

It is important to mention, that design system is never completed. It is an ongoing project because of these reasons:

• the need to keep up-to-date with changing technologies, libraries and frameworks used in design system
• the need to communicate the benefits and value of the design system within the organization, and to present design system to new employees
• manage change requests, discuss how problems can be solved within currently available means and what could be included in design system.

The Results

• UI components and reusable .NET helpers lead to faster application development
• HTML/CSS/JS samples shortened development time of interactive prototypes and helped reach consistent UI’s across projects
• design system presentation to management, development teams helped foster design culture at the company.

My role

• driving process of establishing design principles across company
• identifying common UI components, gathering requirements they should meet
• creating HTML/CSS for UI components and templates. Ensuring cross–browser support, responsiveness and accessibility
• integrating bootstrap
• customizing third-party components for consistency.