Рука с планшетом, на котором открыто приложение FlippingBook с сеткой обложек флипбуков, на фоне размытого чёрно-белого выставочного зала

iOS + Android | Mobile + Tablet

Запуск приложения 01

  • 20%Churn rate в Enterprise
  • −80%Task Success Time
  • >60%Offline adoption

Из-за NDA мне пришлось изменить часть фактов: цифры и данные.

Коротко о главном

Спроектировал с нуля нативное мобильное приложение FlippingBook (iOS и Android, телефон и планшет) в жестком дедлайне 6 мес. Релиз остановил отток Enterprise-клиентов и обеспечил закрытие ключевых B2B-сделок с первого месяца.

Приложение FlippingBook на iPad: панель «Поделиться флипбуком» с названием ссылки, настройками безопасности и кнопкой «Создать трекаемую ссылку»

Обзор проекта

Бэкграунд

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

Проблема

Старое приложение зависало, крашилось и не поддерживало ключевой функционал.

Менеджеры в поле не могли быстро отправить клиенту персональную ссылку и отследить интерес.

Продуктовый контекст

FlippingBook — B2B/B2C SaaS-платформа для создания и дистрибуции интерактивных документов, которой пользуются 70 000+ платящих клиентов в 190 странах, включая 193 компании из Fortune 500. Их флипбуки читают >3 миллионов человек в месяц.

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

Команда
Product Designer, CEO, PM, Backend, QA, Студия разработки (iOS, Android)
Моя роль
Sr. Product DesignerИсследование, Продуктовая стратегия, Архитектура UI/UX, Hand-off, QA и дизайн ревью
Сроки
2023–2025
Платформа
iOS + Android, Mobile + Tablet

Отправная точка

Главная проблема

SalesPal не помогал сейлзам в полях, а лишь отнимал время

Типичный юзкейс

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

Риск для бизнеса

Системный отток B2B-сегмента и снижение LTV

Медленный workflow

Нельзя пошарить во время паузы в диалоге

Визуальный долг

Низкий Trust rate из-за устаревшего дизайна

Что было на входе

SalesPal Legacy App
SalesPal Legacy App

Цели

С точки зрения пользователя

Сократить ключевой flow до 30 секунд при шеринге трек-ссылки одной рукой на ходу

С точки зрения бизнеса

Закрыть блокер для Enterprise-сделок и снизить Churn rate в B2B сегменте

С точки зрения разработки

Обеспечить Zero Hand-off friction для аутсорс студии и снизить Time-to-market

Процесс

Запуск MVP на двух платформах за 6 месяцев требовал жесткой приоритизации. Мы с PM разделили работу на две фазы: дизайн Core-флоу на основе тестов и контроль качества аутсорс-разработки.

1 • Discovery

01

RESEARCH

Почему сейлзы перестали открывать старое приложение

Сводная таблица интервью: респонденты, роли, рабочие процессы, боли, потерянные сделки и прямые цитаты
Первый шаг

Провел серию глубинных интервью с Enterprise-сейлзами из США и Европы. Параллельно проанализировал 100+ обращений в саппорт за последний год и выгрузил отзывы из App Store и Google Play. Для ускорения кластеризации хаотичных данных применил AI-инструменты, сгруппировав проблемы по частоте и критичности.

Методология исследования
  • Из-за сбоев старого приложения сейлзы открывали веб-версию FlippingBook в мобильном Safari. Непопадания по кнопкам и сброс авторизации происходили на глазах у клиентов.
  • Создание отслеживаемой ссылки в десктоп-версии занимало 5 переходов и требовало ввода email. В условиях живой встречи это занимало до 2 минут, поэтому менеджеры либо отправляли нетрекаемые публичные ссылки, либо не отправляли ничего.
  • 8 из 12 респондентов подтвердили: в тендерах против Showpad и Seismic компания проигрывала на этапе демонстрации мобильных возможностей.
Вывод

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

02

RESEARCH

