Редизайн сайту Dysnix: як UX/UI дизайн допоміг виділитися серед конкурентів

Як зробити складне простим? Як структурувати великі обсяги інформації? Як не втратити увагу користувачів на довгих сторінках?

У цій статті ми розглянемо, як редизайн сайту компанії Dysnix покращив доступність продукту, зробивши його зрозумілішим, завдяки нестандартним UX/UI дизайн рішенням.

Про Dysnix: інноваційне розв'язання складних задач

Dysnix – українська IT компанія, яка надає послуги DevOps і DevSecOps, та має за плечима більше 8-ми років на міжнародному ринку. Інженери Dysnix виконали понад 60 проєктів у галузях Fintech, Web3, Medtech, advertising, та інші. Dysnix брали участь у розробці продуктів Google, працювали з клієнтами рівня Visa.

Однією з їхніх головних цілей є надання клієнтам інноваційних та зручних рішень, які допомагають ефективно розв'язувати складні бізнес-задачі. Вебсайт Dysnix є основним засобом комунікації з потенційними та наявними клієнтами, тому важливо, щоб він був візуально привабливим, інформативним та структурованим.

Dysnix: виклики та задачі проекту

Через те, що це прогресивна компанія, яка швидко розвивається, постійно оновлює і розширює пакет послуг, попередній сайт просто не охоплював усі необхідні задачі. Тому Dysnix звернулася до нас для створення нового дизайну вебсайту з метою:

• Презентувати усі наявні свої продукти та послуги у сфері Web 3;
• Підкреслити експертизу у галузі;
• Виділитися на тлі конкурентів.

Задача: особливість проекту полягала в тому, що на сайті дуже багато текстової інформації, яку необхідно було правильно структурувати та подати в різноманітному вигляді, а також закласти можливість подальшого масштабування.

Етапи робіт редизайну сайту Dysnix

Процес робіт над проєктом складався з таких етапів:

• Дослідження: На цьому етапі ми провели дослідження ринку та головних конкурентів, а також обговорили з клієнтом їхні бажання і вимоги до нового дизайну.
• Концепт: Розробили кілька варіантів візуального оформлення і прототипів.
• Дизайн: Після затвердження прототипу, почали роботу над дизайном, включно з вибором схеми кольорів, шрифтів, стилів тощо.
• Розробка: Після схвалення концепту, ми почали роботу над редизайном сайту та створенням кастомних ілюстрацій.

Елементи UX/UI дизайну ключових сторінок для відображення головної концепції компанії

Роботу над проектом почали з головної сторінки та інших ключових сторінок, а також блогу (Products, Solutions, Menu, and Blog), тому що вони:

• Покривають основні потреби клієнта;
• Слугують шаблонами для решти сторінок сайту, оскільки містять більшість UX/UI елементів, які використовуються і на інших сторінках;
• Закладають основну стилістику сайту загалом.

Далі детальніше про UX/UI рішення, які були запровадженні для охоплення усіх вимог і особливостей проекта та досягнення поставлених цілей.

Стилістика сайту: спеціально розроблені ілюстрації, UX/UI елементи та кольорова гама

Завданням дизайнера було систематизувати та зібрати воєдино стилістику сайту. Для того, щоб передати зміст послуг та ідентичність компанії, було опрацьовано наступне:

• Гамма і палітра кольорів.

Гама кольорів стала єдиною для всього вебсайту, що забезпечує цілісність зовнішнього вигляду та сприйняття. Вибрали чистіший і глибший основний колір, додали акценти та кольорове розділення блоків.

• Iлюстрації.

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

Наш мозок обробляє зображення в 60 000 разів швидше, ніж текст, тому, ми додали блок зі спеціально розробленими елементами UX/UI дизайну для полегшення сприйняття інформації та додання точок входу на головній сторінці.

• Шрифти.

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

• Візуально розділені та структуровані блоки з інформацією.

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

UX/UI дизайн блогу: структура для величезного масиву інформації, щоб зробити її більш доступною

Розробка блогу компанії Dysnix була важливою задачею, оскільки ця сторінка вебсайту має значний потенціал для залучення користувачів та виконання SEO задач. Однак, складність завдання полягала у структуруванні та поданні контенту, оскільки матеріалу на блозі було дуже багато і він дуже різноманітний.

Команда дизайнерів зосередилася на розробці функціональної структури, яка дозволяє користувачам швидко знаходити потрібну інформацію, робить її зрозумілішою та доступнішою. При цьому було важливо продумати подальше масштабування та оновлення блогу, так щоб працівники компанії могли додавати нові статті без втрати стилістики сайту.

Оскільки контент дуже різноманітний, для того, щоб правильно структурувати сторінку ми співпрацювали с контент-райтером компанії Dysnix. Для досягнення мети, ми:

• На першому екрані додали плитку з останніми постами та найбільш популярними статтями на думку редактора;

• Додали швидкий пошук за статтями та тегами. Виділили основні категорії та колекції статей в окремий блок для оптимізації навігації та прискорення пошуку необхідної інформації;

• Додали прев'ю постів, але з таким розрахунком, щоб співробітник — не дизайнер, теж міг додати потрібні елементи під час заливання нового контенту без втрати стилістики;

• Розмістили окремий блок з найпопулярнішими колекціями статей з кастомними ілюстраціями, щоб додати яскравих акцентів і утримати увагу користувача;

• Кейси перенесли в окремі блоки, щоб візуально відділити їх від іншого контенту в блозі.

Результати редизайну сайту Dysnix

Ми опрацювали основні сторінки сайту і продумали акцентні елементи UX/UI дизайну. Ключовими особливостями дизайну сайту стали:

• Структурований та інтуїтивно зрозумілий інтерфейс, який дає змогу користувачам легко знайти необхідну інформацію про компанію та її послуги.
• Використання кольорів та шрифтів, що відповідають концепції компанії та відображають її технологічний характер.
• Використання спеціально розроблених ілюстрацій, які допомагають візуально передати суть наявних продуктів і послуг.

Окрему увагу приділили сторінці блогу. Продукт складний і для таких продуктів блог — це важлива складова. Завдяки плідній співпраці з командою замовника, сторінка блогу виглядає насиченою і цікавою. Блог має декілька основних розділів та колекцій статей за темами, а також є функція пошуку, яка дозволяє користувачам швидко знаходити конкретні теми та статті.

Ми досягли поставлених завдань і створили дизайн, який допоміг компанії Dysnix не тільки виділитися на тлі конкурентів, але й презентувати нові продукти та послуги в Web 3 в більш простому і доступному форматі.