UX/UI дизайн та розробка вебсайту для міжнародного дистриб’ютора органічних агродобрив 🌱 UniferX

UniferX — міжнародний дистриб’ютор органічних добрив для агрокультур. Глобальна місія компанії — внесок у подолання кліматичної кризи шляхом забезпечення рішень, які допомагають рослинам адаптуватися до змінних екологічних умов.

Виклик

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

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

Старий сайт UniferX

Рішення

План проєкту

Дослідження

Фундамент для початку роботи — розуміння болей та потреб цільової аудиторії. Для цього ми провели дослідження ринку та аналіз конкурентів, знайшли інсайти та на основі них розробили детальний сценарій взаємодії користувача (user flow) і мапу сайту.

Аналіз конкурентів

Сегменти цільової аудиторії

Потреби, бажання, проблеми та вимоги

Сценарій взаємодії користувача

Схематичні макети (wireframes)

На етапі візуалізації ми створили інформаційну структуру у вигляді деталізованих схематичних макетів (wireframes) з чітким баченням того, як буде розташована інформація на сторінках.

Далі команда розробки створила Специфікацію з вимогами до функціональності сайту.

Дизайн-концепти

Наступним кроком було створення дизайн-концептів. Ми запропонували два стилі, зроблені на основі мудбордів.

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

Дизайн

На етапі дизайну наша команда працювала над створенням розширеного пошуку всередині сайту та інтерактивною мапою, яка допомагає швидко знаходити дистриб’юторів.

На новому сайті ми покращили фільтри продуктів, які спрощують процес вибору товарів.
Динамічні анімації під час скролу додають плавності та забезпечують більш цікавий користувацький досвід.

Розробка

Технічна реалізація у нас йшла в три етапи: Frontend, Backend і Quality Assurance.

React.js для Frontend та Laravel PHP для Backend — це ті технології, що дозволили нам легко масштабувати сайт, зробити його швидким і оптимізованим. З ними наші розробники мали гнучкість при керуванні великими об’ємами даних.

Frontend

На етапі Frontend нам вдалося знайти правильний підхід до створення і масштабування компонентної системи. Також у нас вийшло втілити привабливі анімації без просідання в швидкості роботи чи SEO-оптимізації.

Backend

Наші Backend-розробники втілили крос-кантрі функціональність з підтриманням мультимовності. Тепер сайт адаптується під конкретну країну та показує потрібний контент потрібною мовою.

Контент

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

Сайт насичений різними взаємозв’язками даних. Продукти пов’язані з культурами, результатами, країнами тощо. Тому наша команда побудувала правильну архітектуру взаємозв’язків всіх цих об’єктів даних.

Попри об’єм і складність даних на платформі нам вдалось не відійти від одного зі своїх принципів — фокусі на користувача. Тому керувати контентом комфортно і нескладно.

Результат

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

Сайт отримав нагороди від CSS Awards у номінаціях «Кращий UI дизайн», «Кращий UX дизайн» та «Краща інновація».

Посилання 🔗

Вебсайт: uniferx.com | Більше наших робіт: goodface.agency/work