---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-03-12
publishYear: 2024
name: X5
title: Исследование и дизайн интерфейса личного кабинета
excerpt: Провели UX-исследование и спроектировали дизайн интерфейса личного кабинета программы лояльности «Пакет»
isNew: true
image: ~/assets/images/portfolio/x5/main.png
imageAlt: Собака Павлова • X5 • Исследование и дизайн интерфейса личного кабинета
thumbnail:
src: ~/assets/images/portfolio/cards/x5.svg
alt: Собака Павлова • X5 • Исследование и дизайн интерфейса личного кабинета
logo:
src: ~/assets/images/portfolio/x5/logo.svg
alt: Пакет • Логотип
link: "https://x5paket.ru/"
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: ux-audit-by-principles
-
collection: post
page: criticize-then-suggest
-
collection: post
page: everyday-information-architecture
-
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
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: zapovednik
- collection: portfolio
page: ot-vinta
- collection: portfolio
page: gazprom-neft
- collection: portfolio
page: avito
- collection: portfolio
page: okey
- collection: portfolio
page: petrovich
- collection: portfolio
page: sportmaster
outcome:
title: Некоторые цифры
numbers:
- title: Провели
number: 21 глубинное интервью
text: выяснив, что нужно пользователями от «Пакета»
- title: Составили
number: 5 CJM
text: по одной на каждый тип пользователя, плюс общую
- title: Нарисовали
number: 15 экранов
text: показали работу ключевых элементов
context: |
[X5 Group](https://www.x5.ru/) известна «[Пятёрочками](https://5ka.ru/)» и «[Перекрёстками](https://www.perekrestok.ru/)», но в группу входят разные продукты: доставки «[Впрок](https://www.vprok.ru/)» и «[Много Лосося](https://mnogolososya.ru/)», «[Х5-клуб](https://x5club.ru/)» и многие другие, в том числе программа «Пакет».
«[Пакет](https://x5paket.ru/)» — программа лояльности по подписке. За ежемесячную плату пользователь получает повышенный кэшбэк, специальные предложения от Х5 и доступ к скидкам и бонусам партнёров. Продукт новый, развивается и растёт.
Чтобы принять решения о дальнейшем развитии «Пакета», бизнесу требовалось исследование пользователей.
review:
text: |
Для того чтобы выстроить итоговый результат, требовалось много выравнивания. Аргументацию «выбивали».
Иногда съезжали сроки. В остальном результат есть, он нам полезен — спасибо.
person: Дмитрий Гуленков
position: Руководитель продукта · X5 Retail Group
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/x5-paket
title: Дизайн интерфейса • Исследование и дизайн интерфейса личного кабинета (кейс)
description: "Провели UX-исследование и спроектировали дизайн интерфейса личного кабинета программы лояльности «Пакет»"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/x5/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) • [Нюансы процесса](#anchor6) • [Отзыв, цены, сроки](#anchor7)
</TOC>
## <a name="anchor1" />Дизайн-задачи
1. Провести продуктовое исследование с целью выработки обоснованных интерфейсных решений, отвечающих потребностям пользователей и целям бизнеса.
2. Спроектировать высокодетализированный интерактивный прототип личного кабинет «Пакета» во вьюерах приложений X5.
<a href="/images/portfolio/x5/0.png" target="_blank"></a>
_Концепты личного кабинета_
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/x5/1.png" />
<PhoneMockup image="/images/portfolio/x5/2.png" />
</div>
_Главная страница: прогресс-бар и статистика_
## <a name="anchor2" />Результат
Провели исследование, сформировали концепцию и нарисовали прототип интерфейса:
- Мы выявили группы пользователей и учли различия между ними в интерфейсе.
- Выяснили интересы и ожидания разных групп и предложили вовлекающие механики, чтобы дать повод возвращаться на страницу подписки. Всего проработали более тридцати задач в интерфейсе.
- Дали пользователям больше поводов заходить в личный кабинет и видеть в нем информацию о преимуществах подписки.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/x5/3.png" />
<PhoneMockup image="/images/portfolio/x5/4.png" />
</div>
_Каталог выгод. Выгоды от X5 и от партнеров_
Предложенная архитектура открыла возможности для роста и гибкого развития:
- Главная – даёт повод зайти, направляет и вовлекает.
- Каталог выгод позволяет найти предложения как от Х5, так и от партнёров.
- Коммуникативные механики, специфицированные под разные группы пользователей, оценила команда маркетинга.
- Навигация и общие паттерны проработаны с учётом того, как выглядит кабинет подписки в вебе, в приложениях «Перекрёстка», «Пятёрочки» и других продуктов Х5.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/x5/20.png" />
<PhoneMockup image="/images/portfolio/x5/21.png" />
</div>
_Экран с выбором подарка и открытая сториз_
Концепция решает задачи по вовлечению и удержанию пользователей, предоставляет пространство для роста и развития, а значит – увеличения объёмов и прибыли.
## <a name="anchor3" />Цифры
На этапе исследования:
- провели рекрутинг по базе в 1500+ человек
- 480 человек прошло опрос-квиз про выгоды «Пакета»
- провели 21 глубинное интервью, чтобы изучить как устроены повседневные покупки у пользователей Х5 и их мотивы подписки на «Пакет»
- объединили 1020 ключевых цитат вокруг 35 тем в ходе аналитики
- составили 4 портрета пользователей
- составили продуктовую CJM из 21 шага, указав ключевые задачи и отличия между группами на каждом
<a href="/images/portfolio/x5/5.png" target="_blank"></a>
_Фрагмент пользовательского интервью_
На этапе проектирования:
- выделили 43 ключевые задачи для реализации в интерфейсе
- проработали информационную архитектуру и ожидания пользователей к каждому разделу
- реализовали в интерфейсе 34 JTBD
- нарисовали 15 экранов, показали работу ключевых элементов
- провели UX-тестирование прототипа на 7 респондентах из разных групп
- презентовали проект на аудиторию в более чем 50 человек
<a href="/images/portfolio/x5/11.png" target="_blank"></a>
_Чеклист JTBD_
## <a name="anchor4" /> Экстра-польза
Как промежуточный шаг построения единой CJM, мы сделали по CJM для каждого из типов пользователей. Нам нужно было увидеть, насколько схожи и насколько отличаются эти пути и сможем ли мы упаковать их в одну модель.
Мы раскладывали цитаты по жизненным ситуациям и группировали по портретам. Получилось четыре очень большие карты, где каждый шаг содержал слой со всеми цитатами, с ним связанными. Для итоговой карты мы всё прочли и сократили до приемлемого объёма, но заказчик с радостью забрал и исходники.
<a href="/images/portfolio/x5/6.png" target="_blank"></a>
_Фрагмент CJM_
## <a name="anchor5" />Особенности
Рекрутинг по холодной базе шел плохо, 50 контактов на одно интервью. Иногда нас принимали за мошенников. Нужно было утеплить базу.
Решили сделать рассылку от X5 group, чтобы звонить уже согласившимся. Замаскировали под квиз.
«С какими фактами о “Пакете” вы согласны? Часть фактов мы придумали».
<a href="/images/portfolio/x5/12.png" target="_blank"></a>
_Результат опроса_
Из четырнадцати пунктов придумали мы шесть.
Квиз прошло 480 человек. 72 из них согласилось на интервью, и мы быстро набрали информантов. Время поиска сократилось почти в 10 раз, а результаты опроса подкрепили выводы исследования.
Мы ожидали, что кэшбэк (381) и доставка (276) будут фаворитами (на них делала упор реклама), но не такого отрыва. Больше людей отмечало неограниченные пакеты, чем реально существующие партнёрские предложения для туризма.
Интервью подтвердили гипотезу: люди не изучали возможности подписки. Отчасти потому, что не видели поводов заходить в ЛК.
Проектируя интерфейс, мы старались учесть интересы разных групп пользователей, чтобы такие поводы им предоставить.
1. Разместили на видном месте информацию о баллах, с указанием «окупился ли “Пакет”» и призами за набор баллов. Призы могут быть символические, но рандомная выгода приятна и стимулирует зайти.
<Image src="~/assets/images/portfolio/x5/13.png" alt="Исследование и дизайн интерфейса личного кабинета" />
2. Показали, сколько бесплатных доставок доступно сейчас и когда они обновятся. Один из самых частых вопросов пользователей с интервью.
<Image src="~/assets/images/portfolio/x5/14.png" alt="Исследование и дизайн интерфейса личного кабинета" />
3. Дали выбирать любимые категории. Для тех, у кого магазины Х5 – основные, это серьёзный повод зайти в кабинет хотя бы раз в месяц.
<Image src="~/assets/images/portfolio/x5/15.png" alt="Исследование и дизайн интерфейса личного кабинета" />
4. Проработали раздел «аналитика» для прагматиков. Поразмышлять над графиком – тоже повод.
<Image src="~/assets/images/portfolio/x5/16.png" alt="Исследование и дизайн интерфейса личного кабинета" />
5. Использовали позитивный язык: «выгода» и «аналитика», а не «экономия» и «расходы».
<Image src="~/assets/images/portfolio/x5/17.png" alt="Исследование и дизайн интерфейса личного кабинета" />
Рядом с этими якорями дали место, чтобы информировать пользователя и направлять его внимание. Приёмы предложили привычные и понятные людям: сториз и баннеры, ведущие пользователя в другие разделы системы, например – в каталог выгод. Так можно информировать о новой партнёрке или временной акции от Х5.
<Image src="~/assets/images/portfolio/x5/18.png" alt="Исследование и дизайн интерфейса личного кабинета" />
<Image src="~/assets/images/portfolio/x5/19.png" alt="Исследование и дизайн интерфейса личного кабинета" />
## <a name="anchor6" />Нюансы процесса
После обработки интервью мы стали искать принципы, которые объяснили бы отличия и могли служить основанием для портретов.
Наиболее объясняющими оказались два:
- отличия городских и региональных пользователей;
- степень экономической свободы
Горожан отличают доступ к инфраструктуре и множество социальных связей. Но связи эти слабые. Их окружают «знакомые незнакомцы». Выбор подталкивает горожан к беглому анализу большого количества информации без глубокого погружения.
У жителей регионов разнообразие меньше, а отношения глубже. Особую роль играют доставки, но если для горожан они – способ быстро получить желаемое, то для регионов – обеспечить товарами под заказ.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/x5/24.png" />
<PhoneMockup image="/images/portfolio/x5/25.png" />
</div>
_Аналитика. Заработали, сэкономили_
Что касается экономической свободы (денег), она влияла на две вещи:
- насколько выражены циклы «от зарплаты до зарплаты»;
- на то как люди осмысляют подписку: как средство сэкономить или как плату за сервис.
Эти различия легли в основу портретов:
- Экономные
- Расчётливые прагматики
- Городская богема
- Консервативные регионы
<div class="flex gap-2 flex-wrap"> <Image src="~/assets/images/portfolio/x5/8.png" alt="Исследование и дизайн интерфейса личного кабинета" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/x5/7.png" alt="Исследование и дизайн интерфейса личного кабинета" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/x5/9.png" alt="Исследование и дизайн интерфейса личного кабинета" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/x5/10.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/x5/22.png" />
<PhoneMockup image="/images/portfolio/x5/23.png" />
</div>
_Настройка уведомлений и новости_
Решения задач пользователей придумывали несколько дизайнеров параллельно. На встречах мы обсуждали предложения, смотрели, какие задачи какие решения закрывают, выбирали лучше сочетающиеся и из них собирали итоговый интерфейс. В процессе сверялись с данными из исследования и с заказчиком.
Это позволило собрать интересные идеи и решения в единый интерфейс.
## <a name="anchor7" />