Ситидрайв: дизайн новой программы лояльности

В 2022 году каршеринг Ситидрайв запустил новую программу лояльности: обновились уровни пользователей, а вместо процентной скидки появился кэшбэк — драйв-бонусы, которые можно копить или тратить на поездки и дополнительные опции. Перед группой дизайна встала задача продумать и реализовать удобный и эффективный UX.

Мы переделали часть системных экранов и создали ряд новых, визуализировали все элементы новой программы лояльности — от бонусов до привилегий, сделали продвижение по уровням программы наглядным, а получаемую выгоду — заметной. 

В приложении появилась «валюта» — драйв-бонусы. Взяв за основу фирменные цвета бренда и объёмные 3D-иллюстрации, мы отрисовали «монетки», символизирующие бонусы, и придумали для них собственный знак — перечеркнутую с одной стороны букву D. Этот символ отсылает к названию «валюты».

Помимо драйв-бонусов, мы ввели новую систему уровней — их базовое количество сократилось до пяти, и все они приобрели свой уникальный знак и название. А для новичков появился специальный уровень с повышенным кэшбеком на 30 дней после регистрации.

С новыми иконками пришлось поэкспериментировать. В первой версии у них не было фона.

Оказалось, что такие иконки тяжело использовать вместе, так как у них разная форма. Мы попробовали добавить фон для иконок. Лучшим вариантом стал круг, который ещё является и маской для иконки. 

Далее приступили к рендерам. Вариантов было много, но в конечном итоге мы остановились на пастельных, приглушенных цветах, которые хорошо смотрелись рядом с друг другом. Благодаря фону на иконке, мы могли сделать обводку, как на первом изображении. С её помощью мы показываем, какой уровень выбран на данный момент. 

Главный экран

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

Личный кабинет программы лояльности

В новом личном кабинете клиент может следить за своим прогрессом, проверить баланс драйв-бонусов, выбрать, копит он драйв-бонусы или тратит, а также посмотреть, чем отличаются уровни, просто полистав их свайпами. 

Также мы наглядно подсвечиваем «плюшки»: какой процент кэшбэка начисляется на каждом уровне и какую можно получить скидку с помощью драйв-бонусов. А для высоких уровней напоминаем, что теперь для пользователя опция КАСКО доступна бесплатно. 

Боковое меню

Чтобы клиент мог легко перейти в личный кабинет программы лояльности из любой страницы в приложении, мы добавили соответствующую кнопку в боковое меню. А в процессе так увлеклись, что ещё и полностью обновили его дизайн. 

Профиль

Профиль тоже пришлось обновить. Всё началось с необходимости убрать старую программу лояльности. Но заодно мы освежили дизайн всего блока. И даже поменяли стандартный аватар, который получает каждый пользователь после регистрации. Для этого нарисовали крутые 3D-иллюстрации в двух вариантах: для мужчин и женщин.

Шторка способов оплаты

Помимо новых экранов, мы обновили «шторку» в карточке автомобиля. Добавили возможность списывать или копить драйв-бонусы по аналогии с личным кабинетом. А также отрисовали кейсы ввода промокода или получения скидки. В таком случае драйв-бонусы работать не будут, и мы об этом напишем.

Интеграция со СберСпасибо

Драйв-бонусы Ситидрайва и бонусы от СберСпасибо нельзя использовать одновременно. Нам необходимо было отразить это ограничение в дизайне и реализовать возможность отключать или включать бонусы от СберСпасибо, при этом сохранив возможность оплаты карточкой Сбера. Мы создали специальную шторку с настройками, в которой можно выбрать, копить или списывать бонусы, а также в принципе включить или отключить бонусную систему Сбера. 

Дизайн всех элементов программы лояльности мы разработали за 4 месяца. В процессе сделали сотни разных вариантов экранов, столкнулись с десятком серьезных проблем, но именно это позволило прийти к оптимальному решению. 

После перевода всех пользователей на новый дизайн, мы проанализировали отзывы. Пользователи позитивно восприняли решение сделать систему более прозрачной. Теперь каждый клиент понимает, какой у него уровень в данный момент, как получить следующий и чем они отличаются. А новые драйв-бонусы стали валютой внутри приложения, которой легко и удобно управлять.