Showpad и Seismic ставят карточки обложек на первое место

Сравнительная таблица Showpad, Seismic и FBO App (MVP) по UX-критериям: трекаемые ссылки, визуальная навигация, оффлайн-кэш, управление одной рукой, онбординг без настройки

Я провел сравнительный UX-анализ лидеров рынка Sales Enablement — Showpad и Seismic. Я декомпозировал их ключевые сценарии на шаги, чтобы вытащить паттерны и найти точки роста для нашего MVP.

Методология ресерча

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

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

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

03

STRATEGY

Главная задача: уверенность под давлением

Холст Job-to-be-done: функциональные мотивы, эмоциональные якоря и социальный статус, внизу — job story
Слои мотивации пользователя

Декомпозировал мотивацию пользователя через фреймворк JTBD на трех уровнях.

  • Functional Job: «Стоя перед клиентом на выставке, хочу отправить ему персональную трекаемую ссылку за 30 секунд, чтобы зафиксировать договоренность до окончания встречи».
  • Emotional Job: «На переговорах хочу быть уверен, что приложение не подведет и не попросит повторный ввод пароля, чтобы сосредоточиться на продажах».
  • Social Job: «Демонстрируя материалы с планшета, хочу выглядеть представителем технологичной компании, укрепляя доверие к нашему продукту».
Гипотезы
  1. Сокращение флоу шеринга до 3 шагов снизит медианное время задачи до 30 секунд и позволит использовать апп во время питча. Планируем зафиксировать кратное снижение Task Success Time на юзабилити-тестах.
  2. Визуальная сетка карточек вместо списка ускорит поиск документа. Планируем сократить Search Time и убрать ошибочные клики при выборе файлов.
  3. Доступность Trackable Links на мобайле поднимет adoption фичи выше 50% и поможет снизить Churn rate в B2B-сегменте.
Результат

Гипотезы сфокусировали команду на устранении когнитивного и физического трения в ключевой точке воронки.

04

STRATEGY

Выбор стека и компромиссы, на которые я пошёл

MVP, нативный iOS: сетка библиотеки и шторка шеринга с названием ссылки и кнопкой Create trackable link
Стэк

Совместно с продуктовой командой и техническим лидом внешней студии провели сравнительный анализ платформ: кроссплатформа (Flutter / React Native) против нативной разработки (Swift / Kotlin).

Что выбрали
  • Кроссплатформа давала экономию времени на старте, но создавала риски по отзывчивости интерфейса, нативным жестам и работе с планшетными адаптациями.
  • Нативная разработка требовала больше ресурсов, но гарантировала плавность интерфейса и полную интеграцию с нативными Share Sheet iOS и Android.
  • Совместно с бэкенд-инженерами спроектировали безотказную логику авторизации: использование длительных refresh-токенов (2+ месяца) и поддержку авторизации через SSO.
Киллер-фичи

Параллельно бэк и QA вместе со студией валидировали оффлайн-архитектуру: кэширование флипбуков при первом открытии. Подтвердили, что это реально закрыть в рамках MVP. Для меня это был зелёный свет — оффлайн-сценарий вошёл в скоуп и сразу попал в список ключевых флоу для проектирования.

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

05

ALIGNMENT

RICE и трудные разговоры сократили скоуп

Матрица приоритизации RICE: функции с оценками охвата, влияния, уверенности и трудозатрат, итоговые баллы для MVP
Убираем лишнее

Исходный вишлист проекта содержал 12+ крупных фичей: папки, полнотекстовое редактирование, публичные ссылки, аналитические дэшборды, пуш-уведомления. При дедлайне в 6 месяцев реализация всего скоупа привела бы к срыву сроков.

Переговоры

Применил метод приоритизации через фильтр: «Без этой функции сейлз сможет закрыть сделку на встрече?». И с помощью RICE выбрал ключевые функции.

