Дизайн-проект конструктора сайта интернет-магазина «Технополюс»

全文:

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

Цель — ускорить и систематизировать разработку дизайна интернет-магазинов с помощью использования библиотеки универсальных взаимозаменяемых дизайн-элементов; оптимизировать работу дизайнера над проектами дизайна сайтов; увеличить конверсию интернет-магазинов путем внедрения универсальных дизайн-элементов из библиотеки (конструктора), созданных в соответствии с рекомендациями UX дизайна интернет-магазина и шаблонов пользовательского поведения.

Методы. В рамках разработки дизайн-проекта были поставлены следующие задачи: определение целевой аудитории интернет-магазинов; изучение и анализ исследовательских материалов; анализ конкурентов, мирового и отечественного опыта; формирование перечня рекомендаций к UX дизайну интернет-магазинов; сбор референсов и формирование доски вдохновения; эскизирование, схематизация структуры сайта; создание библиотеки дизайн элементов (конструктора).

Целевая аудитория: товарный бизнес — офлайн- и онлайн-предприниматели в РФ, занимающиеся оптовой и розничной продажей различной продукции. Основные сферы деятельности ЦА: автозапчасти и автотовары; одежда, обувь, аксессуары; парфюмерия, косметика; товары для дома и ремонта; электроника и техника (рис. 1) [1].

 

Рис. 1. Отношение конверсии заказов товаров разных категорий в сфере e-commerce

 

На основе сбора и анализа исследований Baymard Institute [2], принципов дизайн-системы Google Material Design [3], законов UX дизайна Джона Яблонски [4] был сформирован перечень рекомендаций и стандартов UX дизайна и структуры интернет-магазина, на основе которого разработана библиотека (конструктор) интернет-магазина.

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

 

Рис. 2. Схема-структура интернет-магазина

 

Рис. 3. Дизайн-элементы конструктора интернет-магазина

 

Результаты. Итог проделанной работы — библиотека дизайн-элементов, страниц, а также планшетной и мобильной версий интернет-магазина, которая находится в виртуальном облачном пространстве программы Figma, откуда ее можно скачать в виде файла на внешний носитель или отправить на нее ссылку, после перехода на которую можно будет в браузере скопировать дизайн-систему к себе в файлы аккаунта Figma и пользоваться ей, создавая дизайн-проекты интернет-магазинов различной тематики (при наличии зарегистрированного аккаунта Figma). Без авторизации в Figma конструктор будет доступен только для просмотра. Также в качестве апробации на основе разработанного конструктора был создан дизайн интернет-магазина по продаже бытовой техники. Использование библиотеки в работе дизайнера позволит, во-первых, оперативно и систематизировано собирать графические макеты дизайна интернет-магазинов различной тематики и наполненности; во-вторых, обеспечивать высокий уровень качества дизайна создаваемых интернет-магазинов благодаря проработанным дизайн-элементам и страницам в соответствии со стандартами UX дизайна;
в-третьих, способствовать повышению конверсии разрабатываемых сайтов благодаря структуре и дизайну, созданным на основе существующих шаблонов пользовательского поведения. Результатом разработки является библиотека (конструктор) готовых дизайн-элементов для оперативного создания высококонверсионных, продающих интернет-магазинов.

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

作者简介

Тольяттинская академия управления

Email: valya.cot123@gmail.com

студентка, группа ДзБ19

俄罗斯联邦, г. Тольятти

Тольяттинская академия управления

编辑信件的主要联系方式.
Email: foks1973@list.ru

преподаватель, кафедра дизайна

俄罗斯联邦, г. Тольятти

参考

补充文件