Дизайн-система Koobiq

Набор принципов и инструментов для создания веб-приложений

Моя роль и подход

Роль
Отвечал за дизайн, визуальное направление и внедрение редизайна сайта, помогал определять приоритеты. Также готовлю спецификации и макеты компонентов дизайн-системы в Figma.
Вызовы
Сделать документацию удобной для дизайнеров и фронтенд-разработчиков: упростить поиск компонентов, навигацию и работу с телефона.
Методы
Проводил интервью, улучшал сайт по отзывам и данным Яндекс.Метрики. Работаю напрямую с разработчиками: собираю обратную связь, уточняю состояния компонентов, завожу баги и проверяю реализацию.

Редизайн сайта

При разработке новой дизайн-системы Koobiq мы решили сделать сайт более удобным. Перед изменениями я провел интервью с основными пользователями: фронтендерами и дизайнерами, чтобы выявить болевые точки.

После анализа обратной связи мы внесли улучшения:
— плоский алфавитный список компонентов в меню,
— визуальный список компонентов на главной странице,
— быстрый полнотекстовый поиск по сайту,
— мобильная версия сайта.

Полнотекстовый поиск открывается по клавиатурному шорткату и помогает найти компоненты дизайн-системы.

Страницы сайта адаптируются к размеру экрана.

Результаты редизайна

  1. Выросла глубина просмотров
  2. Стало меньше обращений за помощью в чат
  3. Пользоваться сайтом стало проще