Tilda Publishing

UX-проектирование

UI-дизайн

Исследования

О клиенте

Очкарик — одна из крупнейших сетей салонов оптики в России с широкой филиальной сетью по всей стране. История компании началась более 90 лет назад с Московского Объединения «Оптика», а с 2001 года она работает в формате салонов оптики.

Сегодня «Очкарик» предлагает полный спектр офтальмологических услуг: от профессиональной диагностики зрения до подбора и продажи контактных линз и очков. Компания располагает собственной научно-производственной базой, а современное высокоточное оборудование позволяет изготавливать индивидуальные оптические изделия любой сложности.

Tilda Publishing

Моя роль

Команда проекта: 2 дизайнера, менеджер проекта, аккаунт-менеджер.
Я выступала ведущим дизайнером проекта и отвечала за все этапы работы: от исследования до дизайна.
Финальные макеты мы дорабатывали совместно с другим дизайнером. В кейсе показаны только мои работы.

Tilda Publishing

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

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

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

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

Задача

#1 Веб-аналитика

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

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

#2 Бизнес-интервью с заказчиком

Я провела серию встреч с представителями клиента из разных подразделений, среди которых были:

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

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

Кроме того, отдельно обсудили и выделили новый функционал, который ещё предстоит реализовать.

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

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

Я рассмотрела 8 пользовательских сценариев, включая как десктопные, так и мобильные версии.
В процессе исследования я опиралась на следующие критерии:

• сколько шагов требуется для выполнения задачи?
• можно ли оптимизировать путь пользователя?
• есть ли неактивные зоны, которые не используются?
• на каких этапах пользователи сталкиваются с трудностями?

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

#4 Карточка товара

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

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

— Пересмотреть структуру первого экрана, так как текущая реализация значительно отличается от привычных пользовательских паттернов (нарушение эвристики согласованности и стандартов):

• Крупный заголовок занимает значительную часть первого экрана, что смещает потенциально важный контент вниз.
• Объемный блок с параметрами смещает ключевой элемент — кнопку CTA.
• Не отображалась информация о наличии товара в салонах города.
• Не было значка для добавления товара в список избранного, что ограничивало использование этой функции.

— Пересмотреть функционал добавления в корзину, включая:

• Возможность удаления товара из корзины через карточку товара (кнопка «-»).
• Смена статуса кнопки с «В корзину» на «В корзине».

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

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

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

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

#6 Проектирование

Прототипы я разрабатывала только для ключевых страниц сайта, чтобы сосредоточиться на их оптимизации и удобстве использования.
Вот какие страницы были включены в прототипирование:
— Главная
— Каталог
— Поисковая выдача
— Карточка товара
— Корзина
— Чекаут
— Вход/Регистрация
— Экран успеха (заказ оформлен)
— Личный кабинет
— Запись к врачу
— Программа MyAcuvue

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

#7 Дизайн

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

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

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

Корзина

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

Ключевыми нововведениями стали: функция выборочного оформления заказа, массовое удаление товаров и возможность перемещения позиций в «Избранное». Четкое визуальное разделение между товарами значительно улучшило читаемость состава корзины и параметров каждого товара.

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

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

Запись к врачу

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

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

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

Запись к врачу

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

«MyACUVUE» не является частью проекта «Очкарик», так как это программа лояльности от компании Johnson & Johnson. Моей задачей было интегрировать её в раздел личного кабинета интернет-магазина с учётом всех специфичных правил и ограничений.

Я разработала интерфейсы для нескольких сценариев взаимодействия.
Например, если пользователь зарегистрирован в программе лояльности, но ещё не прошёл бесплатный подбор линз в салонах оптики «Очкарик», ему не будут доступны купоны со скидками на продукцию ACUVUE.
Такой подход позволил выстроить чёткую логику взаимодействия, обеспечивая соблюдение условий программы и улучшение пользовательского опыта.

Результат

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

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