Timebox Camera — Уравление таймлапс-камерой

Zilant Media · 2019
Роль: Art Director / Product Designer (UX/UI)
Платформа: Mobile Web 2020-2021

Пользователи арендовали таймлапс-камеру, но не могли управлять ей самостоятельно и постоянно обращались в поддержку. Я сделал мобильный веб-интерфейс управления камерой: ключевые сценарии, дизайн-система, прототип и иллюстрации + встроенный онбординг и гайд. Результат — типовые операции ушли в самообслуживание, поддержка разгрузилась, а продукт получил “витрину” для коммуникации и продаж.

Контекст

Timebox Camera — сервис аренды таймлапс-камеры. Пользователям нужно не “получить устройство”, а управлять съёмкой на объекте: быстро менять параметры, контролировать статус, реагировать на ошибки.
До проекта это делалось через саппорт: пользователь писал/звонил, и сотрудник выполнял действия вручную.

Проблема

Сейчас у пользователя нет самообслуживания, поэтому почти любое действие приходится делать через поддержку. При этом съёмка происходит на объекте — интерфейс должен работать быстро и понятно: крупные элементы, быстрые действия, ясные статусы, часто при использовании одной рукой. Из-за этого особенно критичны ошибки и неопределённость: если камера «не отвечает», пользователь не понимает, что делать дальше, и снова обращается в саппорт.

Типовые запросы в поддержку

  • Поставьте интервал съёмки X минут
  • Запустите/остановите съёмку
  • Проверьте статус: камера онлайн? запись идёт?
  • Что делать, если связь пропала/ошибка?

Цель

Сделать мобильный веб-пульт, который позволяет пользователю самостоятельно: - управлять съёмкой (старт/пауза/стоп) - настраивать ключевые параметры - видеть статусы и понимать, что происходит - решать типовые проблемы через встроенные подсказки/гайд

Ограничения

  • Только веб (mobile web) — без нативных приложений.
  • Интерфейс должен быть устойчивым к реальным условиям: спешка, плохая связь, маленький экран.
  • Нужна дизайн-система, чтобы продукт развивался без “каждый экран заново”.

Моя роль

Я отвечал за продуктовую часть интерфейса и визуальную реализацию: - UX-структура и сценарии - UI и дизайн-система - интерактивный прототип - иллюстрации и коммуникационные состояния - онбординг и гайд внутри приложения

Решение

timebox-ru-1

Контрольный центр вместо «пульта»

Главный экран я спроектировал как Control Center: пользователь за 1–2 тапа попадает в нужный сценарий, не “проваливаясь” в лишние экраны. Это важно в полевых условиях, где часто нет времени разбираться и связь нестабильна.

Внутри — три уровня управления:

  • Мастер для новичка: кнопка «Быстрая настройка» запускает пошаговый сценарий, чтобы подготовить камеру к работе без чтения инструкции.
  • Разделы для опытного пользователя: список ключевых задач — настройки сети, настройки съёмки, статус оборудования, тестовый снимок, журнал событий, инструкция. Это быстрые точки входа вместо “одного большого экрана настроек”.
  • Контекстное главное действие: внизу вынесено «Продолжить съёмку» — чтобы возвращаться к процессу одним тапом (без поиска по меню).

Отдельно я сделал упор на прозрачные статусы и диагностику: в «Статусе оборудования» система показывает состояние подсистем (датчики, сеть, SIM, фотоаппарат, SSD) и позволяет перейти в «Ручное управление» — это снижает тревожность и заменяет часть вопросов в поддержку.

timebox-ru-2

Настройки — только по делу

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

timebox-ru-3

Гайд в сервисе

Так как у пользователя нет “оператора рядом”, внутри продукта: - короткий онбординг на первый запуск - контекстные подсказки в сложных местах - раздел “гайд/FAQ” прямо в приложении (что делать при проблемах) timebox-ru-4

Состояния и ошибки как часть UX

Я отдельно проработал: - loading / sync
- offline / плохая связь
- ошибки устройства
- подтверждения критичных действий (например, остановка съёмки) timebox-ru-5 Задача — чтобы пользователь не паниковал и не шёл в саппорт, а видел следующий шаг.

Дизайн-система

Собрал базу компонентов и правил: - кнопки и опасные действия - статусы и бейджи - формы и переключатели - сетка/отступы/типографика - иллюстрации для пустых и ошибочных состояний timebox-ru-5 Это ускорило сборку новых экранов и сделало интерфейс цельным.

Результат (примерные метрики, placeholder)

  • −38% обращений в саппорт по теме “управление камерой/настройки” в первые 4 недели после запуска.
  • −52% времени саппорта на одно типовое обращение (раньше объясняли/делали вручную, после — давали ссылку на самообслуживание + гайд).
  • 63% пользователей проходили онбординг до конца в первый день аренды, и ~47% открывали гайд хотя бы один раз (вместо звонка).
  • +18% конверсия из “аренда → повторная аренда” за счёт более предсказуемого опыта и меньшего стресса.
  • Появился новый канал коммуникации внутри продукта (онбординг/гайд/уведомления), который начал приносить ~12–15% заявок на доп. услуги/продление аренды (если у вас это было — оставь, если нет — убери).