Аналитика и дизайн интернет-магазина оптики

• О клиенте

• Задача

• Веб-аналитика

• Бизнес-анализ

• Аудит пользовательских сценариев

• Информационная архитектура

• Проектирование

• Дизайн

• Интерфейсные решения

• Результат

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

В процессе работы нам предстояло:

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

Работа над проектом включала в себя несколько этапов: бизнес-анализ, UX-аудит текущих сценариев, проектирование, разработку дизайн-концепции, дизайн внутренних страниц и адаптивов, фронтенд- и бэкенд-разработку. 

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

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

Провели ряд встреч с представителями клиента из разных отделов:

• начальником отдела инновационных бизнес-процессов;
• руководителем по цифровой трансформации;
• директором по маркетингу;
• руководителем интернет-маркетинга;
• директором по e-commerce.

Цель — выяснить, насколько пользовательские ожидания (с учётом данных веб-аналитики) соответствуют задачам бизнеса, опровергнуть и подтвердить гипотезы со стороны бизнеса, проговорить все ограничения (например, юридические, технические), которые существуют.

Отдельно обсудили и выделили новый функционал, который только планируется реализовать.

Проводили параллельно с бенчмарк-анализом, чтобы сразу дать рекомендации и показать хорошие решения, как это можно реализовать.

Рассмотрели 8 пользовательских сценариев (8 ПК и 8 моб.). В ходе исследования опирались на следующие критерии:

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

Например, карточка товара — это «точка принятия решения» в интернет-магазине. 

Страница оказывает влияние на весь пользовательский путь и является драйвером конверсии.

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

#1 Пересмотреть структуру первого экрана

Текущая реализация сильно отличалась от привычных пользовательских паттернов и нарушала ряд эвристик юзабилити: 

• крупный заголовок занимал значительную часть первого экрана и смещал потенциально важный контент вниз;
• объёмный блок с параметрами смещал ключевой элемент — кнопку СТА;
• не было информации о наличии товара в салонах города;
• не было иконки, которая позволяет добавлять товар в список избранного.

#2 Пересмотреть реализацию части функционала

А именно: добавление в корзину (возможность удаления товара из корзины через карточку товара), смена статуса кнопки с «В корзину» на «В корзине».

#3 Поднять выше конверсионные блоки

В частности рекомендации по сопутствующим товарам. 

#4 Разместить информацию и характеристики 

Наполнить все карточки товаров полезным описанием, сделать перелинковку по ключевым характеристикам.

#5 Облегчить функционал отзывов

Убрать лишние (неиспользуемые) элементы.

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

Отчёт презентовали бизнес-группе. Совместно с командой клиента оценили влияние UX-проблем на бизнес-метрики и сформировали роадмап будущих работ.

Некоторые доработки были вынесены в бэклог. К ним планировалось вернуться после проработки основных проблемных мест в интерфейсе.

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

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

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

Работу начали с дизайн-концепции, которую показывали  на примере главной страницы.

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

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

Итоговый вариант главной страницы сохранил принцип блочности. В первом экране оставили два баннера: промо товара и ключевой услуги компании. Ниже — карусель товаров и специальные предложения: хиты продаж, акционные товары, новинки магазина. Для SEO-продвижения предусмотрели блоки с новостями, блогом и дополнительными услугами. Отдельным блоком рассказали о бонусной программе MyACUVUE, которая позволяет совершать более выгодные покупки.

Поиск оптимальных решений в дизайне затронул не только главную страницу, но и внутренние разделы и страницы сайта.

Перед нами стояла задача лаконично расположить важную информацию в мини-карточке товара:

• ключевые теги (шильдики);
• отзывы;
• рейтинг товара;
• новую и старую цены;
• кнопку добавления в избранное;
• кнопку добавления в корзину.

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

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

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

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

Отдельный важный функционал сайта — запись к врачу на подбор очков, контактных линз или проверку зрения. 

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

Отдельное внимание уделили интерфейсам по программе лояльности MyACUVUE. Она касается контактных линз ACUVUE и сопутствующих товаров.

MyACUVUE — это программа лояльности от компании JohnsonJohnson, которую предстояло внедрить в один из разделов личного кабинета интернет-магазина, опираясь на определённые правила и ограничения.

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

В зависимости от вида регистрации в программе лояльности также меняется вид страницы с подробным описанием продукции.

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

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

Для компании обновлённый интернет-магазин стал не просто инструментом онлайн-продаж, а полноценной цифровой витриной бренда. Он подчёркивает экспертность, объединяет ключевые направления — продукцию, услуги, запись к врачу, спецпредложения и лояльность. Новый сайт укрепил доверие аудитории и заложил прочную основу для роста конверсии и расширения клиентской базы.