Создание интернет-магазина по продаже аксессуаров премиум-класса для женщин

В 2016 веб-студия “3840” работала с проектом не совсем обычной для нас тематики: от владелицы бизнеса по продаже модных дизайнерских аксессуаров поступил заказ на модернизацию и доработку сайта http://caredesign.ru/. Компания «Care Design» - магазин женских аксессуаров премиум-класса, созданный в 2013 году. На самом деле заказчица (Ольга) занимается данным направлением бизнеса уже больше 20 лет, работая с эксклюзивными и дизайнерскими товарами для модного гардероба женщин.

Задачи проекта

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

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

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

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

Реализация цели

Еще раз внимательно изучив весь сайт, включая контент и возможности CMS, мы совместно с заказчицей приняли решение: сделать новый ресурс с нуля, использовав как движок OpenCart, заново создав весь контент (тексты для разделов, фотографии, описания в карточках) и создав такой функционал, какой изначально хотела Ольга (возможность формирования корзины и покупки, возможность обратной связи и т.д.). Кроме того, у нас появился ряд оригинальных идей, которые мы собирались реализовать.

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

Админка OpenCart (точнее, его русской версии OcStore) как раз подходила для этих целей: она русскоязычная, понятна простому пользователю (даже без большого опыта в администрировании сайтов на разных CMS).

К сожалению, доступов к доменному имени у заказчицы не осталось, поэтому мы подобрали и оформили для неё новый домен http://caredesign.ru/. Затем подготовили бриф с вопросами, на которые мы хотели получить ответы до начала работ над ресурсом, и отправили Ольге на почту. Затем еще раз обсудили все детали и нюансы проекта, его сроки и стоимость.

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

Первым делом мы разработали структуру для нового сайта: сделали ее простой и логичной, и постарались учесть все пожелания Ольги. В главном меню расположили следующие пункты: «О Нас» (с текстом о компании «Care Design»), «Магазин» (общий каталог продукции с разделами), информационные блоки «Как купить», «Доставка», «Оплата», «Возврат» (с формой для оформления возврата товара) и «Контакты» (с полной контактной информацией магазина).

На главной странице разместили:

• превью блоков категорий товаров, при клике на которые посетитель попадает в соответствующий раздел;
• небольшой текст о компании в блоке «Немного о Care Design»;
• рекламные баннеры для категорий «Новинки» и «Распродажа»;
• блок «Стилист рекомендует» - в него заказчица планировала выводить определенную группу товаров соответствующего раздела.

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

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

Еще на первой встрече, когда совместно с заказчицей мы приняли решение делать новый сайт и полностью новый контент. Ольга сказала, что сможет договориться с фотографом и провести фотосессию, чтобы получить изображения всех товаров, имеющихся в наличии. Пока шли переговоры с фотографом и подготовка к фотосессии, мы получили от Ольги вводные данные для написания текстов во все карточки товаров и на информационные разделы сайта. Копирайтер принялся за работу. Тем временем дизайнер взял за основу уже имеющийся логотип компании «Care Design» и принялся его дорабатывать под новый дизайн ресурса.

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

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

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

Правки, в основном, касались дизайна главной страницы: Ольга хотела немного иначе оформить превью категорий: сделать все превью разного размера, а по центру разместить ярко-красную кнопку «Купить» и ссылку на раздел «Новинки». Еще она просила заменить пару фото в категориях товара в разделе «Магазин», а на главной создать маленький слайдер из 5 товаров со скидкой, чтобы при клике на товар можно было попасть в соответствующую карточку.

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

Мы настроили весь функционал сайта, включая формы обратной связи, быстрого заказа, корзины и т.д. Также была создана корпоративная доменная почта, которую прикрепили ко всем формам на сайте. Поскольку на момент сдачи сайта фотографии для всех карточек товара еще не были готовы (они делались поэтапно), сайт наполнили только теми карточками, информация и фото для которых уже имелись. А для последующего наполнения сайта товарами, которое Ольга планировала провести самостоятельно, мы создали подробную инструкцию с пояснениями. Далее мы протестировали ресурс на кроссбраузерность и кроссплатформенность, перенесли его с тестового домена на основной. На все работы ушло 60 дней.