Разработка интернет‑магазина косметики на основе арганового масла Agadir

Компания Глобал Про — официальный дистрибьютор косметики Agadir в России. Поставляет шампуни, маски, сыворотки для волос с аргановым маслом.

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

1. Наглядно представить косметику бренда.
2. Обеспечить удобный поиск товаров.
3. Сделать процесс заказа на сайте простым и понятным.
4. Интегрировать платежную систему и систему доставки.

Этап 1. Маркетинг

Собрали информацию по принципу трех «К»: Компания, Клиенты, Конкуренты:

Компания

провели интервью с клиентом;

проанализировали маркетинговые и рекламные материалы;

составили карту пользовательских сценариев (например, «мастер ищет маску для волос», «салон оформляет оптовый заказ»).

Клиенты

описали целевую аудиторию (ЦА): B2B‑сегмент и B2C‑сегмент;

изучили рынок средств по уходу за волосами, целевую аудиторию (парикмахеры, салоны красоты, частные клиенты);

описали несколько «аватаров клиента»;

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

Конкуренты

изучили 12 сайтов конкурентов и их способы привлечения внимания к своим продуктам;

собрали 34 идеи для того, чтобы на их основе разработать еще более эффективные решения.

Далее мы собрали все данные вместе и сформировали «Чемодан знаний».

Результат:

6 «аватаров клиентов»;

анализ 12 конкурентов;

карта сценариев (7 ситуаций);

список из 34 идей для реализации.

Этап 2. Проектирование

Выбрали ключевые идеи из «Чемодана знаний» и спроектировали страницы интернет-магазина.

Главная страница.

Каталог товаров: фильтры, сортировка.

Карточка товара.

Функционал корзины и промокода.

Страница оформления заказа:

Страница доставки;

Платежная система.

Личный кабинет розничного клиента.




Сложные функции мы описали в техническом задании (ТЗ). ТЗ сделали лаконичным, без повторов и лишней информации.

Результат: прототипы, документ ТЗ.

Этап 3. Дизайн

Что мы сделали:

разработали дизайн с обязательным учетом результатов маркетингового этапа;

создали адаптивные макеты для планшета и смартфона;

проработали UX‑элементы: фильтры товаров, корзину, форму заявки;

подобрали фотоконтент (профессиональные снимки продукции, процессов ухода).

Результат: дизайн‑макеты всех страниц.

Этап 4. Верстка

Что сделали:

сверстали макеты с использованием HTML, CSS и JavaScript;

оптимизировали скорость загрузки (сжатие изображений, кеширование);

обеспечили адаптивность для различных браузеров и устройств.

Результат:

готовые HTML-страницы сайта.

Этап 5. Разработка (back‑end)

каталог товаров с фильтрами и поиском;

карточка товара (фото, состав, способ применения, отзывы);

корзина с полем для введения промокода;

страница оформления заказа (доставка, оплата);

интегрировали платежную систему;

настроили интеграцию с CRM (Битрикс24);

создали личный кабинет розничного клиента:

• данные профиля;

• история заказов;

• избранные товары.

сделали личный кабинет оптового клиента.

Результат: альфа‑версия сайта.

Этап 6. Тестирование и запуск

проверили работу всех функций (каталог, корзина, оплата);

протестировали адаптивность на 10+ устройствах;

устранили баги, оптимизировали производительность;

перенесли сайт на основной сервер, подключили домен;

подключили Яндекс Метрику и Google Analytics.

Результат: готовый сайт.

Этап 7. SEO‑оптимизация

Провели базовую SEO‑оптимизацию сайта:

создали человекопонятные URL (ЧПУ);

заполнили мета-теги (Title, Description) и заголовки (H1);

проработали микроразметку;

настроили robots.txt и sitemap.xml;

настроили HTTPS;

ускорили загрузку.

Результат: рост трафика.

Этап 8. Обучение

Мы сделали систему внутри Битрикса максимально простой, убрали лишние элементы из интерфейса.

Далее мы настроили работу удобного редактора WYSIWYG (похож на MS Word). Он удобен для создания контента и редактирования страниц.



Также для удобной работы менеджера со стороны заказчика мы:

подготовили видеоинструкции по управлению всеми функциями сайта;

провели онлайн консультацию для сотрудников;

провели демонстрацию сайта, ответили на все интересующие вопросы.


Результаты

подготовленная документация по проекту;

готовая видеоинструкция;

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