Переработал навигацию и представление данных в мобильном разделе «Продажи». Участвовал в адаптации новой дизайн-системы для приложения и работал с командой до релиза.

Продуктовый и UX/UI-дизайн · До 6 месяцев · Android и iOS

Saby Business помогает руководителям и бухгалтерам контролировать продажи и финансовые показатели бизнеса с телефона.

Приложение постепенно переходило на новую дизайн-систему. Часть разделов уже обновили, а «Продажи» оставались в старом интерфейсе. Различались не только оформление, но и способы навигации и представления информации.

Внутри раздела возникала путаница с переходами: пользователю было не всегда понятно, где искать нужные сведения и куда приведёт нажатие. Одновременно расширялись возможности продукта и детализация данных, которые нужно было разместить в мобильном интерфейсе.

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

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

Работал с другими дизайнерами, менеджером проекта, аналитиком и мобильными разработчиками. Обновлял документацию и участвовал в обсуждении реализации для Android и iOS.

Проект занял до полугода. Я участвовал до релиза; последующие небольшие обновления проходили уже после моего ухода из компании.

Структуру раздела прорабатывали на основе требований и обсуждений с аналитиками.

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

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

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

Основные экраны организованы как набор виджетов. В верхней части представлены динамика продаж, разбивка по способам оплаты и краткие показатели — количество чеков, средний чек и клиенты. Ниже расположены тематические блоки.

Такая структура позволяет сначала посмотреть общие сведения, затем выбрать интересующее направление: товары, сотрудников, кассы или конкретные продажи.

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

Обновление затронуло и вложенные разделы. В них можно просматривать данные за выбранный период, изучать показатели товаров, сотрудников и касс, переходить к списку продаж и отдельной продаже.

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

По ходу работы я создавал интерактивные прототипы. Их согласовывали с менеджером проекта, разработчиками и руководством.

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

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

Обновлённый раздел «Продажи» вышел в релиз. Команда реализовала согласованные требования и перевела раздел на новую дизайн-систему.

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

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