Назад

UX дизайн и жажда получить $1,000,000 из крипты. Кейс Purrweb

Гибкий и адаптивный подход к разработке лучше всего показывает себя в сложных нишевых проектах, в которых собственной экспертизы недостаточно. Мы в Purrweb быстро осознали это,когда к нам пришел заказчик с запросом создать криптокошелек. Я Светлана Колпакова, проектный менеджер в Purrweb, и я хочу рассказать, как признание своего незнания о криптовалюте помогло быстро и качественно завершить дизайн-проект.

Время чтения: 5 минут

Содержание

    Спрос есть, дизайна нет

    Проект — онлайн-кошелек, с которым пользователи могут покупать, хранить, переводить и обменивать криптовалюту. Он попал к нам уже в формате MVP и типовым дизайнерским решением, которое сконструировали на основе Themeforest-шаблонов — они используются на WordPress. Приложение сопровождал простой в дизайне лендинг. 

    К концу августа 2020 года спрос на сервис был подтвержден и требовался «‎чистовик» UI/UX дизайна и лендинга. Когда заказчик начал искать агентство для редизайна криптокошелька, он наткнулся на созвучный референс: UI\UX дизайн приложения Fintarget — сервиса для работы с ценными бумагами. В этом проекте понятный дизайн, в котором легко разбирались начинающие инвесторы. Это решение нашему заказчику понравилось.

    Отказ от спринтов

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

    Мы разбили проект на подзадачи, запланировали спринты и начали с проектирования UX, но сразу же забуксовали. Но это нишевый проект (как создать криптокошелек — не частая тема для разговоров за чаем) — нам не хватало криптовалютного бэкграунда, двигаться спринтами оказалось невозможно. Для большинства людей криптовалюта — это что-то про майнинг и громкий рост биткоина. Но на самом деле это сложная и нишевая история, которая требует глубокого погружения.

    Проектный менеджер

    Работать целую неделю над интерфейсом приложения, к логике работы которого у вас куча вопросов — нереально.

    Проектный менеджер 

    Тогда в список задач заложили глубокое погружение в тему и регулярные (действительно регулярные) созвоны с заказчиком. Дизайнеру нужно было много смотреть на конкурентов среди криптокошельков, держать связь с заказчиком и валидировать решения.

    Изучаем матчасть

    Мы сделали шаг назад и 8 часов изучали рынок и предложения конкурентов. Наш проектный менеджер завела криптокошельки на всех платформах и на несколько недель стала криптовалютчиком и тестировщиком одновременно, пока проверяла логику и интерфейсы в каждом продукте.

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

    создать криптокошелек: майндмэп проекта

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

    UI/UX дизайнер на проекте

    Наша работа заключалась не в продумывании архитектуры приложения с нуля. Кейс PayPay — это про применение UI/UX знаний, чтобы помочь клиенту реализовать его идеи.

    UI/UX дизайнер на проекте 

    Поиск грани между скукой и яркостью

    Когда мы закончили свой «экспресс-курс» по криптовалюте, наконец смогли приступить к проекту и начали с вайфреймов. Создать криптокошелек предстояло команде из трех человек:

    • проектный менеджер;
    • UI/UX дизайнер;
    • графический дизайнер

    создать криптокошелек: основные конкуренты

    Заказчик опирался на наиболее удачные образцы флоу среди конкурентов — Binarix и Mercurio. В Binarix понравилась реализация виджета, в Mercurio — расположение виджета на лендинге аналогичное расположению в сервисе. То есть пользователь “балуется” с переводом обычной валюты в криптовалюту на лендинге, а затем попадает в сервис с аналогичным UI/UX.

    Также в качестве референсов криптокошельков заказчик назвал Qiwihttps://qiwi.com/ и  Fintarget.ruhttps://www.behance.net/gallery/90571471/Investment-strategy-Fintech-web-Dashboard-UIUX

    Менеджер по работе с клиентом

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

    Менеджер по работе с клиентом 

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

    создать криптокошелек: редизайн интерфейса

    На главном экране кнопки:

    • Replenish для пополнения баланса;
    • Accept payment для получения крипты с мерчантов. 

    Чтобы отправить деньги на другой счёт нужно было перейти во вкладку Withdraw, а функции Exchange не было.

    • Экшн-кнопки сделали доступными с главной страницы аккаунта. Так отпала необходимость в поиске кнопок на других экранах;
    • Добавили Exchange;
    • Разделили функциональность кнопки Replenish и Buy

    создать криптокошелек, упрощаем интерфейс

    На экране настроек отдельные Submit: один для смены почты, второй для смены пароля. Зачем — непонятно.

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

    создать криптокошелек: редизайним экран настроек

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

    Одновременно с вайфреймами сделали сразу четыре UI-концепта дизайна криптокошелька:

    1. Минималистичный и очень упрощенный концепт. Нам понравилось, а заказчику нет — хотелось яркого и красочного

    2. Вторая версия стала яркой с геометрическими арт-объектами. Эту версию заказчик оценил, но тоже отказался — теперь дизайн стал несерьезным

    3. Основу оставили, но отказались от ярких цветов и добавили банковского стиля в онлайн-криптокошельке

    создать криптокошелек: три варианта UI-концепта

    4. С этой версией мы оказались ближе всего к истине. Финальным аккордом стали правки «‎темнее, как у Fintarget». Взяли в работу и докрутили до финального варианта, но на всякий случай его тоже выполнили в трех версиях с небольшими модификациями.

    создать криптокошелек: еще один UI-концепт

    Лендинг в две итерации

    создать криптокошелек: переработка лендинга

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

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

    Графический дизайнер на проекте

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

    Графический дизайнер на проекте 

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

    В работе над лендингом графдизайнер пересмотрела иконки криптовалют. Заказчик оценил нововведение, и мы перенесли его в дизайн сервиса.

    создать криптокошелек: новые иконки

    Иконки стали ровнее и отрисованы более тонкими линиями. Теперь они объединены в плашку.

    Страницу авторизации, кстати, дополнила кастомная иллюстрация — дизайнер хотела оставить в проекте частичку команды Purrweb. Заказчику идея понравилась.🤘🏻создать криптокошелек: кастомная иллюстрациия от Purrweb

    Дизайн в надежные руки

    Создать криптокошелек заняло у нас 1.5 месяца и уже ноябре мы передали подробный UI-кит для команды разработки заказчика. Дизайн и лендинг обошлись в $8 700.

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

    Насколько публикация полезна?

    Оцени эту статью!

    19 оценок, среднее 4.6 из 5.

    Оценок пока нет. Поставьте оценку первым.

    Так как вы нашли эту публикацию полезной...

    Подписывайтесь на нас в соцсетях!

    Поделиться

    -