Cosmart

Cosmart - сеть дрогери в Казахстане, начала свою историю с одного магазина косметики в Алматы в 2009 году. За 14 лет компания выросла до более чем 32 точек в Алматы и Астане.

В ассортименте Cosmart представлено более 18 000 товарных позиций брендов, таких как Estel, CeraVe, L’Oreal Paris, Maybelline New York, Vivienne Sabo, Colgate и Luxvisage. В планах компании – дальнейшее расширение сети в других регионах Казахстана.

Почему они обратились к нам? Cosmart столкнулась с неэффективностью своего старого сайта, который уже не соответствовал современным тенденциям веб-разработки. Дизайн был устаревшим и не сочетался с имиджем бренда. Пользователям было сложно находить продукцию конкретных производителей из-за отдельных карточек для каждого размера и цвета товара, а навигация была неудобной. Имелись и другие недостатки юзабилити.

Интернет-магазин также не соответствовал техническим потребностям клиента, что приводило к частым сбоям и ошибкам, требующим регулярных доработок сайта. Всё это делало ресурс неудобным в использовании и снижало продажи заказчика.

Для обеспечения корректной и эффективной работы, а также для улучшения покупательского опыта и поддержания актуальной информации на сайте, требовалось внедрить несколько сложных интеграций. Например, выполнить настройку выгрузки товаров, обновления цен и остатков из 1С заказчика, а также интеграцию с внешним сервисом программы лояльности ABM Loyalty. В связи с техническими особенностями, реализация подобных улучшений на старом сайте оказалась невозможной.

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

Задачи:

1. Разработать интернет-магазин на системе 1С-Битрикс с дизайном заказчика.

2. Адаптировать и доработать макеты под технические требования CMS.

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

4. Настроить интеграцию 1С заказчика с интернет-магазином для поддержания на сайте актуальной информации о товарах, ценах и остатках в режиме реального времени.

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

6. Разработать мобильное приложение, используя технологию PWA.

Анализ

Для интернет-магазина Cosmart были выделены два основных сегмента целевой аудитории: девушки в возрасте 20-25 лет и женщины старше 35 лет (преимущественно со средним достатком). Наша задача заключалась в разработке ряда решений для увеличения прибыли и среднего чека магазина.

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

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

Сегодня большинство пользователей совершают покупки через смартфоны, но у компании Cosmart не было мобильного приложения. Нашей задачей было разработать такое приложение, используя технологию PWA.

Внутренний анализ

Для повышения прибыли необходимо было интегрировать сайт с существующей программой лояльности клиента — ABM Loyalty. Несмотря на то, что этот сервис хорошо работает с оффлайн-кассами, его документация плохо адаптирована для работы с интернет-магазинами.

Еще одной сложностью была программа 1С. У клиента была нестандартная версия программы складского учета, в которой для каждого наименования товара создавалась отдельная карточка. Это было полезно для бухгалтерии, но загружать информацию в таком виде на сайт было невозможно.

Перед нами стояла задача выполнить интеграцию между существующей 1С заказчика и сайтом. Так как 1С заказчика была уже полностью настроена и активно использовалась бухгалтерией и другими подразделениями компании, её нельзя было изменять. К тому же с такой 1С не могли работать контент-менеджеры, так как любые ошибки специалистов могли привести к проблемам с бухгалтерским учетом в компании.

Поэтому было принято решение внедрить для заказчика промежуточную складскую программу “1С Управление торговлей”, в которой будут работать только контент-менеджеры. А выгрузку цен и остатков в данную 1С осуществлять из текущей программы заказчика. “1С Управление торговлей” можно легко интегрировать с интернет-магазином с помощью стандартного модуля обмена.

Реализация

1. Дизайн сайта:

• Дизайн был разработан штатным дизайнером заказчика, который специализируется на маркетинговом дизайне, но не обладает большим опытом в UI/UX дизайне.

• Мы предоставили рекомендации по доработке макета так, чтобы он лучше соответствовал требованиям CMS 1С-Битрикс.

• Также мы дали полезные советы по улучшению юзабилити.

2. Техническая реализация сайта:

• Блок “Популярные категории”: Помогает покупателям быстрее ориентироваться на сайте, предоставляя самые популярные запросы. Клиент также может использовать этот блок для акцентирования внимания посетителей на товарах, которые компания хочет распродать или на которые действуют акции.

• “Хит продаж”, “Акции”, “Новинки”: Эти вкладки стимулируют продажи конкретных категорий продуктов. Покупатель получает товары по акции, а клиент распродаёт остатки, непопулярные позиции или рекламирует новинки.

• Бренды: Демонстрируют наличие конкретных производителей в онлайн-магазине и удерживают аудиторию, которая пришла за определенным брендом.

