Прототипы интерфейса

На прототипах согласовали информационную архитектуру, иерархию элементов, и их взаимное расположение, с учётом приоритетов от бизнеса и аналогичных удачных решений.

Дизайн-концепт

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

Стартовая страница

В интерфейсе личного кабинета сделали чистый визуал с цветовыми акцентами на целевых действиях. В дизайне стремились не перегружать, сделать интерфейс удобным для регулярного использования.

Расписание специалиста

На странице специалиста сразу видно доступные варианты для бронирование. Отображаем стоимость и длительность сессии, показываем часовой пояс при выборе времени и даём возможность выбрать ближайшее доступное время специалиста в один клик.

Бронирование и оплата

При бронировании времени выводим сводную информацию для проверки. Для групповых сессий предусмотрено поле "пригласить по email".

Онлайн-сессии

В назначенную дату и время создаётся онлайн-встреча внутри платформы. Вторым этапом планируется реализация групповых сессий с участием нескольких клиентов.

Настройки профиля

В настройках профиля помимо управления информацией добавили уровень специалиста, который завязан на количество проведённых сессий и влияет на размер комиссии сервиса.

Баланс аккаунта

В личном кабинете предусмотрен баланс: клиент использует баланс для оплаты онлайн-сессий. Специалист получает на баланс средства от успешно проведённых сессий.

Отзывы

На страницу специалиста в каталоге добавили блок с отзывами, чтобы клиенту было легче найти своего специалиста, сравнить и определиться с выбором.

Состояния экранов

В дизайне предусматриваем все состояния экранов, в том числе отправку отзыва, состояние модерации, отклонение отзыва и публикацию на странице специалиста.

Админка и статистика

Для администраторов в личном кабинете сделали раздел со статистикой по сессиям, финансам и пользователям. В дальнейшем предполагается масштабировать этот раздел.

Контроль сессий

В админ панели предусмотрено расширенное управление основными сущностями: пользователи, сессии, финансовые операции, отзывы.

Настройка расписания

Реализовали удобное расписание в ЛК специалиста, где он может отмечать слоты, доступные для бронирования клиентами. Предусмотрели опции уйти в отпуск, сдублировать расписание на следующий месяц и скопировать слоты на другой день.

Макеты в Figma в 5 размерах

Сделали макеты в 5 разрешениях для всех страниц всех ролей. Предусмотрели макеты для стейтов: состояния до начала сессии, во время и после завершения.

Шаблоны email писем

Сделали тексты ошибок, уведомлений, подсказок. Составили список системых событий и шаблоны email уведомлений для каждой роли.

UX-тесты на пользователях

После согласования прототипа мы собрали фокус-группу из психологов в качестве респондентов, подготовили задания по прототипу и провели UX тестирование, чтобы выявить проблемы в интерфейсе, понять, что неудобно или чего не хватает. Как итог — доработали интерфейс с учётом пожеланий специалистов.

UI kit

Реализовали необходимые UI компоненты и их основные состояния, чтобы у разработчиков не осталось вопросов как должен вести себя интерфейс в том или ином случае.

Типографика

Реализовали правила, по которым выстроена типографика проекта, поведение шрифтов в зависимости от разрешения экрана, начертания и семантики страницы.

Размерности и адаптивы

Определили брейкпоинты для разработки под популярные устройства и разрешения экранов, чтобы дизайн выглядел консистентно, не зависимо от контекста использования.

Цветовая палитра

Разработали правила колористики с учётом принципа контрастности, составили правила построения теней у элементов. Определили основные оттенки и акцентные цвета.

ACL

Реализовали правила разграничения доступа к разделам и функционалу для всех ролей пользователей. Позже ACL будет использоваться разработчиками при проектировании архитектуры приложения.

Готовность к разработке

Таким образом за 3 месяца проведены все необходимы предпроектные работы, реализован дизайн-проект интерфейса и UI-kit необходимых компонентов с основными состояниями, правила колористики и типографики проекта. Интерфейс протестирован на реальных пользователях, проверены основные бизнес-гипотезы, найдены слабые места в дизайне и улучшены до разработки.