UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Pla:ngo — реалізація сучасного SaaS-рішення з фокусом на користувача.
Анастасія Мусієнко
Анастасія Мусієнко

Опубліковано

Pla:ngo — реалізація сучасного SaaS-рішення з фокусом на користувача.

Pla:ngo є SaaS-рішенням для підтримки, управління та оптимізації співпраці між громадськими організаціями, соціальними підприємцями та корпораціями. Діяльність платформи спрямована на успішну реалізацію програм ESG та створення позитивного впливу. Також платформа допомагає знаходити партнерів, сприяє масштабному та ефективному міжсекторальному співробітництву, забезпечуючи прозорі та надійні партнерські рішення.

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

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

Environmental, Social, and Corporate Governance, ESG — це сукупність характеристик управління компанією, за якого досягається залучення цієї компанії до вирішення екологічних, соціальних та управлінських проблем.

Image description

Виклики

  • Створити функціональне SaaS-рішення з естетичним та сучасним дизайном.
  • Адаптувати та переглянути попередні дизайнерські розробки, щоб вони відповідали новим стандартам.

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

Image description

Дослідження

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

Image description

Етапи дизайну

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

Image description

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

Реєстрація

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

Image description

Анкетування

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

Image description

Профіль організації

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

Image description

Сторінка проєкту

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

Image description

Кольори та стиль

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

Image description

Інтегрований чат для комунікації

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

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

Image description

Універсальна адаптивність

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

Image description

Статусна навігація

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

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

Image description

Відгук компанії AboveBits

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

Переглянути відгук на Clutch.co

Image description

Результат співпраці

AboveBits (USA) —Міжнародна команда. Веб-розробка, мобільна розробка
700+ реалізованих проектів. 15 років на світовому ринку. З 2006 року Above Bits є командою, до якої звертаються за веб-дизайном у Шарлотті, штат Північна Кароліна, виконавши понад 1 000 проектів зі смаком і витонченістю.

Revend Group (Україна) — веб-дизайн агенція, яка спеціалізується на підсиленні та підвищенні експертизи дизайн-команд за короткий термін (outsourcing).

Діяльність компанії включає дизайн веб-сайтів, мобільних додатків, SaaS, CRM, ERP, інтернет-магазинів та інших продуктів, що сприяють зростанню наших клієнтів.

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

Посилання

Сайт Revend Group — ua.revend.group
Clutch — clutch.co/profile/revend-group
Linkedin — linkedin.com/company/revendgroup

Топ коментарі (0)