CONVX OPSAGE

ПРОБЛЕМА

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

• Спростити складний онбординг — власникам ресторанів потрібно налаштувати компанію, локації та сторонні інтеграції (Google Reviews, TripAdvisor, Yelp, дані погоди) без технічних знань
• Збалансувати потужність із простотою — платформа інтегрує кілька джерел даних та AI-аналітику, але UI має відчуватися доступним
• Встановити масштабовану дизайн-систему — оскільки AI допомагає генерувати решту екранів, основні дизайн-правила мали бути кристально чіткими та консистентними
• Побудувати довіру через професійний дизайн — B2B ресторанні технології вимагають достовірності та полірування

РІШЕННЯ

Я спроєктував основну дизайн-систему та ключові користувацькі флоу, що вирішують ці виклики:

• Багатокрокові майстри онбордингу (4–5 кроків) з відстеженням прогресу
• Маркетплейс інтеграцій з фільтрацією та рекомендаціями
• Управління локаціями для ресторанних груп з кількома закладами
• Split-screen сторінки автентифікації, що балансують брендинг та юзабіліті
• Дизайн-система, яка працює і для людей-дизайнерів, і для AI-генерації

ПРОБЛЕМА

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

РІШЕННЯ

Я встановив комплексну дизайн-систему з чіткими правилами для кольорів, типографіки, відступів, компонентів та патернів взаємодії — єдине джерело правди для людей-дизайнерів та AI-генерації екранів.

ПРОБЛЕМА

Сторінки автентифікації часто нудні та незапам'ятовувані. Для B2B SaaS-платформи сторінка входу — це перше враження, яке має комунікувати професіоналізм та ідентичність бренду.

РІШЕННЯ

Я спроєктував split-screen лейаут автентифікації, що балансує брендовий сторітелінг із функціональною чіткістю:

• Ліва сторона (брендинг): темний синій фон з хвилястими синіми патернами, логотип CONVX, заголовок «Data Integration for Smart Restaurant Management» та мок-ап монітора з формою входу (мета-візуальне підсилення)
• Права сторона (функція): чистий білий фон з логотипом CONVX, підзаголовком «Restaurant Data Integration Platform» та формою входу
• Дизайн форми: поле email з іконкою конверта, поле пароля з іконкою ключа та перемикачем показу/приховування, чекбокс «Remember me» (синій відмічений стан), посилання «Forgot password?» синім, повнорозмірна синя кнопка «Sign In»
• Посилання «Don't have an account? Sign Up» унизу
• Карусельні крапки: три крапки внизу зліва, що позначають кілька брендових слайдів

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував чистий флоу реєстрації, консистентний з досвідом входу:

• Той самий split-screen лейаут для безперервності бренду
• Мінімальні обов'язкові поля: ім'я, email, пароль з підказками валідації
• Чіткі вимоги до пароля, показані інлайн
• Чекбокс згоди з умовами використання та політикою конфіденційності
• Безшовний перехід у майстер онбордингу компанії після реєстрації

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував мінімальний флоу відновлення пароля з кроком email-верифікації, що дотримується тієї ж візуальної мови, що й Sign In / Sign Up:

• Один email-інпут з чіткими інструкціями
• Стан успіху, що підтверджує надсилання посилання для скидання
• Посилання «Back to Sign In» для легкої навігації
• Консистентний split-screen брендинг для довіри

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував центрований модальний майстер з 5-кроковим відстеженням прогресу:

• Прогрес-бар: Name → Location → Places → Integrations → Save (зелений = завершено, синій = активний, сірий = в очікуванні)
• Хедер: заголовок «Edit Your Company» з кнопкою закриття (X)
• Область контенту: заголовок секції «General information about your company», інструктивний текст «Check the information. If everything is correct, create a company and start working with it.», поле Company Name («Eleven Madison Park») з іконкою портфеля, картки локацій (адреси США та Канади) з іконками мапи, картки прев'ю інтеграцій (Google Reviews та TripAdvisor Reviews) з логотипами та описами
• Кнопки дій: «← Previous Step» (контурна) + «Continue» (синя заповнена)
• Дизайн модалки: біла картка на світло-сірому фоні з тонкою тінню, заокруглені кути

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував маркетплейс інтеграцій з категорійною фільтрацією та візуальними рекомендаціями:

• Прогрес-бар: Name and Location → Places → Integrations (активний, синій) → Creation (сірий)
• Хедер: «Integrations» з info-іконкою для довідки
• Інструктивний текст: «Select the essential integrations to get started with your restaurant data pipeline. You can add more integrations later.»
• Категорійні фільтри: 3 pill-кнопки — «All +2» (активна, синій контур), «Review +2», «Weather»
• Картки інтеграцій (2-колонкова сітка): Google Reviews — логотип Google, бейдж «Recommended» (блакитна галочка), опис, синій відмічений чекбокс; TripAdvisor Reviews — логотип TripAdvisor, бейдж «Recommended», опис, синій відмічений чекбокс; Yelp Reviews — логотип Yelp, опис, порожній чекбокс; Weather Forecast — іконка погоди, опис, порожній чекбокс; Historical Weather — історична іконка, опис, порожній чекбокс
• Info-іконки: кожна картка має (i) іконку для детальної інформації
• Кнопки дій: «← Previous Step» (контурна) + «Next Step →» (синя заповнена)

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував інтерфейс вибору локацій з «Select All» та індивідуальними контролами додавання/видалення.

ПРОБЛЕМА

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

РІШЕННЯ

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

ПРОБЛЕМА

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

РІШЕННЯ

Спроєктував флоу «Create New Company», що віддзеркалює майстер онбордингу, дозволяючи користувачам додавати додаткові компанії до облікового запису.

ПРОБЛЕМА

З обмеженими дизайн-ресурсами масштабування платформи до 50+ екранів зайняло б місяці. AI міг би прискорити це, але лише за чітких дизайн-правил.

РІШЕННЯ

Я встановив експліцитні дизайн-правила та патерни, яким AI може слідувати для генерації консистентних екранів:

• Документоване використання компонентів: коли використовувати кнопки, картки, модалки, таблиці
• Шаблони лейаутів: стандартні структури сторінок (хедер → контент → дії)
• Правила відступів: консистентні поля та падінги
• Гайди використання кольорів: primary для CTA, secondary для акцентів, семантичні кольори для статусів
• Патерни взаємодії: як мають поводитися форми, фільтри та навігація
• Шаблони AI-промптів: структуровані промпти для генерації нових екранів за дизайн-системою