Sonberry — редизайн и развитие интернет-магазина

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

Ноутбук с интерфейсом интернет-магазина Sonberry на кровати рядом с парой

О проекте

Sonberry — интернет-магазин производителя матрасов, кроватей, мебели и аксессуаров для сна. Ассортимент устроен сложнее обычного каталога: одна модель может иметь разные размеры, материалы, ткани, цвета и другие параметры.

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

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

Клиент
Sonberry
Роль
UX/UI дизайн
Что делал
Дизайн интернет-магазина
Год
2020

Что нужно было улучшить

  1. Сделать товар понятнее

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

  2. Пересобрать карточку товара

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

    1. Десктопный макет карточки матраса Sonberry с предварительной комплектацией
    2. Десктопный макет карточки матраса Sonberry с описанием, доставкой и оплатой
    3. Мобильные макеты карточки матраса Sonberry и выбора комплектации

    Карточка товара — первый экран

    01 / 03

  3. Упростить выбор параметров

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

    1. Десктопная карточка матраса Sonberry с панелью проверки комплектации
    2. Десктопная карточка матраса Sonberry с панелью настройки матраса
    3. Мобильные макеты выбора комплектации, рассрочки и покупки в один клик

    Проверка комплектации

    01 / 03

  4. Обновить визуальную подачу

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

    1. Десктопный макет Sonberry с формой покупки матраса в один клик
    2. Десктопный макет Sonberry с окном выбора рассрочки или кредита

    Покупка в один клик

    01 / 02

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

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

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

Иерархия первого экрана

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

Выбор модели и размера

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

Ткани и цвета

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

Покупка и дополнительные сценарии

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

Результат

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

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

  1. Понятнее выбор товара

    Параметры собраны в последовательный сценарий и меньше конкурируют между собой.

  2. Выстроенная иерархия

    Цена, конфигурация и основное действие получили понятный приоритет на первом экране.

  3. Работа со сложным ассортиментом

    Большое количество размеров, тканей и цветов помещается в интерфейс без перегрузки основного сценария.

  4. Мобильный сценарий

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

Другие проекты

Две женщины передают друг другу розовую подушку «Услада»

Услада — сайт и интернет-магазин бренда товаров для домашнего комфорта

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

  • Редизайн сайта
  • Интернет-магазин
  • UX/UI дизайн
Смотреть проект

Давайте разберём
вашу задачу

Расскажите коротко о проекте — посмотрю задачу и предложу, с чего лучше начать.

@VitaleRuTelegramVitalyZhigalovDesign@yandex.ruEmail

Это предварительная версия формы. Сообщения пока не отправляются.