# Big Tech — Design System for CMS

By Semyon Kuznetsov · Web version: https://semyonkuznetsov.com/projects/design-system-for-tools.html

*Note: The project is under NDA, so unfortunately I can't share more details.*

We set out to create a completely new approach to designing an unlimited number
of internal websites within the company. It involved building a block system for
website design, plus two websites as a working example. The intended users were
dozens of managers at a major US tech company, while the final content reached
potentially thousands of their employees.

1. One of the world's largest tech companies, revenue $300B+
2. Internal B2B tools and infrastructure
3. Scalable design system for internal tools, used in automation and resource management

| | |
| --- | --- |
| Domain | Software & Hi-Tech |
| Role | UI Designer |
| Team | Lead Designer, 3 Designers |
| Timeline | Jul 2021 — Mar 2022 |

## Problem

The team behind these internal pages needed a system to let non-designers create
them using modular blocks — without relying on design or dev support. The
existing tools were inconsistent and slow to scale.

The new system also had to support developer efficiency through reusable
patterns and include clear documentation for employees with no design
background.

## Goal

Design and build a UI system that enables:

- Fast assembly of internal pages by non-designers
- Component reuse and consistency across the company's internal tools
- Developer-friendly architecture for easy maintenance and scaling
- Clear documentation to support users with no prior design/tool experience

## Style Guide & UI Kit

I started with the UI Kit: a library spanning multiple pages, with every element
documented in detail. Those elements became the building blocks for the
pre-designed modules that followed.

I also built a style guide and an accessibility guide aligned with WCAG 3.0
standards, to keep templates consistent. Both gave managers and developers
step-by-step usage instructions, so the designs could be implemented without
guesswork.

## Templates

The block system comprises a wide range of standardized templates, each
following consistent rules and sharing a set of uniform characteristics. I built
an extensive collection of them to cover the varied requirements of the project.

These templates serve as Lego-blocks, allowing for the seamless design and
construction of websites. With this system, it is easy to organize and populate
a website with the necessary information, creating a cohesive and visually
appealing website without the need for groups of developers.

## What I Did

As a UI Designer, I:

- Created a comprehensive UI Kit, style guide, templates and module library
- Ensured that all components had detailed descriptions for easy usage
- Designed over 50 high-fidelity layouts
- Created fully functional prototypes with animations to showcase the final outcome

## System Deliverables

- **UI Kit:** Buttons, inputs, cards, containers, forms
- **Grid and layout system:** Responsive, scalable containers
- **Modules:** Composite components (e.g., announcement banners, metric blocks, team lists)
- **User Guide:** Step-by-step handbook for internal teams (non-designers)
- **Design-to-code flow:** Compatible with Storybook and dev pipelines

## Results

- Empowered internal managers to create and update pages without design or dev support
- Reduced information distribution time within the company, enhancing overall efficiency
- Partially removed the need for dedicated dev teams, freeing up resources and giving managers direct control over their content
- Moved "information storage" off paper into a digital, accessible format
- Enabled effortless information design and management for managers through intuitive site editing functions and a block system

## What I Learned

- The real value of a design system is in how well it's understood and used — not how perfect it looks
- Building for non-designers forces clarity and modular thinking

---

Previous case: [LizaAlert — Search & Rescue Platform](https://semyonkuznetsov.com/projects/lizaalert.md)
· Next case: [Design Mentoring Program](https://semyonkuznetsov.com/projects/design-mentoring.md)