Разработка интернет-магазина для сохранения природы Камчатки

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

Менеджер проектов разработки WebCanape Виталий Тараканов рассказывает об опыте компании.

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

Такие бренды называют социально ответственными. По данным глобального исследования агентства Nielsen, 62% россиян готовы менять свои привычки, чтобы сохранить окружающую среду.

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

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

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

Работая над этим проектом, мы, конечно, поломали голову.

Главная страница сайта <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fmykamchatka.ru%2F&postId=69809" rel="nofollow noreferrer noopener" target="_blank">mykamchatka.ru</a>
Главная страница сайта mykamchatka.ru

Отправная точка — в магазин за вдохновением

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

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

Страница «Береги Камчатку» в Instagram
Страница «Береги Камчатку» в Instagram

Это было интересной задачей — просто по-человечески и с технической точки зрения.

Мы традиционно выбрали для сайта наш движок Canape CMS, а все ключевые вопросы дизайна поручили арт-директору студии.

Дизайн проекта — теплота и свобода

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

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

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

Основные элементы дизайна

  • Огромные фотографии от края до края экрана.
Разработка интернет-магазина для сохранения природы Камчатки
  • Элементы навигации — легкие и контурные, чтобы ничто не отвлекало.
Разработка интернет-магазина для сохранения природы Камчатки
Разработка интернет-магазина для сохранения природы Камчатки
  • Фотографии для каждого блока. Где уместно — сделали отзывчивую анимацию.
Разработка интернет-магазина для сохранения природы Камчатки
  • Большие виджеты соцсетей на главной — «Береги Камчатку» публикует потрясающий контент.
Разработка интернет-магазина для сохранения природы Камчатки

Виджеты соцсетей мы заверстали таким образом, чтобы они гармонировали с дизайном страницы. Для Instagram купили LightWidget и донастроили, а для Facebook взяли стандартный и настроили под адаптивный дизайн.

У «Береги Камчатку» большая лояльная аудитория. Чтобы она расширялась, мы добавили форму подписки на рассылку. Многие захотят оставить свой email, чтобы раньше всех узнавать о новостях проекта, получать оповещения о новых коллекциях и статьях в блоге.

Разработка и интеграции — забота о пользователе

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

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

Разработка интернет-магазина для сохранения природы Камчатки

Модифицировали нашу стандартную панель сортировки.

Разработка интернет-магазина для сохранения природы Камчатки

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

Разработка интернет-магазина для сохранения природы Камчатки

«Умная» таблица размеров и полная информация о товаре

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

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

Разработка интернет-магазина для сохранения природы Камчатки

Кому-то это могло показаться мелочью — махнули бы рукой: «Потом разберёмся, заменим или вернём деньги». Но не в нашем случае. Любое неудобство оставит осадок, и все добрые намерения основателей уйдут на второй план. Мы проявляем заботу о посетителях сайта, даже когда они об этом не подозревают.

Агрегатор доставки

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

Разработка интернет-магазина для сохранения природы Камчатки

Публикация и итоги проекта

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

Суммарно все работы заняли около трёх месяцев — время от первичного получения информации до финальной публикации утвержденного результата. Учитывая нестандартный дизайн, доработки и необходимость наполнить сайт — это приемлемый срок.

В команде трудились два project-менеджера, арт-директор, дизайнер интерфейсов, frontend-разработчик, два backend-разработчика, два специалиста по тестированию.

Деньги и трудозатраты:

Разработка интернет-магазина для сохранения природы Камчатки

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

Одна ошибка — и ваш посетитель уйдёт туда, где удобнее, дешевле, шире выбор. Двойная ответственность лежит на основателях «Береги Камчатку». Во-первых, как любой коммерческий проект, он должен приносить прибыль. Во-вторых, основатели взяли на себя обязательство помогать заповеднику, а без продаж на сайте и отчислений в фонд заповедника риск исчезновения сивучей будет только расти.

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

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

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

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

2424
39 комментариев

То есть вместо жилья для русских семей которые живут в нищенских условиях вы предлагаете обустраивать пляжи для морских котиков? Ясно.

4

Люди могут о себе позаботиться, а котики - нет

8

жилья для русских семей которые живут в нищенских условиях

В РФ и мире вообще есть огромное количество проблем. Кто-то занимается одними, кто-то другими.

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

4

Комментарий недоступен

2

И почему-то у меня не возникает чувства восторга деятельностью героев. Такое чувство, что вещи за 200р продают за 5000р прикрываясь благими намерениями. И я не утверждаю что какая-то часть реально идет на благотворительность. Типа - я купил футболку за 200р, нарисовала фигнюшку оцененную в 2200р, и да, 100р любимой камчатке! Если это так или приблизительно так, то есть если изначальные мысли берут свои корни в этом направлении, то просто нужно быть последним иудой чтобы собственные прихоти прикрывать природой.

4

В любом хорошем деле при большом желании можно найти негатив) вы не знаете ни объемов производства, ни себестоимость тканей, ни откуда они привезены. Фигнюшки я не рисую, это моё творчество и хоть какая то помощь месту, которое я очень люблю. Осуждая других, ответьте себе на вопрос «а что я сделал для места, в котором родился?»✌🏽

4

Можно подумать в H&M вам всё по 200р продают.

3