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

4
1209