Overview

Dom.ru is a leading independent operator of telecommunication services in Russia. The company is one of the top three in terms of wired Internet speed in Russia, market share of broadband Internet access and television.

When I joined the company, I was the only app designer on deck. Moreover, the brand was going through changes. Seeing the lack of parity between the designs and the actual code, it was high time for a concrete design system.

Dom.ru design system has been in existence for several years, and a large number of designers at different levels have worked on it. At the same time, there has never been a designer defining the vector of development and guiding other designers. Moreover, brand changes required a new approach to structure to implement changes as quick as possible.

I was tasked with creating in-house design system that was meant to streamline design workflows, make start-to-end deliverable times faster, to standardize the usage of reusable components and font styles, and to implement standard base spacing units, font hierarchy increments, and more into the design team's workflows.

Result

Problem

Conclusion

To begin, we conducted research to the main goals and pain points that our products' internal stakeholders (designers, developers, product managers, marketing managers etc.) experienced. This is what we found:

By creating a new centralized design system, we aimed to:

• Align our design & engineering teams by providing them with a more structured and guided approach to building products.
• Speed up our design and development process by using a ready-made library and design patterns.
• Improve brand perception and user trust through consistent experiences that are accessible to all users.
• Promote accessibility in our products by incorporating accessibility and inclusion into our component libraries from both a design and code perspective.

Goals

Research

After this, we identified common design patterns and elements across our products. This included creating a UI inventory of our main interface components. We then used this information to create a priority list for our design system MVP.

Based on this research, we introduced tools and processes to help our team consistently apply the design system in their work. This included the creation of a shared design library with reusable components, as well as the establishment of a review and approval process to ensure that all designs adhered to the guidelines:

1. Color & font systems that match the overall brand guidelines
2. Components that are accessible, intuitive and aesthetic
3. Icon system for easy adoption by designers, developers and users

We referred to several design systems for some good practices, guidelines and tools that we could apply in our design system.

Process

The design system is still in progress, and constantly being iterated on. With the new components that were implemented, has it improved the overall product?

• It's a single source to view components, patterns, and styles.
• New changes for the same projects can be redesigned and managed at scale through the design system.
• Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally.
• Ability to replicate designs quickly by utilising pre-made components and elements.
• Reducing the need to reinvent the wheel and eliminating inconsistency.
• Reduces wasted designs or development time around miscommunications.

As a designer creating a design system, some of the challenges I faced include:

1. Managing conflicting priorities: Different stakeholders may have different priorities and goals for the design system, which can make it difficult to create a system that meets everyone's needs.
2. Balancing consistency and flexibility: Finding the right balance between consistency and flexibility in the design system was a challenge. Ensuring the design system was flexible enough to accommodate different products and use cases while still maintaining consistency, was not an easy task.
3. Addressing legacy designs: We had to address and assimilate legacy designs and components that had accumulated over time, it was challenging to reconcile them with the new design system.
4. Managing change: Introducing a new design system can be disruptive for teams that are used to working in a certain way. Managing the change and providing enough support and resources to help teams adapt to the new system was a challenge.
5. Measuring success: It was challenging to define and measure the success of the design system. Identifying key performance indicators and tracking progress was crucial to ensure the success of the design system.

As the design team grows bigger, I hope to collect feedback from a designer's perspective on how the system has improved their workflow and onboarding. And on the flip side, I'd love to collect feedback on how the design system can be improved to better serve the purposes of the design team (i.e. what's the best way to document components and display guides and instructions).

Benefits

Now, the component library consists of:

Component name — a specific and unique UI component name, to avoid miscommunication between designers and developers. This needed to be clear so that the components would work as they were supposed to without error.

State changes — recommended defaults and the subsequent changes in appearance.

Note making and examples — page annotations and descriptions to understand what component you were looking at.

Breakpoints — any size indication and breakpoints for the developers.