![Пальмовая ветвь](/img/cosmart/branch.png)
![Пальмовая ветвь](/img/cosmart/branch.png)
![Баночка с уходовым кремом](/img/cosmart/main.png)
РАЗРАБОТКА ИНТЕРНЕТ-МАГАЗИНА
COSMART.KZ
Cosmart
Cosmart – крупнейшая сеть дрогери в Казахстане, начавшая свою историю с одного магазина косметики в Алматы в 2009 году. За 14 лет компания выросла до более чем 32 точек в Алматы и Астане, став любимым местом для тысяч покупателей.
В ассортименте Cosmart представлено более 18 000 товарных позиций самых популярных брендов: Estel, CeraVe, L'Oreal Paris, Maybelline New York, Vivienne Sabo, Colgate, Luxvisage. В планах компании – дальнейшее расширение сети в других регионах Казахстана.
![Пальмовая ветвь](/img/cosmart/branch.png)
Космарт —
это более 32 точек
и 18 000 товаров![Локация](/img/cosmart/location.png)
32 точек
18 000 товаров
Сеть магазинов “Cosmart” включает более 32 ТОЧЕК
За 14 лет компания выросла до более чем 32 точек в Алматы и Астане, став любимым местом для тысяч покупателей.
![Экран смартфона](/img/cosmart/phone.png)
01 - начало работы
Почему обратились к нам ?
![Причины, почему обратились к adena](/img/cosmart/reasons.png)
![Пальмовая ветвь](/img/cosmart/branch.png)
1. Устаревший сайт
Компания столкнулась с неэффективностью своего старого сайта, который уже не соответствовал современным тенденциям веб-разработки. И дизайн которого устарел и не сочетался с имиджем бренда.
2. Проблемы с юзабилити
Пользователям было сложно находить продукцию конкретных производителей, поскольку каждый размер и цвет товара имел свою отдельную карточку, а навигация была неудобной. Имелись и другие недостатки юзабилити.
3. Сбои и ошибки
Интернет-магазин также не соответствовал техническим потребностям клиента, что проявлялось в частых сбоях и ошибках, требующих регулярных доработок сайта. Всё это делало ресурс неудобным в использовании и снижало продажи нашего заказчика.
4. Сложные интеграции
Для обеспечения корректной и эффективной работы, а также для улучшения покупательского опыта и поддержания актуальной информации на сайте, требовалось внедрить несколько сложных интеграций. Например, выполнить настройку выгрузки товаров, обновления цен и остатков из 1С заказчика, а также интеграцию с внешним сервисом программы лояльности ABM Loyalty. В связи с техническими особенностями, реализация подобных улучшений на старом сайте оказалась невозможной.
Для разработки нового проекта заказчик выбрал нашу студию, полагаясь на наш многолетний опыт в реализации сложного функционала для интернет-магазинов. Дизайн был предоставлен самим клиентом.
02 - задачи и цели
![Экран смартфона с приложением](/img/cosmart/mobile.png)
-
1Разработать интернет-магазин на системе 1с-Битрикс с дизайном заказчика. Адаптировать и доработать макеты под технические требования CMS.
-
2Внедрить маркетинговые инструменты для повышения продаж на сайте и улучшения пользовательского опыта.
-
3Настроить интеграцию 1С заказчика с интернет-магазином для поддержания на сайте актуальной информации о товарах, ценах и остатках в режиме реального времени.
-
4Внедрить программу лояльности на сайт, которая будет синхронизирована с кассами в офлайн точках.
-
5Разработать мобильное приложение, используя технологию PWA.
![Линия](/img/cosmart/line.png)
03 - аналитика
ТОВАРЫ
На сайте огромный выбор товара. Из-за этого сбыт некоторой продукции был затруднителен, а посетители испытывали сложности с поиском нужного товара. Для лучшей навигации по сайту мы должны были разработать удобный каталог и фильтры. А также продумать, как стимулировать продажи конкретных продуктов.
Часть покупателей заходила в интернет-магазин для приобретения продуктов конкретного бренда, но на сайте не было отдельной вкладки или поиска по брендам. Нам также нужно было решить и эту проблему.
АУДИТОРИЯ
Среди целевой аудитории выделяются 2 основных сегмента: девушки 20-25 лет и женщины от 35+ лет (преимущественно среднего достатка). Нам надо было разработать ряд решений для увеличения прибыли и среднего чека магазина.
ПРИЛОЖЕНИЕ
Сейчас для покупок в интернете большинство юзеров используют смартфоны, однако у компании “Космарт” не было мобильного приложения. Нашей задачей также была разработка приложения.
![Приложение на экранах смартофнов](/img/cosmart/phones.png)
![Пальмовая ветвь](/img/cosmart/branch.png)
![Пальмовая ветвь](/img/cosmart/branch.png)
ABM LOYALTY
Для повышения прибыли надо было интегрировать сайт с существующей программой лояльности клиента — ABM Loyalty . Данный сервис хорошо работает с офлайн-кассами, однако его документация плохо адаптирована для работы с интернет-магазинами.
ИНТЕГРАЦИЯ С 1С
Еще одна сложность — 1С. У клиента была нестандартная версия программы складского учета, для каждого наименования товара создавалась отдельная карточка. Это было полезно для бухгалтерии, но загружать информацию в таком виде на сайт нельзя.
Перед нами стояла задача выполнить интеграцию между существующей 1С заказчика и сайтом. Так как 1С заказчика была уже полностью настроена и активно использовалась бухгалтерией и другими подразделениями компании, её нельзя было изменять. С такой 1С не могли работать контент-менеджеры, так как любые ошибки специалистов могли привести к проблемам с бухгалтерским учётом в компании.
Поэтому было принято решение внедрить для заказчика промежуточную складскую программу “1С Управление торговлей”, в которой будут работать только контент-менеджеры. А выгрузку цен и остатков в данную 1С осуществлять из текущей программы заказчика. “1С Управление торговлей” же можно интегрировать с интернет-магазином стандартным модулем обмена.
![1С-1С:УТ-САЙТ](/img/cosmart/scheme_1s.png)
04 - разработка
Реализация проекта
1-й этап. Дизайн сайта
- Дизайн был разработан штатным дизайнером заказчика, который специализируется на маркетинговом дизайне и не очень опытен в UI/UX дизайне. Поэтому мы предоставили рекомендации по доработке макета таким образом, чтобы он больше подходил для CMS 1С-Битрикс. А также дали полезные рекомендации по юзабилити.
![Пальмовая ветвь](/img/cosmart/branch.png)
![Пальмовая ветвь](/img/cosmart/branch.png)
![Старый сайт](/img/cosmart/design.png)
2-й этап. Техническая реализация сайта
Блок “Популярные категории” помогает покупателям быстрее ориентироваться на сайте, так как это самые популярные запросы. Также наш клиент может использовать этот блок, чтобы акцентировать внимание посетителя на товарах, которые компания хочет распродать, на которые действуют акции и т. д.
“Хит продаж”, “Акции”, “Новинки”. Все эти вкладки нужны для стимулирования продаж конкретной категории продуктов. Покупатель получает товар по акции, а наш клиент распродаёт остатки, непопулярные позиции или рекламирует новинки.
![Главная страница сайта](/img/cosmart/ufo.png)
![Экран сайта](/img/cosmart/big.png)
![Экран сайта](/img/cosmart/small.png)
Бренды. Так мы демонстрируем наличие конкретных производителей в онлайн-магазине и удерживаем аудиторию, которая пришла за определенным брендом.
![Страница с брендами](/img/cosmart/mid.png)
Поиск и фильтры внутри брендов. Улучшает пользовательский опыт и облегчает поиск, так как у некоторых брендов много товаров, а покупатель пришел за конкретным продуктом.
![Страница с поиском](/img/cosmart/search.png)
![Страница с фильтром](/img/cosmart/filter.png)
Разные вариации товара в одной карточке. Исправили недоработку предыдущей версии сайта. Пользователю не надо совершать дополнительные действия, если он хочет посмотреть и купить товар в других цветах или размерах.
На сайте указаны адреса всех магазинов сети. Это удобно, если покупатель планирует посетить офлайн точку.
![Карточка товара](/img/cosmart/lipstick.png)
![Экран смартфона](/img/cosmart/lipsticmob.png)
3-й этап. Интеграция с 1С
Заказчик и раньше работал с 1С, но в его системе наблюдался ряд проблем. Учет товаров не был удобен для выгрузки на сайт: в названиях товаров использовались названия от поставщика, для каждой позиции создавалась отдельная карточка. Нужно было сохранить 1С в таком виде для бухгалтерии и настроить отдельную программу для работы с интернет-магазином.
Сохранить 1С
для бухгалтерии
Настроить 1С: УТ
для контент-менеджера
для бухгалтерии
1С: УТ
![Схема](/img/cosmart/scheme.png)
-
1
Мы настроили для контент-менеджеров “1С: Управление торговлей”, в которой информация о товарах указана в релевантном виде. 1С используется для бухгалтерии, в то время как 1С: УТ нужна для выгрузки товаров сразу на сайт. Обе эти программы нужны, но используются для разных целей.
-
2
В 1С: УТ мы завели товары таким образом, чтобы их можно было корректно выгружать на сайт. Теперь названия отображаются в понятном для посетителя виде, а карточки настроены корректно. Это улучшает юзабилити сайта.
-
3
Настроили интеграцию между 1С заказчика и 1С: УТ. В 1С: УТ контент-менеджер настраивает карточки товара: заполняет описание, свойства, добавляет фото. При изменении информации в 1С: УТ это никак не влияет на 1С заказчика. Также в 1С: УТ поступает информация о ценах и остатках. Так мы решаем проблему ведения документации в 1С и отображения товаров на сайте с помощью 1С: УТ.
4-й этап. Интеграция с программой лояльности
- В качестве сервиса программы лояльности клиент выбрал ABM Loyalty. Платформа хорошо реализована для офлайн касс, но не была адаптирована для интернет-магазинов.
- В момент регистрации в интернет-магазине посетитель одновременно подтверждает участие в программе лояльности. Так регистрация проходит сразу на двух платформах: интернет-магазин “Космарт” и сервис ABM Loyalty. Пользователю не надо совершать лишних действий, а компания получает клиента, который сразу участвует в программе лояльности.
![Окно регистрации на сайте](/img/cosmart/registration.png)
- Программа лояльности работает как на кассах, так и в интернет-магазине с одинаковыми условиями. Покупатель может приобрести товар в магазине и сразу воспользоваться бонусными баллами за покупку на сайте.
- В 1С-Битрикс нет готового модуля для подобной интеграции, нам требовалось написать его самостоятельно. Но, как писалось выше, документация была плохо адаптирована для интернет-магазинов. В процессе работы мы регулярно созванивались с техподдержкой сервиса для уточнений по документации.
![Административная панель](/img/cosmart/account.png)
- В личном кабинете сохраняется история покупок, в независимости от того, были ли товары приобретены в офлайн-точке или интернет-магазине. Онлайн-заказы можно оформить повторно.
- Кошелек бонусных баллов на сайте позволяет покупателю видеть, сколько баллов у него на счету и что он может приобрести за эти баллы.
![История заказов](/img/cosmart/history.png)
5-й этап. Мобильное приложение
Чтобы разработать приложение быстро, мы используем технологию Progressive Web App — создание приложения на основе сайта. Мы используем мобильную версию сайта и оборачиваем её в мобильное приложение. Наш клиент экономит деньги и получает приложение в сжатые сроки.
![Экран телефона с мобильным приложением](/img/cosmart/webapp.png)
Приложение PWA весит значительно меньше полноценного приложение и занимает немного места на устройстве пользователя.
Обновление PWA приложения происходит автоматически на уровне сайта. Заказчику достаточно просто запустить обновление, оно будет работать у всех пользователей.
PWA позволяет настроить push-уведомления. Так бренд может напоминать покупателям о товарах в корзине, новых поступлениях, скидках и пр.
05 - результаты
Разработали интернет-магазин, адаптировав дизайн под требования системы 1с-Битрикс и внедрив сложные технические доработки.
Решили проблему выгрузки товаров на сайт из 1С в корректном виде, а также сохранили предыдущую версию системы для работы внутри компании.
Успешно интегрировали сайт с системой лояльности, синхронизировав её с офлайн кассами. Наше внедрение помогло магазину увеличить прибыль более чем на 30%.
С помощью системы маркетинговых решений, внедренных на сайт, увеличилась прибыль, а средний чек вырос на 17%.
![Экран смартофна с мобильным приложением](/img/cosmart/last.png)
Результаты работы —
+17 %
к среднему чеку
и +31% к обороту
+17 %
к среднему чеку+31% к обороту