Кейс 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 дизайн повністю задовольнив усі вимоги та передав основну ідею проєкту, поєднавши ентузіастів мистецтва та моди з новітніми технологіями та познайомивши їх з трансформаційною силою диджиталізації.

‍