Отправная точка

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

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

---

Сайт: mixigram.ru Тип сайта: интернет-магазин Цели: разработка адаптивного сайта-конструктора скрабов для лица и тела Разработка дизайна На сайте представлено 8 типов основ, каждая из которых имеет свой цвет. Мы посчитали, что будет интересно сделать акцент на этой особенности продукта, но были сомнения, получится ли вписать в дизайн 8 цветов, и при этом не сделать сайт чересчур пестрым. Это могло испортить общее впечатление и не способствовало бы восприятию бренда как премиального.

В итоге:

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

Пересмотрен дизайн карточки товара в каталоге. Отметим, что данное решение отличается от стандартной сетки сайтов, разработанных на Canape CMS. Мы задались целью сделать карточки максимально информативными, но при этом выдержать их в общей стилистике сайта.

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

Особенности дизайна

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

Поскольку стояла задача повысить узнаваемость аппарата среди широких масс, решили использовать:

• простые понятные тексты;
• наглядные материалы (фото до и после, онлайн-тестирование, видео);
• экспертный контент (рекомендации СМИ, онлайн-консультации, отзывы);
• адаптивный дизайн (корректное отображение на мобильных устройствах и смартфонах).

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

Каталог

Детальная страница каталога

Создание конструктора скрабов

Для этого проекта мы разработали конструктор. Он позволяет сформировать заказ из нескольких товаров в одну позицию и дать этой позиции уникальное имя.

Уникальный продукт можно создать за три шага.

• Шаг 1. Пользователь выбирает одну из 8 категорий основ для своего скраба. При этом контентная область закрашивается в цвет выбранной категории.
• Шаг 2. Пользователь видит список основ в выбранной категории и выбирает одну из них. После того как основа скраба выбрана, он перемещается на третий этап.
• Шаг 3. На этом этапе у нас появляется список ингредиентов и мини-корзина. Здесь пользователь может добавить от 1 до 6 ингредиентов, выбранные элементы перемещаются в мини-корзине внизу страницы. Автоматически подсчитывается стоимость продукта.

Выбор ингредиентов

Выбор компонента

Выбор ингредиентов

Выбор ингридиентов

Корзина

Адаптивная версия

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

Особенности разработки Кроме конструктора для интернет-магазина был разработан модуль отложенных товаров (WishList).

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

Нюансы проекта

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

Чтобы пользователю было понятно, как взаимодействовать с конструктором, мы оставили всплывающие окна в мобильной версии сайта. Однако на отстройку корректной работы подсказок ушло довольно много времени.

---

Публикация сайта

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

Бюджет	209 000 рублей
Количество разработчиков	5 человек
Потрачено времени	280 часов
Срок разработки	35 дней

Отзыв клиента

Я достаточно долго выбирал компанию для создания моего сайта, в итоге остановил свой выбор на WebCanape, несмотря на обилие веб-студий непосредственно в Москве. Что я могу сказать после полугода совместной работы — мне не к чему придраться, несмотря на то что я достаточно капризный клиент.

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

Отдельно я очень хотел бы поблагодарить Юрия Милютина за профессионализм и терпение, действительно было очень приятно вместе работать. Однозначно и категорически рекомендую эту компанию.

Всеволод, mixigram.ru

Хотите заказать разработку сайта, продвижение или контекстную рекламу? Свяжитесь с нами по телефону: 8-800-200-94-60, доб. 321 или оставьте запрос на электронную почту manager@web-canape.com.