Разработка интернет-магазинов

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

• актуальность и новизну идеи для рынка
• задачи юзеров, которые должен решать продукт
• ключевой функционал интернет-магазина
• крутые фичи и нестандартные для ниши решения

Формируем модель позиционирования, прорабатываем критерии принятия решения на сайте и точки контакта пользователя с продуктом. На основе полученных данных составляем продающую структуру интернет-магазина, где ритмично чередуем информационные и вовлекающие блоки — поддерживаем и усиливаем вовлечение, а не «ослепляем» бесконечными баннерами. Тестим маркетинговые решения на фокус-группах и на старте отсекаем неэффективные гипотезы: одновременно облегчаем user flow и делаем каждое соприкосновение клиента с системой выгодным для бизнеса.

При помощи Customer Journey Map проектируем путь взаимодействия пользователя с интернет-магазином от первого касания до покупки. Учитываем каждую возможную вариацию сценария пути до совершения целевого действия и вероятные варианты отклонения от него. Пропускаем ключевые взаимодействия юзера с продуктом через карту эмпатии, чтобы помочь пользователю принять верное решение, а бизнесу — его монетизировать. Обязательно закладываем фичи персонализации, чтобы продукт не просто соответствовал новым стандартам пользовательских ожиданий, но и вызывал «полезное привыкание».

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

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

Мы не просто «раскидываем» кнопки по фрейму, согласно устоявшимся паттернам — мы предопределяем поведение пользователя на основе результатов предпроектных исследований, размещая функциональные элементы именно там, где юзер ожидает и хочет их видеть. Таким образом, получаем понятный каталог с полным набором функций и удобной системой фильтрации, сортировки, сравнения позиций; емкие страницы товаров без спама и бесполезного функционала, усложняющих flow; вовлекающую корзину и страницу оформления заказа, где пользователь не дожидается заветной скидки в 90%.

Делаем продукт не просто удобным, но и отзывчивым: учитывая психологию поведения ЦА и законы UX, продумываем микро отклики интерфейса на любое действия юзера (уведомления, подсказки, виджеты и пуши). Отдельное внимание уделяем этапам регистрации и входа: выстраиваем систему мотивации для регистрации, а сам опыт логина делаем нативным и положительным для пользователя, сражаясь против каждого лишнего клика.

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

Прорабатываем UX-тексты для каждого текстового функционального элемента, поддерживая общий tone of voice продукта. Выполняем базовую SEO оптимизацию для лучшего продвижения интернет-магазина в поисковиках. Наша цель — выпустить продукт, интерфейс которого последовательно подводит к покупке, концентрирует внимание на товаре и его преимуществах, работает по привычным для пользователя алгоритмам и создает ощущение «общения» с продуктом one to one.

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

Пример прототипа высокой детализации

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

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

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

Отдельно прорабатываем мобильную версию: адаптируем интернет-магазин не пропорциональным уменьшением элементов, а корректировкой пользовательского опыта с четким пониманием «правил игры» десктопа и адаптива.

После комплексного UX/UI теста, готовим подробное ТЗ на верстку и бэк, где учитываем не только конверсионные анимации, но и логику абсолютно каждой кнопки, выстраивая полноценную карту перелинковок.

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

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

Проводим комплексное QA QC тестирование сайта на однородность отображения, функциональность и совместимость с приоритетными для ЦА браузерами, платформами и устройствами.

Чек-лист для дизайн-ревью

Определяем архитектурные решения для реализации серверной части приложения, со старта используя масштабируемые технологии, чтобы оставить возможность адаптировать продукт под новый вектор с минимумом денежных и временных затрат. Выполняем интеграцию блоков верстки с CMS (1С-Битрикс, WordPress, Modx, Opencart) или фреймворками (Laravel, Yii2, Symfony). При необходимости сами дорабатываем функционал CMS или создаем новую систему под задачи проекта.

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

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