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

Виклик

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

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

Старий сайт UniferX

Рішення

Проєктний план

Дослідження

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

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

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

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

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

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

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

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

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

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

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

Дизайн

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

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

Розробка

Технічна реалізація мала три стадії: Frontend, Backend і Quality Assurance.

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

Frontend

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

Backend

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

Контент

Ми зробили навігацію простішою завдяки розумному пошуку.

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

Результат

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

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