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

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

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

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

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

Главная страница сайта mykamchatka.ru

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

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

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

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

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

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

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

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

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

• Огромные фотографии от края до края экрана

• Элементы навигации — легкие и контурные, чтобы ничто не отвлекало.

• Фотографии для каждого блока. Где уместно — сделали отзывчивую анимацию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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