После мы с PM и CEO провели сессию приоритизации и сократили бэклог до четырёх базовых функций: грид вью, создание Trackable Links, трекинг и оффлайн-доступ.

  • Исключили из MVP: создание и редактирование контента, кастомизация флипбуков, полную аналитику, создание папок.
  • Осознанный компромисс: исключили создание обычных публичных ссылок. Все ресурсы разработки направили на 3 ключевых модуля: навигация по обложкам, Trackable Links и оффлайн-режим.
Итог

Отказ от публичных ссылок аукнулся после релиза — саппорт получил поток тикетов от юзеров, которые ожидали эту фичу по умолчанию. Подробнее — в рефлексии.

2 • Delivery

06

UX VALIDATION

Тест шаринга с секундомером

Флоу шеринга в три шага: выбор флипбука, создание ссылки, отправка через нативный Share Sheet
Выбор простого пути

Спроектировал мобильный флоу полностью сохранив логику веб версии, но упаковал её в 3 простых действия:

  1. Тап на «Поделиться» на карточке документа.
  2. Ввод имени получателя (обязательное поле для идентификации лида).
  3. Отправка через нативный Share Sheet в любой мессенджер, почту или по AirDrop.
Валидация

Для проверки я собрал интерактивный прототип в Figma и провел серию коридорных тестов на выборке из 8 человек, включая полевых сейлзов и маркетологов.

Я симулировал реальный контекст выставки и просил участников отправить трек-ссылку «клиенту» без подсказок, замеряя время выполнения задачи по секундомеру.

  • Новый 3-шаговый флоу: 8/8 выполнили задачу, медиана ~25 секунд
  • SalesPal (5+ шагов): 5/8 выполнили, медиана ~2:20
  • Сеточная навигация: 8/8 нашли флипбук за 1–2 просмотра
  • Списочная навигация: 6/8 нашли, в среднем на 12 сек дольше
Выводы

Тестирование показало, что новый трехшаговый флоу сократил путь пользователя с пяти действий до трех тапов. Среднее время создания ссылки уменьшилось с 2 минут 20 секунд в Safari до ~25 секунд (медиана). Скорость выполнения сценария выросла на 82%, а время решения задачи сократилось в 5 раз.

07

ENGINEERS

Готово без настройки и работает офлайн

Основная идея

Мы полностью отказались от традиционного онбординга, туториалов и длинных флоу настройки в пользу быстрого старта

Моментальная готовность к работе

После авторизации приложение мгновенно загружает актуальную библиотеку публикаций. Сейлз-менеджер может приступать к задачам без затрат времени на обучение.

Полноценный оффлайн-режим

При отсутствии сети (частый кейс при работе «в полях») сейлз имеет полный доступ ко всем ранее скачанным публикациям.

Результаты

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

Как итог: ~60% MAU регулярно скачивают и шарят кэшированные флипбуки в оффлайне, что доказывает высокую востребованность сценария.

08

LEADERSHIP & GOVERNANCE

Pixel-perfect QA с внешней студией

Размеченные экраны на светлом фоне: логин, главная с сеткой и детали ссылки с заметками по шрифтам и цветам
Дизайн-система и процесс

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

Процесс шёл итерациями: макеты → сборка → ревью → правки. PM двигал сроки, а контроль качества на всех этапах был на мне.

Пиксель-перфект QA

Устанавливал каждую предрелизную версию в TestFlight и тестовые apk, лично проводил поэкранное тестирование, сверяя размеры, отступы и анимации с макетами.

Систематизация багов

Все обнаруженные расхождения документировал в Figma и заводил точечные тикеты в Jira внешней студии.

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

09

RELEASE

Запуск и что показали цифры

Мы выкатили первую версию приложения точно в шестимесячный дедлайн. Вместо отключения SalesPal компания выбрала стратегию мягкого перехода и провела демо для всех старых клиентов.

Результаты бизнеса

Нашей главной целью было устранение блокера. В первый квартал после релиза команда продаж использовала наличие нативного приложения как сильный аргумент и закрыла новые крупные контракты. Churn rate в Enterprise-сегменте снизился на 20%.

