Редизайн приложения Avosend. Упор на UX
Всем привет! Я Мирвайс — UX/UI-дизайнер с 5-летним опытом, создаю выразительные и удобные цифровые продукты: от лендингов и промо-страниц до сложных интерфейсов. Работаю в Figma и Photoshop,
Сегодня хочу представить Вам мое UX-решение по приложению Avosend.
Описание проекта:
Avosend — приложение международных денежных переводов с акцентом на СНГ и страны ближнего зарубежья. Пользователи могут перевести деньги с одной карты на другую, в банк, или получить наличные в пункте выдачи.
Задачи и цели
- Переработать главный экран: убрать лишние элементы, выделить основные функции, объединить дублирующиеся блоки и сделать визуальную группировку.
- Добавить экран курса конвертации: показывать актуальный обменный курс между валютами и калькулятор перевода (например, 1000 USD → RUB).
- Улучшить UX страницы отправки денег (ввод реквизитов): автоподсказки, маски ввода, валидация, минимизация ошибок.
- Привести в порядок историю платежей: понятная структура, фильтры, группировка по времени / валютам.
- Разработать несколько вариантов интерфейсов, провести опрос среди пользователей, собрать обратную связь и выбрать лучший вариант.
Что было сделано / результаты
- Проанализировал экраны конкурентов (международных переводов) и смежные продукты, чтобы выделить лучшие UX-практики.
- Создал несколько вариантов макетов для главного экрана и отправки реквизитов, протестировал их с пользователями (опрос).
- Разработал функциональный прототип с экраном конвертации и калькулятором курса, чтобы пользователь видел, сколько получит получатель.
- Переработал главный экран: убрал второстепенные элементы, объединил похожие функции, сгруппировал по смыслу, сделал более чистую визуальную иерархию.
- Улучшил форму ввода реквизитов: автодополнение, маски, проверка на лету, убрал лишние поля.
- Реорганизовал историю переводов: добавил фильтры, группировки по датам, визуальные разделители и понятные навигационные элементы.
- Итоговый интерфейс стал более ясным, лёгким и ориентированным на пользователя: пользователь может сразу видеть курс, совершить перевод без лишних шагов и отслеживать платежи с минимальным усилием.
Конвертация и курс валюты
На данный момент у приложения сумбурный главный экран:
- Информационные блоки занимают много верхнего пространства
- беспорядочный блок истории переводов
- Инфо-блок преимуществ
- дубляж бонусов
Я решил все рассортировать, привести в порядок, создал прототип. Перед началом прототипирования посмотрел решения у аналогов и конкурентов международных переводов, какие функции расположены, где и как.
На основе анализа главных экранов приложений и опроса 30 человек ( иностранцы в РФ, которые переводят деньги к себе в страну ), выделил функцию, которая была бы полезна и разработал прототип:
Респондентам предложено 5 вариантов отображения экранов с конвертацией валюты. 28/30 прологосовали за 2 вариант:
- Он проще и не занимает много места по высоте
- Есть возможность сразу увидеть курс выбранной валюты и рассчитать сумму
Пользователи в основном посылают средства в одну страну на протяжении длительного времени, поэтому отображение курсов нескольких стран - неуместно ( лучше зайти на сайт курсов по мнению пользователей )
Бонусные и новостные блоки ушли на второй план. Самое главное - курс и отправка денег. История переводов на исходном месте.
Помимо этого, выделены маленькие “минусы” приложения:
- На экране слева “История операций”. Рядом с ФИ получателя слово “Перевод”. Зачем? И так все функции в приложении направлены на перевод;
- Экран по середине: Нет ФИ при вводе данных карты на экране по середине. Неизвестно, кому отправляются. Появляется ФИ только после отправки денег на экране истории переводов;
- Экран справа “кому отправить деньги”: по разному отображаются реквизиты ранних получателей.
По итогу сделаны такие прототипы на основе опросов респондентов и исследования приложений
----
Главный экран
- На главном экране лаокнично сделан блок курса и конвертации валюты
- История переводов теперь отображает статус перевода, а под ФИ отображен реквизит получателя
- Новости находятся внизу экрана, чтобы не мозолить глаза
Экран ввода данных получателя
Экран ввода данных получателя при отправке средств
- Добавилась строка держателя карты при вводе цифр
- Увеличен интервал между блоком ввода карты и суммой перевода, сгруппированы по смыслу и изменено поле ввода промокода ( люди почти не пользуются промокодами, но сделать дизайн эстетичнее и в едином стиле не помешает )
Список получателей и история
У панелей получателей единый стиль отображения данных слева: ФИ и реквизит.
К тому же, пользователю теперь видно, какой перевод с каким статусом. Для удобства разделены цифра и валюта, чтобы не смысл каждого элемента ( цифры отдельно, валюта отдельно, но в 1 группе ).
---
Спасибо, что досмотрели до конца!
Подписывайтесь на мой тгк: там я рассказываю всё о своей карьере и поиске работы в найм.
Моё резюме для работодателей