Кэшбэк-сервис для друзей
К нам обратился заказчик из Израиля. У него уже было запущен свой кэшбэк-сервис, вот только конверсии оставляли желать лучшего. Клиент попросил нас провести UI/UX-аудит приложения и разработать новый дизайн, который решил бы проблему с конверсиями.
Идея приложения в том, что пользователи получают кэшбэк, когда оплачивают покупки через приложение в магазинах-партнерах сервиса. Если они хотят увеличить процент своего кэшбэка — могут пригласить друзей в приложение и объединиться в группу. Тогда каждый ее участник будет получать больше кэшбэка.
В приложении легко получать кэшбэк и увеличивать его
Если нет знакомых, которых заинтересует приложение, их можно найти прямо в приложении. Для этого здесь есть лента и возможность выкладывать посты со своими покупками. Так пользователи с общими интересами и любимыми магазинам могут подписаться друг на друга и при желании объединиться в кэшбэк-группу.
Внутренняя соцсеть объединяет пользователей с похожими предпочтениями
Перед нами стояли интересные задачи:
- Провести аудит старого дизайна приложения. Понять, что именно мешало пользователям и снижало конверсии.
- Разработать дизайн, который был бы современным (как сама идея приложения) и при этом вызывал достаточно доверия, чтобы пользователи проводили через него финансовые операции.
- Совместить в дизайне элементы соцсети и приложения для оплаты так, чтобы они не противоречили друг другу, а дополняли.
Как работает приложение
Работать над дизайном мы начали с разбора бизнес-логики приложения. Получился такой сценарий:
- Пользователь регистрируется и добавляет способ оплаты.
Аккаунт создается быстро — всего в пару шагов
2. Сканирует QR-код на терминале и получает кэшбэк после оплаты через приложение.
Оплата должна пройти через приложение, чтобы пользователь получил кэшбэк
3. При желании создает группу из нескольких пользователей, чтобы увеличить кэшбэк.
Чтобы пригласить друга в группу, достаточно отправить ссылку на нее
4. Выкладывает посты о покупках, чтобы привлечь больше участников в свою группу.
В приложении можно не только получить кэшбэк, но и найти идеи для покупок
5. Листает ленту, подписывается на других пользователей и вступает в их группы, чтобы увеличить кэшбэк.
На превью группы есть вся нужная информация: название, процент кэшбэка, участники
Провели UI/UX-аудит старого дизайна
Мы не можем показать дизайн первой версии приложения от прошлой команды клиента — хотя бы из простого уважения к коллегам. Скажем только, что некоторые решения сильно вредили конверсии.
Например, экраны были визуально перегружены. Сервис совмещает в себе одновременно элементы финансового приложения и соцсети. Гармонично совместить их — задача не из легких. Из-за этого информация плохо читалась, а общий призыв к действию терялся. Пользователи путались и не понимали, что им делать, чтобы получить пользу, ради которой они скачали приложение.
Плюс, дизайн приложения выглядел устаревшим. Создавалось впечатление, что он не обновлялся уже несколько лет. Это настораживало пользователей. Им не хотелось доверять свои финансы приложению, меры защиты в котором могли оказаться такими же устаревшими, как и внешний вид.
Этими и другими выводами мы поделились с клиентом. Он согласился и сказал, что и сам понимал, что с дизайном что-то не так. Но наш экспертный анализ «разложил все по полочкам» и показал, над чем конкретно нужно поработать.
Мы предложили навести порядок в интерфейсе, сделать приложение более удобным и современным. Чтобы пользователи легко ориентировались в приложении и в несколько кликов получали кэшбэк. А еще — чтобы приложение приятно выглядело и вызывало желание полистать ленту с покупками других пользователей.
Разработали конверсионный дизайн
Рассказываем про наши восемь дизайн-решений, которые привлекают пользователей и помогают им легко ориентироваться в приложении:
1️⃣ Разработали лаконичный интерфейс по гайдлайнам от Apple. Приложение не выглядит перегруженным, несмотря на разнообразие функций.
Пожелание заказчика — следовать гайдлайнам Apple при разработке дизайна
2️⃣ Черно-белая цветовая гамма выглядит строго и современно — то, что пользователь и ожидает от финансового приложения.
Цветовая гамма приложения
3️⃣ Добавили немного эмоций с помощью фиолетовых и зеленых акцентов. Оттенки не слишком яркие, чтобы поддерживать единый деловой стиль.
Фиолетовые и зеленые акценты в приложении
4️⃣ Шрифт Outfit легко читается с экрана даже в спешке, когда нужно быстро оплатить покупку через приложение. Буквы и цифры без засечек выглядят аккуратно, но не слишком официально. Шрифт смотрится уместно и в блоке с балансом пользователя, и в тексте поста рядом с яркими фото.
Шрифт Outfit в приложении
5️⃣ Визуально разделили стартовую страницу на две части: черную и белую. На черном фоне — функции, связанные с кэшбэком. На белом — лента новых постов от других пользователей.
6️⃣ Яркий акцент — фиолетовая кнопка Create group, которую легко скрыть при желании. С одной стороны, кнопка помогает увеличить кэшбэк. С другой — взаимодействовать с другими пользователями. Поэтому мы расположили кнопку посередине между двумя смысловыми блоками.
Понятный призыв к действию помогает ориентироваться в приложении
7️⃣ Пользователь быстро ориентируется в Payment details и быстро оплачивает покупки на кассе. Слева — способы оплаты, справа — чекбоксы. Сразу видно, какой из способов выбран.
Дизайн экрана Payment details
8️⃣ Ленту с постами можно развернуть на полный экран. Так она переходит в привычный и интуитивно понятный формат — такой же, как в других соцсетях.
Дизайн ленты
Результат за 1 месяц
Через месяц работы с нами заказчик получил готовый дизайн со всеми экранами приложения и элементами интерфейса. Мы успешно совместили соцсеть и финансовое приложение, сделали интерфейс современным и удобным для пользователей.
Новый дизайн технически реализуем. Наполнение экранов совпадает с запланированными функциями — все кнопки, формы и иконки на месте.
Клиент использует наш дизайн-концепт уже сейчас — например, когда презентует идею своего приложения потенциальным инвесторам. Он поделился своими впечатлениями:
Хотел бы я знать о вас, когда только-только начинал работу над своим приложением. Тогда бы не пришлось исправлять ошибки прошлой команды.
Клиент вдохновился работой с нами и дополнительно заказал дизайн виджета для своего приложения, а также разработку и дизайн веб-сайта. Сейчас мы активно обсуждаем планы по разработке приложения с нашим дизайном.
