---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-12-04
publishYear: 2024
name: Торба
title: Исследование и дизайн интерфейса личного кабинета
excerpt: Провели UX-исследование и спроектировали дизайн интерфейса личного кабинета программы лояльности крупнейшего ритейлера
isNew: true
image: ~/assets/images/portfolio/torba/main.png
imageAlt: Собака Павлова • Исследование и дизайн интерфейса личного кабинета
thumbnail:
src: ~/assets/images/portfolio/cards/torba.svg
alt: Собака Павлова • Исследование и дизайн интерфейса личного кабинета
logo:
src: ~/assets/images/portfolio/torba/logo2.svg
alt: Торба • Логотип
tags:
- ec
- ux-audit
- redesign
- mass
- mob
- cjm
relatedPages:
-
text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
Провести [UX-аудит](/services/ux-audit), [продуктовое исследование](/services/research) и [редизайн интерфейса](/services/redesign), как в этом кейсе. И [многое другое](/services).
collection: services
page: ux-audit
-
collection: services
page: research
-
collection: services
page: redesign
- text: |
### Наша экспертиза
368 интерфейсных проектов и более [120 проектных кейсов](https://sobakapav.ru/portfolio).
### Наши статьи о UX-аудитах и CJM
collection: post
page: qualitative-methods-in-ux-studies
- collection: post
page: cjm-inspiration
- collection: post
page: cjmgazprom
- collection: post
page: cjm-tis
- collection: post
page: cjm-it-product
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: zapovednik
- collection: portfolio
page: gazprom-neft
- collection: portfolio
page: avito
- collection: portfolio
page: sportmaster
outcome:
title: Некоторые цифры
numbers:
- title: Провели
number: 21 глубинное интервью
text: выяснив, что пользователями нужно от «Торбы»
- title: Составили
number: 5 CJM
text: по одной на каждый тип пользователя, плюс общую
- title: Нарисовали
number: 15 экранов
text: показали работу ключевых элементов
context: |
Иногда мы не можем рассказать о проекте, назвав настоящего заказчика, даже если NDA вроде бы не запрещает. Но если клиент не дает добро на публикацию — что поделать, насильно мил не будешь. Досадно, но так чаще всего происходит с самыми крутыми кейсами про самых крутых заказчиков.
И тогда мы пишем правдивые, но фейковые кейсы. Перерисовываем макеты, меняем название (а иногда и специализацию) заказчика, убираем узнаваемые детали продукта или сервиса. И придумываем несуществующие несущественные детали — просто чтоб вам интереснее было читать кейс.
Неизменным и точным остается только рассказ о нашей работе: все цифры, все детали процесса и подробности о результате — абсолютная правда.
review:
text: |
Результат есть. Он нам полезен. Спасибо.
person: SEO-чародей,
position: руководитель продукта
photo: ~/assets/images/portfolio/torba/person.png
director: "Масштабное продуктовое исследование, немедленно воплощенное в дизайне. Результаты прямо с колес шли в работу, детали пользовательского поведения сразу же отражались в общей концепции, каждый тип пользователей получил интерфейсные стимулы оставаться лояльным программе."
result:
- src: ~/assets/images/portfolio/figma.svg
text: Извините, не можем показать
link: "mailto:we@sobakapav.ru"
budget: 1 500 000 ₽
time: 7 месяцев
metadata:
canonical: https://sobakapav.ru/portfolio/torba
title: UX-дизайн • Исследование и дизайн интерфейса личного кабинета
description: "Провели UX-исследование и спроектировали дизайн интерфейса личного кабинета программы лояльности крупнейшего ритейлера"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/torba/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Вводные](#anchor1) • [Дизайн-задачи](#anchor2) • [Результат](#anchor3) • [Цифры](#anchor4) • [Экстра-польза](#anchor5) • [Особенности](#anchor56) • [Нюансы процесса](#anchor7) • [Отзыв, цены, сроки](#anchor8)
</TOC>
## <a name="anchor1" />Вводные
Итак, нашим клиентом была одна из крупнейших ритейл-сетей континента. Назвем её.. назовем её ТИО («Туда и обратно»). Компания известна сетью супермаркетов «Второй завтрак», доставкой экопродуктов «Шалфей и розмарин» («ШиР»), алкомаркетом «Брендивин», туристическими магазинами «Гарцующий пони»... долго перечислять. Все названия выдуманные, конечно, но масштаб вы, надеюсь, поняли:)
У компании есть программа лояльности по подписке «Торба». За ежемесячную плату пользователь получает повышенный кэшбэк, специальные предложения от ТИО и доступ к скидкам и бонусам партнёров. Продукт новый, развивается и растёт.
Чтобы принять решения о дальнейшем развитии «Торбы», бизнесу нужно было исследование пользователей. За ним компания и обратилась к «Собаке Павловой».
<a href="/images/portfolio/torba/1.png" target="_blank"></a>
_Возможно, это пользователи «Торбы». А может быть и нет_
## <a name="anchor2" />Дизайн-задачи
1. Провести продуктовое исследование с целью выработки обоснованных интерфейсных решений, отвечающих потребностям пользователей и целям бизнеса.
2. Спроектировать высокодетализированный интерактивный прототип личного кабинета «Торбы» во вьюерах приложений ТИО.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/torba/10.png" />
<PhoneMockup image="/images/portfolio/torba/11.png" />
</div>
_Профиль пользователя и управление сервисом_
## <a name="anchor3" />Результат
Провели исследование, сформировали концепцию и нарисовали прототип интерфейса:
- Мы выявили группы пользователей и учли различия между ними в интерфейсе.
- Выяснили интересы и ожидания разных групп и предложили вовлекающие механики, чтобы дать повод возвращаться на страницу подписки. Всего проработали более тридцати задач в интерфейсе.
- Дали пользователям больше поводов заходить в личный кабинет и видеть в нем информацию о преимуществах подписки.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/torba/6.png" />
<PhoneMockup image="/images/portfolio/torba/7.png" />
</div>
_«Торба окупилась» и прогресс-бар за предыдущий месяц_
Предложенная архитектура открыла возможности для роста и гибкого развития:
- Главная – даёт повод зайти, направляет и вовлекает.
- Каталог выгод позволяет найти предложения как от ТИО, так и от партнёров.
- Коммуникативные механики, специфицированные под разные группы пользователей, оценила команда маркетинга.
- Навигация и общие паттерны проработаны с учётом того, как выглядит кабинет подписки в вебе, в приложениях «Лукошка», «Брендивина» и других продуктов ТИО.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/torba/8.png" />
<PhoneMockup image="/images/portfolio/torba/9.png" />
</div>
_Выгоды и новости_
Концепция решает задачи по вовлечению и удержанию пользователей, предоставляет пространство для роста и развития, а значит – увеличения объёмов и прибыли.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/torba/12.png" />
<PhoneMockup image="/images/portfolio/torba/13.png" />
</div>
_Экран с выбором подарка и открытая сториз_
## <a name="anchor4" />Цифры
На этапе исследования:
- провели рекрутинг по базе в 1500+ человек
- 480 человек прошло опрос-квиз про выгоды «Торбы»
- провели 21 глубинное интервью, чтобы изучить как устроены повседневные покупки у пользователей ТИО и их мотивы подписки на «Торбу»
- объединили 1020 ключевых цитат вокруг 35 тем в ходе аналитики
- составили 4 портрета пользователей
- составили продуктовую CJM из 21 шага, указав ключевые задачи и отличия между группами на каждом
<a href="/images/portfolio/torba/30.png" target="_blank"></a>
_Чеклист JTBD_
На этапе проектирования:
- выделили 43 ключевые задачи для реализации в интерфейсе
- проработали информационную архитектуру и ожидания пользователей к каждому разделу
- реализовали в интерфейсе 34 JTBD
- нарисовали 15 экранов, показали работу ключевых элементов
- провели UX-тестирование прототипа на 7 респондентах из разных групп
- презентовали проект на аудиторию в более чем 50 человек
## <a name="anchor5" />Экстра-польза
Как промежуточный шаг построения единой CJM, мы сделали по CJM для каждого из типов пользователей. Нам нужно было увидеть, насколько схожи и насколько отличаются эти пути и сможем ли мы упаковать их в одну модель.
Мы раскладывали цитаты по жизненным ситуациям и группировали по портретам. Получилось четыре очень большие карты, где каждый шаг содержал слой со всеми цитатами, с ним связанными. Для итоговой карты мы всё прочли и сократили до приемлемого объёма, но заказчик с радостью забрал и исходники.
<a href="/images/portfolio/x5/6.png" target="_blank"></a>
_Фрагмент CJM_
## <a name="anchor6" />Особенности
Рекрутинг по холодной базе шел плохо, 50 контактов на одно интервью. Иногда нас принимали за мошенников. Нужно было утеплить базу.
Решили сделать рассылку от компании «Туда и обратно», чтобы звонить уже согласившимся. Замаскировали под квиз.
«С какими фактами о “Торбе” вы согласны? Часть фактов мы придумали».
<a href="/images/portfolio/x5/12.png" target="_blank"></a>
_Результат опроса_
Из четырнадцати пунктов придумали мы шесть.
Квиз прошло 480 человек. 72 из них согласилось на интервью, и мы быстро набрали информантов. Время поиска сократилось почти в 10 раз, а результаты опроса подкрепили выводы исследования.
Мы ожидали, что кэшбэк (381) и доставка (276) будут фаворитами (на них делала упор реклама), но не такого отрыва. Больше людей отмечало неограниченные пакеты, чем реально существующие партнёрские предложения для туризма.
Интервью подтвердили гипотезу: люди не изучали возможности подписки. Отчасти потому, что не видели поводов заходить в ЛК.
Проектируя интерфейс, мы старались учесть интересы разных групп пользователей, чтобы такие поводы им предоставить.
1. Разместили на видном месте информацию о баллах, с указанием, окупилась ли «Торба», и призами за набор баллов. Призы могут быть символические, но рандомная выгода приятна и стимулирует зайти.
<a href="/images/portfolio/torba/23.png" target="_blank"></a>
2. Показали, сколько бесплатных доставок доступно сейчас и когда они обновятся. Один из самых частых вопросов пользователей с интервью.
<a href="/images/portfolio/torba/24.png" target="_blank"></a>
3. Дали выбирать любимые категории. Для тех, у кого магазины ТИО – основные, это серьёзный повод зайти в кабинет хотя бы раз в месяц.
<a href="/images/portfolio/torba/25.png" target="_blank"></a>
4. Проработали раздел «аналитика» для прагматиков. Поразмышлять над графиком – тоже повод.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/torba/16.png" />
<PhoneMockup image="/images/portfolio/torba/17.png" />
</div>
_Экран аналитики: пользователь узнает, сколько он заработал с «Торбой»_
5. Использовали позитивный язык: «выгода» и «аналитика», а не «экономия» и «расходы».
<a href="/images/portfolio/torba/26.png" target="_blank"></a>
Рядом с этими якорями дали место, чтобы информировать пользователя и направлять его внимание. Приёмы предложили привычные и понятные людям: сториз и баннеры, ведущие пользователя в другие разделы системы, например – в каталог выгод. Так можно информировать о новой партнёрке или временной акции от ТИО.
<a href="/images/portfolio/torba/27.png" target="_blank"></a>
<a href="/images/portfolio/torba/28.png" target="_blank"></a>
## <a name="anchor7" />Нюансы процесса
После обработки интервью мы стали искать принципы, которые объяснили бы отличия и могли служить основанием для портретов.
Наиболее объясняющими оказались два:
- отличия городских и региональных пользователей;
- степень экономической свободы
Горожан отличают доступ к инфраструктуре и множество социальных связей. Но связи эти слабые. Их окружают «знакомые незнакомцы». Выбор подталкивает горожан к беглому анализу большого количества информации без глубокого погружения.
У жителей регионов разнообразие меньше, а отношения глубже. Особую роль играют доставки, но если для горожан они – способ быстро получить желаемое, то для регионов – обеспечить товарами под заказ.
<a href="/images/portfolio/torba/22.png" target="_blank"></a>
Что касается экономической свободы (денег), она влияла на две вещи:
- насколько выражены циклы «от зарплаты до зарплаты»;
- на то как люди осмысляют подписку: как средство сэкономить или как плату за сервис.
Эти различия легли в основу портретов:
- Экономные
- Расчётливые прагматики
- Городская богема
- Консервативные регионы
<div class="flex gap-2 flex-wrap"> <Image src="~/assets/images/portfolio/torba/2.png" alt="Исследование и дизайн интерфейса личного кабинета" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/torba/3.png" alt="Исследование и дизайн интерфейса личного кабинета" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/torba/4.png" alt="Исследование и дизайн интерфейса личного кабинета" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/torba/5.png" alt="Исследование и дизайн интерфейса личного кабинета" class="min-w-72 grow shrink basis-0" /> </div>
_Портреты пользователей_
Изначально для всех разделов сервиса, а также важных элементов (Дашборд, Новости) мы генерировали в Figma идеи и решения, которые бы решали задачи пользователя в интерфейсе.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/torba/14.png" />
<PhoneMockup image="/images/portfolio/torba/15.png" />
</div>
_Настройка уведомлений и новости_
За референсы брали не только сервисы, похожие на «Торбу». Некоторые решения пришли из продуктов, связанных со спортом или обучением иностранным языкам.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/torba/18.png" />
<PhoneMockup image="/images/portfolio/torba/19.png" />
</div>
_Аналитика_
Решения задач пользователей придумывали несколько дизайнеров параллельно. На встречах мы обсуждали предложения, смотрели, какие задачи какие решения закрывают, выбирали лучше сочетающиеся и из них собирали итоговый интерфейс. В процессе сверялись с данными из исследования и с заказчиком.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/torba/20.png" />
<PhoneMockup image="/images/portfolio/torba/21.png" />
</div>
_Аналитика_
Это позволило собрать интересные идеи и решения в единый интерфейс.
## <a name="anchor8" />