Отримайте наш безкоштовий FinTech 📘 гайд з 30 прийомами для конверсії з найкращих сайтів світу 👈
Отримайте наш безкоштовий FinTech 📘 гайд з 30 прийомами для конверсії з найкращих сайтів світу 👈
Отримайте наш безкоштовий FinTech 📘 гайд з 30 прийомами для конверсії з найкращих сайтів світу 👈

OmniNEW - goodface.agency

Платформа для управління та налаштування серверів Discord

Індустрія

  • SaaS

Експертиза

UX/UI дизайн, фронтенд розробка, бекенд розробка

Період розробки

2023

1. Goodface agency - case Omni - Dashboard.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Про клієнта

До нас звернулась стартап-команда з Америки. Вони мали великий досвід керування Дискорд серверами. 

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

2. Goodface agency - case Omni - Project plan.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Склад команди

Управління

Avatar-1.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Менеджер проєкту

Дизайн

Avatar.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Дизайн-лід

Avatar-6.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

UX/UI дизайнер

Розробка

Avatar-2.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Фронтенд розробник

Avatar-3.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Бекенд розробник

Avatar-9.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

QA

Avatar-7.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

DevOps

Виклик

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

Оскільки продукт мав амбітний намір керувати застосунком Дискорду, нам потрібно  
було побудувати правильну архітектуру і структуру його взаємозв'язків із Дискордом.
І на додачу: виявити всі потенційні можливості, де ми можемо керувати Дискордом,  
як додатком, і покращувати користувацький досвід. 

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

Глобальна мета полягала у виведенні нового продукту, який поєднає в собі рішення,  
і для бізнесів, і для підприємців, і для будь-яких інших ком'юніті, на кшталт геймерів,  
які користуються Дискордом. Omni ж, як проєкт, дає більше повноважень кастомного  
управління своїм Дискорд сервером. Команда Goodface мала працювати над  
глобалізацією всіх продуктів та інтеграцією всіх фукнцій.

3. Goodface agency - case Omni - Dashboard mockup.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Рішення для Omni

Підхід

У Goodface є дві моделі взаємодії: технічний партнер і виділена дизайн-команда. 

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


Відкриття та дослідження

В основі має бути закладена правильна архітектура. 

Для цього ми провели UX дослідження. Воно почалося зі створення мапи маршруту
користувача (customer journey map). Ми чітко визначили взаємозалежності функцій,
керування ролями та отримали візуальну структуру функціоналу, який мали втілити. 

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

Як результат, ми мали комплексне уявлення взаємозв'язків, функціональну мапу
проєкту та розуміння плану роботи над проєктом.

4. Goodface agency - case Omni - Wireframes.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
5. Goodface agency - case Omni - User flow.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Дизайн

Цю стадію проєкту Omni почали з пошуку дизайн-концепцій. 

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

Завершили фазу створенням макетів та масштабованої дизайн-системи UI-компонентів.

11. Goodface agency - case Omni - Server Guard.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
7. Goodface agency - case Omni - Select server & component.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Дизайн-система

Завершили фазу створенням макетів та масштабованої дизайн-системи UI-компонентів.
5. Goodface agency - case Omni - Components.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
6. Goodface agency - case Omni - UI lit.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Розробка

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

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

14. Goodface agency - case Omni - crypto statistics counters.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
10. Goodface agency - case Omni - Statistics Chanels.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Розробка

Окремим викликом в проєкті Omni була робота над
тим, аби зробити систему масштабованою. Адже
очікували на велику кількість юзерів. Це треба було врахувати, будуючи бекенд частину аплікації. 

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

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

12. Goodface agency - case Omni - server rank card.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
13. Goodface agency - case Omni - XP & Levels.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
18. Goodface agency - case Omni - Role selection.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Розробка

Після першого Friends and Family тесту ми з клієнтом прийшли до висновку, що запускати MVP недоцільно, адже ми мали недостатньо велику кількість функціоналу, попри те, що все було зроблено швидко. 

Тому вирішили продовжувати активну фазу розробки до повноцінного завершення продукту. 

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

9. Goodface agency - case Omni - Pricing Cards.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
15. Goodface agency - case Omni - Server Statistics & Logo.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Розробка

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

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

Що маємо в результаті? За чотири місяці ми прийшли до повноцінного MVP, а за наступних
вісім місяців побудували комплексний багатофункціональний продукт.

8. Goodface agency - case Omni - Message Builder.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
17. Goodface agency - case Omni - Component & XP Levels.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
16. Goodface agency - case Omni - Message builder Desktop & Mobile.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works

Результат

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

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

19. Goodface agency - case Omni - All screens.png - UX/UI дизайн та розробка для SaaS рішення для Discord - api.goodface.works
Перехід бізнесу 

на
 новий рівень
в одній простій дії
Написати GoodfaceSmile - goodface.agency
Close
Checkmark - goodface.agency

Заповніть простий бриф

Ми відповімо найближчим часом на email

Close

ПОЛІТИКА КОНФІДЕНЦІЙНОСТІ

Ласкаво просимо до Повідомлення про конфіденційність Goodface.

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

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

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

ІНФОРМАЦІЯ, ЯКУ МИ ЗБИРАЄМО

Коли ви відвідуєте наш веб-сайт, наші сервери можуть автоматично реєструвати стандартні дані, надані вашим веб-браузером. Ці дані вважаються "неідентифікуючою інформацією", оскільки вони не ідентифікують Вас особисто. Він може включати:

  • Адреса Інтернету (IP) вашого комп’ютера;
  • Тип і версія браузера;
  • Сторінки, які ви відвідуєте;
  • Час та дата вашого візиту;
  • Час, проведений на кожній сторінці;

ІНШІ ДЕТАЛІ

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

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

Ми оброблятимемо персональні дані та спілкуватимемось з вами лише в тому випадку, якщо:

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

2. Виконання контракту

3. Де ми маємо законний інтерес для зв’язку з вами стосовно наших продуктів та послуг

ВИКОРИСТАННЯ ІНФОРМАЦІЇ

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

Права та вибір:

  • Подивіться, які дані ми маємо про вас, якщо такі є;
  • Змінюйте / виправляйте будь-які дані, які ми маємо про вас;
  • Попросіть нас видалити будь-які дані про вас;
  • Подивіться, які заходи безпеки ми застосовуємо до ваших даних;
  • Висловіть будь-яке занепокоєння щодо використання нами ваших даних;

Ви можете будь-коли відмовитися від будь-яких майбутніх контактів від нас за адресою електронної пошти, вказаної на нашому веб-сайті: goodface.agency