Редизайн модуля бронирования: улучшила UX и добавила новые функции
🥎 О проекте
Easy Padel — это экосистема цифровых продуктов для падел-клубов и игроков. С помощью системы бронирования Easy клубы могут управлять бронированием теннисных кортов, отслеживать платежи за тренировки и организовывать турниры.
✅ Бизнес-задачи
  • Привлечь новых партнеров
  • Снизить процент отмен и ошибок при бронировании
  • Увеличить NPS пользоваталей
👉 Моя роль в проекте
  • Проанализировала текущий флоу, провела бенчмаркинг
  • Провела глубинные интервью
  • Собрала кликабельные прототипы, провела UX-тесты
  • Разработала дизайн
  • Провела ревью верстки
  • Собрала бэклог с новыми задачами
🔥 Результаты
  • Присоединились 3 новых крупных партнера в первый месяц после запуска обновленного модуля
Погружение в задачу
Для начала провела ряд встреч с командой для погружения в контекст. В результате определила главный сценарий, с которым предстоит работать в первую очередь. Ключевой задачей стало улучшение главного сценария: бронирование кортов для проведения ивента.
Провела глубинные исследования
Чтобы глубже разобраться в потребностях и проблемах пользователей, я провела глубинные интервью. На этапе подготовки к исследованию сформулировала цели и задачи, сформулировала гипотезы, описала выборку респондентов, составила гайд.

Цель интервью — выявить потребности пользователей, определить главные проблемы и боли.
Аудитория — активные пользователи системы бронирования Easy Padel.
Определила главные боли пользователей
  • Не очевидно, как выбрать диапазон времени для брони корта
    Непривычный выбор диапазона с помощью нескольких кликов по слотам. Пользователи, совершив первый клик, путались и не понимали, что делать дальше.
  • Множество модальных окон затрудняло создание брони
    Чтобы забронировать корт, пользователь проходил путь через три модальных окна, которые последовательно сменяли друг друга.
  • Длинный скролл, из за которого менеджеру сложно подбирать свободные слоты
    В рамках одного экрана, в среднем, помещалось только треть рабочего дня клуба. Чтобы менеджер мог забронировать корт на вечер, ему приходилось много скроллить.
  • Пестрый дизайн усложнял читабельность информации на слотах
    Из-за обилия ярких и насыщенных цветов было сложно считывать информацию.
Старая версия дизайна экрана бронирования кортов
Отрисовала новый дизайн
Обновила главный экран
  1. В новой версии значительно уменьшила размер слотов, чтобы помещалась полная картина по загрузке, и было проще выбирать свободный слот.
  2. Добавила состояние Hover для всех типов слотов, чтобы пользователь видел отклик системы.
  3. Подобрала новую палитру, привела к единому стилю карточки, структурировала их и убрала лишнюю информацию с турнирных слотов.
Упростила флоу: сократила путь с трех до одного модального окна
При помощи контекстного меню проще и быстрее выбрать тип ивэнта. Пользователь легко может скликнуть, если на этом этапе передумал бронировать слот.
Чтобы пользователю было проще выбрать время, я добавила подсказки. При наведении на слот они показывают время окончания и длительность события.
Изменила формат заполнения параметров букинга
Новый формат модального окна в боковом сайд-меню упрощает заполнение больших сложных форм. А автозаполнение данных ускоряет процесс создания брони.
Добавила редактирование времени прямо в модальном окне. Прежде, совместно с командой разработки, обсудили логику.
Просмотр созданного бронирования стал быстрее
Модальные окна загружаются быстрее, чем переходы между страницами. Пользователь получает оперативный доступ к просмотру детальной информации. К тому же, он остается на текущей странице, что позволяет ему видеть общую картину.
У каждого типа события свой набор параметров. Я систематизировала их в единый шаблон. Это обеспечило предсказуемость интерфейса, и упростило работу.
Переработала компонент Header в мобильной версии
Сократила высоту шапки, зафиксированную при скролле и переработала фильтрацию.
Еще немного экранов мобильной версии букинга
UX-тесты показали

Процесс создания брони стал проще и понятнее, а время бронирования корта сократилось в 2 раза
Обновленный модуль позволил заключить новые контракты с клубами, что повлияло на оборот компании.
Предложила рекомендации по улучшению навигации модуля
Предложила сменить верхнюю шапку меню на левый сайд-бар по нескольким причинам:
  • Вертикальное меню позволяет разместить больше пунктов без перегруженности. Его можно гибко настраивать, в зависимости от роли.
  • Пункты расположены сверху вниз, что облегчает восприятие.
  • Остается видимым при прокрутке, не урезает видимость контента. Можно свернуть в компактный режим.
  • Привычный паттерн. Боковая навигация уже стала стандартом, и пользователи интуитивно понимают, где искать нужные разделы.
Made on
Tilda