Дизайн бонусного раздела приложения АЗС «Газпромнефть»: 7 экранов от поиска задания до бонусов

Что нужно было сделать

В 2019 году мы рисовали для «Газпромнефти» бонусный раздел мобильного приложения АЗС. Идея простая: компания публикует задания, участник выбирает удобную заправку, выполняет задание и получает за него бонусы.

Задания в макетах привязаны к конкретной АЗС. Например, сфотографировать информационную стелу с двух сторон и сбоку или заправиться от 15 литров. В карточке задания сразу видно, сколько бонусов за него начислят: в макетах это 30.

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

Внизу раздела четыре вкладки: «Поиск», «Мое задание», «Бонусы» и «Помощь». Каждая отвечает за свою часть пути.

Шаг 1. Найти АЗС с заданиями

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

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

Шаг 2. Изучить задание и забронировать

На странице АЗС собран список доступных заданий (справа на картинке выше). Каждое раскрывается: что нужно сделать, сколько бонусов дадут, сколько примерно займёт выполнение и примеры фотографий, которые ждут от участника.

Если задание подходит и участник готов выполнить его в ближайшее время, он закрепляет его за собой на 12 часов кнопкой «Забронировать и перейти к выполнению». Если нужно больше деталей, рядом есть кнопка «Узнать подробнее».

Шаг 3. Выполнить или отменить

На выполнение у участника 12 часов. Всё это время бронь можно снять: яркая плашка «Отменить выполнение задания» стоит сразу под названием АЗС, искать её не придётся.

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

После отправки появляется экран «Отлично!». На нём сказано, что фото проверят в течение трёх дней и после проверки бонусы придут на карту. Сумма бонусов вынесена крупно, в центр экрана.

Шаг 4. Следить за бонусами

Вкладка «Бонусы» и есть личный кабинет участника. Сверху баланс и отдельной строкой бонусы, которые ещё на модерации. Ниже история начислений: за какое задание, на какой АЗС и в каком статусе. Переключатель делит историю на «Зачислено» и «На модерации».

Во вкладке «Помощь» справочная информация: контакты ПАО «Газпром нефть», телефоны круглосуточной поддержки и ответы на частые вопросы. Например, «Могу ли я выполнять несколько заданий за раз?» или «Как скоро начислятся бонусы за задание». Ответы раскрываются по нажатию на вопрос.

Тёмная тема и оранжевый акцент

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

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

Что получилось

Мы нарисовали бонусный раздел целиком. Семь экранов ведут участника от поиска задания на карте до зачисления бонусов: поиск на карте и списком, страница АЗС с заданиями, выполнение с фото чека, экран успешного задания, личный кабинет с бонусами и помощь.

Если вы запускаете программу лояльности или новый раздел приложения, посмотрите UI/UX-проектирование и разработку мобильного приложения: разберём путь пользователя и нарисуем экраны под каждый его шаг.