Дизайн-упаковка крипто-стартапа перед получением инвестиций. Web + UX/UI-дизайн для Сингапурского DeFi

За 6 лет работы с продуктовым дизайном для стартапов наша команда успела поработать с 50+ технологическими стартапами из разных сфер.
Кейс, о котором мы расскажем сегодня – сервис для обмена, хранения и торговли крипто-валютами с возможностью крипто-кредитования.

На примере работы с этим стартапом мы расскажем, каким должен быть дизайн для будущего крипто-единорога.

Зачем вкладываться в дизайн интерфейса для DeFi и с первого раза делать хорошо, если можно делать тяп-ляп?

Во-первых, DeFi имеет огромный потенциал роста.

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

Во-вторых, сайт продукта все чаще используется вместо питч-дека.

Просмотрев лендинг, инвестор может за 5 секунд принять решение, стоит ли продукт его внимания, независимо от уровня погруженности в сферу.

В-третьих, доверие - необходимость!

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

Илон Маск: Doge. Doge: 📈📈📈
Илон Маск: Doge. Doge: 📈📈📈

Минимальный дизайн-набор для молодого стартапа

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

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

• Дизайн лендинга (заменяет презентацию)

• Верстка лендинга на Framer (стандарт среди платформ для стартаперов)

• Первые несколько сценариев интерфейса платформы, собранные в компонентах в Figma

С 2020 года мы работаем с крипто-проектами. Клиент, о котором пойдет речь, уже приходил к нам на начальной стадии предыдущего проекта, чтобы подготовиться к фандрайзингу. Мы уже делали для него лендинг и дизайн платформы 2 года назад, все очень понравилось и он вернулся. И попросил сделать то же самое для нового продукта.

В итоге, с прошлым проектом он взял грант от Polygon. С текущим проектом заказчик привлек фандинг от J.P. Morgan. Каждый раз продукт технически сложный и требует подробного объяснения деталей его работы, поэтому так важно иметь сайт, который упрощает понимание и отвечает на самые важные вопросы.

Как происходила работа.

ChainKeyX — это крипто-необанк. Сервис предназначен для обмена, хранения и торговли криптовалютами, с возможностью крипто-кредитования. На примере работы с этим сервисом мы теперь расскажем, каким должен быть дизайн для будущего крипто-единорога.

Дизайн сайта и верстка на Framer

Главная задача сайта крипто-продукта – решать вопрос доверия. В крипто-мире много проектов-однодневок, иначе говоря, – скама. Нужно, чтобы сайт внушал доверие. Созданию доверительных отношений в web3-мире помогает визуализация проработки проекта и идеи. Нужно чтобы посетитель сайта был уверен, что команда долго и скурпулезно работала над своим продуктом.
Сайт проекта сделан на Framer. Выглядит стильно и понятно рассказывыает о продукте. Сделан в бенто-стиле, используется лаконичная графика на крипто-тематику. Анимации создают ощущении легкости и дополнительной проработки.
Сейчас сайт короче, чем мы разработали. Некоторое блоки сайта откроются позже, когда будут запущены соответствующие функции.

Дизайн интерфейса для платформы

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

Рабочий скрин нескольких компонентов из Figma
Рабочий скрин нескольких компонентов из Figma

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

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

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

Пример таблицы из сервиса Tug, делали для этого же заказчика 2 года назад
Пример таблицы из сервиса Tug, делали для этого же заказчика 2 года назад

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

Пример таблицы из сервиса <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fchainkeyx.com%2F&postId=1132059" rel="nofollow noreferrer noopener" target="_blank">ChainKeyX</a>
Пример таблицы из сервиса ChainKeyX

Как это работать с клиентом из Азии?

Это БАЗА
Это БАЗА

Команда ChainKeyX из Азии. Вот, чему мы научились в работе с ними:

1. Коммуникация с заказчиком может осложняться из-за акцента – английский язык в разных частях света звучит по-разному. К счастью это заметно лишь на звонках.
Инсайт: стоит записывать встречи, потом можно переслушивать.

2. Нужно учитывать предпочтения в дизайне европейского и азиатского рынка. Для европейской команды нормально не знать сразу всех тонкостей азиатского рынка.
Инсайт: некоторые детали станут понятны только через правки, это нормально.

3. График работы команды может не совпадать с графиком работы заказчика. Дело не только в часовых поясах, но и в том, что для заказчика может быть нормой звонить по рабочим вопросам в нерабочее время.
Инсайт: стоит на старте обговорить рабочие часы.

Давайте подружимся

В год мы берем в работу 20+ молодых проектов по всему миру.

Для большинства проектов мы разрабатывали стиль с нуля. Самый частый запрос: сделайте понятно и функционально сайт и платформу, которые будут вызывать доверие.

Наши проекты за последние 2 года

Также работаем с рынками Азии, Европы, России и ближнего востока. Располагаем широким набором дизайнерских инструментов, No–Code и Code решений. Работаем не только с маленькими компаниями, но и со средним и большим бизнесом.

Продуманный дизайн это основополагающий элемент сильного бренда

Ольга Кад, основатель OKAD Agency

Чтобы получить консультацию по дизайну вашего продукта и сделать сайт с подходящим вам no-code решением, обращайтесь в OKAD.Agency.

Пишите мне, я с радостью созвонюсь с вами, сделаю ревью вашего продукта, расскажу, как можно улучшить и реализовать с нуля ваши идеи.

Обязательно подписывайтесь на наш Telegram-канал с кейсами и полезностями, чтобы не пропускать новые кейсы и разборы.

1010
8 комментариев

Не хватило больше примеров того, что сделали по интерфейсу, не очень понятно, в чем суть сервиса, и понимаете ли вы ее сами

1

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

Интересный проект, круто, что заказчик шел навстречу и помогал с набросками

1

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

1

Это ваш первый азиатский клиент был? Если нет, то часто берете заказы из Азии?

Сарафанное радио в основном, один из первых клиентов оттуда нашел меня на Dribbble

1

Почему все в России гонят на азиатский акцент. Попробуйте французов разобрать или даже британцев нэйтивов...