Кейс NFTrends: создание уникального UX/UI дизайна для Web3 продукта с нуля
Как создать UX/UI дизайн для Web3-продукта, у которого нет аналогов на рынке, и подчеркнуть ценность компании благодаря качественному пользовательскому опыту? Как сделать личный кабинет и сайт простыми для понимания и навигации, если они представляют сложные цифровые услуги?
В этой статье мы рассмотрим, как студия Турум-бурум разработала с нуля пользовательский опыт (UX) и пользовательский интерфейс (UI) для платформы NFTrends, а также персональную панель для четырех различных типов пользователей.
NFTrends: Уникальный Web3 стартап
NFTrends – это передовая компания, которая объединяет произведения искусства с технологиями. Стартап позволяет осуществить аутентификацию прав собственности на уникальные предметы с помощью цифровых паспортов на продукты (DPPs) и уникальных цифровых изображений (NFDI), которые основаныхна блокчейн технологии.
Благодаря цифровому паспорту вы можете подтверждать и отслеживать право собственности как на физические, так и на цифровые предметы роскоши, что отличается от традиционных методологий аутентификации. Хотя NFTrends не является платформой для продажи, она интегрирует свою технологию с различными платформами, в том числе и с теми, что продают цифровое искусство.
Итак, когда идея стартапа понятна, пришло время перейти к этапу разработки UX/UI дизайна. И именно здесь в игру вступает Турум-бурум.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669dedd0ff855cd7b54c5794_669dec60043b2091ded8429d_image1.webp)
Вызовы и цели проекта
Задачей Турум-бурум было создать с нуля пользовательский опыт (UX) и пользовательский интерфейс (UI) для платформы NFTrends и дашборда для четырех различных юзер флоу.
Разработать удобный, эстетически привлекательный и многофункциональный интерфейс, который облегчает создание цифровых паспортов на продукты роскоши и позволяет легко и быстро подтверждать подлинность произведений искусства.
Поскольку NFTrends является уникальным веб-продуктом, мы столкнулись с тремя основными вызовами:
- Не существовало никаких примеров для подражания или вдохновения = мы должны были разработать инновационную и безупречную систему с нуля;
- Немногие люди владеют технологиями NFT = мы должны были донести особенности и преимущества цифровизации и токенизации произведений искусства и предметов роскоши до рядового пользователя понятным ему языком;
- Отсутствие аналитики и тематических исследований = нам пришлось полагаться только на нашу экспертизу и 14+ лет опыта в UX/UI дизайне.
Так что, определив эти особенности, команда Турум-бурум начала работу.
Процесс создания UX-дизайна: ключевые этапы проекта
За каждым качественным и лаконичным дизайном стоит комплексная и кропотливая работа специалистов разных областей. Ниже вы узнаете о ключевых этапах, через которые мы прошли для создания продуманного до мелочей личного кабинета для четырех типов пользователей и клиенториентированного сайта, который презентует и подчеркивает сильные стороны NFTrends.
Шаг 1: Исследование рынка и спецификация проекта
Традиционно наша работа начинается с глубокого анализа проекта, который включает всестороннее исследование рынка, требований стейкхолдеров и целевой аудитории.
Тесно сотрудничая с командой разработчиков программного обеспечения Dysnix и высококвалифицированными менеджерами команды клиента, мы смогли углубиться в проект и понять, как должен работать веб-продукт для NFTrends. Получив всю необходимую информацию, наш UX-аналитик обработал спецификацию проекта, определив ключевой функционал для личного кабинета/сайта с учетом всех возможных паттернов поведения пользователей.
Шаг 2: Создание информационной и навигационной архитектуры
На основе данных и инсайтов, полученных на предыдущем этапе, наша команда определила четыре основных юзер флоу в Miro: владелец бизнеса, менеджер по управлению запасами, стейкхолдер и покупатель. В ходе этого процесса мы тщательно проанализировали и устранили потенциальные недостатки и барьеры, с которыми пользователи могут столкнуться на пути к совершению покупки.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669dee0f22f0750e0c4fceac_669dec4f8fc2c5576b838ed7_image12.webp)
Шаг 3: Создание прототипов
Затем мы перешли к разработке прототипов административной панели продукта. Начали с низкопробных прототипов для визуализации пользовательского опыта и взаимодействия с платформой, сосредоточившись на юзабилити.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669dee47773d15eafa372903_669dec503c4aeef4e0ea9cf2_image9.webp)
Со временем мы перевели низкоуровневые прототипы всех юзер флоу в высокоуровневые, чтобы клиент мог детальнее увидеть будущий интерфейс и общий функционал. Это необходимо для того, чтобы заказчик понял принцип работы и проверил, соответствует ли он всем его требованиям.
Такой подход позволяет оценить юзабилити, обеспечить интуитивно понятный дизайн и потенциально сэкономить средства клиента, устранив UX-недостатки на ранних этапах разработки.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669dee8b3300a266ee857a86_669dec50a6a1c225e6bb2498_image6.webp)
Процесс создания UI-дизайна: ключевые этапы работы
Шаг 4: Передача материалов и разработка мудборда проекта
После завершения этапа UX-дизайна все наработки были переданы команде UI дизайна. Этап UI мы начали с разработки дизайна сайта, чтобы уловить общий настрой и концепцию будущего Web 3 продукта.
Для утверждения стилистики, наши специалисты разработали мудборд, в котором представили ожидаемые текстуры, шрифты, цветовые палитры, тематические изображения и элементы дизайна, и показали его стейкхолдерам.
Поскольку главный офис компании находится в Дубае, у компании много клиентов оттуда, наш UI дизайнер вдохновлялся восточной культурой, в частности пустынями и передовыми технологиями. Таким образом, мы стремились подчеркнуть происхождение компании и передать общий настрой и колорит бренда.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669deebe7c902bc85296c4ca_669dec54bfbb7133b962b79f_image4.webp)
Шаг 5: Итеративный UI дизайн
Первая итерация сайта
После согласования элементов мудборда со стейкхолдером, наш UI-дизайнер создал первую итерацию сайта, придерживаясь четких требований клиента: чистый дизайн, светлые пастельные цвета, простые шрифты, избегание 3D-элементов и аватаров.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669deef8bc1a54eeafb9da02_669dec575467b7769b721a6b_image10.webp)
Однако клиент решил изменить первоначальные требования и сделать интерфейс ярче и визуально сложнее, чтобы соответствовать предпочтениям целевой аудитории. Так мы продолжили работу, учтя все пожелания и скорректировав дизайн интерфейса в соответствии с новыми критериями.
Вторая итерация сайта
Ориентируясь на пожелания и комментарии клиента, мы разработали вторую итерацию с фиолетово-голубой основой, чтобы добавить акцентов и глубины. Эта версия сайта была ближе к ожиданиям клиента и помогла ему решить, как должен выглядеть итоговый продукт. Так клиенту понравился глубокий синий цвет, который мы показали как референс. Его он и выбрал как лучший вариант для будущего сайта NFTrends.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669def304e651895dca0225c_669dec53c0d915d963c35b62_image5.webp)
Третья и последняя итерация вебсайта
Учитывая все требования и рекомендации, мы разработали третью итерацию дизайна, и вот что мы получили:
- Цветовая гамма, которая ассоциируется с роскошью
Мы изменили цвет на глубокий синий, так как он обычно ассоциируется с цифровыми технологиями, и добавили глубины, вставив фоновые изображения. Затем мы поэкспериментировали с текстурами и сделали фон более рельефным.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669def6c773d15eafa38b14b_669dec5edc8baa1d40681496_image13.webp)
- Шрифты и тексты отражают ценности компании
Поскольку основной задачей проекта NFTrends было донести до рядового пользователя из мира искусства и моды особенности и преимущества Digital Product Passports с цифровыми отпечатками пальцев, мы выбрали простой и лаконичный шрифт.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669def9df6c5a9248cc33675_669dec5d5be712228d794f13_image11.webp)
- Правильные визуальные акценты
Изображения сыграли ключевую роль в разработке успешного дизайна сайта для NFTrends, поскольку они выполняли несколько функций:
- Расставляли правильные визуальные акценты;
- Позволяли клиентам «отдохнуть» между информативными и сложными блоками;
- Подчеркивали специализацию бренда — искусство и предметы роскоши.
Чтобы сделать информацию более доступной и понятной, мы также разработали кастомные иконки для отдельных блоков, которые подчеркивают тематику продукта Web3 и его услуг.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669defda9a6f118ae58cb3cb_669dec62c1794cea86fb8e30_image7.webp)
После согласования с клиентом финальной версии дизайна сайта, мы разработали UI дизайн личного кабинета для четырех различных типов пользователей. В личном кабинете использовали схожую стилистику с сайтом, но без некоторых элементов из основного дизайна, чтобы обеспечить удобство и простоту выполнения административных задач.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669df00f32e1c138efa1f44b_669dec56c0d915d963c35d90_image3.webp)
Шаг 6: Создание UI гайда
После завершения работы над дизайном продукта, мы разработали UI гайд, в котором подробно описали, как должны выглядеть элементы интерфейса во всех их состояниях. Это позволит клиентам в будущем масштабировать проект и вносить любые изменения без потери фирменного стиля NFTrends.
Все свои наработки мы передали партнерам – разработчикам Web3-продуктов из Dysnix, которые имплементировали наши UX/UI решения в интерфейс. В результате мы получили качественный MVP с необходимым функционалом для презентации продукта и потенциалом для дальнейшего развития и масштабирования.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/669df045b19f8e36c908e305_669dec58eb1ae3d4377d638c_image2.webp)
Дизайн персональной панели и сайта для NFTrends: результаты проекта
NFTrends в настоящее время является новатором в цифровом и физическом пространстве, устанавливая новые стандарты аутентичности и инновационности с нуля.
Благодаря более чем 14-летнему опыту и тесному сотрудничеству со стейкхолдерами и разработчиками Турум-бурум создала уникальный UX/UI дизайн, который эффективно презентует услуги компании и подчеркивает ее ценность. В рамках проекта была создана комплексная панель управления для различных типов пользователей и вебсайт, который служит визиткой компании.
Финальный UX/UI дизайн полностью удовлетворил все требования и передал основную идею проекта, объединив энтузиастов искусства и моды с новейшими технологиями и познакомив их с трансформационной силой цифровизации.
Поделиться постом в:
Больше кейсов от турум-бурум?
Ознакомьтесь с нашим портфолио из различных сфер бизнеса.
Смотреть портфолио