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

На проекте

1. Проводил ревью iOS-версии дизайна и формировал предложения по адаптации интерфейса под Android и улучшению кастомных элементов.
2. Корректировал свои предложения с учётом ограничений разработки.
3. Согласовывал результаты ревью с арт-директором, дизайнером клиента и самим клиентом.
4. Дизайнил интерфейс Android-приложения для телефона и планшета.

Клиент

FlippingBook предоставляет ИТ-решения для работы с флипбуками компаниям из Fortune 500. Флипбуки — электронные каталоги и презентации с эффектом перелистывания страниц и интеграцией звука, видео, ссылок и корзины покупок.

Задача

Увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков.

Решение

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

Интерфейс адаптировал по гайдлайнам Google Material Design 2, а позднее обновил по Material You. Такой подход обеспечил современный внешний вид, привычное и предсказуемое поведение элементов, сократил бюджет на разработку и поддержку.

Как выстроил процесс

Реализовал 6 спринтов дизайна мобильного и планшетного Android-приложения

Работа строилась спринтами

1. Изучал техническое задание.
2. Получал от дизайнера клиента iOS-макеты. Отсматривал их и отмечал, какие элементы будут адаптированы и улучшены.
3. Сначала обсуждал предложения с арт-директором и дизайнером клиента, некоторые отсеивали или искали им замену, которая устроит обе стороны: обновились требования, недопонял макет, попал в ограничения разработки — рабочий процесс. Затем предложения аргументировал клиенту.
4. После согласования собирал макеты Android-приложения.

Сначала адаптировал навигационные элементы

Верхняя навигационная панель

1. Увеличил высоту.
2. Поменял серую заливку на белую.
3. Убрал разделитель.

Панель перестала конкурировать с содержанием за внимание и сохранила свою изолированость:

Когда страница прокручивается, появляется тень, отделяющая панель от содержимого:

Нижняя навигационная панель

1. Сравнял по размеру с верхней, чтобы элементы навигации имели общий признак и проще распознавались.
2. Повысил контраст между активным и неактивным разделами.
3. Облегчил цвет заливки и вместо разделителя добавил тень для изоляции от содержания.

Впоследствии обновил навигационные панели по гайдлайнам Material YOU:

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

Переключатель содержимого секции
Сделал во всю ширину экрана, потому что он меняет содержимое секции, а не значение параметра внутри неё:

На планшете ограничил ширину сегментов переключателя, чтобы сохранить его целостность и обозначить область нажатия сегмента:

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

После навигации занялся адаптацией элементов управления

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

Меню действий с флипбуком
Удалил «flipbook» из названия пунктов, чтобы действия считывались лучше. Так можно, потому что меню открывается при нажатии на три точки у карточки флипбука, и действия контекстуально относятся к нему:

Добавил иконки пунктам «создание публичной ссылки» и «Удаление», чтобы выделить их как ключевые и опасные действия

Впоследствии обновил меню по гайдлайнам Material YOU:

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

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

Троббер

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

Диалоговое окно
Вместо барабана сделал список радиокнопок:

Тумблер

Когда приложение уже выглядело и вело себя как андроидное, улучшал кастомные элементы

Разделитель
Ссылки сгруппированы по дате создания и разделяются отцентрованной линией, но из-за одинакового стиля разделителей список сливается в единую массу.

Сделал разделитель во всю ширину для разделения дат. Разделитель, прижатый к правому краю и с отступом от левого края, разделяет ссылки, вложенные в дату:

В результатах поиска флипбуков использовал тот же принцип: первый элемент в иерархии — папка, а второй — флипбуки, вложенные в неё:

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

При прокрутке вниз кнопка уезжает под верхнюю панель, чтобы освободить вертикальное пространство для содержания, а при прокрутке вверх — появляется обратно:

Для смартфонов с диагональю 5,5-5,7 дюймов предложил показывать шит сортировки сверху вниз. Кнопка перехода к нему расположена вверху экрана, поэтому после нажатия палец остаётся сверху и сразу может взаимодействовать с настройками:

Идея интересная, но финально реализовали универсальное поведение для всех смартфонов.

Вывод

Удалось ли увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков?

Да. Приложением начали пользоваться клиенты веб-версии продукта. За год их число выросло до 10 000, а ещё через год — до 50 000. Андроид-приложение следует принципам платформы, сохраняя привычную пользователям рутину и освобождая их сознание для осмысленных задач.

Что было самым сложным

Двойное согласование: сначала с дизайнером клиента, затем с самим клиентом. Аргументация отнимала много времени и сил, а часть идей в первых спринтах отсекалась одним словом: «Нет».

Как я с этим справился
Изменил подход к аргументации. Для дизайнера: с опорой на гайдлайны, ограничения разработки, реальные примеры и опыт с других проектов. Для клиента: улучшения для пользователя → какую пользу они принесут бизнесу.

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

Отзыв о работе

«Мы сотрудничаем с IceRock Dev уже больше 2 лет. Процесс продолжается, впереди еще много целей. Отзыв о совместной работе могу оставить самый положительный. ... »
Алексей Родионов, руководитель проекта со стороны клиента

Что сейчас происходит с продуктом

Количество клиентов компании FlippingBook растет, а вместе с ним — и количество пользователей приложения.

Я завершил своё участие в проекте и с интересом наблюдаю за улучшениями и изменениями, которые органично развивают мой дизайн.

Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.

Евгений Смирнов
Дизайнер

Евгений Гребенщиков
Арт-директор

IceRock Development
Команда разработки

Электропочта • Телеграм