---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-07-24
publishYear: 2023
name: Zapovednik
title: UX-аудит и редизайн магазина товаров для животных
excerpt: Провели UX-аудит десктопной и мобильной версий интерфейса по согласованным пользовательским сценариям. Предложили способы улучшить пользовательский опыт.
image: ~/assets/images/portfolio/zapovednik/main.png
imageAlt: Собака Павлова • Заповедник • UX-аудит и редизайн магазина товаров для животных
thumbnail:
src: ~/assets/images/portfolio/cards/zapovednik.svg
alt: Собака Павлова • Заповедник • UX-аудит и редизайн магазина товаров для животных
logo:
src: ~/assets/images/portfolio/zapovednik/logo.svg
alt: Заповедник • Логотип
link: https://zapovednik96.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 интерфейсных проектов и более [140 проектных кейсов](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
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: avito
- collection: portfolio
page: okey
- collection: portfolio
page: petrovich
- collection: portfolio
page: ot-vinta
- collection: portfolio
page: sportmaster
- collection: portfolio
page: gazprom-neft
relatedLinks:
title: Похожие кейсы
links:
- avito
- okey
- sportmaster
- gazprom
outcome:
title: Некоторые цифры
numbers:
- title: Провели
number: 2 исследования
text: Экспертный UX-аудит и пользовательское CX-исследование
- title: Спроектировали
number: более 40 макетов
text: Более 50 страниц в 13 разделах сайта
- title: Провели
number: 5 качественных интервью
text: На их основе составили информационно-архитектурную карту сайта
context: |
[«Заповедник»](https://zapovednik96.ru) — федеральная сеть магазинов товаров для животных на Урале. В 2023 году компания открыла зооцентр с ветеринарным кабинетом и залом для дрессировки; в центре проводятся клиентские дни с лекциями специалистов.
Раньше цифровые интерфейсы «Заповедника» работали в первую очередь как интернет-магазин и были оторваны от точек оффлайн продаж. Новая концепция развития предполагает создание кроссплатформенной экосистемы заботы о питомце, в которую входят и оффлайновые точки, и цифровые продукты. Экосистема должна охватывать все стороны жизни питомца, от стрижки и покупки корма до визитов к ветеринару.
Остается понять, какие задачи появляются у пользователей с новой стратегией бизнеса и как это выразить в дизайне сайта и мобильного приложения. Именно с этим «Заповедник» и пришел к нам.
director: "«Заповедник» дает владельцу животного инструмент, который помогает заботиться о питомце примерно каждую секунду и учитывает каждый аспект его жизни. А наша работа — позаботиться о владельце, сделать комфортным каждый шаг пользователя на платформе и учесть все аспекты его взвимодействия с системой. Такой вот круговорот добра и юзабилити на сайте зоомагазина:)"
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: 1 615 000 ₽
time: 6 месяцев
metadata:
canonical: https://sobakapav.ru/portfolio/zapovednik
title: Дизайн интерфейса • UX-аудит и редизайн магазина товаров для животных (кейс)
description: "Провели UX-аудит десктопной и мобильной версий интерфейса по согласованным пользовательским сценариям. Предложили способы улучшить пользовательский опыт."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/zapovednik/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Аналитика](#anchor3) • [Концептуальное пректирование](#anchor4) • [Результат](#anchor5) • [Нюансы](#anchor6) • [Отзыв, цены, сроки](#anchor7)
</TOC>
## <a name="anchor1" />Бизнес-задача
Улучшить цифровую представленность компании в соответствии с новой стратегией развития бизнеса.
<a href="/images/portfolio/zapovednik/1.png" target="_blank"></a>
_Главная страница_
## <a name="anchor2" />Дизайн-задача
Провести экспертный UX-аудит цифровых ресурсов (сайта и приложения) заказчика в контексте новой стратегии развития бизнеса.
А по результатам аудита — провести точечный UX- и UI-редизайн интерфейсов сайта и приложения.
<a href="/images/portfolio/zapovednik/2.jpg" target="_blank" class="shadow-none"></a>
_Старый облик сайта_
## <a name="anchor3" />Аналитика
1. Провели экспертный аудит существующего интерфейса и аудит flow покупки. Построили UJM (User journey map) — карту взаимодействия пользователя с интерфейсом. Предложили список улучшений.
<a href="/images/portfolio/zapovednik/3.jpg" target="_blank"></a>
_Аудит flow покупки_
2. Провели продуктовое исследование с построением CJM. Задача исследования — описать идеальный пользовательский путь зоовладельца, изучив его основные потребности и инструменты их удовлетворения.
<a href="/images/portfolio/zapovednik/4.jpg" target="_blank" class="shadow-none"></a>
_Карта потребностей пользователя. На иллюстрации — начало CJM, полная карта откроется по ссылке_
Провели 5 [качественных интервью](https://sobakapav.ru/publications/qualitative-methods-in-ux-studies), расписывая по шагам, какие потребности появляются у владельцев на разных этапах жизни питомца. На основе исследования составили информационно-архитектурную карту, в которой были проявлены новые разделы сайта: услуги (подстричь когти/причесать) и знания (ответы на вопросы) на сайт магазина. Зафиксировали результаты в виде [Miro-доски](https://miro.com/app/board/uXjVMQ0KTmQ=/?moveToWidget=3458764554007416328&cot=14).
Кроме того, до «Собаки» заказчик провел большое исследование, на котором выстраивалась маркетинговая стратегия магазина. Мы обработали вводные данные и собрали в один документ самые важные находки из предыдущих маркетинговых исследований.
## <a name="anchor4" />Концептуальное пректирование
Составили [Модель информационных ожиданий (МИО)](https://docs.google.com/document/d/1FCHnaVMqjaNDe7-Jxc6yUKu5HATMdn-x/edit#heading=h.gjdgxs) экосистемы и информационно-архитектурную карту.
> Модель информационных ожиданий (МИО) — простая, но очень эффективная дизайн-практика, с помощью которой можно ответить на элементарные пожелания пользователя к интерфейсу сайта или приложения. Фактически — на вопросы, которые пользователь задает этой системе. Мы используем этот инструмент в дизайне интерфейсов. И вас [тоже можем научить](https://www.eduhund.ru/program/io/?utm_source=sobakapav&utm_medium=site&utm_campaign=page).
<a href="/images/portfolio/zapovednik/11.png" target="_blank"></a>
_Концепция экосистемы_
В результате исследований получили списки жизненных ситуаций и сценариев, сгруппированных по этапам пути пользователя, для дальнейшего использования в экспертной оценке интерфейса.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Подготовились к перепроектированию страниц flow покупки и проектированию с нуля новых разделов:
- Услуги
- Знания
- Мои питомцы
- Моя информация
- Формальности
<a href="/images/portfolio/zapovednik/5.png" target="_blank"></a>
_Раздел «Знания»_
<a href="/images/portfolio/zapovednik/6.png" target="_blank"></a>
_Раздел «Знания». Частые вопросы_
## <a name="anchor5" />Результат
1. Проработали и освежили визуальный облик, каркас и навигацию ресурсов с учетом нового брендбука, типографики, иконок.
<a href="/images/portfolio/zapovednik/7.png" target="_blank"></a>
_Айдентика_
<a href="/images/portfolio/zapovednik/8.png" target="_blank"></a>
_Кнопки_
<a href="/images/portfolio/zapovednik/9.png" target="_blank"></a>
_Промокод_
<a href="/images/portfolio/zapovednik/10.png" target="_blank"></a>
_Прочие элементы_
2. Проработали и дополнили путь покупки товаров на основе типовых паттернов e-comm.
<a href="/images/portfolio/zapovednik/12.png" target="_blank"></a>
_Навигация. Меню «Товары»_
<a href="/images/portfolio/zapovednik/13.png" target="_blank"></a>
_Оформление заказа. Вид после авторизации. Много товаров в правой карточке_
<a href="/images/portfolio/zapovednik/14.png" target="_blank"></a>
_Заказ оформлен_
<a href="/images/portfolio/zapovednik/15.png" target="_blank"></a>
_Самовывоз. Пункты выдачи_
3. Спроектировали интерфейсные решения в рамках стратегии развития «Экосистема заботы о питомце». Всего получилось больше 55 страниц в 13 разделах сайта — настолько много, что нам впервые на нашей памяти пришлось оформлять оглавление figma-файла.
<a href="/images/portfolio/zapovednik/146.png" target="_blank"></a>
_Оглавление Figma-файла_
4. Адаптировали мобильное приложение. Использовали кроссплатформенные компоненты и показали ключевые отличия мобильной и десктопной версий сайта.
<div class="flex gap-2 flex-wrap"> <Image src="~/assets/images/portfolio/zapovednik/17.png" alt="UX-аудит и редизайн магазина товаров для животных. Главная страница" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/zapovednik/18.png" alt="UX-аудит и редизайн магазина товаров для животных. Мобильная навигация. Первый уровень" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/zapovednik/19.png" alt="UX-аудит и редизайн магазина товаров для животных. Мобильная навигация. Меню услуг" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/zapovednik/20.png" alt="UX-аудит и редизайн магазина товаров для животных. Карточки" class="min-w-72 grow shrink basis-0" /> </div>
_Мобильное приложение_
## <a name="anchor6" />Особенности и нюансы
1. Главная сложность — найти правильные исследовательские вопросы, чтобы ответ на них объяснял, в какую сторону развивать экосистему. Мы учитывали годовые циклы жизни питомца, потому что нам нужно было понимать, как меняются потребности зоовладельца — и в течении жизни питомца, и в течении одного календарного года. Опирались в том числе и экспертизу из наших [медицинских проектов](https://sobakapav.ru/portfolio#med).
2. На этапе аналитики мы составили карту потребностей. На ее основе спроектировали много разных тачпоинтов в разных частях интерфейса, чтобы закрыть задачи, которые раньше не решались «Заповедником».
В частности, переработали личный кабинет — ядро, где вокруг пользователя и его потребностей собирается все необходимое. Добавили активные заказы, запланированные записи и приемы к ветеринару с возможностью добавить в календарь.
<a href="/images/portfolio/zapovednik/21.png" target="_blank"></a>
_Навигация. Меню личного кабинета_
<a href="/images/portfolio/zapovednik/22.png" target="_blank"></a>
_Запись на прием_
<a href="/images/portfolio/zapovednik/23.png" target="_blank"></a>
_Записи и приемы_
<a href="/images/portfolio/zapovednik/24.png" target="_blank"></a>
_Страница предстоящего приёма_
3. Плотно взаимодействовали с продажниками и разработкой на всех этапах проекта.
Наши макеты уже внедрены на сайте.
<a href="/images/portfolio/zapovednik/25.png" target="_blank"></a>
_Навигация. Меню «Услуги»_
<a href="/images/portfolio/zapovednik/26.png" target="_blank"></a>
_Услуги. Общий вид_
<a href="/images/portfolio/zapovednik/27.png" target="_blank"></a>
_Услуги. Груминг_
<a href="/images/portfolio/zapovednik/28.png" target="_blank"></a>
_Услуги. Хендлинг_
## <a name="anchor7" />