Дешевые трюки с навигацией. Что будет, если дать юзеру свободу выбора?
yclients — Виджет онлайн-записи на услуги в 57 странах + ERP

  • 3 млн MAU, 31к юзеров
  • Основной сегмент — сфера красоты, но по факту любые услуги с записью ко времени: от врачей до шиномонтажа.
Дизайн не менялся с основания. До прихода нашей команды была одна попытка — 1,5 года старая команда делала «новую» версию — так и не запустили.
Задача: исправить проблемы этой версии перед выходом в прод. Дело осложнялось тем, что виджет связан с огромной ERP.

Все что есть на фронте — контент сгенерированный и настроенный клиентами как душе угодно. Решать проблемы нужно собирая из того что уже есть, учитывая всевозможные настройки. Я называю этот подход «Дешевые трюки».
Сначала расскажу из чего состоит ядро продукта. Чтобы записать человека на стрижку, нужно знать 6 вещей:
  1. город
  2. филиал
  3. услуга
  4. мастер
  5. дата и время
  6. контакты
Первые три шага являются точками входа в сценарий.
Я начал работу с экрана выбора услуги (точка 3):

Нужно было решить задачи:
  • Как мне выбрать другой филиал?
  • В каком я городе, как его изменить?
  • Как мне узнать больше о филиале?
И пофиксить проблемы навигации
  • Лишний шаг в навигации, желтая невидимая ссылка
  • Переход через «назад» работает некорректно если я попал сразу на этот экран
Для начала нарисовал несколько пробных вариантов шапки и отдал в тестирование. Здесь самое важное что эта шапка могла появиться на любом экране виджета, должна быть универсальной.
После тестов доработали шапки экранов услуги и филиала, навигация заработала
Теперь поработаем с проблемами выбора услуги, мастера и времени. Ниже вы видите экрана сценария «Услуга — Запись».

Первый шаг выбор услуги, далее экран «меню» из которого можно в любом порядке выбрать мастера или время. Если мастера не выбирать, то будет назначен любой свободный.
Кстати можно глянуть аудит всей системы. Выписанные проблемы подтвердило тестирование. Команда предложила не просто править старый сценарий, а добавить более универсальный — «Меню»

Его суть: дать клиенту возможность самому выбирать последовательность шагов. важно чтобы экраны работали в любом порядке, потому что клиенты так же хотят жестко задавать последовательность шагов.
Было
Стало
Мы старались решить проблемы минимальными изменениями, что получилось:
Меню. Раньше экран был вторым шагом, теперь с него начинается запись. На скрине включена опция «Запись к любому свободному специалисту»
Изменил текст, чтобы скорректировать посыл кнопки
Выбор мастера. Переименовал «мастера» в специалиста, потому что виджетом пользуются кто угодно от автомехаников до врачей. Мастер гинекологии это слишком.

Убрал модальность, так как весь виджет может открываться в модалке.
Сделал понятный переход к инфо и специалисте.
Добавил возможность срезать путь выбрать ближайший слот.
Выбор даты и времени. Убрали горизонтальный скролл в слотах, сделали смену месяцев по клику на название. Компонент даты пока трогать не стали.
Корзина / заполненное меню. Реализовали сброс данных, раньше услугу нужно было удалять через возврат на предыдущий экран. Способ возврата на экран услуг сделали более понятным.
27 секунд видео со сценарием «Меню» для лендинга релиза
Проводили A/B тест: начинали с малого, но потом раскатали на 26 000 пользователей.
Общая конверсия в новом виджете улучшилась с 20.6% до 28.6%.
Над предложенными решениями работали вместе с продактом Ксенией Рогальской, в проверке гипотез нам помогали аналитики и ux ресерчеры.

Внешний вид вдохновлен дизайн системой ERP yclients
за авторством Алексея Кожевникова.
P.S. Вас не смутило, почему мы ставим желтый виджет на сайты клиентов, наплевав на их брендбуки? Об этом в следующем кейсе...
Кастомизация! Красим yclients в 16,7 млн цветов. 
Made on
Tilda