Этап 1. Маркетинг
Перед проектированием мы изучили бизнес, аудиторию и конкурентную среду по методологии 3К: Компания, Клиенты, Конкуренты.
Компания
Мы разобрали продукт, позиционирование бренда и бизнес-задачи клиента:
-
провели интервью с заказчиком
-
изучили маркетинговые и рекламные материалы
-
выделили ключевые преимущества косметики Agadir
-
описали пользовательские сценарии для розничных и профессиональных покупателей
Важно было понять, как сайт должен работать для разных ситуаций: частный клиент выбирает шампунь или маску, мастер ищет профессиональный уход, салон оформляет оптовый заказ, постоянный клиент возвращается за повторной покупкой.
Клиенты
Мы изучили потребности целевой аудитории и разделили ее на несколько сегментов:
-
розничные покупатели, которые выбирают уход для дома;
-
мастера и стилисты, которым важны качество, состав и профессиональный результат;
-
салоны красоты, которые закупают продукцию для работы;
-
оптовые клиенты, которым нужны понятные условия сотрудничества.
Для каждого сегмента мы описали боли, страхи и потребности. Например, розничному покупателю важно не ошибиться с выбором, профессионалу — быть уверенным в качестве продукта, а оптовому клиенту — быстро понять условия закупки и связи с поставщиком.
Конкуренты
Мы изучили сайты конкурентов в нише профессиональной косметики и ухода за волосами:
-
проанализировали 12 сайтов конкурентов;
-
посмотрели, как они презентуют ассортимент;
-
разобрали структуру каталогов, карточки товаров и сценарии заказа;
-
собрали 34 идеи, которые можно использовать и улучшить в проекте.
Результат:
- 6 аватаров клиентов
-
анализ 12 конкурентов
-
карта из 7 пользовательских сценариев
-
список из 34 идей для реализации
-
сформирована база для проектирования интернет-магазина, которая учитывает задачи бизнеса и поведение покупателей
Этап 2. Проектирование
На основе маркетингового этапа мы спроектировали структуру интернет-магазина и основные пользовательские сценарии.
Основные разделы:
- Главная страница.
-
Каталог товаров.
-
Разделы по сериям.
-
Разделы по категориям.
-
Карточка товара.
-
Корзина.
-
Оформление заказа.
-
Доставка и оплата.
-
Личный кабинет розничного клиента.
-
Раздел для профессионалов.
-
Раздел для оптовых клиентов.
Ключевые функции:
- фильтры и сортировка в каталоге;
-
поиск по товарам;
-
карточка товара с фото, составом и способом применения;
-
добавление товара в корзину;
-
поле для промокода;
-
оформление заказа с выбором доставки и оплаты;
-
личный кабинет с историей заказов;
-
избранные товары;
-
сценарии для розничных и оптовых клиентов.
Сложные функции описали в техническом задании. Документ сделали лаконичным: без лишних повторов, но с достаточной детализацией для дизайна, верстки и разработки.
Результат:
- прототипы ключевых страниц
-
понятное техническое задание
-
заложена логика интернет-магазина, которая позволяет клиенту быстро пройти путь от выбора товара до оформления заказа
Этап 3. Дизайн сайта
В дизайне было важно соединить премиальность, натуральность и коммерческую эффективность. Сайт должен был выглядеть как брендовый интернет-магазин, но при этом не мешать главному действию — выбору и заказу товара.
Что сделали:
- разработали дизайн с учетом маркетингового анализа
-
визуально подчеркнули натуральность и профессиональность косметики
-
проработали главную страницу, каталог, карточки товаров и оформление заказа
-
подготовили адаптивные макеты для планшета и смартфона
-
продумали UX-элементы: фильтры, корзину, формы, блоки с преимуществами
-
подобрали фотоконтент для презентации продукции и ухода за волосами
Дизайн помог пользователю быстрее ориентироваться в ассортименте: перейти к нужной серии, выбрать категорию, сравнить продукты и перейти к покупке.
Результат:
Нам нужен интернет-магазин с современным дизайном. Важно подчеркнуть натуральность состава, показать преимущества косметики Agadir и упростить заказ для розничных и оптовых клиентов.