Спроектировал и разработал продукт для сервисных центров: клиентскую запись, рабочее место мастера и общую дизайн-систему с двумя темами.
В этом кейсе
ROMARO спроектирован прежде всего для смартфона. В кейсе — мой вклад, путь клиента от услуги до заявки, рабочее место мастера и дизайн-система. Сначала — мобильные главные экраны в двух темах, затем адаптация для компьютера. Палитры, типографика, компоненты и состояния раскрывают общую основу интерфейса. Завершает кейс результат работы.
Продукт и задача
ROMARO — веб-приложение для сервисных центров, спроектированное прежде всего для смартфона. Клиенту нужно найти услугу и договориться о визите с телефона. Мастеру — получить устройство с понятным контекстом и вести ремонт. Задача продукта — связать эти действия в один последовательный процесс.
Я самостоятельно спроектировал и разработал клиентский интерфейс и рабочий кабинет: структуру, формы, компоненты, взаимодействия и два оформления. Мобильный интерфейс задаёт основу клиентских сценариев; версия для компьютера сохраняет ту же логику.
Repair — нейтральная тёмная тема. Hatiko — светлая адаптация под готовую айдентику бренда. Мой вклад в Hatiko — перенос общей логики продукта в её визуальный язык.
Мобильная версия
Тёмная мобильная главная со стартом записи и быстрыми действиями. Закреплённая нижняя навигация открывает основные разделы.
Путь до заявки
Путь начинается с услуги. Её выбор передаёт в форму устройство и проблему, чтобы клиенту не пришлось вводить их заново. Если неисправность неизвестна, её можно описать своими словами.
Подробнее о решениях
Последовательная форма сосредоточена на одном вопросе: контекст устройства, время приёма, контакт и подтверждение. Основное действие находится внизу, ошибки — рядом с соответствующим полем. На последнем шаге сводка помогает проверить выбранные данные.
Время учитывает график филиала и означает приход в сервис, а не срок окончания ремонта. После сохранения клиент получает подтверждение, а визит появляется в рабочем кабинете. Сам ремонт начинается отдельно — при приёмке устройства.
Выбрать услугу
Категория, стоимость и запись рядом. Выбранная услуга передаёт свой контекст в форму.
Рабочее место мастера
Приёмка собирает фотографию, описание устройства, контакт, филиал и ответственного. Мастер получает рабочий контекст, затем ведёт этапы ремонта и стоимость. Карточка сохраняет связь устройства с историей действий.
Подробнее о решениях
Вкладки разделяют активную работу, входящие, переданные и завершённые ремонты. Комментарий клиенту и сообщение команде — разные поля: аудитория понятна до сохранения, внутреннее обсуждение остаётся внутри кабинета.
Передача в другой филиал состоит из отправки и подтверждения получения. Ответственность переходит явно: принимающая сторона продолжает работу, прежний филиал сохраняет историю.
Работа в контексте
Карточки показывают устройство и текущий этап, вкладки разделяют очереди. Приём нового устройства — рядом с рабочим списком.
Дизайн-система
Две темы опираются на общие роли и правила. Фон, текст, карточка, действие, граница, фокус и обратная связь имеют своё назначение. Компоненты получают значения темы и сохраняют понятное поведение.
Подробнее о решениях
Базовые элементы складываются в формы записи, карточки ремонта и рабочие экраны. Для них предусмотрены состояния выбора, ожидания, ошибки, недоступности и успешного действия.
Ниже — образцы элементов и их сочетаний. Переключение темы показывает, как одна структура работает в тёмном Repair и светлом Hatiko.
Типографика и форма
Repair использует Manrope Variable. В Hatiko интерфейс набран Aktiv Grotesk, брендовые заголовки — Mabry Pro. Основной текст 16 px, заголовок шага 30 px. Скругления и расстояния поддерживают иерархию между полем, карточкой и экраном.
От телефона до рабочего экрана
На телефоне форма сосредоточена на текущем шаге, карточки собраны в одну колонку. Широкий экран даёт пространство для списка и подробностей. Подписи, локальные ошибки и видимый фокус помогают ориентироваться.
Образцы компонентовНажимайте, выбирайте, вводите — образцы работают.
Кнопки и действия
Разная важность — один язык.
Поля и проверка
Подпись, подсказка и понятная ошибка.
Выбор и переключатели
Чекбокс, переключатель и список.
Вкладки и меню
Контекст остаётся рядом с действием.
Ключевые сведения о ремонте.
Карточка и этапы
Статус читается без открытия записи.
- Принят
- Диагностика
- В работе
- Готов
Диалог и подсказка
Дополнительный шаг без потери контекста.
Образцы можно переключать между двумя темами.
Цвета по назначению
12 ролей связывают кнопки, поля, поверхности и сообщения.
- Фон
- #090B0B
- Текст
- #F1F2F1
- Карточка
- #191C1C
- Главное действие
- #F1F3F2
- Текст действия
- #101312
- Вторая поверхность
- #272C2B
- Вторичный текст
- #A3AAA8
- Граница карточки
- #343938
- Граница поля
- #4C5351
- Фокус
- #BCC6C1
- Ошибка
- #FF8697
- Предупреждение
- #EED2A2
Типографика
Запись на ремонт
Выберите устройство и удобное время.
Подпись поля14 / 600
Иерархия показана на Manrope.
Форма и ритм
Скругления
Отступы
Успех
Изменения сохранены.
Ошибка
Не удалось загрузить данные. Попробуйте ещё раз.
Пустое состояние
Новая запись появится здесь.
Загрузка
Получаем данные…
Перед продолжением проверьте выбранные параметры.
Здесь показаны состояния интерфейса.
Результат
ROMARO объединяет клиентскую запись и работу команды в действующем продукте. Я довёл проект от структуры сценариев до интерфейса и разработки: услуги переходят в запись, визит — в рабочий кабинет, а приёмка создаёт контекст ремонта. Общая дизайн-система связывает формы и рабочие экраны, сохраняя два самостоятельных визуальных языка. Продукт используется реальными клиентами.