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

Проєкт

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

socialbusiness.in.ua розвиває професійний потенціал соціальних підприємців, формує суспільну думку, будує екосистему для розвитку, адвокатує сприятливе законодавство, займається онлайн-консультаціями для соцбізнесу (для цього залучаються фахові юристи, маркетологи, фінансисти).



Завдання

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

Процес

Основними етапами при створенні сайту були:

  • UI design;
  • Front-end та back-end;
  • наповнення та тестування;
  • інтеграції та синхронізації.

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

Кольори та шрифти

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

Wireframes

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

Мобільна версія

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


Результат:

Цей ресурс перевершив будь-які сподівання. Створений у стилістиці Material Design та зі струнким UX-ом, проведеним ще на початку, цей сайт став найбільшою базою знань для соціальних підприємців всієї України. Зручна система тегів та напрямків, велика кількість відвідувачів та просте модерування – ось головні складові успіху платформи.