Криптоприложение Koinly

Что важно для любого UI/UX дизайнера? Правильно - быть в тренде! И я сейчас не только об инструментах и техниках, но и о темах кейсов. Мы во Fusion Tech стараемся всегда быть на гребне волны, поэтому тема этого кейса наиактуальнейшая. Только криптовалюта - только хардкор, и это все о нашем Koinly. А теперь к деталям!

Клиент и задача

Koinly  - приложение, отслеживающее активы криптовалютного портфеля, обмен/покупку/продажу криптовалюты, и, самое главное, помогающее инвесторам формировать налоговый отчет за все финансовые операции с криптовалютой. Это ключевая особенность приложения, отличающая его от всех прочих. И нашему дизайн-отделу удалось поработать над этим уникальным продуктом.

Наша задача состояла в том, чтобы сделать дизайн более современным и чистым, «освежив» интерфейс как для мобильного приложения, так и для десктопной версии. А также разработать темную тему и лендинг-пейдж.

Процесс работы

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

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

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

Дашборд

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

Глобально страница разделена на 4 информационных блока:
1. Карточки с общей информацией о портфеле: общая стоимость с изменениями в зависимости от периода времени, базовая стоимость, количество фиатных средств и объем заработка.
2. График движения средств в зависимости от периода времени с более детальной информацией о типе финансовых операций.
3. Типы и количество криптовалюты во владении у пользователя.
4. Список последних операций пользователя. 

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

Темная тема

Мы разработали темную тему, которая отвечает требованиям WCAG 3.0, сделав доступным комфортное использование приложения как днем, так и в темное время суток.

Лендинг пейдж

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

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

Дизайн адаптирован под мобильные устройства. 
 

Заключение

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