Explore
Уложитесь в мой дедлайн?
Обязательное поле
Некорректный номер
Некорректный Email
Обязательное поле
Все поля обязательны к заполнению
Далее
Далее
Роль в проекте
Интересующая услуга
Примерный бюджет
Пожалуйста, проставьте по варианту в каждой категории
Отправить
Отправить
several colorful figures
Заявка отправлена
В ближайшее время с вами свяжется наш менеджер
Oops! Something went wrong while submitting the form.

Pay pay: электронный кошелек для криптовалюты

Web service

UI/UX Design

2020

Cryptocurrency wallet dashboard interface
Cryptocurrency wallet management interface

О проекте

У заказчика уже был работающий сервис и лендинг — оба делалисьна основе Themeforest-шаблонов (дизайн-шаблоны для WordPress) и не отвечали его требованиям: интерфейс сервиса не отличался уникальностью, а лендинг не продавал.

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

Челленджи проекта

Для большинства людей криптовалюта — это что-то про майнинг и громкий рост биткоина в 2015-м году.На самом деле это сложная и нишевая история, которая требует глубокого погружения.

Как мы работали

E-Wallet — экспериментальный проект, на котором мы пытались ввести спринты в дизайн-процессы.

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

Этапы

Project timeline with milestones and tasksUI flow diagram for a web application process
Cryptocurrency wallet app interface and dashboard

Подтверждение гипотезы

Чтобы понять, что на продукт есть спрос, заказчик начал с упрощенного технического решения на дизайн-шаблонах. Когда гипотеза подтвердилась,настало время привести все в порядок: сделать интуитивный и понятный интерфейс, создать узнаваемый стиль.

Портрет пользователей

Предприниматели

Безопасность, отсутствие чарджбеков, низкие комиссии и анонимность — у криптоплатежей много преимуществ. Чтобы принимать BTC, ETH или USDT, бизнесу нужно интегрировать платежную систему — она генерируют адрес кошелька, на который клиенты могут перевести криптовалюту.

Финансовые консультанты

Консультируют в вопросах инвестирования в Bitcoin, Ethereum или Tether — в этом им помогают средства аналитики. Тем, кто следит за курсом криптовалют и прогнозирует динамику, нужен дэшборд для отслеживания изменений в курсах валют.

Новички,
которые хотят начать

Безопасность, отсутствие чарджбеков, низкие комиссии и анонимность — у криптоплатежей много преимуществ. Чтобы принимать BTC, ETH или USDT, бизнесу нужно интегрировать платежную систему — она генерируют адрес кошелька, на который клиенты могут перевести криптовалюту.

Основные конкуренты

Приятный минималистичный дизайн

Удобный виджет

Сложная навигация

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

Современный и креативный лендинг

Виджет доступен и с лендинга, и в самом сервисе

Простая навигация

Нет дэшборда, который бы позволялотслеживать последние измененияв курсе сразу нескольких криптовалют

Майндмэп и вайрфреймы

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

Работали над экранами поочередно: один за другим показывализаказчику, получали апдейты и вносили правки в моменте — так мы смогли сделать сервис удобным для пользователей, не навредив логике работы продукта.

User flow diagram for app navigationUser flow diagram for cryptocurrency app navigation
UI flow diagram for web application navigation

Эволюция концептов

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

1

Упростили

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

2

Добавили цвета

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

3

Переобулись в банк

“Хочу темнее”  — из этого родилась финальная версия UI дизайна сервиса. Цвета стали темнее, а весь интерфейс похож на банковское приложение

Что изменилось?

Что-то не так с навигацией

Логика сервиса была не понятна для пользователей: близкий по смыслу функционал находился на разныхстраницах, некоторые функции приходилось искать.

Home screen of a cryptocurrency wallet app

Теперь все так

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

Cryptocurrency wallet and transaction dashboard screen

Запутанные настройки

Системные настройки и настройки профиля находились в разных местах.

Profile settings screen with email and password fields

Как теперь

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

User profile settings screen

Что добавили?

Виджет
— зачем он

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

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

Cryptocurrency exchange transaction screen

Функции: Buy, Send, Exchange

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

E-wallet invoice input screen

Сетка и респонсив

Десктоп

Design grid layout with spacing measurementsMobile app user onboarding flowchart

Планшет

UI design layout with spacing dimensionsMobile app analytics dashboard screenshot

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

Design layout showing spacing and dimensionsUI design layout for app screens

Лендинг

Перед нами стояли еще одна задача — редизайн лендинга приложения.

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

Cryptocurrency payment processing service webpage
Advantages of using our services for payment solutions
Tariffs and payment options for businesses
Invoice screen with payment options and QR code
Cat holding a Bitcoin symbol

Хайлайт

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

UI-kit и структура

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

Палитра

Color palette with hex codes

Типографика

IBM Plex Sans - Semibold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
QqRrSsTtUuVvWwXxYyZz
1234567890!@#$%^&*(){}?<>./,
IBM Plex Sans - Medium
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
QqRrSsTtUuVvWwXxYyZz
1234567890!@#$%^&*(){}?<>./,

Отступы

8

12

20

32

48

80

Компоненты

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

Кнопки

UI button design variations and statusesUI layout with various button styles
Dashboard interface with action buttons and data entries

Поля ввода

Transaction details table in cryptocurrency appWallet transaction history screen

Табы

Cryptocurrency exchange interface with trading optionsMarket data trading interface screenshot

Выбор

UI control options for a design interfaceUser interface settings screen

Выпадающий список

Language selection dropdown menu UI screenLanguage selection dropdown menus in UI design

Подтверждение

UI settings configuration options screenMobile app settings screen with options

Результат

Cartoon cat holding a Bitcoin symbol

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

Заказчик

Portrait of person

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

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

Portrait of person

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

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

Portrait of person

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

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

Portrait of person

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

Виктория Минаева,
графический дизайнер, тимлид