• Фильтры внутри брендов: Улучшают пользовательский опыт и облегчают поиск, особенно у брендов с большим количеством товаров.

• Разные вариации товара в одной карточке: Исправили недоработку предыдущей версии сайта. Теперь пользователю не нужно совершать дополнительные действия, чтобы посмотреть и купить товар в других цветах или размерах.

• Адреса магазинов: Указаны на сайте, что удобно для покупателей, планирующих посетить офлайн точку.

Этап 3. Интеграция с 1С

Заказчик ранее уже работал с 1С, но в его системе возникали определенные проблемы. Учет товаров не был удобен для выгрузки на сайт: в названиях товаров использовались наименования от поставщика, и для каждой позиции создавалась отдельная карточка. Наша задача заключалась в сохранении текущего состояния 1С для бухгалтерии и настройке отдельной программы для работы с интернет-магазином.

Мы настроили для контент-менеджеров программу “1С: Управление торговлей”, в которой информация о товарах указана в более удобном виде. Текущая 1С заказчика используется исключительно для бухгалтерии, в то время как 1С: УТ предназначена для выгрузки товаров непосредственно на сайт. Обе эти программы необходимы, но выполняют разные функции.

В 1С: УТ мы настроили товары таким образом, чтобы их можно было корректно выгружать на сайт. Теперь названия отображаются в понятном для посетителя виде, а карточки товаров настроены правильно. Это значительно улучшает юзабилити сайта.

Мы также настроили интеграцию между 1С заказчика и 1С: УТ. В 1С: УТ контент-менеджеры настраивают карточки товаров, заполняя описания, свойства и добавляя фотографии. При изменении информации в 1С: УТ это никак не влияет на 1С заказчика. Кроме того, в 1С: УТ поступает информация о ценах и остатках. Таким образом, мы решаем проблему ведения документации в 1С и обеспечиваем корректное отображение товаров на сайте с помощью 1С: УТ.

Этап 4. Интеграция с программой лояльности

Для программы лояльности клиент выбрал ABM Loyalty. Эта платформа хорошо реализована для офлайн касс, но практически не адаптирована для интернет-магазинов.

В 1С-Битрикс отсутствует готовый модуль для подобной интеграции, поэтому нам пришлось написать его самостоятельно. Но, как уже упоминалось ранее, документация была плохо адаптирована для интернет-магазинов. В процессе работы мы активно взаимодействовали с техподдержкой сервиса, чтобы компенсировать недоработки документации. Это позволило нам качественно интегрировать программу лояльности в функционал сайта.

При регистрации в интернет-магазине посетитель одновременно подтверждает участие в программе лояльности. Такая регистрация происходит сразу на двух платформах: интернет-магазине “Космарт” и сервисе ABM Loyalty. Пользователю не нужно выполнять лишних действий, а компания получает клиента, который сразу участвует в программе лояльности.

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

В личном кабинете сохраняется история покупок, независимо от того, были ли товары приобретены в офлайн-точке или интернет-магазине. Онлайн-заказы можно оформить повторно.

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

Этап 5. Мобильное приложение

Для быстрой разработки приложения мы используем технологию Progressive Web App (PWA) — создание приложения на основе сайта. Мы берем мобильную версию сайта и оборачиваем ее в мобильное приложение. Это позволяет клиенту экономить деньги и получать приложение в сжатые сроки.

Преимущества PWA:

1. Меньший размер: PWA весит гораздо меньше полноценного приложения и занимает небольшое место на устройстве пользователя.

2. Автоматические обновления: Обновления PWA приложения происходят автоматически на уровне сайта. Заказчику достаточно просто запустить обновление, и оно будет работать у всех пользователей.

3. Push-уведомления: PWA позволяет настроить push-уведомления. Так бренд может напоминать покупателям о товарах в корзине, новых поступлениях, скидках и других акциях.

Результаты

В ходе проекта мы достигли следующих результатов:

1. Разработка интернет-магазина:

• Мы адаптировали дизайн под требования системы 1С-Битрикс и внедрили сложные технические доработки.

2. Интеграция с 1С:

• Решили проблему выгрузки товаров на сайт из 1С в корректном виде.

• Сохранили предыдущую версию системы для внутренней работы компании.

3. Интеграция с программой лояльности:

• Успешно интегрировали сайт с системой лояльности, синхронизировав её с оффлайн кассами.

• Наше внедрение помогло магазину увеличить прибыль более чем на 30%.

4. Маркетинговые решения:

• С помощью системы маркетинговых решений, внедренных на сайт, увеличилась прибыль компании.

• Средний чек вырос на 17%.

Этот проект позволил Cosmart улучшить свой онлайн-присутствие, повысить эффективность работы и обеспечить удобство для клиентов.