Дизайн мобильного приложения для ФБУ «Уралтест»: запись на поверку и статусы приборов

Клиент и задача

ФБУ «Уралтест» – подразделение Росстандарта в Свердловской области и один из крупнейших центров метрологии в России. Клиенты центра сдают сюда средства измерений (СИ) на поверку, аттестуют испытательное оборудование и оформляют сопутствующие документы.

Чтобы заявки на всё это можно было подавать со смартфона, «Уралтесту» понадобилось мобильное приложение. В 2022 году мы сделали его дизайн: от анализа и карты переходов до готовых макетов и UI-кита для разработчиков.

Задач было четыре:

• составить карту переходов внутри приложения;
• сделать навигацию удобной для всех сценариев использования;
• разработать интерфейс в рамках существующего фирменного стиля «Уралтеста»;
• предусмотреть интеграцию приложения с корпоративным сайтом клиента.

Сначала логика, потом экраны

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

Этапов было три:

• анализ и UX-дизайн: бриф, функциональный анализ, информационная архитектура и User Flow;
• прототипирование: структура приложения, wireframe каждого экрана и интерактивные прототипы;
• UI-дизайн: визуальная концепция, UI-kit с компонентами, основные экраны и интерактивные макеты.

Карта переходов

После входа (авторизация по e-mail или коду заказчика, рядом регистрация) клиент попадает на главный экран. Отсюда шесть веток: результаты поверки, запись на сдачу и выдачу СИ, статусы приборов в поверке, пункты сдачи и выдачи, информация о готовности СИ и новости.

Глубже второго уровня приложение не уходит. Пункты сдачи открываются ещё и на карте, из информации о готовности можно перейти к списку СИ, из ленты новостей к отдельной новости. Такую плоскую структуру проще запомнить, и в ней трудно заблудиться.

Прототипы

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

Фирменный стиль в интерфейсе

Новый стиль для «Уралтеста» мы не придумывали. Интерфейс собран из существующего фирменного стиля центра: изумрудный, деним, тёмно-бордовый и насыщенный салатовый. Изумрудный стал основным цветом шапок и кнопок.

Шрифтов два: основной из семейства Circle и вспомогательный PT Sans.

UI-кит

Все элементы интерфейса мы собрали в UI-кит: палитру с оттенками и градиентами, кнопки и поля. Для каждого элемента показали все состояния: у кнопок их три (default, done, inactive), у полей четыре (default, done, error, on click). В состоянии ошибки под полем появляется подсказка вроде «Некорректно введён электронный адрес» или «Неверный пароль».

Кит пригодился и дизайнеру при подготовке макетов, и разработчикам: все состояния элементов собраны в одном месте, искать их по экранам не нужно. Так разработка идёт быстрее, а заказчик экономит время и деньги.

Экраны приложения

Внизу каждого экрана панель из пяти разделов: «Главная», «Результаты», «Запись», «Статус» и «Пункты». На главном экране клиент видит своё имя и код заказчика, готовность приборов по счетам, свою запись на сдачу или выдачу и свежие новости центра.

• Результаты поверки. Карточка прибора: тип, модификация, серийный номер, год выпуска, результат поверки и ссылка на результат во ФГИС «Аршин». Электронный документ можно посмотреть или скачать прямо с экрана.
• Оплата счетов. Список счетов с поиском и сортировкой по статусу и номеру. В раскрытом счёте дата, договор, количество СИ, даты готовности и оплаты, сумма и кнопка «Результаты работ».
• Пункты сдачи и выдачи. Списком или на карте, с адресом выбранного пункта.
• Регистрация. Короткая форма с подсказкой о длине пароля и обязательных полях.

Запись, статусы и уведомления

Запись на приём уместилась на одном экране в четыре шага: выбрать услугу (приём или выдача СИ), отметить счета, выбрать дату и время из предложенных слотов и подтвердить. Талон приходит по смс на указанный номер.

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

Результат

Макеты нужны были в сжатые сроки: разработчики ждали их, чтобы продолжать работу над приложением. Мы уложились в срок и передали «Уралтесту» карту переходов, прототипы, UI-кит и макеты основных экранов.

Если вам нужно приложение для клиентов, посмотрите разработку мобильного приложения и UI/UX-проектирование: разберём сценарии, соберём прототипы и сделаем дизайн в вашем фирменном стиле.