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