Общее описание продукта

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

Требования к MVP

Продукт на этой стадии должен включать в себя следующие модули

Пользовательская часть

• Информационные страницы (Домашняя, Контакты, О нас, Архив работ, Отзывы)
• Страницы выбора товаров (Каталог, Карточка товара)
• Страница оформления заказа
• Страницы профиля (Просмотр/редактирование личных данных, История заказов)
• Страницы входа/регистрации (Войти /Зарегистрироваться /Восстановить пароль)

Админ панель

• Страница управления товарами (Добавить/Редактировать/Удалить товар)
• Страница для управления контентом на информационных страницах (Изменить текст/Добавить коллекцию фотографий/Заменить фотографии)
• Страница управления заказами (Просмотр/Редактирование заказа)
• Страница модерации отзывов (Просмотр отзыва -> Одобрение / Отказ (причина отказа))
• Страница просмотра списка пользователей (Заблокировать/Восстановить/Изменить пароль)

Общая структура продукта

Требование к клиентской части

Входящие модули

Пользовательская часть

1. Домашняя страница
2. Страница контактов
3. О нас
4. Архив работ
5. Отзывы
6. Страница с каталогом товаров
7. Страница просмотра товара
8. Корзина
9. Личный кабинет
10. Страница оформления заказа

Домашняя страница

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

Страница с каталогом товаров

Описание страницы

Здесь стоит рассмотреть несколько вариантов каталогов. Пока мы точно не определились, какое количество продукции мы будем показывать в каталоге. Если товаров будет слишком мало (до 20 штук), то необходимо сделать страничку демонстрирующую все товары сразу. Пока остановимся на варианте, когда у нас много товаров.

Что из себя представляет каталог? Это место, где мы даем возможность покупателю оценить ассортимент. Мы должны сделать выбор максимально комфортным. Для этого будет блок с фильтрами.

Компоненты на странице

• Общая навигация
• Поиск
• Сортировка
• Фильтрация
• Список с карточками
• Карточка товара

Поиск

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

Сортировка

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

Фильтрация

Список фильтров:

• Событие - Подходящее к игрушке событие. Примеры: Новый год, 8 марта, день рождения и т.д.
• Цветовая палитра пряжи (Будет возможность собрать цветовые палитру сразу в фильтре).
• Высота игрушки (в сантиметрах): до 10см, 10-20, и т.д.
• Состав пряжи из которого сделана игрушка.
• Цена игрушки (будет модуль с ползунком и возможностью вписать границы числами).

В нижней части фильтра находятся кнопки "Очистить" и "Применить".

Списки будут формироваться исходя из настроек списков и тегов в админ панели. Максимальная цена будет определяться как максимальная цена игрушек, минимальная определяется аналогично. Правее от кнопки применить будет показана цифра, подходящих под настройку фильтров, игрушек. Если подходящих игрушек нет, то кнопка "Применить" не активна.

Список с карточками

Основная часть будет заполнена карточками товаров. В сетке каталога будет располагаться 3 карточки в одном ряду, таких рядов будет 10. Когда пользователь доходит до последнего товара происходит автоматическая подгрузка товаров (если количество всех товаров больше числа отображаемых). В момент погрузки будет отображаться анимация подгрузки.

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

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

В нижней части карточки будут содержаться используемые в игрушке цвета. Можно сделать это в виде горизонтальной полоски, состоящей из разноцветных кружочков, сами кружочки будут отсортированы по процентному содержанию в игрушке (самый заметный - левее). Если цветов много (больше чем 3), то мы должны поставить правее самого крайнего правого кружка "+" или троеточие, при нажатии на него мы увидим развернутую полосу с цветами). В развернутом виде максимальное количество отображаемых цветов - 7.

Также в карточке обязательно должно присутствовать название товара.

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

Сценарии действий пользователя

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

• Фильтрация товаров: выбор фильтров - пользователь выбирает один из фильтров, кнопка "Применить" в нижней части фильтра становится активной если количество товаров после фильтрации больше 0, иначе кнопка остается не активной. Если количество товаров больше 0, показываем это число в кнопке "Применить".

• Фильтрация товаров: применение фильтров - пользователь нажимает на кнопку "Применить" (если она доступна), происходит подгрузка новых товаров, на месте сетки с карточками, в момент подгрузки, появляется анимация загрузки.

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

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

• Поиск товаров: отсутствие товаров - пользователь вводит в окошко слово, нажимает иконку поиска, показывается анимация подгрузки, вместо списка товаров показывается информация об отсутствие подходящих предложений(подробнее в описание компонента поиска).

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

• Просмотр всех доступных для товара цветов - пользователь кликает на кружки с цветами, если их больше 3, то показывается список всех доступных цветов, повторный клик скрывает список в исходное положение.

• Переход на страницу товара - пользователь кликает на любую область в карточке товара, открывается страница товара.

Страница просмотра товара

Описание страницы

На эту страницу мы попадаем после клика на карточку товара из каталога. Здесь мы уже выводим большие изображения товара, даем полное описание материалов, из которых была изготовлена игрушка, а так же выводим расширенный блок с цветами (он будет похож на блок из карточки). Так же на этой странице будет кнопка "Добавить в корзину".

Сценарии действий пользователя

• Просмотр всех фотографий товара - изначально фокус установлен на первую фотографи

Иерархия страниц

1. Домашняя страница
2. Страница каталога

Магазин

В магазине будут продаваться игрушки нашего производства. Будет каталог с фильтром, который будет состоять из карточек товаров (превью). У каждой карточки будет показываться статус наличия товара. Если товар только будет выпущен, будет кнопка “Сделать предзаказ”, если товар выпускается серийно, но наличия пока нет, то выводим кнопку (????) . Также будет каталог игрушек не нашего производства. Он будет состоять из игрушек мастеров, прошедших одобрение (что-то типо авито).

Форум-блог-каталог схем Здесь будут представлены схемы, по которым каждый желающий сможет взять то, что ему хочется. Он будет оформлен также как и каталог с игрушками, но скорее всего карточки будут выглядеть немного иначе (более информативные).

Для всего этого нужна будет админ панель. В админке мы можем менять баннеры, добавлять новые позиции для нашего личного магазина и проводить модерацию товаров пользователей. На начальном этапе модерация будет проходить в ручном порядке (можно подключить ИИ в дальнейшем).

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

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