Все, что нужно знать собственнику о процессе создания дизайна интернет-магазина

Создание дизайна интернет-магазина - многоэтапный процесс, который часто остается за кадром. Но его непонимание в разы усложняет взаимодействие между владельцем e-commerce проекта и UX-агентством. В этой статье мы покажем всю внутреннюю кухню дизайнеров и покажем, какие ваши действия приблизят проект к успешному результату.

Обычно e-commerce проект в нашей студии проходит такие этапы создания дизайна:

• Сбор требований
• Аналитика
• Создание прототипа
• Создание стилистики

1. Сбор требований

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

1. Заполните бриф

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

2. Укажите своих конкурентов и их преимущества

Это поможет UX-специалисту окунуться в вашу конкурентную среду.

3. Покажите наглядно свои предпочтения

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

4. Предоставьте все необходимые материалы

Если у вас есть фирменный стиль, не забудьте указать это и предоставить брендбук перед началом работ.

5. Расскажите детальнее о целевой аудитории

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

Активное участие заказчика в процессе создания дизайна интернет-магазина — залог успешной реализации проекта.

2. Аналитика

1. Предоставьте доступ в Google Analytics

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

2. Покажите данные с других подключенных сервисов

Если на сайте были подключены специальные онлайн сервисы, то данные анализируются и с них. Например, записи сессий и тепловые карты HotJar или комментарии покупателей, собранные с помощью Survio.

3. Определитесь с функционалом

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

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

Кто может привлекаться на этом этапе?

• Чтобы упростить продвижение сайта в дальнейшем, для разработки структуры каталога может привлекаться SEO специалист.
• Нередко проектировщики связываются с call-центром интернет-магазина под видом обычных покупателей, чтобы проверить, как налажен процесс заказа товара.
• Если стоит вопрос о создании нового дизайна интернет-магазина или улучшении старого, может быть привлечен юзабилити-специалист для проведения полного юзабилити-аудита сайта.

3. Создание прототипа

После того как требования и аналитика собраны, проектировщик создает информационную и навигационную архитектуру.

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

Далее мы создаем прототип ключевых страниц интернет-магазина, а именно:

• Главной страницы
• Страница выдачи товара
• Карточки товара
• Корзины
• Оформления покупки
• Страницы благодарности

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

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

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

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

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

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

4. Создание стилистики

На основании утвержденной структуры прототипа UI-дизайнеры разрабатывают первую дизайн-концепцию.

Пройдите опрос на 5 примеров

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

После того как детально проработанный дизайн-концепт создан, готовится его презентация с пояснением выбора элементов.

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

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

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

Из нашей практики 80% проектов утверждаются на этапе первой итерации (презентации).

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

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

Завершаются работы по UI созданием таблицы стилей. Это документ, который содержит перечень элементов дизайна с их состояниями, цветами и размерами. Он нужен для того, чтобы при создании новых страниц в будущем или изменении элементов дизайна, сохранилась общая заданная стилистика. А все изменения смотрелись гармонично и вписывались в дизайн-концепт.

Что вы должны получить в результате создания дизайна интернет-магазина

• Детализированный прототип интернет-магазина с проработанной валидацией полей и информационной архитектурой
• Исходники дизайн-макетов с проработанными состояниями и адаптивной версией
• Таблицу стилей или UI-гайд
• Сопутствующую документацию

Это должен быть проект, где учтены не просто пожелания по дизайну, а все особенности вашего бизнеса. Как видите, достижение такого результата во многом зависит от степени вашего вовлечения в проект. О том, как правильно наладить процесс работы с UX/UI агентством читайте в статье по ссылке.

‍