Назад

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

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

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

Содержание

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

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

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

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

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

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

    Светлана Колпакова,

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

    Светлана Колпакова, 
    проектный менеджер

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

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

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

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

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

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

    Юлия Вакуленко,

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

    Юлия Вакуленко,  
    UI/UX дизайнер

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

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

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

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

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

    Также в качестве референсов криптокошельков заказчик назвал Qiwihttps://qiwi.com/ и Fintarget.ru.

    Кристина Спиридонова,

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

    Кристина Спиридонова, 
    менеджер по работе с клиентом

    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 интерфейс. На протяжении всего сотрудничества прислушивались ко мне, чтобы в результате мы получили то, за чем пришли»,— отмечает он.

    Менеджмент
    • Светлана Колпакова
    Дизайн
    • Юлия Вакуленко
    • Виктория Минаева
    Контент
    • Дарья Лобачева

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

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

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

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

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

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

    Поделиться