/
From a wall of text to something you can actually scan.** A focused redesign of a cloud product catalogue — readability, structure and information scent, all within an existing design system.
Role
UX / UI Designer (design + engineering hand-off + design supervision)
Company
Selectel · control panel
Constraint
Work within the existing design system
Главное изображение кейса
Context
The product catalogue is where users navigate to the service they need. With `[~50+]` products across `[~11]` categories, it had become the front door to the whole panel — and the front door was hard to read.
Problem
Category names blurred into the products beneath them; everything read as one flat, unstructured wall of text. Users had to work hard just to locate the right section — exactly the wrong tax to charge at a navigation hub.
Process
Reframed the catalogue around the user's real job — **search and scan** — then reworked the visual hierarchy inside design-system limits:
— separated categories with whitespace,
— made headings clearly distinct from items,
— added icons as **information scent**, chosen from common associations so people can guess a category's contents before reading it,
— designed and handed off the "drawer" open/close animation to engineering,
— provided design supervision through implementation.
Solution
A catalogue where categories read as categories: clear headings, breathing room, and icons that hint at what's inside. The same content, now scannable in a glance.
Result
- Made the catalogue scannable, speeding navigation to the right section.
- Visually distinguished `[~11]` product categories without breaking the design system.
- `[Add metric if available: e.g. reduced time-to-find in a quick usability check]`
What this case shows
— Craft within constraints — real polish inside an existing design system.
— UX principles applied — information scent, scannability, visual hierarchy.
— Ownership to the pixel — from concept through animation to design supervision at release.