Метрики вовлеченности

Нам важно было понять, насколько быстро пользователи осознают ценность мобильного трекинга. Метрика Adoption Rate превысила 60% в первый месяц. Это значило, что больше половины активных пользователей успешно создали и отправили минимум одну Trackable Link.

Показатель качества UI

Продукт показал Retention 30-го дня на уровне 45%, что превысило наши плановые ожидания. А зафиксированное на тестах снижение Task Success Time на 80% (до ~25 секунд) подтвердилось в пострелизной аналитике.

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

10

EVOLUTION & BACKLOG

Что дала V2 и что я вынес

V1: 3 колонки: Главная сетка в V1 с тремя колонками и в V2 с двумя колонками, поверх каждой открыта шторка шеринга
V2: 2 колонки: Главная сетка в V1 с тремя колонками и в V2 с двумя колонками, поверх каждой открыта шторка шеринга

После запуска первой версии продукта мы с командой начали проектировать масштабное обновление V2. Основной задачей было исправление компромиссов MVP и расширение функционала под требования безопасности B2B клиентов.

Масштабирование грида

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

В версии V2 мне удалось убедить PM и CEO изменить подход. Мы переработали сетку и перешли на крупный двухколоночный грид. Это решение снизило трение, улучшило считываемость обложек и ускорило поиск файлов на ходу.

Enterprise-инструменты безопасности

Параллельно в итерации V2 мы добавили функцию создания публичных ссылок, от которой осознанно отказались в MVP. Я спроектировал этот флоу в связке с мобильным модулем Privacy Settings. Сейлзы получили возможность прямо с телефона устанавливать пароли на флипбуки и ограничивать доступ к документам по корпоративным доменам клиентов. Внедрение настроек приватности закрыло требования служб безопасности и обеспечило заметный рост повторных Enterprise-продаж.

Главные уроки
  • MVP требует жестких компромиссов. Осознанный отказ от базовых фич десктопа ради фокуса на мобильных Trackable Links позволил уложиться в критически важный для бизнеса Time-to-market.
  • Доверяйте UX-тестам. Проблема масштаба карточек навигации подсвечивалась еще на этапе первых прототипов. Урок на будущее — сильнее аргументировать результаты коридорок перед командой разработки и менеджментом до релиза в сторы.

Финальное решение

Сравнение

Основные изменения MVP vs V2

MVP: Основные изменения MVP vs V2
V2: Основные изменения MVP vs V2
Основные изменения MVP vs V2

Ключевые экраны

Идеи, на которых построено приложение

Mobile Ecosystem (iOS): двухколоночная сетка, список трекаемых ссылок и экран профиля
Advanced Privacy: пароль, SSO и ограничения по доменам в шторке шеринга
Trackable Analytics: детали ссылки с просмотрами, временем и активностью по страницам
Android Experience: ключевой флоу, адаптированный под паттерны Android и Material
iPad в портретной ориентации: постоянный сайдбар и многоколоночный каталог документов
iPad в альбомной ориентации: флипбук на весь экран для презентации клиенту и диалог шеринга
Edge cases: экран входа, достигнутый лимит Trackable Links и шторка сортировки

Результаты

45%

Retention D30

>60%

Offline adoption

−80%

Task Success Time

Рефлексия

Что я бы сделал иначе

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

Чего не ожидал

Мелкая сетка в три книги из MVP оказалась неудобной. PM хотел уместить больше контента на экране, но сейлзы на ходу промахивались мимо обложек. В версии V2 удалось полностью пересобрать интерфейс под двухколоночный грид, что значительно улучшило Task Success Time.

Бэклог и следующие шаги

  • Перенос полной десктопной аналитики просмотров документов внутрь мобильного интерфейса.
  • Разработка мобильного модуля для кастомизации оформления и брендирования флипбуков прямо с телефона.

Есть вопросы?

Следующий кейс

Все работы