Design System and Ready-Block Constructor for Telecom Corporation

Ksenia

👋 Hello! I’m glad to see you here.

2020 - 2022 | Lead Designer

Project highlights

1

platform

60+

compoments

6

designers

The main challenge

increasing the release rate of new products, updating the core website with a new design, and improving the user experience

Design

Platform

Key results

The average time for launching a new page was significantly decreased
200+ pages redesigned thanks to the universal block system
Researches showed an increase in user satisfaction

From 2020 to 2022, I held the position of Lead Designer at a leading telecommunications corporation, focusing on internet, TV, and telephone services. My primary responsibility involved managing design the company's core website for both B2B and B2C clients.

My role involved:

✦ Collaborating with stakeholders to align design strategies with business goals

✦ Creating innovative design concepts

✦ Building a design system and block constructor

✦ Coordinating closely with engineers

✦ Ensuring compliance with guidelines

✦ Leading a team of six designers

What I wanted to achieve

A high quality final
design = realisation

A consistent, cohesive experience that is easily created and scalable

An efficient workflow between designers, engineers, and PMs

First step: Discovery

Ksenia

At first, I held a series of meetings with all the people who would be involved in the process: product and project managers, developers, testers, and designers.

The main point I discovered was: Nobody wants to spend a lot of time on reviewing the design. Everebody wants to focus on interesting tasks and was tired of routine.

What did we have on our hands?

Ksenia

I studied the existing UI kit and talked again with designers, developers, and testers.

The core problems were:

🛑 Designers used two different sets of components for b2c and b2b parts.

🛑 Only basic elements in the UI kit that weren’t enough.

🛑 The UI kit in Sketch didn’t match components in the code. The layouts differed from the actual realization.

The damage to the business was evident: the lengthy delivery process significantly increased the cost of adjustments. As a result, the business was often dissatisfied with the result.

Analysis and structure of the solution

Ksenia

I did an audit and external research comparing design systems from other companies.

After collecting all the information, I made a draft of our structure.

Let's start with tokens and basic elements

Ksenia

After the analysis, I made a list of the elements that need to be put in order first.

Together with the engineer, we updated the component library over six months.

Ksenia

There’s documentation for each component with recommendations on how to use it.

✅ A convenient set of components that works through Figma’ variants. The designer's work speed was increased by about 10-50%.

✅ Edits during the page review by the designer was significantly reduced. This allowed us to decrease the time during the development and testing stages by 10-30%.

✅ The quality of the final product increased. When conducting research, users began to praise the site’s appearance more often, to talk about how clean its design is.

Great! But what’s next?

Now it’s time for complex elements

Ksenia

Together with the design team, we analyzed which elements to turn into components.

💛 We created a list of the necessary elements. I set up the first elements myself.

💛 From the design team, I singled out a person with a strong desire to learn how to do the same. I gradually transferred the components’ backlog into the designer’s hands.