Описание
Шаблонный интернет-магазин, подходящий под любое направление бизнеса, обеспечивает предпринимателям возможность быстро запустить свой онлайн-магазин и начать продавать товары или услуги. Это готовый к использованию инструмент, который позволяет существенно сократить время и затраты на создание магазина.
Заказчик: Компания САБ
Роль в проекте: Ux/Ui дизайнер, team leade.
Кто еще был в команде: Frontend Developer.
Ссылка на макет: figma.com
(Ссылку на полную версию предоставляю при личном общении)
Ссылка на демо сайт grocery.demo.sab-it.ru
Проблема
Создание интернет-магазина для микро или малого бизнеса может быть рискованным решением из-за больших инвестиций, которые могут не окупиться.
Решение
Используя шаблонное решение, можно значительно снизить эти риски. Шаблонный магазин стоит дешевле, чем создание индивидуального решения с нуля.
Проведя анализ интернет магазинов, было принято решение создать две версии страниц: главная, категория, карточка.
V1 — в первой версии, изображение товара не имеет главную роль, такие как магазин продуктов.
V2 — во второй версии изображение товара имеет ключевую роль в продаже, такие как магазин одежды.
Этапы работы
Анализ
- Анализ органической выдачи и коммерческой выдачи в Яндекс и Google.
- Поиск конкурентов.
- Анализ структур сайтов конкурентов.
- Анализ Ux/Ui конкурентов.
Проектирование UX
- Создание user flow.
- Создание site map.
- Создание workflow.
- Создание прототипа по собранным данным.
Создание дизайна сайта UI
- Создание Ui kit для проекта.
- Создание визуальных элементов для сайта.
Страницы сайта
UX проектирование
User Story Map
Команда проекта провела анализ требований и разработала User Story Map, на котором были отмечены приоритеты задач. Основываясь на этой информации, был сформирован backlog проекта, который включал в себя список задач, отсортированных по приоритетам.
Site map
Создана структура сайта, обеспечивающая удобную и интуитивно понятную навигацию по всем разделам и подразделам.
Workflow
В ходе разработки проекта была создана workflow для всех страниц сайта, а также для интерактивных элементов, элементов управления и ссылок. Workflow регулярно обновлялся по мере развития проекта.
Prototype site
На основе анализа конкурентов и исследования пользовательского опыта был создан прототип интернет-магазина. Это позволило учесть все ошибки и недочеты других сайтов, а также сделать интерфейс максимально удобным для пользователей.
UI kit проекта
Typography
Для заголовков используется шрифт Gilroy, а для основного текста — PT Sans. Такое сочетание обеспечивает читаемость и привлекательность текста для пользователей.
Colors
Для шаблонного интернет-магазина разработана цветовая палитра, которая обеспечивает единство восприятия интерфейса и создает приятное визуальное впечатление у пользователей.
Icons
Были созданы наборы иконок, которые используются в данном проекте. Это позволяет придерживаться единого стиля и облегчает работу программиста.
Buttons
В рамках проекта были созданы кнопки различных размеров, цветов, с иконками и без, а также в различных состояниях (например, нажатые или выделенные). Это позволило создать универсальный и адаптивный дизайн кнопок, который соответствует различным стилям и функциям на сайте.
Input
В рамках проекта были разработаны поля для ввода текста различными состояниями. Это позволило улучшить взаимодействие с пользователем и обеспечить удобство использования форм.
Elements
В рамках проекта был создан список наиболее важных вспомогательных элементов, которые могут быть использованы для улучшения функциональности и эстетики сайта.
Система отступов
Была создана система отступов для сайта. Это помогает придерживаться единых стандартов и помогает при правках и возращении к проекту.
Результат
Созданные страницы
- Главная страница V1
- Категория V1
- Страница товара V1
- Главная страница V2
- Категория V2
- Страница товара V2
- Контакты
- Корзина
- Избранное
- Оформления заказа
- Страница благодарности
- 404
UX/UI часть
- Создал user flow
- Создал site map
- Создал work flow
- Создал прототипа по собранным данным
- Создал Ui kit для проекта
- Создал визуальные элементы для сайта.
Спасибо за просмотр!
Я открыт к новым сотрудничествам. Если хотите разработать сайт, свяжитесь со мной удобным для вас способом.