Как мы создавали премиальное онлайн‑пространство для Global Keratin
В основе разработки лежала методология JoyWin, обеспечившая последовательное прохождение всех этапов — от анализа потребностей аудитории до запуска и обучения команды клиента.
Под брендом Global Keratin производятся средства для восстановления и выпрямления волос. Их используют профессиональные стилисты и мастера парикмахерского искусства.
Цель проекта
Задачи проекта
-
Наглядно продемонстрировать ассортимент продукции.
-
Усилить доверие к бренду.
-
Сделать быстрый и удобный процесс заказа товаров на сайте.
-
Интегрировать платежную систему (PayMaster) и систему доставки (СДЭК).
-
Сделать личный кабинет для оптовых покупателей.
-
Позволить легко совершать повторные покупки.
Ход проекта: разработка интернет-магазина
Этап 1. Маркетинг
Собрали информацию по принципу трех «К»: Компания, Клиенты, Конкуренты:
Компания
-
провели интервью с клиентом;
-
проанализировали маркетинговые и рекламные материалы;
-
составили карту пользовательских сценариев (например, «мастер ищет профессиональный шампунь», «салон оформляет оптовый заказ»).
Конкуренты
-
изучили более 20 сайтов конкурентов и их способы привлечения внимания к своим продуктам;
-
изучили все «фишки» для того, чтобы на их основе разработать еще более эффективные решения.
Клиенты
-
Описали целевую аудиторию (ЦА): B2B‑сегмент и B2C‑сегмент (частные клиенты).
-
Изучили целевую аудиторию (парикмахеры, салоны красоты, частные клиенты).
-
Описали несколько «Аватаров клиента».
-
Проанализировали каждый аватар клиента, выписали боли, страхи, потребности и способы их удовлетворения.
На основе полученной информации мы собрали все данные вместе и сформировали «Чемодан знаний».
Результат
-
написали 6 аватаров клиентов;
-
описали их боли, потребности и страхи;
-
исследовали компанию Gkhair;
-
выявили ее преимущество — натуральная продукция от официального дистрибьютора;
-
исследовали 10 конкурентов;
-
составили список из 57 идей.
-
Этап 2. Проектирование
Используя содержимое «Чемодана знаний», мы создали список ключевых идей и функций. Опираясь на этот список, мы подготовили прототипы всех страниц сайта:
- Главная страница.
- Каталог товаров: фильтры, умный поиск, сортировка.
- Карточка товара.
- Функционал корзины и промокода.
- Страница оформления заказа: страница доставки, платежная система.
- Личный кабинет розничного клиента.
7. Личный кабинет оптового клиента.
Прототипы
На этом этапе наша команда разработала прототипы для всех страниц сайта.
Мы делаем подробное ТЗ. Описываем все функции, для того, чтобы все было очевидно и понятно для обеих сторон. В то же время мы стараемся не делать ТЗ длинным, чтобы дважды не описывать то, что уже и так очевидно из прототипов.
Результат:
- прототипы;
- документ ТЗ.
Этап 3. Дизайн
Что мы сделали:
- разработали дизайн с обязательным учетом результатов маркетингового этапа;
- создали адаптивные макеты для планшета и смартфона;
- проработали UX‑элементы: фильтры товаров, корзину, форму заявки;
- подобрали фотоконтент (профессиональные снимки продукции, процессов ухода).
Результат:
- дизайн-макеты всех страниц.
Этап 4. Верстка
Что сделали:
- сверстали макеты с использованием HTML, CSS и JavaScript;
- оптимизировали скорость загрузки (сжатие изображений, кеширование);
- обеспечили адаптивность для различных браузеров и устройств;
- добавили анимацию там, где это уместно.
Результат:
готовые HTML страницы сайта.
Этап 5. Разработка (back-end)
- На этапе программирования установили систему «1С‑Битрикс», лицензия «Малый бизнес». Мы шаблонизировали заранее сделанную верстку, внедрили ее внутрь системы Битрикс, настроили админку.
- Реализовали следующие модули:
- каталог товаров с удобным фильтром и поиском;
- страница товара, на которой можно прочитать его описание, свойства, посмотреть фото и видео, отзывы покупателей;
- корзина, в которой удобно выбрать количество товара и ввести промокод для получения скидки;
- личный кабинет розничного клиента:
- данные профиля;
- история заказов;
- избранные товары.
- личный кабинет оптового клиента:
- создание и редактирование заказов в корзине;
- просмотр истории заказов с фильтрацией по дате, статусу и номеру;
- отслеживание статуса заказа (в обработке / собран / отправлен / доставлен);
- возможность повторных заказов одним кликом;
- скачивание сопроводительных документов (счета, накладные, сертификаты);
- доступ к оптовым ценам с учетом объема закупки;
- уведомления о новых поступлениях и сезонных коллекциях;
- выбор способа доставки (курьер, самовывоз, ТК);
- расчет стоимости доставки по регионам;
- график работы пунктов выдачи и история доставок.
4. Настроили интеграцию с CRM (Битрикс24).
5. Провели базовую SEO‑оптимизацию сайта:
- создание человекопонятных URL (ЧПУ);
- заполнение мета-тегов (Title, Description) и заголовков (H1);
- микроразметка;
- настройка robots.txt и sitemap.xml;
- настройка HTTPS;
- ускорение загрузки.
Результат: готовый сайт.
Этап 6. Тестирование и запуск
Что мы сделали:
- проверили работоспособность всех функций (корзина, оплата, формы заявок);
- протестировали адаптивность на разных устройствах;
- устранили баги и оптимизировали производительность;
- перенесли сайт на основной сервер и подключили домен;
- подключили Яндекс Метрику и систему аналитики.
Результат: готовый сайт.
Этап 7. Обучение
Мы максимально подготовили платформу для удобного управления менеджерами заказчика. Они могут пользоваться ей легко и интуитивно понятно без знания кода, правил верстки и языков программирования.
-
Мы сделали систему внутри Битрикса максимально простой, убрали лишние элементы из интерфейса.
-
Настроили работу удобного редактора Wysiwyg (похож на MS Word). Он удобен для создания контента и редактирования страниц.
Именно поэтому мы:
- подготовили видеоинструкции по управлению всеми функциями сайта;
- провели он-лайн консультацию для сотрудников;
- провели демонстрацию сайта, ответили на все интересующие вопросы.
Результаты
- подготовленная документация по проекту;
- готовая видеоинструкция;
- менеджер заказчика получил навыки самостоятельного управления сайтом.
Результаты работы
-
После того как сайт был запущен, неожиданно для нас он вошел в ТОП-10 Яндекса, т. к. был хорошо проработан по seo.
-
В течение месяца было сделано продаж больше, чем на 1 млн. руб., что превзошло ожидания клиента на 50%.
-
Заказчик сказал что получил много комплиментов на тему разработанного сайта.
