С заботой о природе и пользователях: как мы создавали интернет-магазин для социально ответственной компании

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

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

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

К нам обратились создатели проекта «Береги Камчатку» Тарас и Татьяна Шарыга.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

Материал был обновлен в 16.50, 29.05.2019

Материалы по теме:

Три самые дорогие ошибки при запуске сайта

Так что просто не дай ему уйти: как превратить случайных посетителей сайта в полноценных покупателей

15 способов развлечь пользователя, пока он ждет загрузки сайта

«Не верьте Стиву Джобсу – люди готовы платить за решение их проблем». Маркетолог – о том, как понять клиента

Как искусственный интеллект помогает лучше понять клиентов

Фото на обложке: Unsplash