service

Дизайн SaaS-платформи для онбордингу simpl.cx

Дизайн головної сторінки проєкту Дизайн SaaS-платформи для онбордингу simpl.cx

Задача

Спроєктувати UX/UI дизайн SaaS-платформи simpl.cx для створення інтерактивних відео-турів онбордингу з кабінетом клієнта, адмін-панеллю та вбудованим JS-віджетом.

Зроблено

Аналіз

Прототипи

Дизайн

Кабінет користувача

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

Дашборд користувача

Вхід і реєстрація

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

Вхід

Вхід

Реєстрація

Реєстрація

Проєкти

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

Усі проєкти

Усі проєкти

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

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

Перегляд маршруту (Journey View)

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

Плеєр маршруту

Плеєр маршруту

Запит на допомогу

Запит на допомогу

Завершення відео

Завершення відео

Чекпойнт та матеріали

Чекпойнт та матеріали

Планування зустрічі

Планування зустрічі

Фінал маршруту

Фінал маршруту

Інші сторінки

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

Налаштування профілю

Налаштування профілю

Надання доступу

Надання доступу

Зміна пароля

Зміна пароля

Вбудований віджет JS

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

Згорнута кнопка віджета

Згорнута кнопка віджета

Вибір категорії

Вибір категорії

Відеоплеєр у віджеті

Відеоплеєр у віджеті

Корисні матеріали

Корисні матеріали

Меню запуску віджета

Меню запуску віджета

Список маршрутів

Список маршрутів

Опис етапу

Опис етапу

Форма допомоги

Форма допомоги

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });
Розробник

Color Styles

Pink
Purple
Orange
Green
Blue
Дизайнер

Адмін-панель

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

Дашборд адміністратора

Вхід і реєстрація в адмін-панель

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

Вхід в адмінку

Вхід в адмінку

Реєстрація автора

Реєстрація автора

Медіатека

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

Усі медіафайли

Усі медіафайли

Завантаження відео

Завантаження відео

Створення папки

Створення папки

Вміст папки

Вміст папки

Каталог маршрутів

Пропрацьовано всі стани розділу маршрутів (Journeys): від порожнього екрана під час першого запуску та створення категорій до таблиці активних і чернеткових сценаріїв із метриками переглядів.

Порожній стан

Порожній стан

Список категорій

Список категорій

Створення категорії

Створення категорії

Маршрути в категорії

Маршрути в категорії

Конструктор маршрутів

Покроковий редактор дозволяє легко зібрати інтерактивний маршрут: задати назву, додати відеоролики з медіатеки, прикріпити корисні посилання та налаштувати контрольні точки (Checkpoints) із тестовими запитаннями для перевірки користувача.

Новий маршрут

Новий маршрут

Вибір відео з файлів

Вибір відео з файлів

Налаштування тесту

Налаштування тесту

Порожній редактор

Порожній редактор

Доданий відеокрок

Доданий відеокрок

Додавання чекпойнту

Додавання чекпойнту

Фінальний заклик до дії (CTA)

На завершальному етапі маршруту автор може налаштувати цільову дію для користувача (Final Call to Action) — наприклад, перехід за посиланням, бронювання дзвінка або відправку форми, а також захист від випадкового виходу без збереження змін.

Сценарій маршруту

Сценарій маршруту

Попередній перегляд

Попередній перегляд

Налаштування CTA

Налаштування CTA

Вихід без збереження

Вихід без збереження

Керування проєктами в адмінці

У розділі проєктів адміністратор об'єднує окремі маршрути у цілісні навчальні простори для різних продуктів або клієнтських команд і генерує код для вбудовування віджета.

Список проєктів

Список проєктів

Додавання маршруту

Додавання маршруту

Порожній проєкт

Порожній проєкт

Наповнений проєкт

Наповнений проєкт

Підписка та налаштування

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

Тарифні плани

Тарифні плани

Команда проєкту

Команда проєкту

Особисті дані

Особисті дані

Налаштування акаунту

Налаштування акаунту

Запрошення учасника

Запрошення учасника