Недавно завершилась премия Рейтинга Рунета, где были объявлены лучшие сайты и приложения 2023 года по различным категориям. Один из наших кейсов – интернет-магазин обуви Bossy Lady – вошёл в Топ-10 в категории «Одежда и обувь». Расскажем об особенностях проекта, который зацепил профессиональное жюри и экспертов отрасли.
Digital-агентство Stik специализируется на fashion-рынке, поэтому в рамках разработки сайта Bossy Lady мы учли не только пожелания клиента, но и особенности целевой аудитории. Сделали акцент на фотографиях, создали простой современный интерфейс, в котором есть все необходимые функции, но нет ощущения перегруженности, и адаптировали сайт под смартфоны. А теперь – к деталям, ради которых вы и открыли эту запись.
Клиент, цели и задачи
Клиент: мультибрендовый магазин обуви
Задача: разработать новый привлекательный и удобный B2C интернет-магазин
В рамках проекта было решено:
- разработать интернет-магазин под актуальный дизайн бренда;
- автоматизировать работу в RetailCRM;
- провести полную синхронизацию всех этапов бизнеса, включая складской учёт.
Исследование и упор на мобильную версию
На старте проекта мы погрузились в бизнес клиента: изучили продукт, конкурентную среду, целевую аудиторию, сайты конкурентов.
Благодаря глубинному исследованию мы выделили особенности аудитории Bossy Lady:
- пользователи чаще покупают, если есть бонусная программа;
- покупку чаще завершают, если на e-mail приходит сообщение о полной корзине;
- сегменту аудитории «девушки 18-23» важно, как выглядит сайт. Одну и ту же модель предпочитают покупать на более современном сайте. Это вызывает больше доверия;
- живые и стильные фотографии обуви стимулируют покупать больше и чаще, нежели каталожные;
- более 70% аудитории компании заходят на сайт со смартфонов. Поэтому особое внимание было решено уделить мобильной версии интернет-магазина.
Наши задачи – учесть все выявленные инсайты и подчеркнуть особенности компании в дизайне и функциональности сайта, сделать так, чтобы процесс покупки был интуитивно понятным вне зависимости от устройства, с которого человек заходит в интернет-магазин.
Прототип и дизайн
На этапе прототипирования мы использовали базовый набор стандартных элементов интернет-магазина:
- главная страница;
- каталог товаров;
- карточка товара;
- корзина.
После создания прототипа мы приступили к дизайну. Большой акцент сделали на первый экран (обложку), т. к. для нас было важно, чтобы картинка и заголовок были цепляющими.
Далее мы приступили к созданию навигационного меню с учётом важных моментов:
- размер должен быть не слишком большим, но и не слишком маленьким, чтобы не перегружать всю страницу;
- пунктов в меню не должно быть много;
- название не должно слишком выделяться.
После разработки меню мы приступили к созданию логотипа и определению шрифтов.
Главная задача в этом аспекте – не перегрузить страницы и сделать шрифт читаемым и цепляющим внимание.
Разработка
На этапе разработки большой упор делали в сторону функциональности:
- понятный код: чем код будет меньше и грамотнее, тем сайт грузится быстрее;
- валидность (корректность);
- кроссбраузерная верстка;
Также проделали колоссальную работу:
- написали скрипты, при помощи которых подгружается контент;
- сделали элементы интерактивными;
- реализовали сложные анимации и визуальные эффекты;
- написали API для интеграции с CMS-системой;
- описали юнит-тесты для проверки, насколько корректно работает та или иная функциональность.
Помимо описанного также выполнили программирование серверной части и проектирование базы данных, настроили пользовательские роли и управление в административной панели, разработали API для интеграции со сторонними сервисами.
Результат
В результате мы реализовали удобную для пользователя навигацию по страницам, а также понятную административную часть сайта, облегчив по максимуму обработку заказов.
В дизайне сделали акцент на минимализме, который отражает эстетичность и политику клиента, а также резонирует с аудиторией Bossy Lady.
Ссылка на проект: http://bossy-lady.ru
По завершении работ по сайту мы подали его на профильные премии – Workspace Digital Awards, Tagline и премию Рейтинга Рунета. На последней наш проект оценили по достоинству.
В состав жюри каждой номинации входили представители соответствующего бизнеса и эксперты. Во втором туре каждый из членов жюри оценивал номинантов по 2-3 релевантным критериям. Был высчитан средний балл и определился топ-10 участников, в число которых и вошла наша разработка.
Несмотря на то, что сайт не попал в призеры, мы гордимся этим проектом, а также активно взаимодействуем с Bossy Lady уже в сфере digital-маркетинга.
Digital-агентство Stik — привлекаем целевой трафик, создаём ПО и интернет-магазины, разрабатываем фирменный стиль и motion-дизайн для вашего бренда.
Если остались вопросы – пишите в комментариях. А если вас интересуют услуги по продвижению бизнеса в онлайне, пишите нам на почту [email protected] или в Telegram-бот.
Другие наши кейсы:
Это конечно все интересно, но где циферки? Сколько деняк стоит?
Учитывая, что сайт полностью самописный, включая админку, которая заметно упрощает работу менеджеров по обработке заказов, и другие описанные фичи, стоимость составила больше 2 млн
Обожаю, когда в интернет-магазине можно приобретать продукт в несколько кликов и без гемора. Из-за этого, как мне кажется, маркетплейсы зачастую комфортнее отдельных площадок
Сколько по времени реально сделать такой сайт?
Со всеми доработками примерно 1 год
Участвовал, а потом смотрел со стороны за этим проектом, периодически подключался. Справедливости ради в кейсе практически не отражен сам процесс разработки. Количество вариантов, которые улетали в урну внутри, совместных звонков с клиентом для достижения результата и так далее)
Например, клиент в процессе поменял множество своих процессов, потому что понимал — нужны качественные трансформации. А начался проект, пока другое агентство занималось новым фирстилем и мы его ждали около 3х месяцев)
Звучит как классический проект для студии разработки))
видимо поэтому ребята и опустили все детали))
Описали кейс из страны радуг и единорогов, потому что несмотря на все трудности итог получился кайфовым :D
Интересно, какой стек для фронта и бэка юзали, если не секрет? И что за субд была выбрана для проекта?
Не секрет. Стек технологий:
JavaScript
Python
TypeScript
Django
Vue.js
PostgreSQL
Redis
Intellij IDEA
Visual Studio Code
Яндекс Метрика
Google Analytics
Понятно, можно несколько уточнений по бд: 1. Для полнотекстового поиска работали с чем-то вроде Elasticsearch или что-то своё писали?
2. Для хранения характеристик использовали EAV или просто в одной таблице товаров всё находилось?
На текущем объеме товарных позиций elastic это большой оверхед поэтому использовали векторный поиск в postgres + у нас есть небольшая обвязка в pymorphy которая нормализует пользовательский ввод и поиск работает в целом приемлемо.
По поводу характеристик, в этом проекте не использовали EAV модели потому что структура товара фиксированная и меняться не будет, под каждую характеристику создавали справочник, в других проектах где есть различия между категориями и всевозможными характеристиками стараемся использовать EAV там где это уместно.
Ну и поправлю моих коллег выше, не просто vuejs а nuxtjs :)
Ребятки, в кейсе написано, что вы провели глубинные исследования, а не подскажите, как вы выстраиваете этот процесс? Что входит у вас в глубинные исследования? Так как выводы достаточно мощные вы делаете.
Тянет на отдельную статью!
Перед стартом разработки мы изучаем сайты конкурентов, ищем подходящие референсы, о них потом общаемся с клиентами, чтобы понять, что нравится заказчику, что нет, что на его взгляд смотрится дорого, современно и так далее. Это помогает сойтись в представлениях о будущем сайте.
Общаемся с клиентом вообще о цели разработки, изучаем и обсуждаем способы, с помощью которых можно прийти к ее реализации, решаем, какие элементы внедрить на сайт, которые в этом помогут (почти всегда запрос – это увеличение продаж).
Для понимания аудитории, если есть текущий сайт, то проводим его анализ и выявляем:
– источник трафика, откуда вообще приходят люди;
– устройства, с которых заходят юзеры;
– среднее время просмотра страниц.
Кроме того, занимаемся сегментацией целевой аудитории, чтобы при разработке ориентироваться на преобладающие сегменты.
"ТОП-10", ну думаю по какому такому признаку ТОП-10, может по посещаемости, но как они посещаемость посмотрели? Она же неизвестна. Может SimilarWeb какой?
А оказывается это рейтинг рунета. Да там всего 24 номинанта! Я верю, что вы могли сделать хороший сайт, но рейтингом рунета я бы не гордился.