Кейс | Разработка интернет-магазина премиальных товаров для маникюра и педикюра
ЗаказчикМагазин товаров премиум-сегмента для маникюра и педикюра «Сорока».ЗадачаРазработать функциональный и эстетичный сайт для beauty-сферы, подходящий как для начинающего мастера, так и для опытного специалиста по закупу из крупной компании.
О проекте
«Сорока» — крупный магазин профессиональных материалов для маникюра и педикюра в городе Красноярске. Концепция компании состоит из качественного обслуживания и премиальности товаров.
Перед нашей командой стояла задача разработать практичный в использовании интернет-магазин, который подскажет клиенту сценарий действий и ответит на возможные вопросы, предоставит сверх того, что он хочет получить.
Заказчик, вдохновленный сайтами известных интернет-магазинов профессиональной косметики и парфюмерии, попросил нас найти золотую середину между ними и реализовать похожий магазин для него. Ассортимент с внушительным количеством товаров нужно было не просто красиво преподнести, а дать возможность пользователю быстро ориентироваться в многообразии характеристик и марок.
До сотрудничества с нами у магазина «Сорока» не было собственного сайта. Продажи велись через социальные сети и оффлайн-магазины. В определенный период компания доросла до цифровизации продаж и автоматизации при обработке заказов. На этом этапе потребовалось создание собственного интернет-магазина, чтобы интеграцией с 1с, поддержкой актуального наличия товаров, оплатой и доставкой уже занимался не менеджер, а сайт.
Что требовалось?
- Разработать интернет-магазин с дружественным интерфейсом
- Поработать над дизайном, структурой и архитектурой сайта
- Наладить интеграцию товаров с системой учета 1С
- Реализовать авторизацию на сайте через личный кабинет
- Настроить быстрый поиск с всплывающими карточками товаров
- Интегрировать сайт с «Почта России» и СДЭК, платежными сервисами
- Реализовать расчет стоимости доставки с учетом зон
- Адаптировать сайт под мобильную версию, т.к. в современном мире интернет-магазины ассоциируются исключительно со смартфонами
Сложности проекта
- Находить баланс между дорого и красиво, при этом предлагая заказчику адекватную стоимость разработки.
- Трудности были в построении блока с товарами. По желанию владельцев карточки нужно было сделать разного размера, чтобы придать акцент некоторым товарам и за счет этого визуально выделиться среди конкурентов
- Работа с проектом затруднялась из-за большого ассортимента. Мелкие баги заползали далеко в недра каталога или поиска. Чтобы их найти и исправить, требовалось много времени
Что было сделано?
1. Сбор информации, подготовка структуры сайта
В течение первых созвонов с заказчиком мы получили всю необходимую информацию: концепция магазина, логотип, палитра. Вместе нашли наиболее эффективные пути реализации задач, стоящих перед нами.
2. Прототипирование и создание дизайна
Главной задачей дизайна было сделать сайт с простым функционалом для пользователя. Также заказчик хотел подчеркнуть премиальность товара.
Каталог товаров
Необходимо было разработать несколько фильтров для поиска. При вводе слова в поле поиска, под ним требовалось развернуть список товаров. Особенностью интернет-магазина «Сорока» стало то, что предварительные результаты поиска (еще в модальном окне) выводятся в виде карточек товаров: с фото, ценами, акциями, кнопкой «добавить в корзину». Благодаря этой функции не обязательно нажимать на кнопку «Найти» для того, чтобы добавить товар в корзину. Это удобно для людей, которые знают, что ищут в магазине. Они могут быстро наполнить корзину товарами, не пролистывая каталог.
Карточка товара
При создании карточек премиум-сегмента мы преследовали цель, как можно более стильно показать товар покупателю. Поэтому решили размещать товары на белом или нейтральном фоне, чтобы подчеркнуть элегантность и качество. Кроме того в карточке внедрили блок с вариантами одного производителя — возможность перехода к другим карточкам одной торговой марки.
Корзина и оформление заказа
В корзине разместили прогресс-бар, который доступно и наглядно показывает сколько ? не хватает для бесплатной доставки. С помощью этого инструмента можно влиять на решение пользователя о покупке. Для начинающего мастера и для опытного специалиста по закупу корзина выглядит одинаково понятной и легко воспринимается.
Личный кабинет покупателя
Важным функционалом личного кабинета стала кнопка подписаться на товар, которого нет в наличии. Уведомление о поступлении приходит на email, указанный в личных данных. Помимо этого в адресах доставки можно создавать адреса с нужными названиями (дом, работа, адрес салона) и выбирать определенный по умолчанию. Это нужно, чтобы минимизировать ошибки в адресах и не повторять ввод адресной строки при каждом заказе. Также, при оформлении заказа можно выбрать другой адрес из своего списка. История покупок сохраняется в личном кабинете.
3. Интеграции
- Настроен полноценный обмен товарами с ценами/количеством из конфигурации »1С: Предприятие Управление торговлей». Благодаря этой интеграции пользователи интернет-магазина видят на сайте только актуальные товары с остатками по корректным ценам. Для владельца магазина интеграция с 1С — это уверенность в том, что покупатель не купит товар, которого нет; высвобождение дополнительных ресурсов для занесения товарных позиций и своевременное обновление информации по наличию; автоматическое списание товара в системе учета. Интеграция в положительном ключе влияет на трудовые ресурсы: заказы создаются автоматически, переходят в статус оплачены и отправляются на сборку сотрудниками склада. Менеджерам больше не требуется тратить время и разносить заказы в 1С вручную.
- Произведена интеграция с платежным шлюзом Сбербанка через официальный модуль. Шлюз гарантирует надежность и безопасность передачи данных между покупателем и продавцом. Он является связующим звеном между ними и сетью банков-эквайеров. За счет данной интеграции клиент может расплачиваться за заказ онлайн любой банковской картой.
- Выполнена интеграция со службами доставки («Почта России» и СДЭК). Это позволило автоматизировать зоны доставки, чтобы владелец магазина определял, куда везти заказ и от какой суммы. Механика работы такая: товары добавляются в корзину с выбранным адресом, затем при переходе в корзину в списке доступных доставок высвечиваются СДЭК или «Почта России». Если это небольшой населенный пункт, то туда заказ доставит только «Почта России», т.к. обычно там нет СДЭК. Если заказ входит в зоны доставки магазина «Сорока», то к списку доставок добавляется «Доставка Сорока (например, определенный район города «Мясокомбинат»).
Благодаря интеграциям мы автоматизировали работу магазина, а для пользователя процесс заказа и доставки стал прозрачен. Интеграция с 1С вместе с онлайн оплатой и доставкой дает возможность высвободить человеческий ресурс, распределив его на более сложные задачи. И самое главное — это скорость. Менеджер не теряет время на подтверждение заказа менеджером, на выставление счета, на передачу заказа в сборку.
4. Мобильное приложение Владельцы магазина «Сорока» нацелены на построение долгосрочных отношений со своими клиентами и поддержание высокого сервиса обслуживания. По этой причине мы предложили им разработать WebView приложение, благодаря чему постоянные клиенты имеют быстрый доступ к ресурсу, оперативно узнают об изменениях в работе и новом поступлении. А владельцы, в свою очередь, получают возможность управлять спросом благодаря push-уведомлениям.
Стек технологий: Backend: HTML, CSS, JS, PHP, CMS — Bitrix/Битрикс Лицензия Бизнес.
Результаты:
1. Разработали функциональный интернет-магазин с аккуратным дизайном, в стиле известных интернет-магазинов косметики и парфюмерии.
2. Интегрировали сайт с 1С, Сбербанком, Почтой России и СДЭК: автоматизировали процессы работы и освободили менеджера от рутины.
3. Автоматизировали зоны доставки, чтобы пользователь сразу видел стоимость доставки на свой адрес.
4. Настроили умный поиск товаров с всплывающими карточками товаров.
5. Создали личный кабинет, который помогает покупателям отслеживать историю покупок и получать уведомления о поступлении товаров, которых не было в наличии.
6. Создали адаптированную версию сайта, практически не отличимую от мобильного приложения.
Вместе с командой магазина «Сорока» создали лаконичный сайт с User friendly интерфейсом, где работает основная бизнес-логика. Продолжаем наше сотрудничество дальше, потому что развитие известных интернет-магазинов профессиональной косметики и парфюмерии не стоит на месте. Поэтому нам есть, куда расти и расширяться, чтобы сделать совместную разработку лучше и конкурентоспособнее.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
