Упс! Не вдала спроба:(
Будь ласка, спробуйте ще раз.

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

Анастасія Мусієнко
Анастасія Мусієнко Сo-founder, Lead Product Designer at Revend Group
0
8 хвилин читання
Pla:ngo — реалізація сучасного SaaS-рішення з фокусом на користувача зображення 1

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

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

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

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

Виклики

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

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

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

Дослідження

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

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

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

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

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

Підписуйтеся на наші соцмережі

Реєстрація

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

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

Анкетування

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Якщо ви хочете поділитися з читачами SPEKA власним досвідом, розповісти свою історію чи опублікувати колонку на важливу для вас тему, долучайтеся. Відтепер ви можете зареєструватися на сайті SPEKA і самостійно опублікувати свій пост.
0
Icon 0

Підписуйтеся на наші соцмережі