Создание интернет-магазина для бренда “Kleo”

В июне 2020 года наша веб-студия получила электронное письмо с техническим заданием от руководителя отдела маркетинга компании «Сясьский ЦБК». Эта компания является производителем бумажной санитарно-гигиенической продукции и владеет брендами «Kleo» и «Мягкий знак». Бренд «Kleo» известен как популярная марка качественной туалетной бумаги, бумажных полотенец, салфеток и платков.

У компании имелся работающий сайт kleo-paper.ru, который, по мнению владельцев, устарел и был излишне перегружен, а потому нуждался в переделке и доработке функционала.

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

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

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

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

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

По сути, для «Kleo» требовалось за 25-30 дней создать новый ресурс с оригинальным дизайном, основанном на фирменных цветах и элементах компании, адаптивной версткой и уникальным функционалом.

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

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

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

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

В самом верху разместили логотип, пункты главного меню, иконку для поиска, контактную информацию. Ниже зарезервировали место для эффектной тематической картинки и кнопки «Каталог», при клике на которую пользователь должен попасть в общий каталог продукции компании. Далее следовали блоки «Kleo» (с информацией о компании), «Преимущества», «Продукция», «Новости и Статьи», форма «Связаться с нами» и футер сайта. Законченный вариант структуры через сутки был изучен и утвержден заказчиком, поручившим нам приступить к работе над дизайном.

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

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

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

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

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

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

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

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

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

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

Еще одно нестандартное решение - оформление раздела «Новости», имеющего несколько подразделов: «Новости» (последние новости компании, анонсы мероприятий и т.д.), «Блог» (статьи, полезные ссылки, советы), «Медиа» (презентации, видео, фото, файлы различного формата, доступные для скачивания).

Функционал подразделов «Новости» и «Блог» имеет небольшие отличия. Изначально мы планировали выводить последние новости и статьи блога в определенные блоки на главной странице. Но Татьяна попросила, чтобы на главной странице остался единый блок для последних новостей и статей, который бы назывался «Новости и Статьи».

За пять дней сайт был полностью сверстан и наполнен товарами, на нем настроили необходимый функционал для форм обратной связи и рассылки, проверили на кроссбраузерность и кроссплатформенность. Все работы велись на тестовом поддомене, в то время как прежний ресурс продолжал работать на основном домене kleo-paper.ru.

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

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