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