STADION — проект интернет-магазина «Стадион ПРО» с товарами для спорта — от профессиональной экипировки до одежды для фитнеса. Его задача — развить онлайн-продажи розничного бизнеса и объединить покупки на сайте с сервисами офлайн-магазина.
Роль
Ведущий дизайнер
Направление
E-commerce, B2C
Период
Февраль - сентябрь 2024
Масштаб
Более 10 000 товаров
Пробел или Enter — остановить или воспроизвести видео.
Запрос от владельца магазина поступил весной 2024 года.
Небольшой сайт на Tilda уже работал, но его функциональности не хватало для растущего ассортимента и масштабирования бизнеса.
Я отвечал за анализ покупательских задач по открытым источникам, пользовательские сценарии, архитектуру, веб- и мобильные интерфейсы и дизайн-систему. Решения обсуждал и прорабатывал вместе с командой клиента с учётом сроков, стадии продукта и ограничений разработки.
Заказчик ставил задачу спроектировать интернет-магазин федерального масштаба с каталогом более 10 000 товаров.
Ориентиром стали крупные спортивные сети: удобный выбор, информация о наличии, доставка, оплата и сопровождение заказа.
Пять этапов — от изучения рынка до подготовки интерфейсов и компонентов к разработке.
Изучил открытые отзывы покупателей, ассортимент и интерфейсы конкурентов, чтобы сформулировать гипотезы о задачах и барьерах при покупке спортивных товаров.
По открытым отзывам и интерфейсам магазинов изучил вопросы, возникающие при выборе спортивных товаров: поиск, фильтры, сравнение предложений, размеры и наличие.
Отдельно рассмотрел ассортимент и сезонные предложения в категориях фитнеса, бега, командных видов спорта и активного отдыха. Сравнил, как крупные магазины организуют выбор товаров по назначению, уровню подготовки и бюджету.
Для анализа использовал отзывы о спортивных интернет-магазинах, комментарии на маркетплейсах и обсуждения на форумах и в социальных сетях.
Искал повторяющиеся жалобы и вопросы: сложности с поиском товара и нужного размера, неясные условия доставки, стоимость заказа и недостаток информации перед покупкой. На их основе сформулировал возможные барьеры, которые следовало учитывать при проектировании.
По повторяющимся темам из открытых отзывов сформулировал Job Stories — описания ситуаций, мотивов и ожидаемых результатов покупки без привязки к конкретному экрану.
Ключевые темы — наличие товара и размера, итоговая стоимость, доставка, сохранение корзины, достоверность информации и возможность получить поддержку.
Вместе с заказчиком выбрали для сравнения Спортмастер, Кант, Триал-спорт и Декатлон. Изучили структуру каталогов, способы выбора товара, доставку и оформление заказа.
На примерах Золотого яблока, Lamoda и ВсеИнструменты сравнили поиск, навигацию и оформление покупки за пределами спортивной категории.
После анализа открытых материалов и решений конкурентов перешли к пользовательским маршрутам, архитектуре каталога и ограничениям системы.
На основе Job Stories вместе с командой проработали поиск и выбор товара, корзину, оформление и отслеживание заказа. В User Flow — схемах пользовательских маршрутов — зафиксировали основные шаги, развилки и состояния интерфейса.
Вместе с командой клиента спроектировали структуру интернет-магазина с каталогом из 163 разделов. При построении архитектуры учитывали интеграции с доставкой, оплатой и СМС-уведомлениями.
Предусмотрели три роли — посетитель, покупатель и администратор. Для каждой определили доступные разделы, действия и ограничения доступа.
До детализации экранов проходили основные сценарии с командой и знакомыми клиента. Обсуждали последовательность действий и спорные шаги, сверяли решения с бизнес-ограничениями.
Ключевые покупательские сценарии в веб- и мобильных интерфейсах магазина.
Начали с мобильной версии — подхода Mobile First. Визуальный язык построили на зелёном и оранжевом цветах, контрастной типографике и спортивной графике. Для веба и мобильных устройств сохранили общую логику навигации и взаимодействия.
На главной выделили основные категории, актуальные предложения и переходы к поиску товаров. Структуру выстроили так, чтобы покупатель мог начать с нужного раздела, бренда или товарной подборки.
В поисковой панели предусмотрели выдачу по мере ввода запроса. Рядом разместили историю поиска, ранее просмотренные товары и рекомендации, чтобы покупатель мог продолжить выбор без повторного прохождения каталога.
В каталоге объединили навигацию по категориям с выбором цвета, размера и количества товара. Часть параметров можно задать без перехода в карточку товара.
При проектировании карточки опирались на сравнение интернет-магазинов. Основное фото сделали главным визуальным ориентиром, дополнительные изображения собрали в карусель. Характеристики и параметры выбора расположили рядом с кнопкой добавления в корзину, чтобы ключевая информация была доступна в одной области.
В корзине предусмотрели изменение размера, цвета и количества товара, перенос в избранное и удаление позиций. Рядом с составом заказа разместили расчёт стоимости, скидок и итоговой суммы.
Оформление выстроили как последовательность выбора способа получения, адреса и оплаты. Перед подтверждением заказа показали данные получателя, применённые бонусы и итоговую сумму.
Сохранённый адрес из личного кабинета можно выбрать при следующей покупке без повторного ввода. Новые адреса добавляются в список и остаются доступны для будущих заказов.
Предусмотрели самовывоз, выбор пункта выдачи на карте и доступной даты получения. Если товары нельзя доставить одновременно, интерфейс сообщает о разделении заказа: покупатель может получить часть товаров раньше или дождаться общей доставки.
В личном кабинете собрали историю и статусы заказов, бонусы, личные данные и адреса доставки. Для профиля предусмотрели редактирование данных и настройки безопасности.
Дополнительные страницы магазина и подборка состояний мобильного интерфейса.
Компоненты, состояния и правила для разработки и поддержки интерфейсов.
Подготовили библиотеку компонентов, цветовых токенов и состояний для веб- и мобильных интерфейсов. Для элементов описали назначение, варианты использования и поведение, чтобы дизайнеры и разработчики могли опираться на общие правила при дальнейшей работе.
Основа для разработки магазина и последующих изменений.
В проекте связали каталог, выбор товара, оформление и получение заказа. Архитектура учитывает расширение ассортимента и интеграции с доставкой, оплатой и СМС-уведомлениями.
Компоненты и их состояния описали в единой библиотеке. Документация фиксирует правила использования и поведение элементов для дальнейшей разработки и изменений интерфейса.
Спроектирована архитектура товарного каталога.
Подготовлены связанные экраны поиска, выбора товара, корзины, оформления и получения заказа.