Кейс прототипа мини-маркетплейса: главная и карточка товара

Кейс прототипирования
Два ключевых экрана мини-маркетплейса ещё до нового дизайна

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

Главная
Карточка товара

Редизайн начали со структуры

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

Поэтому первым рабочим результатом стали два прототипа – главной страницы и карточки товара.

Логика проекта
Существующий маркетплейс
Определение ключевых экранов
Прототипирование
Основа для редизайна

Архитектура прототипа

Две страницы – два основных сценария

Для этого этапа заказчику требовались только два прототипа. Каждый решает свою задачу и показывает отдельный уровень взаимодействия пользователя с площадкой.

01

Главная страница

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

02

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

Предметный экран, на котором пользователь работает уже с конкретным предложением.

01 / ГЛАВНАЯ СТРАНИЦА

Прототип главной страницы мини-маркетплейса

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

Роль экрана


Первый уровень площадки


Главная задаёт общую структуру взаимодействия и связывает пользователя с внутренними страницами.




Главная страница – прототип


Прототип главной страницы мини-маркетплейса

02 / КАРТОЧКА ТОВАРА

Прототип страницы конкретного товара

Второй макет посвящён карточке товара. Здесь сценарий уже меняется: пользователь находится не на общей площадке, а рассматривает отдельное предложение.

Именно поэтому главную страницу и карточку товара имеет смысл проектировать как два самостоятельных типа экранов.

Пользовательский маршрут

От общей площадки – к конкретному предложению

Даже два прототипа уже позволяют показать два уровня интерфейса маркетплейса и проверить их связь до перехода к детальному визуальному оформлению.

Шаг 1

Главная

Шаг 2

Товар

Что показывает этот кейс

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

Другие кейсы прототипирования

Интернет-магазин цветов

Посмотреть кейс →
Онлайн-библиотека

Посмотреть кейс →
Аренда апартаментов

Посмотреть кейс →

Новый проект

Проектируете маркетплейс или каталог товаров?

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