Исследование и дизайн интерфейса личного кабинета

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

И тогда мы пишем правдивые, но фейковые кейсы. Перерисовываем макеты, меняем название (а иногда и специализацию) заказчика, убираем узнаваемые детали продукта или сервиса. И придумываем несуществующие несущественные детали — просто чтоб вам интереснее было читать кейс.

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

Вводные

Итак, нашим клиентом была одна из крупнейших ритейл-сетей континента. Назвем её.. назовем её ТИО («Туда и обратно»). Компания известна сетью супермаркетов «Второй завтрак», доставкой экопродуктов «Шалфей и розмарин» («ШиР»), алкомаркетом «Брендивин», туристическими магазинами «Гарцующий пони»… долго перечислять. Все названия выдуманные, конечно, но масштаб вы, надеюсь, поняли:)

У компании есть программа лояльности по подписке «Торба». За ежемесячную плату пользователь получает повышенный кэшбэк, специальные предложения от ТИО и доступ к скидкам и бонусам партнёров. Продукт новый, развивается и растёт.

Чтобы принять решения о дальнейшем развитии «Торбы», бизнесу нужно было исследование пользователей. За ним компания и обратилась к «Собаке Павловой».

Возможно, это пользователи «Торбы». А может быть и нет

Дизайн-задачи

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

2. Спроектировать высокодетализированный интерактивный прототип личного кабинета «Торбы» во вьюерах приложений ТИО.

Профиль пользователя и управление сервисом

Результат

Провели исследование, сформировали концепцию и нарисовали прототип интерфейса:

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

«Торба окупилась» и прогресс-бар за предыдущий месяц

Предложенная архитектура открыла возможности для роста и гибкого развития:

• Главная – даёт повод зайти, направляет и вовлекает.
• Каталог выгод позволяет найти предложения как от ТИО, так и от партнёров.
• Коммуникативные механики, специфицированные под разные группы пользователей, оценила команда маркетинга.
• Навигация и общие паттерны проработаны с учётом того, как выглядит кабинет подписки в вебе, в приложениях «Лукошка», «Брендивина» и других продуктов ТИО.

Выгоды и новости

Концепция решает задачи по вовлечению и удержанию пользователей, предоставляет пространство для роста и развития, а значит – увеличения объёмов и прибыли.

Экран с выбором подарка и открытая сториз

Цифры

На этапе исследования:

• провели рекрутинг по базе в 1500+ человек
• 480 человек прошло опрос-квиз про выгоды «Торбы»
• провели 21 глубинное интервью, чтобы изучить как устроены повседневные покупки у пользователей ТИО и их мотивы подписки на «Торбу»
• объединили 1020 ключевых цитат вокруг 35 тем в ходе аналитики
• составили 4 портрета пользователей
• составили продуктовую CJM из 21 шага, указав ключевые задачи и отличия между группами на каждом

Чеклист JTBD

На этапе проектирования:

• выделили 43 ключевые задачи для реализации в интерфейсе
• проработали информационную архитектуру и ожидания пользователей к каждому разделу
• реализовали в интерфейсе 34 JTBD
• нарисовали 15 экранов, показали работу ключевых элементов
• провели UX-тестирование прототипа на 7 респондентах из разных групп
• презентовали проект на аудиторию в более чем 50 человек

Экстра-польза

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

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

Фрагмент CJM

Особенности

Рекрутинг по холодной базе шел плохо, 50 контактов на одно интервью. Иногда нас принимали за мошенников. Нужно было утеплить базу.

Решили сделать рассылку от компании «Туда и обратно», чтобы звонить уже согласившимся. Замаскировали под квиз.

«С какими фактами о “Торбе” вы согласны? Часть фактов мы придумали».

Результат опроса

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

Квиз прошло 480 человек. 72 из них согласилось на интервью, и мы быстро набрали информантов. Время поиска сократилось почти в 10 раз, а результаты опроса подкрепили выводы исследования.

Мы ожидали, что кэшбэк (381) и доставка (276) будут фаворитами (на них делала упор реклама), но не такого отрыва. Больше людей отмечало неограниченные пакеты, чем реально существующие партнёрские предложения для туризма.

Интервью подтвердили гипотезу: люди не изучали возможности подписки. Отчасти потому, что не видели поводов заходить в ЛК.

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

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

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

3. Дали выбирать любимые категории. Для тех, у кого магазины ТИО – основные, это серьёзный повод зайти в кабинет хотя бы раз в месяц.

4. Проработали раздел «аналитика» для прагматиков. Поразмышлять над графиком – тоже повод.

Экран аналитики: пользователь узнает, сколько он заработал с «Торбой»

5. Использовали позитивный язык: «выгода» и «аналитика», а не «экономия» и «расходы».

Рядом с этими якорями дали место, чтобы информировать пользователя и направлять его внимание. Приёмы предложили привычные и понятные людям: сториз и баннеры, ведущие пользователя в другие разделы системы, например – в каталог выгод. Так можно информировать о новой партнёрке или временной акции от ТИО.

Нюансы процесса

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

Наиболее объясняющими оказались два:

• отличия городских и региональных пользователей;
• степень экономической свободы

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

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

Что касается экономической свободы (денег), она влияла на две вещи:

• насколько выражены циклы «от зарплаты до зарплаты»;
• на то как люди осмысляют подписку: как средство сэкономить или как плату за сервис.

Эти различия легли в основу портретов:

• Экономные
• Расчётливые прагматики
• Городская богема
• Консервативные регионы

Портреты пользователей

Изначально для всех разделов сервиса, а также важных элементов (Дашборд, Новости) мы генерировали в Figma идеи и решения, которые бы решали задачи пользователя в интерфейсе.

Настройка уведомлений и новости

За референсы брали не только сервисы, похожие на «Торбу». Некоторые решения пришли из продуктов, связанных со спортом или обучением иностранным языкам.

Аналитика

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

Аналитика

Это позволило собрать интересные идеи и решения в единый интерфейс.