Разработка прототипа интернет-магазина по продаже косметики

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

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

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

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

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

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

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

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

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

1) Логотип
2) Телефон
3) Кнопка “Заказать звонок”
4) Гео
5) Слайдер
6) Услуги
7) Оплата
8) Работы
9) Отзывы
10) Вопрос-ответ
11) Прайс
12) И т.д.

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

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

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

Сейчас мы разберем пример построения прототипа категории интернет-магазина без шапки и подвала.

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

Рисунок 1 - Первый экран категории

Из рисунка 1:

1) Хлебные крошки
2) Н1
3) Блок с тегами (Сокращенное название и ссылка на категории или коллекцию товаров)
4) Сортировка
5) Показ количества товаров на странице
6) Слайдер тегов

Рисунок 2 - Фильтр

Из рисунка 2:

1) Ссылка на статью подходящую к данной категории
2) Возможность ввести цену от и до, внутри со значениями
3) Бегунок, чтобы можно было выбрать не вводя цену
4) Акции - открытые
5) Чекбокс для выбора акций, чтобы отфильтровать товары
6) Фильтр по типу - выбор по чекбоксу
7) Фильтр по показаниям - выбор по чекбоксу
8) Фильтр по типу продукта - выбор по чекбоксу
9) Скрыть фильтр
10) Открыть фильтр
11) Ссылка на советы косметолога по данной категории косметики

Рисунок 3 - Товар на листинге

Из рисунка 3:

1) Значок хита
2) Возможность добавить в избранное
3) Фото товара
4) Значок подарка при покупке данного продукта
5) Рейтинг товара
6) Код товара
7) Название товара в 2 строки
8)Текст 1-2 строки для чего косметика
9) Стоимость без скидки
10) Стоимость со скидкой перечеркнутая
11) Показ % скидки
12) Кнопка “В Корзину“, при нажатии товар отправляется в корзину
13) Кнопка “Купить в 1 клик”, при нажатии выходит окно с товаром и вводом номера телефона
14) Показ наличия товара на складе

Рисунок 4 - Дополнительные блоки

Из рисунка 4:

1) Блок статей к категории
2) Обложка статьи
3) Название статьи в 2 строки
4) Баннер с акцией
5) Баннер на листинге с акцией
6) Кнопка “Узнать подробнее”, ведет на информацию об акции

Рисунок 5 - Дополнительные блоки

Из рисунка 5:

1) Н2 - с этим товаром покупают, дополнительная перелинковка и уникализация листинга
2) Фото товара
3) Бесконечный слайдер товаров
4) Название товара
5) Блок “Уточнить поиск”
6) Возможность добавление по видам уточнения, например, по задаче, для чего применять
7) Ссылки на коллекции
8)Ссылка “Показать еще”, если есть еще коллекции, то открывается весь список

Рисунок 6 - Подвал страницы

Из рисунка 6:

1) Текст категории, если он понадобится
2) Баннер к тексту

Итог

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

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

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

P.S.

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