Web service
UI/UX Design

2020

Электронный кошелек, который позволяет пользователям покупать, хранить и переводить суммы в разных криптовалютах, а также обменивать одну криптовалюту на другую в рамках одного сервиса.
.webp)

У заказчика уже был работающий сервис и лендинг — оба делалисьна основе Themeforest-шаблонов (дизайн-шаблоны для WordPress) и не отвечали его требованиям: интерфейс сервиса не отличался уникальностью, а лендинг не продавал.
Заказчик искал исполнителя, который бы сделал редизайн сервиса и лендинга, и наткнулся на один из наших кейсов на Behance. Кейс рассказывал историю проекта Fintarget — для которого мы спроектировали интерфейс и сделали инвестиции понятными даже для новичков. Заказчик оценил такой подход к решению проблемы.
Для большинства людей криптовалюта — это что-то про майнинг и громкий рост биткоина в 2015-м году.На самом деле это сложная и нишевая история, которая требует глубокого погружения.
E-Wallet — экспериментальный проект, на котором мы пытались ввести спринты в дизайн-процессы.
Мы разбили проект на подзадачи, запланировали спринты и стартанули с проектирования UX, но не пошло. Криптовалюта — это нишевая история, поэтому мы не могли сидеть по две недели над пачкой экранов без комментариев от заказчика.



Чтобы понять, что на продукт есть спрос, заказчик начал с упрощенного технического решения на дизайн-шаблонах. Когда гипотеза подтвердилась,настало время привести все в порядок: сделать интуитивный и понятный интерфейс, создать уникальный стиль.
Безопасность, отсутствие чарджбеков, низкие комиссии и анонимность — у криптоплатежей много преимуществ. Чтобы принимать BTC, ETH или USDT, бизнесу нужно интегрировать платежную систему — она генерируют адрес кошелька, на который клиенты могут перевести криптовалюту.
Консультируют в вопросах инвестирования в Bitcoin, Ethereum или Tether — в этом им помогают средства аналитики. Тем, кто следит за курсом криптовалют и прогнозирует динамику, нужен дэшборд для отслеживания изменений в курсах валют.
Безопасность, отсутствие чарджбеков, низкие комиссии и анонимность — у криптоплатежей много преимуществ. Чтобы принимать BTC, ETH или USDT, бизнесу нужно интегрировать платежную систему — она генерируют адрес кошелька, на который клиенты могут перевести криптовалюту.

Приятный минималистичный дизайн
Удобный виджет
Сложная навигация
Используют красный для продажиBTC — не круто, может сбить пользователя с толку (кажется, что произошёл баг)

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



Разрабатывать концепты начали уже на старте. Всего сделали 3 варианта.

Минималистичный и очень упрощенный концепт. Нам понравилось, а заказчику нет— хотелось яркости
Яркий концепт с геометрическими арт-объектами. Эту версию заказчик оценил, но тоже отказался — теперь дизайн стал несерьезным
“Хочу темнее” — из этого родилась финальная версия UI дизайна сервиса. Цвета стали темнее, а весь интерфейс похож на банковское приложение
Логика сервиса была не понятна для пользователей: близкий по смыслу функционал находился на разныхстраницах, некоторые функции приходилось искать.

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

Объединили всю нужную пользователю информацию на одномэкране и оставили один Submit, чтобы не перегружать экран

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

На этапе разработки дизайна была доступна только функция Replenish. Разделили функциональность на Replenish (пополнения баланса), Buy (покупка криптовалюты),Withdraw (получение криптовалюты с мерчантов) и Exchange


Десктоп


Планшет


Мобильная версия


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






Страницу авторизации дополнила кастомная иллюстрация— дизайнер хотела оставить в проекте частичку команды Purrweb. Заказчику идея понравилась.
Собрали UI-kit и передали готовый дизайн в разработку.Все объяснили команде разработчиков клиента — теперь наш дизайн на стадии активной разработки.


8
12
20
32
48
80
Для создания UI-кита использовали вариативныекомпоненты Figma — объединили все варианты в один компонент с настраиваемыми свойствамии значениями











Ребята справились с поставленными задачами: спроектировали грамотный UI/UX интерфейс. На протяжении всего сотрудничества прислушивались ко мне, чтобы в результате мы получили именно то, что хотели. Полностью переработали принцип навигации по сервису, а также упростили центральные флоу — теперь наш сервис удобен и понятен. Дизайн нам передали, начинаем работать над его реализацией уже с нашей стороны.
Заказчик

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

Круто, когда в качестве референса клиент предлагает проект, над которым работала ваша команда.
Кристина Спиридонова,
менеджер по работе с клиентами

Работа над проектом заключалась не в отборе функций или проработке архитектуры с нуля — мы применили свои UI/UX навыки, чтобы правильно реализовать идеи клиента.
Юлия Вакуленко, UI/UX дизайнер, тимлид

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