Студия Турум-бурум

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

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

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

Процесс создания дизайна интернет-магазина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наглядно переданный схематический процесс оформления товара

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

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

2. Аналитика

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример навигационной архитектуры

Пример навигационной архитектуры для проекта Avtoshuz

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

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

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

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

Вот так выглядел прототип главной страницы интернет-магазина Mon Amie.
Финальный дизайн интернет-магазина можно посмотреть тут.

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

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

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

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

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

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

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

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

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

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

Первый дизайн-концепт интернет-магазина Mon Amie

Первый дизайн концепт для интернет-магазина Mon Amie

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

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

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

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

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

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

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

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

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

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




Интересно


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

Эффективные способы проверки юзабилити сайта

Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.