Улучшение визуальной консистентности админ-панели, управляющей более 12 тысячами устройств: редизайн настроек стиля для лучшего контроля над брендингом клиента
Моя роль
Продуктовый дизайнер
Таймлайн
10 недель
Команда
Продакты, команда поддержки
Платформа
Web (админ-панель)
О проекте
AMS (Admin Management System) — это B2B-платформа, которая управляет более чем 12 000 устройств в ресторанах и кафе по всему миру.
Раздел «Настройки стиля» (Style Settings) — один из важнейших модулей в продукте: он отвечает за брендинг филиалов и является обязательным шагом при запуске локации. Несмотря на это, он постоянно генерировал обращения в службу поддержки и вызывал путаницу у новых клиентов, из-за чего процесс, который должен был быть самостоятельным, требовал помощи команды поддержки.
Вызовы
4 из 6 новых клиентов испытывали трудности с настройками стиля во время запусков и обращались за помощью в службу поддержки
4 из 6 новых клиентов испытывали трудности с настройками стиля во время запусков и обращались за помощью в службу поддержки
Болевые точки по результатам опроса команды асинхронной поддержки
👩🏻💼 Мне нужно повторно выгрузить абсолютно одинаковый пак для обоих девайсов
🧑🏼💼 Я не понимаю, почему на проде изображение обрезано по краям
🧑🏻💻 Что означают цвета по типу "Primary color"?
👨🏼💻 Как обрезать изображения без косяков на проде?
👩🏻💻 Не понимаю, за какие элементы отвечают цвета
До: одна очень нагруженная вкладка
После: понятная вкладка с модулями и повторяющимися паттернами
Моя роль
Единственный дизайнер. Без доступа к аналитике, без прямых сессий с пользователями
Я инициировала эту задачу самостоятельно: выявила проблему, провела мини-исследование, сформулировала гипотезы и разработала концепцию, параллельно проводя регулярные встречи с продактами и службой поддержки для подтверждения направления. Проект был реализован за 10 недель параллельно с другими активными задачами.
Процесс
Исследования
Не имея прямого доступа к пользователям, я сосредоточилась на тех, кто чаще всего с этой проблемой взаимодействовал: на службе поддержки. Я запустила опросы для этой команды, чтобы выявить повторяющиеся проблемы и закономерности их возникновения. Я сопоставила полученные результаты со знаниями команды продукта о запуске клиентов и локаций.
Клиенты загружают все свои изображения, а затем случайно выходят без сохранения — и им приходится начинать всё сначала
Антон · Лид саппорт
Новые клиенты просто выбирают цвет, сохраняют его, а затем пишут нам, потому что понятия не имеют, где именно этот цвет отображается на экране.
Вероника · Саппорт
Они загружают логотип, но он просто не отображается на устройстве. Никакой ошибки, ничего — они не понимают, что пошло не так
Юля · Саппорт
Некоторые клиенты даже не пытаются загружать свои медиафайлы. Они просто присылают нам свой брендбук и просят нашего дизайнера настроить всё
Илья · Саппорт
Гипотезы
Если мы разделим палитры, медиаконтент и превью по отдельным вкладкам, пользователи смогут находить нужные настройки не путая, что приведет к более быстрой настройке модулей и сокращению количества обращений в службу поддержки
Мы верим, что библиотека стилей поможет клиентам с несколькими точками избавиться от рутинной ручной работы. Мы поймем, что это работает, когда увидим, что клиенты применяют сохраненные пресеты вместо повторной загрузки ресурсов для каждой новой локации.
Если мы добавим предварительный просмотр, показывающий, как изменения брендинга выглядят на реальных устройствах, пользователи будут сами исправлять ошибки перед сохранением, что приведет к сокращению числа обращений в службу поддержки по этим вопросам
Дизайн решения
Редизайн представила модульную структуру вкладок — «Цвета», «Медиа», «Предпросмотр» — каждая из которых имеет четкое назначение и область применения. Ключевые решения:
👩🏻💻 Не понимаю, за какие элементы отвечают цвета
Replaced the single-page dump with focused tabs. Each tab has one job, reducing cognitive load and making the module scannable
Переиспользуемые пресеты
Клиенты могут создавать именованные палитры и библиотеки медиафайлов, а затем применять их в различных локациях, что исключает необходимость повторной загрузки.
Панель предварительного просмотра
Превью показывает, как изменения брендинга будут выглядеть на экранах реальных устройств еще до сохранения, что исключает необходимость вносить исправления с помощью службы поддержки.
Результаты
Качественные результаты:
Концепт представлен C-level и использован как питч-материал для переговоров с партнёрами — демонстрирует потенциал редизайна продукта,
Бизнес получил оценку объёма работ по полному редизайну модуля — как отправную точку для планирования роадмапа,
Задано дизайн-направление, которое может стать визуальной основой для более масштабного обновления системы AMS,
Снижена неопределённость для продуктовой команды: концепт перевёл абстрактные UX-проблемы в конкретную и готовую к решениям форму.