B2B-веб-портал для коворкингов «Топ-скоп»
Объединяет разрозненные сервисы в единую систему управления филиалом. Полный цикл: от исследований
до дизайн-системы.
до дизайн-системы.
UX/UI дизайн (End-to-End)
Роль
Срок
Результат
3 недели
30+ экранов, дизайн-система
Проблема
Бизнес-задача
Пользовательская задача
Сеть коворкингов росла. Администраторы утонули
в разрозненных сервисах,а поддержка нескольких инструментов стала дорогой и неудобной.
в разрозненных сервисах,а поддержка нескольких инструментов стала дорогой и неудобной.
Нужно объединить всё в единую систему, чтобы снизить затраты и упростить работу персонала.
Администратор должен за 5 секунд оценить обстановку
в филиале.
в филиале.
Процесс:
01. исследование и анализ
02. проектирование логики
03. вайрфрейминг
04. визуальный дизайн и доступность
05. систематизация
01. исследование и анализ
Я провела анализ 3 аналогичных CRM-систем для администрирования. Выявила общие проблемы: перегруженность интерфейса, сложная навигация, слабая контрастность. Эти моменты критичны при долгом взаимодействии с интерфейсом.
Администратор не должен бороться с интерфейсом во время работы.
В первую очередь важна возможность оперативно выполнять базовые действия и мгновенная считываемость статусов. Информация должна быть плотной, но не создавать визуальный шум.
В первую очередь важна возможность оперативно выполнять базовые действия и мгновенная считываемость статусов. Информация должна быть плотной, но не создавать визуальный шум.
Ключевой инсайт:
02. проектирование логики
Разработала информационную архитектуру (меню, разделы) и прописала ключевые сценарии использования (регистрация посетителя, бронирование переговорки, учет оборудования), чтобы убедиться,
что пользователь не заблудится в интерфейсе.
что пользователь не заблудится в интерфейсе.
03. вайрфрейминг
На этапе вайрфреймов сфокусировалась на логике и структуре. Использовала метод прогрессивной детализации: от общей компоновки
к проработке состояний элементов. Это помогло проверить сценарии
на удобство и убрать лишнее, обеспечив высокую информационную плотность без визуального шума.
к проработке состояний элементов. Это помогло проверить сценарии
на удобство и убрать лишнее, обеспечив высокую информационную плотность без визуального шума.
04. визуальный дизайн и доступность
Разработала минималистичную корпоративную палитру с одним акцентным синим цветом. Синий цвет воспринимается человеком нейтрально и не вызывает раздражения при длительном использовании. Выбрала шрифт IBM Plex Sans за его читаемость в интерфейсах с высокой информационной плотностью. Интерфейс построен на 12-колоночной сетке с акцентом
на воздушность: лёгкие карточки, мягкие тени вместо обводок, скруглённые элементы.
на воздушность: лёгкие карточки, мягкие тени вместо обводок, скруглённые элементы.
Особое внимание уделила доступности: проверила контрастность, отказалась от светло-серого текста, все иконки продублировала подписями, а ключевые действия предусмотрела в нескольких вариантах для гибкости использования.
05. систематизация
Собрала UI-кит, который стал основой для масштабирования продукта. Включила в него: типографику (IBM Plex Sans), цветовую палитру, систему теней и скруглений, библиотеку иконок, а также готовые компоненты — элементы управления и карточки.
Все компоненты имеют прописанные состояния (default, hover, active, disabled), что упрощает передачу макетов в разработку и гарантирует консистентность интерфейса при росте продукта.
Ожидаемое влияние на метрики
Поскольку проект находится на стадии концепта, реальные метрики будут собраны после внедрения. Однако на этапе проектирования я определила целевые показатели, которые помогут оценить эффективность решения:
Метрика
Цель
Как измерить
Время на регистрацию
Ошибки бронирования
Время обучения
SUS (удобство)
Сократить до 2 мин
Снизить на 30%
≤ 1 дня
≥ 75 баллов
Трекинг действий в системе
Опрос новых сотрудников
Стандартный опросник
Анализ логов ошибок
Выводы и уроки
Проект научил меня балансировать между функциональной насыщенностью
и визуальной лёгкостью. Главной сложностью было уместить много данных
в интерфейс, сохранив воздушность и читаемость. Я несколько раз перерабатывала способ отображения таблиц, пока не нашла оптимальный вариант.
и визуальной лёгкостью. Главной сложностью было уместить много данных
в интерфейс, сохранив воздушность и читаемость. Я несколько раз перерабатывала способ отображения таблиц, пока не нашла оптимальный вариант.
Я прокачала навык работы с высоконагруженными интерфейсами и углубила знания в доступности. Если бы было больше времени, провела бы глубинные интервью
с администраторами до проектирования — это помогло бы точнее попасть в их потребности.
с администраторами до проектирования — это помогло бы точнее попасть в их потребности.
Главный инсайт: для администраторов скорость работы в приоритете, но визуал нельзя игнорировать. Продуманный UI снижает утомляемость при долгой ежедневной работе.