Как мы разработали сайт для интернет-магазина Bossy Lady и облегчили путь покупателя

Привет! Мы — команда digital-агентства Stik. Если суммировать все проведенные процессы, то в рамках работы с заказчиком, мы:

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

1. Погрузиться в бизнес клиента: инсайты исследования

Первый этап — проанализировать бизнес клиента. Мы изучили продукт, конкурентную среду, сайты конкурентов и целевую аудиторию. На основе глубинного исследования мы определили особенности аудитории Bossy Lady и пришли к любопытным выводам:

пользователи чаще покупают, если есть бонусная программа;
покупку чаще завершают, если на e-mail приходит сообщение о полной корзине;
сегменту аудитории «девушки 18-23» важно, как выглядит сайт. Продажи одной и той же модели выше на более современном сайте, т.к. более функциональному сайту покупатели доверяют больше;
живые и стильные фотографии обуви стимулируют покупать больше и чаще, нежели каталожные;
более 70% аудитории заходят на сайт со смартфонов. Поэтому было решено уделить особое внимание мобильной версии интернет-магазина.

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

2. Детальный план: прототип и дизайн

На этапе прототипирования мы использовали базовый набор стандартных элементов интернет-магазина:

главная страница;
каталог товаров;
карточка товара;
корзина.

После создания прототипа мы приступили к дизайну. Акцент сделали на первом экране (на обложке), чтобы картинка и заголовок привлекали внимание.

Далее мы начали работать над навигационным меню с учётом нюансов: размер должен быть не слишком большим, но и не слишком маленьким, чтобы не перегружать страницу; пунктов в меню не должно быть много; название не должно слишком выделяться.

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

3. Понятный код: разработка и проектирование

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

понятный код: чем он меньше и грамотнее, тем сайт грузится быстрее;
валидность (корректность);
кроссбраузерная верстка;

Также проделали важную часть работы:

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

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

Результат

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

В дизайне сделали акцент на минимализме, который отражает эстетику и политику клиента, а также резонирует с аудиторией Bossy Lady.