Кейс NFTrends: создание уникального UX/UI дизайна для Web3 продукта с нуля

Как создать UX/UI дизайн для Web3-продукта, у которого нет аналогов на рынке, и подчеркнуть ценность компании благодаря качественному пользовательскому опыту? Как сделать личный кабинет и сайт простыми для понимания и навигации, если они представляют сложные цифровые услуги?

В этой статье мы рассмотрим, как студия Турум-бурум разработала с нуля пользовательский опыт (UX) и пользовательский интерфейс (UI) для платформы NFTrends, а также персональную панель для четырех различных типов пользователей.

NFTrends: Уникальный Web3 стартап

NFTrends – это передовая компания, которая объединяет произведения искусства с технологиями. Стартап позволяет осуществить аутентификацию прав собственности на уникальные предметы с помощью цифровых паспортов на продукты (DPPs) и уникальных цифровых изображений (NFDI), которые основаныхна блокчейн технологии.

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

Итак, когда идея стартапа понятна, пришло время перейти к этапу разработки UX/UI дизайна. И именно здесь в игру вступает Турум-бурум. 

Вызовы и цели проекта

Задачей Турум-бурум было создать с нуля пользовательский опыт (UX) и пользовательский интерфейс (UI) для платформы NFTrends и дашборда для четырех различных юзер флоу. 

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

Поскольку NFTrends является уникальным веб-продуктом, мы столкнулись с тремя основными вызовами:

1. Не существовало никаких примеров для подражания или вдохновения = мы должны были разработать инновационную и безупречную систему с нуля;

2. Немногие люди владеют технологиями NFT = мы должны были донести особенности и преимущества цифровизации и токенизации произведений искусства и предметов роскоши до рядового пользователя понятным ему языком;

3. Отсутствие аналитики и тематических исследований = нам пришлось полагаться только на нашу экспертизу и 14+ лет опыта в UX/UI дизайне.

Так что, определив эти особенности, команда Турум-бурум начала работу. 

Процесс создания UX-дизайна: ключевые этапы проекта

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

Шаг 1: Исследование рынка и спецификация проекта

Традиционно наша работа начинается с глубокого анализа проекта, который включает всестороннее исследование рынка, требований стейкхолдеров и целевой аудитории. 

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

Шаг 2: Создание информационной и навигационной архитектуры

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

Шаг 3: Создание прототипов

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

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

Такой подход позволяет оценить юзабилити, обеспечить интуитивно понятный дизайн и потенциально сэкономить средства клиента, устранив UX-недостатки на ранних этапах разработки.

Процесс создания UI-дизайна: ключевые этапы работы

Шаг 4: Передача материалов и разработка мудборда проекта

После завершения этапа UX-дизайна все наработки были переданы команде UI дизайна. Этап UI мы начали с разработки дизайна сайта, чтобы уловить общий настрой и концепцию будущего Web 3 продукта.

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

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

Шаг 5: Итеративный UI дизайн

Первая итерация сайта

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

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

Вторая итерация сайта

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

Третья и последняя итерация вебсайта

Учитывая все требования и рекомендации, мы разработали третью итерацию дизайна, и вот что мы получили:

1. Цветовая гамма, которая ассоциируется с роскошью 

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

2. Шрифты и тексты отражают ценности компании

Поскольку основной задачей проекта NFTrends было донести до рядового пользователя из мира искусства и моды особенности и преимущества Digital Product Passports с цифровыми отпечатками пальцев, мы выбрали простой и лаконичный шрифт.

3. Правильные визуальные акценты 

Изображения сыграли ключевую роль в разработке успешного дизайна сайта для NFTrends, поскольку они выполняли несколько функций:

• Расставляли правильные визуальные акценты;
• Позволяли клиентам «отдохнуть» между информативными и сложными блоками;
• Подчеркивали специализацию бренда — искусство и предметы роскоши.

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

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

Шаг 6: Создание UI гайда 

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

Все свои наработки мы передали партнерам – разработчикам Web3-продуктов из Dysnix, которые имплементировали наши UX/UI решения в интерфейс. В результате мы получили качественный MVP с необходимым функционалом для презентации продукта и потенциалом для дальнейшего развития и масштабирования.

Дизайн персональной панели и сайта для NFTrends: результаты проекта 

NFTrends в настоящее время является новатором в цифровом и физическом пространстве, устанавливая новые стандарты аутентичности и инновационности с нуля.

Благодаря более чем 14-летнему опыту и тесному сотрудничеству со стейкхолдерами и разработчиками Турум-бурум создала уникальный UX/UI дизайн, который эффективно презентует услуги компании и подчеркивает ее ценность. В рамках проекта была создана комплексная панель управления для различных типов пользователей и вебсайт, который служит визиткой компании.

Финальный UX/UI дизайн полностью удовлетворил все требования и передал основную идею проекта, объединив энтузиастов искусства и моды с новейшими технологиями и познакомив их с трансформационной силой цифровизации.

‍