Зачем мы полностью переделывали ispmanager: от проблем к новой дизайн-системе
История стратегических решений при редизайне панели управления сайтами
Всем привет! Меня зовут Сергей Пестерев, я ведущий продуктовый дизайнер ispmanager. Последние полтора года наша команда работала над полным редизайном панели управления — одного из ведущих решений для хостинга.
В этой статье расскажу о стратегических решениях: почему мы решили переделывать работающий продукт, как подошли к созданию дизайн-системы с нуля и как организовали процесс редизайна продукта с многолетней историей.
О конкретных UX/UI решениях и изменениях в интерфейсе расскажу во второй части.
Зачем переделывать то, что работает?
Вопрос на миллион, правда? В старом интерфейсе были проблемы, и не только те, которые приходят с возрастом.
Проблема доступности
Главная боль — плохая доступность. У интерфейса была контрастность примерно как у белого медведя в метель. Я конечно немного преувеличиваю шутки ради и все же мы не соответствовали рекомендациям WCAG.
А именно:
- Недостаточная контрастность текста
- Размеры интерактивных элементов меньше рекомендуемых
- Отсутствие focus states
- Проблемы с клавиатурной навигацией
- Адаптив. Минимальное разрешение экрана — 960px
Серый цвет терялся по всему интерфейсу — пропадали зебры в таблицах, элементы меню и другие важные части UI. От пользователей поступали жалобы: «плохо видно», «нечитабельно».
Но среди всех этих проблем самая важная это конечно отсутствие нормальной адаптивности. Увеличить масштаб в браузере на 100-200% было невозможно без потери данных соответственно комфортно работать в панели на мобильных устройствах не представлялось возможным.
Техдолг и визуальная разрозненность
За годы развития продукта накопился серьезный визуальный техдолг:
- Компоненты построены по нестандартной сетке 5px (постоянные проблемы с выравниванием)
- Разнородные «заплатки» от разных дизайнеров по мере роста продукта
- Иконки различных размеров и стилей
- Сухой, безликий и недружелюбный интерфейс
- Визуальная неоднородность после ребрендинга корпоративного сайта
Хороший дизайн = конкурентное преимущество
Анализ конкурентов показал, что все решения на рынке панелей можно разделить условно на 2 вида:
1. Старые, мощные проверенные временем лидеры — cPanel, Plesk, с отличным набором функциональных возможностей, но имеющие перегруженный и устаревший интерфейс.
2. Новые решения, типа PanelAlpha, узкоспециализированны и ограничены в возможностях, зато имеют красивый интерфейс и хороший UX.
Мы хотим объединить преимущества. Отличный набор фичей (все таки 20 лет на рынке) мы упаковываем в современный, адаптивный интерфейс.
Процесс: полная перестройка дизайн системы
Задача состояла в создании самобытного интерфейса, транслирующего ценности серьезной технологической компании. Нужно было сохранить узнаваемость и преемственность разных версий UI продукта.
Мы не стали переделывать существующую систему и создали совершенно новую. Это позволило решить накопленные проблемы кардинально.
Переход на стандартную сетку 4px
Проблема: Старая сетка 5px периодически создавала проблемы с выравниванием.
Решение: Переход на стандартную сетку 4px. Теперь все выравнивается без дополнительных сложностей, что ускоряет работу дизайнеров и разработчиков.
Революция в цветовой палитре
Создали совершенно новую систему цветов:
- Primary, Secondary, Neutral, Tertiary (Info, Success, Warning, Danger)
- Dynamic цвета — генерируются из статических и зависят от них
Ключевое преимущество: Больше не нужно отдельно создавать и поддерживать темную тему. Новые макеты собираются из компонентов основной темы и перекрашиваются в темную по щелчку пальцев, как магия!
Единый icon kit — порядок в хаосе
Проблема: Иконки разных размеров, созданные по сетке 5px, множество дублей.
Решение:
- Все иконки перерисованы в едином размере 16×16px по сетке 4px
- Избавились от дублей и неиспользуемых элементов
- Сократили объем на 45%
- Итоговый icon kit: более 450 иконок
200+ новых компонентов
Новый набор компонентов стал:
- Более управляемым — меньше вариантов благодаря отсутствию отдельной темной темы
- Более доступным — все компоненты увеличены в размерах согласно рекомендациям ведущих дизайн-систем
- Более качественным — дополнены фокус-состояниями и протестированы на контрастность по APCA
- Стандарт контрастности: Минимальное значение для текста (размер 14px / начертание 400) составляет L90+, что соответствует уровню WCAG AAA.
Путь, который мы прошли
- Исследование и концепты — изучили конкурентов, собрали фидбек пользователей, проанализировали гайдлайны ведущих дизайн-систем
- Создание палитры — разработали новую цветовую систему с Dynamic цветами
- Создание иконок — перерисовали весь icon kit по новой сетке 4px
- Сборка компонентов — создали 200+ компонентов с учетом доступности
- Сборка лейаутов — собрали все экраны из новых компонентов
- Экспертное тестирование — дали доступ активным пользователям из сообщества к тестовому стенду
- Доработка интерфейса — внесли изменения на основе фидбека
- Оценка и планирование разработки — просчитали ресурсы и временные рамки, выделили критический функционал для MVP
- Подготовка к разработке — создали отдельную доску проекта, декомпозировали проект на мелкие задачи
- Разработка и тестирование — текущий этап
Снижение рисков
Экспертное тестирование
Для снижения рисков провели опрос среди экспертов из сообщества, предоставив им доступ к стенду с новым интерфейсом. Фидбек оказался преимущественно положительным — пользователи отметили улучшение читаемости, удобство навигации и современный внешний вид.
Заморозка интерфейса
Чтобы не растягивать сроки разработки, пришлось отказаться от некоторых важных функций и улучшений. После начала разработки заморозили все изменения в текущем UI.
Поэтапный rollout
Чтобы помочь пользователям легче адаптироваться к изменениям, проектируем онбординг.
Также мы планируем запустить юзабилити-тесты и после релиза дать возможность пользователям переходить на новый интерфейс добровольно с возможностью откатиться до тех пор, пока не исправим все баги и не соберем достаточное количество данных.
Главные инсайты
1. Доступность = лучший UX для всех
Решая проблемы людей с ограниченными возможностями здоровья, улучшили опыт для всех пользователей. Увеличенные размеры интерактивных элементов, лучшая контрастность, четкие focus states — от этого выиграли все.
2. Цифровые-продукты могут быть красивыми
Пользователи заслуживают современный интерфейс. Времена, когда софт мог выглядеть устаревшим, прошли. Качественный дизайн стал фактором конкурентного преимущества.
3. Дизайн-система — долгосрочная инвестиция
Потратив время на создание системы, экономим его в будущем. Удобное управление компонентами, темная тема в один клик, порядок в иконках — все это окупается при развитии продукта.
4. Персонализация решает
Лучше дать пользователю выбор, чем пытаться угадать его предпочтения. OKLCH позволил реализовать безопасную кастомизацию цветов без потери доступности.
5. Информационная плотность — критичный параметр
В цифровых-продуктах нельзя просто увеличить все элементы. Нужны продуманные решения: переключатели плотности, адаптивные коллапсы, оптимизация пространства.
6. Инновации должны решать реальные проблемы
Каждое нововведение — от интеллектуальных вкладок до персонализации цвета — решает конкретную проблему пользователей.
Что дальше?
В следующей статье расскажу о конкретных UX/UI решениях: как мы переосмыслили вкладки, меню, таблицы и формы, а также о том, как реализовали персонализацию через цветовую модель OKLCH.
