Перейти к содержимому

Независимый концепт-проект 4sidedevelop. Экраны и данные носят иллюстративный характер.

Концепт-проект

E-commerce и клиентский опыт

Forma Store

Интернет-магазин товаров для дома

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

Категория
E-commerce и клиентский опыт
Предлагаемый стек
Next.js, TypeScript, Headless-платформа для e-commerce (будет выбрана), Платёжный провайдер, например Stripe, CDN для изображений
Статус
Концепт — не клиентский проект
Витрина, карточка товара и мобильная корзина. Главная магазина, карточка товара с вариантами и сроком доставки и корзина на телефоне.

01

Задача

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

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

02

Для кого

  • Покупатель

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

  • Постоянный покупатель

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

  • Команда магазина

    Редактирует товары, варианты и фото и обрабатывает входящие заказы.

03

Предлагаемое решение

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

  • Каталог с фильтрами

    Комната, категория, материал, цвет и цена.

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

    Галерея, размеры, материалы и рекомендации по уходу.

  • Цвет и размер

    Цена и наличие меняются вместе с вариантом.

  • Избранное и корзина

    Сохранённые товары и корзина, где доставка видна сразу.

  • Оформление и личный кабинет

    Три шага, а затем статус заказа в личном кабинете.

  • Админка магазина

    Редактирование каталога и список заказов со статусами выполнения.

04

Ключевые сценарии

  1. 1Поиск товара

    1. Шаг 1: Отфильтруйте каталог по комнате, материалу или цене.
    2. Шаг 2: Сравните варианты в сетке и добавьте понравившиеся в избранное.
    3. Шаг 3: Откройте карточку товара, чтобы посмотреть детали и размеры.
  2. 2Выбор варианта и покупка

    1. Шаг 1: Выберите цвет и размер — цена и наличие обновятся.
    2. Шаг 2: Добавьте товар в корзину и проверьте срок доставки.
    3. Шаг 3: Оформите заказ в три шага: контакты, доставка, оплата.
  3. 3Отслеживание доставки

    1. Шаг 1: Подтверждение заказа содержит ссылку на личный кабинет.
    2. Шаг 2: На странице заказа видны все этапы — от подтверждения до доставки.
  4. 4Обновление каталога

    1. Шаг 1: Команда редактирует товар, его варианты и фотографии.
    2. Шаг 2: Остатки и цены задаются для каждого варианта.
    3. Шаг 3: Изменения можно просмотреть перед публикацией и опубликовать.

05

Экраны

Иллюстративные экраны с примерными данными, созданные для этого концепта.

Каталог с фильтрамиПрименённые фильтры остаются на виду над сеткой, а на каждой карточке сразу видны цена, цвета и наличие.
Карточка товараГалерея, выбор варианта, размеры и срок доставки — до кнопки «В корзину».
Мобильное оформление и статус доставкиОформление заказа в три шага на телефоне и страница заказа после него.
Админка магазинаТот же каталог глазами команды: варианты, остатки и входящие заказы со статусами выполнения.

06

Дизайн-решения

Сначала фотографии, потом интерфейс

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

Вариант определяет всё

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

Доставка до оформления

Ориентировочный срок доставки виден на карточке товара и в корзине, а не всплывает на последнем шаге.

Админка повторяет витрину

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

07

Что проверить

Концепт — это отправная точка. Эти вопросы стоит проверить на пользователях и решить в ходе реализации.

  • Какими фильтрами покупатели товаров для дома пользуются на самом деле: комната, материал, размеры или цена.
  • Отвечает ли карточка товара на достаточное число вопросов, чтобы их стало меньше до покупки.
  • Гостевое оформление или создание аккаунта.
  • Варианты доставки и расчёт сроков для крупногабаритных товаров.
  • Процесс съёмки и права на изображения новых товаров.

Предлагаемый стек: Next.js, TypeScript, Headless-платформа для e-commerce (будет выбрана), Платёжный провайдер, например Stripe, CDN для изображений. Экраны на этой странице созданы на React и Tailwind CSS специально для демонстрации. Фотографии товаров сгенерированы для этой демонстрации.

Есть похожий проект?

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