Google, Stadia — January 2023

Проект редизайна интернет-магазина Quarta возник в ответ на снижение продаж и отток значительной части аудитории в сторону маркетплейсов. Бизнес поставил перед командой задачу по полному редизайну сайта, с акцентом на улучшение UX/UI решений, направленных на повышение продаж и обеспечение более масштабных планов по повышению NPS.

О продукте

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

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

Взаимодействие пользователя с устройством как с инструментом требует совершенно иного подхода.

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

Работал старшим дизайнером во внутренней команде компании, взаимодействовал с дизайнерами внутри команды, командой со стороны разработчиков, руководителями других отделов и Product Owner'ом.

Моя роль в продукте

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

Анализ нынешнего сайта

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

Целевая аудитория и создание персон

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

JTBD исследование

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

Дизайн-система

Здесь про то как структурировали дизайн систему

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

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

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

Хэдэр, каталог и поиск

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

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

Категории и страница товара

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

Результат

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

О моих итогах