UX-аудит и редизайн магазина товаров для животных

Заказчик«Заповедник» — федеральная сеть магазинов товаров для животных на УралеЗадачаПровести экспертный UX-аудит цифровых ресурсов заказчика в контексте новой стратегии развития бизнеса. По результатам аудита — провести точечный UX- и UI-редизайн интерфейсов сайта и приложения.

«Заповедник» — федеральная сеть магазинов товаров для животных на Урале. В 2023 году компания открыла зооцентр с ветеринарным кабинетом и залом для дрессировки; в центре проводятся клиентские дни с лекциями специалистов.

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

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

Бизнес-задача

Улучшить цифровую представленность компании в соответствии с новой стратегией развития бизнеса.

2179947953e9108d96fedba57a137d2d.png

Главная страница

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

Провести экспертный UX-аудит цифровых ресурсов (сайта и приложения) заказчика в контексте новой стратегии развития бизнеса.

А по результатам аудита — провести точечный UX- и UI-редизайн интерфейсов сайта и приложения.

9aa81a30cc868a6677906df911a155ab.jpg

Старый облик сайта

Аналитика

  1. Провели экспертный аудит существующего интерфейса и аудит flow покупки. Построили UJM (User journey map) — карту взаимодействия пользователя с интерфейсом. Предложили список улучшений.

1088ae3be20c66a060346926dfce7577.jpg

Аудит flow покупки

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

345bcb1df3f37ebcb7bf575b017e32db.jpg

Карта потребностеи? пользователя

Провели 5 качественных интервью, расписывая по шагам, какие потребности появляются у владельцев на разных этапах жизни питомца. На основе исследования составили информационно-архитектурную карту, в которой были проявлены новые разделы сайта: услуги (подстричь когти/причесать) и знания (ответы на вопросы) на сайт магазина. Зафиксировали результаты в виде Miro-доски.

Кроме того, до «Собаки» заказчик провел большое исследование, на котором выстраивалась маркетинговая стратегия магазина. Мы обработали вводные данные и собрали в один документ самые важные находки из предыдущих маркетинговых исследований.

Концептуальное пректирование

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

Составили Модель информационных ожиданий (МИО) экосистемы и информационно-архитектурную карту.

067183e034ffb0bafdaa0611fd83c414.png

Концепция экосистемы

Подготовились к перепроектированию страниц flow покупки и проектированию с нуля новых разделов:

  • Услуги
  • Знания
  • Мои питомцы
  • Моя информация
  • Формальности

005543bc36f9048a098ae29e7323c018.png

Раздел «Знания»

8f828083a71f7a9636393d5b79c7a1f3.png

Раздел «Знания». Частые вопросы

Результат

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

a420f68678d743547471590782a981de.png

Айдентика

82942877f4221157d888d1dbfc0de511.png

Состояния кнопок

344ef0d8a908bbe9d3010383c7a2e6b5.png

Прочие элементы

  1. Проработали и дополнили путь покупки товаров на основе типовых паттернов e-comm.

f16917123900da32157ae01bec6b554a.png

Навигация. Меню «Товары»

048581936fe38d12feae5c3e871188f1.png

Оформление заказа. Вид после авторизации. Много товаров в правои? карточке

f6c64dcc4ff2f30f51d0cf4ce4867129.png

Заказ оформлен

45ffcfa5efbeec1df1be3447b12f5edb.png

Самовывоз. Пункты выдачи

  1. Спроектировали интерфейсные решения в рамках стратегии развития «Экосистема заботы о питомце». Всего получилось больше 55 страниц в 13 разделах сайта — настолько много, что нам впервые на нашей памяти пришлось оформлять оглавление figma-файла.
  2. Адаптировали мобильное приложение. Использовали кроссплатформенные компоненты и показали ключевые отличия мобильной и десктопной версий сайта.

57171bd825914063cf01c23d3d9fb2b7.png

Особенности и нюансы

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

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

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

f16b2fe1bd6ac6c5a06b55087516fe15.png

Запись на прием

902164f457c198f8900a00ece885fbe3.png

Страница предстоящего прие? ма

  1. Плотно взаимодействовали с продажниками и разработкой на всех этапах проекта.

Наши макеты уже внедрены на сайте.

a45c2d4416e46edb8edb962478f7c337.png

Услуги. Общии? вид

949e13c6b69a017b47e2e673262a5850.png

Услуги. Груминг

Некоторые цифры

Провели 2 исследования. Экспертный UX-аудит и пользовательское CX-исследование

Спроектировали более 40 макетов. Более 50 страниц в 13 разделах сайта

Провели 5 качественных интервью. На их основе составили информационно-архитектурную карту сайта

Перейти на сайт

Полный текст статьи читайте на CMS Magazine