Разработка прототипа для сайта сумок Redmond

Сегодня рассмотрим прототип интернет-магазина сумок REDMOND, что должно в него входить и как он должен выглядеть.

Прототип интернет-магазина сумок Redmond

1 Этап анализ конкурентов

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

Проанализировано 15 конкурентов и выбраны растущие, на основании этих данных выписаны страницы каждого конкурента.

Пример, как делать анализ конкурентов рассказано в статье "SEO анализ конкурентов для будущего проекта".

2 Этап анализ коммерческих факторов сайтов конкурентов

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

Пример коммерческих факторов главной страницы:

1) Логотип

2) Телефон

3) Кнопка “Заказать звонок”

4) Гео

5) Слайдер

6) Услуги

7) Оплата

8) Работы

9) Отзывы

10) Вопрос-ответ

11) Прайс

12) И т.д.

3 Этап построение структуры типовых страниц и их вложенность

На данном этапе мы выстраиваем структуру типовых страниц и их вложенность. Результатом будет карта зависимостей и какие прототипы необходимо будет реализовать.

4 Разработка прототипа с учетом п.2

Сейчас мы разберем пример построения прототипа карточки товара

Прототип карточки товара интернет-магазина сумок Redmond

Первый экран карточки товара интернет-магазина сумок Redmond

Я использовал следующие элементы коммерческих факторов:

1. Фотография товара
2. Мини фотография товара в других ракурсах
3. Видео презентация товара или 3D ролик
4. Плашка Новинка, Хит или Скидка
5. Добавление в избранное
6. Н1 - Название товара
7. Для чемоданов выбор размера
8. Рейтинг звездочки
9. Количество отзывов к товару
10. Выпадающий список выбора размера и количество колец у чемоданов
11. Артикул товара
12. Первичные характеристики товара
13. Перечеркнутая цена
14. Экономия на покупке
15. % скидки
16. Сама цена товара
17. Выбор цвета у модели
18. Статус в наличии или только самовывоз
19. Выбор количества товара
20. Кнопка “В корзину” - добавление товара в корзину
21. Кнопка “Купить в 1 клик” - покупка с вводом 1 номера телефона
22. Самовывоз из магазина
23. Доставка по России

Информация о товаре в интернет-магазине сумок Redmond

Коммерческие факторы:

1. Описание товара - здесь будет текстовая информация и характеристики
2. Магазины - список магазинов, где находится данный товар
3. Доставка и оплата - информация текстовая
4. Отзыв - список отзывов к данному товару
5. Гарантии - текстовая информация
6. Описание товара
7. Характеристики товара

Информация о товаре в интернет-магазине сумок Redmond

Коммерческие факторы:

1. Вывод списком
2. Количество товара в наличии в магазине
3. Название магазина
4. Адрес магазина
5. Бронирование товара в магазине

Информация о товаре в интернет-магазине сумок Redmond

Коммерческие факторы:

1. Карта
2. Магазин на карте
3. Название магазина
4. Адрес магазина
5. Бронирование товара в магазине

Информация о доставке и оплате в интернет-магазине сумок Redmond

Информация о гарантии в интернет-магазине сумок Redmond

Блок категории и товаров, как доп продажа в интернет-магазине сумок Redmond

Коммерческие факторы:

1. Товар относится к разделам
2. Слайдер
3. Плитка тегов
4. С этим товаром покупают - для доп продаж и усиления карточки
5. Товар на листинге
6. Фото товара
7. Хит, новинка или скидка
8. Добавление в избранное
9. Рейтинг товара с числом отзывов
10. Артикул товара
11. Название товара
12. Цена товара
13. Экономия при покупке
14. Выбор цвета товара
15. Кнопка “В корзину” - добавление товара в корзину
16. Кнопка “Купить в 1 клик” - покупка с вводом только телефона

Автотекст в карточке товара в интернет-магазине сумок Redmond

Итог

Мы с вами рассмотрели построение прототипа на основании действующего проекта. Я вам подробно расписал, как строился прототип карточки товара для интернет-магазина сумок Redmond, и какие элементы использовались для построения.

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

В следующем кейсе по прототипам рассмотрим построение другой страницы.

P.S.

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