UX/UI дизайнер Алексей Жиляков

SberDevices

Мобильное и веб-приложение для системы контроля за инспекциями на производстве гаджетов
моя роль
продуктовый дизайнер
проект компании
IT Test
результат
1. Перенесли всю цепочку задач в единую цифровую систему – от создания инспекций до аналитики;
2. Сделали процесс удобнее для инспекторов и руководителей, что ускорило процесс работы и снизило число ошибок;
3. Сократили время подготовки отчётов в несколько раз.

о проекте

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

Мы разработали единую цифровую систему, которая охватывает весь процесс проверки — от создания чек-листов до удобной аналитики в веб-интерфейсе, — а также мобильное приложение, позволяющее инспекторам фиксировать результаты прямо на месте. Это решение избавляет от лишней ручной работы и позволяет быстро выявлять проблемы с качеством.

сложности

построение дизайн-системы (ДС) с нуля
Нам не подошла готовая ДС клиента, так как не содержала достаточного количества UI-элементов. Вместо этого мы создали свою систему под требования Flutter – фреймворка для создания мобильных приложений.
дизайн веб и планшетной версии приложения
Сначала мы сделали веб-часть приложения, а затем сделали планшетную версию для инспекторов. Чтобы адаптировать веб-интерфейс к планшетной части, нужно было постоянно держать в голове необходимость адаптации.
сжатые сроки
работы
сжатые сроки работы
Клиент хотел запустить проект побыстрее, а IT-компания – занять разработчиков, поэтому я занимался проектом фулл-тайм и делал до 8 экранов за рабочий день.
регулярные доработки системы
После того, как MVP был успешно запущен, мы улучшали юзабилити и добавляли новый функционал – массу фич, возможность создания печатных отчетов, блок аналитики и многое другое.

Проектирование

Я начал с разработки CJM для разных ролей пользователей и по мере работы делал прототипы все более детальными.
120 экранов содержал прототип для веб-версии приложения

Разработка дизайн-системы

Совместно с арт-директором мы с нуля построили дизайн-систему, подходящую требованиям мобильного фреймворка Flutter. Она оказалась эффективной, и далее я неоднократно использовал её в других интерфейсах, адаптируя под стиль и задачи других проектов. В UI-ките содержится около 35 элементов.
Компоненты на примере кнопки

Дизайн

300+ экранов в финальном приложении (веб+мобайл)

Развитие и доработки

После того, как MVP был успешно запущен, мы улучшали юзабилити и добавляли новый функционал по результатам взаимодействия с инспекторами.
• Загрузка медиафайлов в отдельных очередях;
• Счетчики проверенных устройств;
• Обязательные фото для загрузки;
• Метка повторной инспекции;
• Возможность пропустить шаг в инспекции.
• Массовые дефекты;
• Добавление новых измерений;
• Учёт времени на дорогу;
• Редизайн страницы задачи;
• TV dashboard;
• Мультиязычность (русский, английский и китайские языки).
TV dashboard

Результат

Я сделал внешний вид и юзабилити для уникального решения на рынке контроля умных устройств. Эта платформа для комплексного контроля качества, доступная через веб-интерфейс и мобильные устройства, ускорила процесс работы клиента и дала возможность оцифровать данные, чтобы впоследствии улучшить их.