ONYX CRM
case
ONYX CRM — система управления бизнесом в сфере услуг: для салонов красоты, клиник и других сервисных компаний. Объединяет управление сотрудниками, запись на услуги, продажи товаров, финансовый учёт и аналитику
Управление проектом
1 бизнес-аналитик
Дизайн
1 дизайнер
Моя роль
продуктовый дизайнер
Задача
task
Спроектировать по ТЗ новую CRM-систему, использовать лучшие практики индустрии для простых и удобных UX-решений. В UI придерживаться современного стиля: чистый аккуратный, с использованием брендового цвета
Мы работали отдельно над каждым сценарием. От бизнес-аналитика поступало подробное ТЗ функционала, который нужно было заложить в интерфейс.
Я проводила непрерывный анализ конкурентов, чтобы понять, как у них уже решены подобные задачи. На стыке этого анализа, UX-законов и привычных паттернов я вырабатывала собственные дизайн-решения
Экран
Журнал записей
Пустой
С записями
Сценарий Запись клиента на услугу
flow
Клиенты могут записываться как онлайн, так и по телефону или лично. Если запись происходит через сотрудника, он создаёт её вручную в админке. Интерфейс должен позволять сделать это быстро и без ошибок
Паттерн: модальное окно
Анализ конкурентов показал, что стандарт индустрии - это решение задач внутри модальных окон. Этот паттерн был сохранён. Кроме того, запрос на подобные виджеты был и у заказчика
Двухзонный интерфейс
Модальное окно разделён на две зоны:
- Параметры записи: дата и время, данные клиента, комментарий, цвет в сетке расписания
- Выбор услуг: список услуг сотрудника с категориями и поиском
1 Выбор времени
2 Заполнение данных
3 Гибкая настройка
4 Запись создана
Не только запись
Расписание синхронизируется с виджетом записи онлайн для клиентов. Поэтому необходимо иметь всегда актуальную сетку. Даём быстро добавлять нерабочие интервалы и резервы, а не только бронирования
Расписание синхронизируется с виджетом записи онлайн для клиентов. Поэтому необходимо иметь всегда актуальную сетку. Даём быстро добавлять нерабочие интервалы и резервы, а не только бронирования
Сканирование
Визуальная иерархия, деление информации на группы и зоны помогает быстро сканировать информацию на правильность
Визуальная иерархия, деление информации на группы и зоны помогает быстро сканировать информацию на правильность
Фиксированный размер
Виджет помещается в современные экраны целиком без скрола. Контент пролистывается внутри окна
Виджет помещается в современные экраны целиком без скрола. Контент пролистывается внутри окна
Удобный выбор услуг
Чтобы в большом списке было легче ориентироваться:
Чтобы в большом списке было легче ориентироваться:
- • выделили достаточно места для просмотра
- • разделили на категории сделали поиск
Комментарий
Можно написать до информацию для принимающего мастера. Поскольку нужно не всегда, оформлено аккардеоном для оптимизации места
Можно написать до информацию для принимающего мастера. Поскольку нужно не всегда, оформлено аккардеоном для оптимизации места
Ручное редактирование
По дефолту данные подтягиваются, но их можно изменить под ситуацию:
• стоимость
• длительность
• скидки
По дефолту данные подтягиваются, но их можно изменить под ситуацию:
• стоимость
• длительность
• скидки
Отображение в сетке
Записи отображаются в сетке расписания по принципу календаря
Записи отображаются в сетке расписания по принципу календаря
Фильтры и сортировка
Сортировка табами ускоряет поиск по специализации сострудника, а фильтры позволяют точнее настроить отображение расписания
Сортировка табами ускоряет поиск по специализации сострудника, а фильтры позволяют точнее настроить отображение расписания
Карточка записи
Карточка показывает ключевые детали записи прямо в расписании. Это сокращает количество переходов между экранами и ускоряет работу администратора
Карточка показывает ключевые детали записи прямо в расписании. Это сокращает количество переходов между экранами и ускоряет работу администратора
Экран Заявки
screen
Мы решили оформить движение клиентов в виде канбан доски. Такого не было ни у одного из конкурентов, а сама идея пришла из корпоративных сервисов
Так администраторы видят полную картину дня по клиентам в любой момент. Drag-and-drop взаимодействие не только закрепившийся паттерн в работе со статусами в интерфейсах, но и хороший способ сократить количество кликов при работе с нашей CRM
Сценарий Продажа товара
flow
Экран использует привычный паттерн маркетплейсов: каталог товаров и корзина
Товары добавляются в заказ в один клик, после чего в корзине можно изменить стоимость, применить скидку или списать бонусные баллы
Поиск или сканирование
Сотрудник может искать товар по поиску или отсканировать штрихкод
Сотрудник может искать товар по поиску или отсканировать штрихкод
Гибкое изменение стоимости
По кнопке вызывается попап, в котором можно изменить цену, скидку или засчитать баллы в счет оплаты
По кнопке вызывается попап, в котором можно изменить цену, скидку или засчитать баллы в счет оплаты
Один чекаут
Оплата всего, что продает бизнес происходит в одном месте
Оплата всего, что продает бизнес происходит в одном месте
Скидка
Можем сделать скидку в рублях или в процентах. Read-only поле показывает конвертацию соответственно
Можем сделать скидку в рублях или в процентах. Read-only поле показывает конвертацию соответственно
Базы данных
tables
- услуги
- сотрудники
- клиенты
Пользователи взаимодействуют с базами данных через интерфейс таблиц. Так менеджеры имеют полный контроль над списком товаров и услуг
В рамках оного экрана и в режиме реального времени бизнес может обновлять свой ассортимент, добавлять новые позиции и управлять их видимостью
Организация данных
Поместили макроразделы в боковую панель. Современные размеры экранов позволяют это сделать без ухудшения юзабилити
Поместили макроразделы в боковую панель. Современные размеры экранов позволяют это сделать без ухудшения юзабилити
Управление базой сотрудников происходит также с помощью таблиц. Изначально видны колонки с самыми важными параметрами: имя, должность, права доступа, рейтинг по отзывам
Организация данных
Поместили макроразделы в боковую панель. Современные размеры экранов позволяют это сделать без ухудшения юзабилити
Поместили макроразделы в боковую панель. Современные размеры экранов позволяют это сделать без ухудшения юзабилити
Для отображения базы клиентов использовали всем знакомый принцип телефонной книжки. Внедрили обзор по клиенту, который уменьшает количество ситуаций, когда нужно проваливаться глубже в карточку, что ускоряет процесс работы
Обзор
Продумала сводку по клиенту: в один клик сразу видно контакты, метки и статистику
Продумала сводку по клиенту: в один клик сразу видно контакты, метки и статистику
Сортировка по имени
Часто неизвестна фамилия клиента, но имя есть всегда. Поэтому сортировка по алфавиту организованна по буквам имени
Часто неизвестна фамилия клиента, но имя есть всегда. Поэтому сортировка по алфавиту организованна по буквам имени
Экран Отзывы
flow
Быстрая отработка отзывов влияет на имидж и лояльность. Поэтому мы предусмотрели модуль отзывов с возможностью читать, обрабатывать и оперативно отвечать на обратную связь от клиентов прямо из CRM
Новые отзывы выделяются для быстрого реагирования, интуитивный интерфейс помогает администратору обрабатывать отзывы и отслеживать метрики. Это упрощает реакцию на обратную связь и работу с репутацией прямо внутри платформы
Сортировка
Важные для репутации параметры сортировки выделены в табы. Так можно одним взглядом отслеживать обратную связь, которая требует внимания
Важные для репутации параметры сортировки выделены в табы. Так можно одним взглядом отслеживать обратную связь, которая требует внимания
Метрики
Боковая панелька с метриками даёт общий срез об отзывах компании
Боковая панелька с метриками даёт общий срез об отзывах компании
Иерархия кнопок
Primary-кнопки притягивают фокус внимания и служат своего рода маркером для отзывов без ответа даже в общей ленте
Primary-кнопки притягивают фокус внимания и служат своего рода маркером для отзывов без ответа даже в общей ленте
Экран Аналитика
screen
На начальном этапе в аналитике предусмотрели графики по трём ключевым бизнес-показателям: продажам, выручке и клиентам
Текстовые сводки сгруппированы по показателям и дают общую картину ещё до детального погружения в аналитические данные
Всплывашки
По наведению на ключевые точки графика тултип демонстрирует показатели. Дополнительная линия помогает сооттнести с их с датой
По наведению на ключевые точки графика тултип демонстрирует показатели. Дополнительная линия помогает сооттнести с их с датой
Цветовая маркировка
Для продаж используем цветовые обозначения, чтобы облегчить сканирование и без того сложных к восприятию числовых данных
Для продаж используем цветовые обозначения, чтобы облегчить сканирование и без того сложных к восприятию числовых данных
Графики
Для разного типа данных подобраны типы графиков, которые наиболее наглядно демонстрируют изменения
Для разного типа данных подобраны типы графиков, которые наиболее наглядно демонстрируют изменения
UI-kit
components
При работе с макетами я собрала свой UI-kit. Для простых элементов забирала компоненты из открытой версии ДС Untitled UI, адаптировала их под себя
Однако специфика CRM с расписанием и каталогами предполагала создание кастомных компонентов. Например, проработку элементов расписания во всех состояниях
Лендинг
landing
Для продвижения сделала небольшой продуктовый лендинг, где рассказали о преимуществах и крупно показала примеры интерфейса
Поскольку предстояла жёсткая конкуренция с существующими решениями В фокусе держала преимущества CRM, выгоды и лояльные тарифы
