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

Заказчик

Мультибрендовый магазин обуви Bossy Lady

Задача

Разработать новый привлекательный и удобный B2C интернет-магазин

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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

Перейти на сайт