Кто и в какой ситуации
Пользователи держат в браузере сотни профилей и работают в нём весь день. А интерфейс, по словам CEO, застрял в начале 2000-х.
У конкурентов дизайн уже был современнее, и пользователи уходили. Функциональность у продукта сильная, и дизайн не единственная причина оттока, но он заметно влиял на впечатление.
Цели
- Сделать интерфейс современным и приятным, сохранив фирменный фиолетовый.
- Упростить частые действия там, где пользователю приходилось «целиться».
- Не сломать привычки: пользователь узнаёт продукт и делает обычные действия без шока.
- Заложить основу для роста: токены, светлая и тёмная тема, несколько языков.
Две недели вместо очереди в разработку
Между пользователем и привычной работой стояли мелкие кнопки, иконки без подписей и годы кастомных правок, которые упирались в Vuetify.
- 1Брейншторм вчетверомС арт-директором, junior-дизайнером и CEO. За основу взяли shadcn/ui: современно, спокойно, легко масштабируется.
- 2Атомы и токены в FigmaКнопки, поля, цвета и состояния. Полностью разметили светлую и тёмную темы.
- 3Claude вместо очереди в разработкуПодключили Claude к фронтенду на тестовой ветке и передали ему макеты и токены. Меняли только CSS, логику не трогали.
- 4Молекулы и экраныШапка, папки, модальные окна. Через две недели основной интерфейс ушёл в тестирование.
Что поменяли
Чтобы изменить теги, раньше нужно было попасть в маленькую кнопку. Теперь кликабельна вся ячейка, а ховер подсказывает, что её можно нажать.
Профили, Прокси, Расширения, Закладки и Сценарии вынесены в верхнее меню с подписями. Запоминать иконки больше не нужно.
Слева панель с папками, счётчиками, закреплением и поиском, под ней теги с отдельным поиском.
Вместо двух одинаково громких кнопок капсом одно главное фиолетовое действие и второстепенный «Быстрый профиль» рядом.
Мягкие плашки статусов, компактные Start/Stop, плавающая пагинация, заметки к профилю и настройка колонок.
Все цвета и состояния вынесены в токены, поэтому темы переключаются без ручной правки экранов.
Основной интерфейс за две недели
Основной интерфейс пересобран за две недели, а сам процесс дизайна изменился.
- Дизайнеры вносят визуальные правки во фронтенд через ИИ, и разработка больше не блокирует дизайн.
- Привычные сценарии сохранены, частые действия стали проще.
- Появилась поддержка нескольких языков.
Новый дизайн готовится к релизу. Метрики добавлю после выкатки.