Спрос есть, дизайна нет
Проект — онлайн-кошелек, с которым пользователи могут покупать, хранить, переводить и обменивать криптовалюту. Он попал к нам уже в формате MVP и типовым дизайнерским решением, которое сконструировали на основе Themeforest-шаблонов — они используются на WordPress. Приложение сопровождал простой в дизайне лендинг.
К концу августа 2020 года спрос на сервис был подтвержден и требовался «чистовик» UI/UX дизайна и лендинга. Когда заказчик начал искать агентство для редизайна криптокошелька, он наткнулся на созвучный референс: UI/UX дизайн приложения Fintarget — сервиса для работы с ценными бумагами. В этом проекте понятный дизайн, в котором легко разбирались начинающие инвесторы. Это решение нашему заказчику понравилось.
Отказ от спринтов
Поначалу перед нами стояла понятная задача — редизайн криптокошелька. В процессе задача переквалифицировалась в пересмотр архитектуры сервиса, потому что добавлялись новые фичи, под которые нужно было переделывать экраны.
Мы разбили проект на подзадачи, запланировали спринты и начали с проектирования UX, но сразу же забуксовали. Но это нишевый проект (как создать криптокошелек — не частая тема для разговоров за чаем) — нам не хватало криптовалютного бэкграунда, двигаться спринтами оказалось невозможно. Для большинства людей криптовалюта — это что-то про майнинг и громкий рост биткоина. Но на самом деле это сложная и нишевая история, которая требует глубокого погружения.
Работать целую неделю над интерфейсом приложения, к логике работы которого у вас куча вопросов — нереально.
Тогда в список задач заложили глубокое погружение в тему и регулярные (действительно регулярные) созвоны с заказчиком. Дизайнеру нужно было много смотреть на конкурентов среди криптокошельков, держать связь с заказчиком и валидировать решения.
Изучаем матчасть
Мы сделали шаг назад и 8 часов изучали рынок и предложения конкурентов. Наш проектный менеджер завела криптокошельки на всех платформах и на несколько недель стала криптовалютчиком и тестировщиком одновременно, пока проверяла логику и интерфейсы в каждом продукте.
В результате мы собрали подробный майндмэп и провели десятки часов в разговорах с заказчиком. Майндмэп помог увидеть старую архитектуру “сверху” и придумать решение, как все упаковать, чтобы не шокировать пользователей.
Здесь нам повезло — заказчик по-хорошему горел проектом и терпеливо объяснял нашему дизайнеру на пальцах работу каждой фичи. Проект стал тем случаем, когда мы были только рады активному участию и вовлеченности заказчика, потому что у нас не было экспертизы в криптовалюте.
Поиск грани между скукой и яркостью
Когда мы закончили свой «экспресс-курс» по криптовалюте, наконец смогли приступить к проекту и начали с вайфреймов. Создать криптокошелек предстояло команде из трех человек:
- проектный менеджер;
- UI/UX дизайнер;
- графический дизайнер
Заказчик опирался на наиболее удачные образцы флоу среди конкурентов — Binarix и Mercurio. В Binarix понравилась реализация виджета, в Mercurio — расположение виджета на лендинге аналогичное расположению в сервисе. То есть пользователь “балуется” с переводом обычной валюты в криптовалюту на лендинге, а затем попадает в сервис с аналогичным UI/UX.
Также в качестве референсов криптокошельков заказчик назвал Qiwi и Fintarget.ru
Круто, когда в качестве референса клиент предлагает проект, над которым работала ваша команда.
UX каждого экрана мы прорабатывали вместе с заказчиком, сразу же показывали, вносили правки на ходу, попутно обучаясь на плюсах и минусах юзабилити конкурентов. Вот как мы переработали интерфейс:
На главном экране кнопки:
- Replenish для пополнения баланса;
- Accept payment для получения крипты с мерчантов.
Чтобы отправить деньги на другой счёт нужно было перейти во вкладку Withdraw, а функции Exchange не было.
- Экшн-кнопки сделали доступными с главной страницы аккаунта. Так отпала необходимость в поиске кнопок на других экранах;
- Добавили Exchange;
- Разделили функциональность кнопки Replenish и Buy
На экране настроек отдельные Submit: один для смены почты, второй для смены пароля. Зачем — непонятно.
Объединили всю нужную пользователю информацию на одном экране и оставили один Submit, чтобы не перегружать экраны настроек.
На лендинге появился виджет, в который можно вписать сумму перевода, а затем перейти к регистрации. Виджет помогает пользователю понять, сколько криптовалюты он получит за N количество $ — это мотивирует совершить операцию.
Одновременно с вайфреймами сделали сразу четыре UI-концепта дизайна криптокошелька:
1. Минималистичный и очень упрощенный концепт. Нам понравилось, а заказчику нет — хотелось яркого и красочного
2. Вторая версия стала яркой с геометрическими арт-объектами. Эту версию заказчик оценил, но тоже отказался — теперь дизайн стал несерьезным
3. Основу оставили, но отказались от ярких цветов и добавили банковского стиля в онлайн-криптокошельке
4. С этой версией мы оказались ближе всего к истине. Финальным аккордом стали правки «темнее, как у Fintarget». Взяли в работу и докрутили до финального варианта, но на всякий случай его тоже выполнили в трех версиях с небольшими модификациями.
Лендинг в две итерации
Создать криптокошелек было нашей основной задачей. Но помимо этого подпроектом для нас стала переработка лендинга приложения. Первая версия казалась заказчику яркой и несерьезной.
К этому моменту мы уже неплохо разбирались в криптовалюте и вкусах заказчика — ему хотелось ярко, но аккуратно, серьезно. Официального ТЗ на лендинг не было, мы же хотели сделать прозрачную и ясную посадочную страницу, из которой пользователь точно поймет, где находится и зачем ему это нужно.
Чтобы понять, какой должна быть структура лендинга — отсмотрели конкурентов и проанализировали рынок. Отказались от заезженных цветов, ушли в минималистичный киберпанк и нарисовали кастомные иллюстрации.
Здесь мы сработали в две итерации: на второй изменили переработали блог (добавили лейблы для упрощения навигации пользователей) и отрисовали классные иллюстрации, которые привлекают внимание к нужным частям интерфейса. В целом мы отказались от заезженных цветов (черного, неонового и зеленого) и ушли в минималистичный киберпанк.
В работе над лендингом графдизайнер пересмотрела иконки криптовалют. Заказчик оценил нововведение, и мы перенесли его в дизайн сервиса.
Иконки стали ровнее и отрисованы более тонкими линиями. Теперь они объединены в плашку.
Страницу авторизации, кстати, дополнила кастомная иллюстрация — дизайнер хотела оставить в проекте частичку команды Purrweb. Заказчику идея понравилась.🤘🏻
Дизайн в надежные руки
Создать криптокошелек заняло у нас 1.5 месяца и уже ноябре мы передали подробный UI-кит для команды разработки заказчика. Дизайн и лендинг обошлись в $8 700.
Заказчик уже начал внедрять дизайн на своей стороне. «Мы получили именно то, что хотели. Полностью переработали принцип навигации по сервису, а также упростили центральные флоу — теперь наше приложение удобнее и понятнее. Ребята справились с поставленными задачами: спроектировали грамотный UI/UX интерфейс. На протяжении всего сотрудничества прислушивались ко мне, чтобы в результате мы получили то, за чем пришли»,— отмечает он.
