Взболтать, но не смешивать: интуитивный UX-дизайн для бонусной программы

Клиент: AdriaCats — бренд цветных и прозрачных контактных линз с большим ассортиментом. AdriaBonus — программа лояльности от AdriaCats.

Для сайта программы лояльности нужен был новый дизайн для B2B и B2C пользователей.

Бонусная программа AdriaBonus нацелена одновременно на B2B и B2C аудиторию. Из ингредиентов для нового дизайна у нас имелись: текущий сайт, дизайн-макеты от клиента, капля корпоративного цвета и логотип. 

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

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

А если линзы покупают у менеджера, который не знает о бонусной программе или забыл про нее рассказать? Что делать, если линзы покупают не в оптике, а на маркетплейсах? 

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

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

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

Иконки поместили на поля, напоминающие форму линзы; добавили контрастные желтые кнопки, которые сразу привлекают внимание посетителя сайта и направляют к главному действию — регистрации кода.

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

Вариант "до" 

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

Вариант "после" 

Подарки и бонусы оформили более лаконично. Каждому элементу определили отдельное поле: взгляд теперь не разбегается, а концентрируется на одном объекте, который, возможно, пользователь больше всего хочет получить.

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

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

Продавцы, помимо имени, телефона, почты и пароля для учетной заполняют еще поле ИНН.

В отличии от покупателей, чьи призы отражены на главной странице сайта, продавцы могут увидеть свое вознаграждение только внутри личного кабинета. Здесь же отражена система мотивации: за какие продажи и в каком объеме продавцы получат бонусы.

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

Проверьте сами!