Кейс по разработке каталога, основной навигации и методам продвижения товаров
Было принято решение
Overview
В этом кейсе я бы хотел рассказать о моем опыте в этом проекте на примере работы над основной навигацией сайта, обновленной страницей каталога и решений, которые были внедрены для решения тех или иных задач, поставленных бизнесом, или обнаруженных в процессе исследований и анализа действующего интернет-магазина.
Проект редизайна интернет-магазина Quarta был начат в рамках планов по объединению оптового портала и розничного интернет-магазина в единый продукт. Основное внимание уделялось оптимизации и повышению пользовательского опыта для улучшения метрик интернет-магазина.
тесное сотрудничество вылилось в
2.1 Desktop interface
2.2 Filter interaction
2.3 Bonuses
2.2 Filter interaction
Мой вклад
My role
Принимал активное участие в создании новой дизайн-системы, которая объединяла два продукта, участвовал в исследованиях, выявлял проблемы и предлагал решения, направленные на улучшение пользовательского опыта и достижение бизнес-целей.
Проект реализован в рамках внутренней команды компании с участием внешних фронтенд-разработчиков. Моя роль заключалась в разработке основных элементов интерфейса, таких как навигация, обновленная страница каталога и другие элементы.
тесное сотрудничество вылилось в
3.1 My role
тесное сотрудничество вылилось в
3.2 Responsibilities
тесное сотрудничество вылилось в
3.3 Timeline
Дизайн строится на данных
Analysis
Анализ начался со сбора данных о сайте, выделения ключевых метрик и изучения конкурентов. Это стало основой для дальнейших исследований, включая глубинные интервью и юзабилити-тесты с представителями целевых сегментов аудитории. Комплексный подход, основанный на использовании фреймворков (JTBD, CJM, Persona), помог точно определить цели редизайна и понять потребности пользователей.
тесное сотрудничество вылилось в
4.1 Research timeline
тесное сотрудничество вылилось в
4.2 Interviews & Tests
Анализ начался с исследования конкурентов и сбора обратной связи от пользователей, через глубинные интервью и юзабилити-тесты. Пользователи часто отмечали общее неудобство и устаревшие паттерны интерфейса как у интернет-магазина Quarta, так и у конкурентов. Вместе с этим значительная часть респондентов сравнивала пользовательский опыт с популярными маркетплейсами, подчеркивая их удобство и ценность, которую они ожидали от нас.
Результаты интервью, тестов и анализа конкурентов учитывались при выборе методов проектирования пользовательских сценариев и интерфейсов. Мы принимали во внимание ожидания пользователей и их привычки, чтобы создать интерфейсы и сценарии, которые соответствовали их потребностям. Такой подход помог разработать решения, которые не только улучшили пользовательский опыт, но и отвечали стратегическим целям проекта.
мы выезжали в места, где
по предварительной договоренности проводились интервью
Респонденты подбирались на основе предыдущих
исследований целевой аудитории
тесное сотрудничество вылилось в
4.3 User Persona
тесное сотрудничество вылилось в
JTBD & CJM
4.5 Mixed-methods research
Key Business Objectives
Для проекта редизайна мы сформировали и согласовали с бизнесом ключевые бизнес-цели, чтобы показать ценность изменений и обосновать проектные решения.
Сделать процесс поиска и покупки товаров проще и быстрее, чтобы больше пользователей завершали заказы.
Создать привлекательные условия для постоянных покупателей через бонусные программы и улучшение сервиса.
Оптимизировать сайт для SEO и мобильных устройств, чтобы привлечь больше новых пользователей.
Добавить рекомендации и предложения для увеличения количества товаров в заказе.
Hypothesis
Для проекта редизайна мы разрабатывали продуктовые гипотезы, которые стали основой для интерфейсных решений. Они варьировались по масштабу и применялись при проектировании разных частей сайта, помогая фокусироваться на ключевых потребностях пользователей.
Если мы обновим визуальный стиль интерфейса, то повысится удобство использования и удовлетворенность пользователей.
Если мы оптимизируем основную навигацию, то пользователи смогут быстрее находить товары, увеличив количество заказов.
Если мы будем выделять акции и предложения, то больше пользователей будет совершать покупки на сайте.
Если мы подчеркнем ценность бонусной программы, то увеличится количество повторных заказов и регистраций ЛК
Это база
Design System
Стоит обратить внимание, что редизайн включал в себя небольшую смену айдентики с темных оттенков на более светлые, что мы сразу заложили в основу новой дизайн-системы. После создания более атомарных компонентов появлялись и более комплексные, которые в дальнейшем ускорили работу над созданием прототипов для демо и тестов.
В начале работы над проектом редизайна розничного интернет-магазина и интеграции оптового портала было принято решение о создании общей дизайн-системы. Для оптового портала некоторые компоненты прошли рефакторинг, для всего остального разработали новые компоненты и токены.
тесное сотрудничество вылилось в
5.1 Design System
38% Посещений
Desktop UI
В рамках этого кейса я хочу рассмотреть решения ключевых проблем интерфейса: устаревшей навигации, сложности поиска товаров и неудобных карточек продуктов. Здесь описаны решения для обновления навигации, каталога, фильтров, карточек товара и также немного о странице товара.
тесное сотрудничество вылилось в
- Переработать структуру страницы для увеличения числа товаров на первом экране
- Сохранить знакомое расположение элементов для удобства пользователей
Решение
- Пользователю требуется минимум один скролл для того чтобы добраться до полного содержания страницы
- Визуальные дыры и отсутствие структуры
Проблема
6.1 Desktop catalogue page
тесное сотрудничество вылилось в
- Пользователь затрудняется найти кнопку каталога
- Пользователь затрудняется найти ЛК
- Много визуальных дыр и пустого пространства, проблемы верстки
Проблема
- Поднять кнопку каталога к поисковой строке, выделить её
- Вынести интересующие пользователей разделы в правый ряд кнопок,
- Более плотная верстка
Решение
6.2 Top navbar
- Изменить формат блока отзывов и рейтинга
Решение
- Пользователи находят карточку товара малоинформативной
Проблема
- Добавить карусель быстрого просмотра
- Исходя из результатов исследований, решено было избавиться от неиспользуемой кнопки сравнения и артикула в карточке товара
- Бонусная программа является частью УТП сайта, нужно выделить количество баллов, которое пользователь может получить при покупке
- Со стороны бизнеса особо выделена потребность в создании приоритетных товаров с определенными лейблами (Новинки, Распродажа, Рассрочка), сделать их заметными и понятными для пользователей, поднять их в верхние строки результатов поиска и страниц каталога.
6.3 Item card
- Добавить фильтр с импутом диапазона и выбором одного параметра
- Обновить фильтр со списком и чекбоксами
- Добавить тогл-фильтры
Решение
- Пользователи редко пользуются фильтрами и находят их неудобными в использовании
Проблема
- Определить приоритетные фильтры
- Обновить функционал и добавить новые типы фильтров
- Добавить фильтр с поиском и внутренним скроллом
- Добавить фильтр с инпутом диапазона и быстрым выбором диапазонов
6.4 New filters
тесное сотрудничество вылилось в
- Пользователи затрудняются быстро оценить ключевые параметры товара
- Пользователям сложно находить дополнительные или похожие товары
- Пользователи сталкиваются с проблемами при оформлении товара
Проблема
- Вывести основные характеристики и цену в первый экран страницы
- Добавить блоки рекомендованных и похожих товаров под описанием
- Разделить первый экран на блоки: изображения, информация, оформление, цена и доставка
Решение
6.5 Product page
62% Посещений
Mobile UI
При редизайне мобильной версии мы разработали новые компоненты, адаптированные для удобного использования на небольших экранах, сохранив визуальную преемственность с десктопной версией. Особое внимание уделили внедрению лучших практик UX/UI для навигации, каталога, фильтров, карточек товара и страниц продукта.
тесное сотрудничество вылилось в
- Переработать структуру страницы для увеличения числа товаров на первом экране
- Сохранить знакомое расположение элементов для удобства пользователей
Решение
- Пользователю требуется минимум один скролл для того чтобы добраться до полного содержания страницы
- Визуальные дыры и отсутствие структуры
Проблема
7.1 Mobile catalogue page
тесное сотрудничество вылилось в
- Пользователи находят нижнее меню неудобным в использовании
Проблема
- Увеличить размер кнопок и визуально отделить меню от контента
Решение
- Пользователи затрудняются найти фильтры на странице каталога
- Пользователи не могут легко переключаться между категориями товаров
Проблема
- Добавить быстрый доступ к фильтрам через закрепленную панель
- Сделать категории видимыми и доступными в верхнем меню
Решение
7.2 New mobile navigation
- Добавить фильтр с импутом диапазона и выбором одного параметра
- Обновить фильтр со списком и чекбоксами
- Добавить тогл-фильтры
Решение
- Пользователи редко пользуются фильтрами и находят их неудобными в использовании
Проблема
- Полностью обновить фильтры на мобильной версии
- Определить приоритетные фильтры
- Обновить функционал и добавить новые типы фильтров
- Добавить фильтр с поиском и внутренним скроллом
- Добавить фильтр с инпутом диапазона и быстрым выбором диапазонов
7.3 Filters in mobile UI
- Изменить формат блока отзывов и рейтинга
Решение
- Пользователи находят карточку товара малоинформативной
Проблема
- Добавить карусель быстрого просмотра
- Исходя из результатов исследований решено было избавиться от неиспользуемой кнопки сравнение и артикула в карточке товара
- Бонусная программа является УТП сайта, необходимо выделить количество баллов, которое пользователь может получить при покупке
- Со стороны бизнеса особо выделена потребность создании приоритетных товаров с определенными лейблами (Новинки, Распродажа, Рассрочка), сделать их заметными и понятными для пользователей, поднять их в первые строки результатов поиска и страниц каталога
7.4 Mobile prouct page
Впереди релиз
Results
Работа над редизайном интернет-магазина стала для меня ценным опытом. Я углубил навыки анализа пользовательского опыта, исследовательских методик и проектирования интерфейсов, ориентированных на решение конкретных бизнес-задач.
Этот проект позволил мне научиться эффективно взаимодействовать с кросс-функциональными командами, адаптировать решения под реальные потребности пользователей и находить баланс между их ожиданиями и целями бизнеса.
8.1 Results
тесное сотрудничество вылилось в
8.2 Some stats
Редизайн интернет-магазина
Проект редизайна интернет-магазина оружейный квартал
Проект редизайна интернет-магазина Quarta. В этом кейсе я расскажу о работе над страницей каталога, карточках товара, фильтрах и о том как все это разрабатывалось
Оптовый портал
Product Design, B2B, Wholesale
тесное сотрудничество вылилось в