![CSS Design Awards CSS Design Awards](/images/awards/flags/css-design-awards.png)
![](https://cdn.cases.media/image/wide/1403b8f5-a89d-45c8-b280-10b2700d7bbd.jpg)
UX/UI дизайн та розробка вебсайту для міжнародного дистриб’ютора органічних агродобрив 🌱 UniferX
Виклик
Корпоративний сайт компанії давно застарів, перестав відповідати сучасним вимогам і оновленій бренд айдентиці. Тож нашою задачею стало глобальне оновлення сайту: підвищення функціональності та естетичності.
- Наш виклик полягав у створенні одночасно функціонального та візуально привабливого сайту. Додамо сюди амбіційне бажання клієнта зробити його одним з кращих на ринку. Ще одна потужна мотивація для нас.
- Команда Goodface піклувалася про полегшення доступу до інформації, щоб користувач краще розумів продукти компанії. В нашому баченні дизайну не достатньо самої функціональності, він також має виглядати естетично.
- А зважаючи на велику кількість даних нам треба було так налаштувати взаємозв’язки між ними, аби користувачам було зручно з ними взаємодіяти.
Старий сайт UniferX
![](https://cdn.cases.media/image/wide/1191c18a-859a-4522-916f-be8550ed6f98.png)
Рішення
План проєкту
![](https://cdn.cases.media/image/wide/485144fc-fadb-4456-80b7-8274c7233d30.png)
Дослідження
Фундамент для початку роботи — розуміння болей та потреб цільової аудиторії. Для цього ми провели дослідження ринку та аналіз конкурентів, знайшли інсайти та на основі них розробили детальний сценарій взаємодії користувача (user flow) і мапу сайту.
Аналіз конкурентів
![](https://cdn.cases.media/image/wide/84cfbb4b-ddef-4cd9-9c43-4f0caadafb3b.png)
Сегменти цільової аудиторії
Потреби, бажання, проблеми та вимоги
![](https://cdn.cases.media/image/wide/d6950cd5-c4a6-49d7-ac9e-87904b986aea.png)
Сценарій взаємодії користувача
![](https://cdn.cases.media/image/wide/8ea24c5c-9c28-4dd0-9df2-1d45f093ba30.png)
Схематичні макети (wireframes)
На етапі візуалізації ми створили інформаційну структуру у вигляді деталізованих схематичних макетів (wireframes) з чітким баченням того, як буде розташована інформація на сторінках.
Далі команда розробки створила Специфікацію з вимогами до функціональності сайту.
Дизайн-концепти
Наступним кроком було створення дизайн-концептів. Ми запропонували два стилі, зроблені на основі мудбордів.
- Перший втілював сучасні підходи до дизайну: поєднання простих геометричних форм у нестандартному вигляді, велику типографіку, анімації, динамічну сітку.
- Другий був виконаний у темних тонах, з використанням сучасного тренду Bento UI.
![](https://cdn.cases.media/image/wide/1a55e52e-2c0b-4035-b3cc-1fbf2e70d7d3.png)
Дизайн
На етапі дизайну наша команда працювала над створенням розширеного пошуку всередині сайту та інтерактивною мапою, яка допомагає швидко знаходити дистриб’юторів.
- На новому сайті ми покращили фільтри продуктів, які спрощують процес вибору товарів.
- Динамічні анімації під час скролу додають плавності та забезпечують більш цікавий користувацький досвід.
![](https://cdn.cases.media/image/wide/a9383ecb-f891-4270-95bf-0540ce67a865.png)
![](https://cdn.cases.media/image/wide/7fd4576e-b7b8-41ac-9280-58a1480f70a0.png)
![](https://cdn.cases.media/image/wide/3651a034-befd-4c03-9dc7-af7cf1360c6f.png)
![](https://cdn.cases.media/image/wide/f2b84df0-4aef-4ee0-a773-27e663c3283a.png)
Розробка
Технічна реалізація у нас йшла в три етапи: Frontend, Backend і Quality Assurance.
React.js для Frontend та Laravel PHP для Backend — це ті технології, що дозволили нам легко масштабувати сайт, зробити його швидким і оптимізованим. З ними наші розробники мали гнучкість при керуванні великими об’ємами даних.
![](https://cdn.cases.media/image/wide/5a026b05-93ee-4205-8760-9ae090ae1ba8.png)
Frontend
На етапі Frontend нам вдалося знайти правильний підхід до створення і масштабування компонентної системи. Також у нас вийшло втілити привабливі анімації без просідання в швидкості роботи чи SEO-оптимізації.
![](https://cdn.cases.media/image/wide/95c54867-da69-4c27-98e0-a6f8512d4189.png)
![](https://cdn.cases.media/image/wide/9798d021-9f47-415b-9192-ff7928e75a5a.png)
![](https://cdn.cases.media/image/wide/528c6f4c-1a2c-4988-943f-56d6349831ba.png)
Backend
Наші Backend-розробники втілили крос-кантрі функціональність з підтриманням мультимовності. Тепер сайт адаптується під конкретну країну та показує потрібний контент потрібною мовою.
![](https://cdn.cases.media/image/wide/4bc03e78-d4fe-4abb-a054-b71ff8b35dfa.png)
Контент
Ми спростили навігацію, налаштувавши розумний пошук, в якому з великої кількості документів нашого сайту ми відбираємо потрібну інформацію.
Сайт насичений різними взаємозв’язками даних. Продукти пов’язані з культурами, результатами, країнами тощо. Тому наша команда побудувала правильну архітектуру взаємозв’язків всіх цих об’єктів даних.
Попри об’єм і складність даних на платформі нам вдалось не відійти від одного зі своїх принципів — фокусі на користувача. Тому керувати контентом комфортно і нескладно.
![](https://cdn.cases.media/image/wide/7f71de5e-a5fc-45e7-8e4b-f8cb252c41e9.png)
![](https://cdn.cases.media/image/wide/d02f17ae-bc90-4613-a563-5b65982c1299.png)
![](https://cdn.cases.media/image/wide/4d0c5691-2f34-4ea3-b055-5bb27ddd43cb.png)
![](https://cdn.cases.media/image/wide/f67fc0f4-bff9-4482-b24b-a4a62631bb47.png)
Результат
В підсумку ми отримали новий яскравий вебсайт, з покращеною навігацією, інтерактивними елементами та анімацією. Він ефективно залучає користувачів до подорожі сайтом. А завдяки оптимізації є швидким, доступним і зручним в управлінні контентом.
Сайт отримав нагороди від CSS Awards у номінаціях «Кращий UI дизайн», «Кращий UX дизайн» та «Краща інновація».
![](https://cdn.cases.media/image/wide/c6f2bba3-15d1-476d-8fdf-6728332a7876.png)
![](https://cdn.cases.media/image/wide/4d91ccd1-5928-4012-bdb7-37439aba308d.png)
Посилання 🔗
Вебсайт: uniferx.com | Більше наших робіт: goodface.agency/work