Кейс
Редизайн приложения для сотрудников FMCG-бренда
Проектирование основных сценариев приложения для чек-инов полевых сотрудников международного FMCG-бренда. Логику веб-версии пришлось переосмыслить под то, как на самом деле проходят визиты в магазины.
01
Контекст
Продукт
Мобильное приложение для полевых сотрудников, которые лично посещают торговые точки, проверяют выкладку товара и фиксируют проблемы на месте. Веб-версия уже существовала, и приложение строилось на её основе.
Проблема
Веб-сценарии не учитывали, как чек-ины проходят в полях: на ходу, одной рукой, в короткие промежутки времени и часто с перерывами посреди задачи. Логику чек-ина нужно было переосмыслить, а не просто ужать под маленький экран.
Моя роль
Часть экранов начиналась с вайрфреймов ведущего дизайнера, и моей задачей было довести их до финального UI. Для других вайрфреймов не было вовсе: здесь с нуля разрабатывались собственные решения, которые затем оценивала команда.
Объём работ
Онбординг · Поиск и фильтрация магазинов · Карточка магазина с историей чек-инов · Чек-ин и быстрый чек-ин · Интерактивный прототип всего сценария чек-ина.
02
Требования
Визиты в магазины проходят на ходу, и на каждую точку отведено мало времени. Отсюда два жёстких требования.
Скорость
Зафиксировать наблюдение фото, аудио или текстом нужно за секунды, а не минуты.
Прерываемость
Чек-ин можно открыть, свернуть и продолжить в любой момент без потери прогресса.
Вдобавок фирменный стиль нужно было совместить с новыми гайдлайнами Apple Liquid Glass для iOS, у которых ещё не было устоявшихся примеров в сторонних приложениях.
03
От списка с описаниями к трём иконкам
У шага выбора формата не было готового решения. Бриф задавал только ограничение: быстро фиксировать информацию о магазине и не проходить через ненужные форматы.
До финального варианта было четыре версии.
V1 · Список с описаниями
Понятно новичку, но слишком медленно для задачи, которую выполняют десятки раз в день.
V2 · Строка Quick Check-In + четыре иконки
Две конкурирующие точки входа на одном экране.
V3 · Сетка из четырёх иконок
Смешивала два решения: как записывать и насколько подробно.
V4 · Сетка из трёх иконок
Текст, аудиозапись, фото и видео. Quick Check-In переехал в плавающую кнопку.
04
Маленькая кнопка, на которой держится главное требование
За принципом «открыть, свернуть, продолжить где угодно» должно было стоять реальное взаимодействие. Сотрудников часто отвлекают посреди задачи.
Решением стала плавающая кнопка. Она остаётся на экранах поиска, карточки магазина и чек-ина: сотрудник может начать чек-ин, отвлечься и вернуться к нему с любого экрана. В ней же находится быстрый доступ к Quick Check-In.
Доступна на экране
Поиск магазинов
Доступна на экране
Карточка магазина
Доступна на экране
Чек-ин
05
Как совместить бренд и Liquid Glass
Две системы правил должны были работать вместе: устоявшийся фирменный стиль и Human Interface Guidelines от Apple для Liquid Glass. Готовых примеров, на которые можно опереться, не было.
Навигация строго следует гайдлайнам. Фирменный стиль остался на уровне контента, поэтому приложение воспринимается как нативное для iOS, а не как брендированная обёртка поверх него.
Нижняя шторка
Полупрозрачная, её можно перетаскивать. Она лежит поверх карты, поэтому сотрудник не теряет ориентацию.
Строка поиска
Отдельная стеклянная поверхность.
Таб-бар
Активный пункт в форме «таблетки», как в гайдлайнах.
Слой бренда
Цвета, иконки, фотографии.
06
Итоговый сценарий
1 · Поиск магазина
Карта или список с фильтрами по маршруту, сети или своей группе. В карточке видны расстояние, CRN, дата последнего визита и VPO.
2 · Карточка магазина и прибытие
Вкладки и ключевые метрики магазина. По прибытии баннер подтверждает визит, и становится доступна кнопка Start Check-In.
3 · Выбор формата
Текстовый комментарий, аудиозапись или фото и видео.
4 · Заполнение
Форматы можно сочетать в одном чек-ине, не начиная заново.
5 · Оценка
Запасы, холодильники и выкладка: каждый пункт оценивается пальцем вверх или вниз.
6 · Отправка
Чек-ин появляется в карточке магазина.
07
Результаты
Клиент утвердил представленный дизайн и сценарий, проект передан в разработку.
Что сделано
- Сквозной сценарий: поиск и фильтры → карточка магазина → чек-ин
- Несколько проработанных решений для точки входа в чек-ин
- Механика плавающей кнопки чек-ина
- Онбординг, личный профиль и аналитический дашборд на данных чек-инов
- Дизайн-система на стыке бренда и Liquid Glass
- Интерактивный прототип
08
Выводы
Практика с Human Interface Guidelines
Практический опыт, который пригодится в будущих iOS-проектах.
Дизайн без брифа — отдельный навык
Для точки входа в чек-ин была только проблема, без готового решения. В итоге выбрано не самое новаторское направление, а самое понятное с первого взгляда.
Маленький элемент интерфейса может нести большое требование
Плавающая кнопка выглядит мелочью, но именно в ней главное бизнес-требование превратилось в реальное взаимодействие.