Как разработать интернет-магазин, главная цель которого – не выручка, а помощь природе? Магазин, где нет кричащих баннеров, суперакций и списков преимуществ, а есть качественные товары и большая идея – ответственное отношение к окружающей среде.
Движения за сохранение окружающей среды, справедливые условия труда и равные права можно назвать трендом 21 века. Бренды, которые придерживаются этих же ценностей, сегодня ассоциируются у потребителей с высоким качеством, экологичностью, уникальностью. Такие бренды называют социально ответственными. По данным глобального исследования агентства Nielsen, 62% россиян готовы менять свои привычки, чтобы сохранить окружающую среду.
Спрос рождает предложение, поэтому в России все больше компаний, которые ставят во главу угла не продукт, а идею заботы о природе. И маркетинг для таких компаний требуется совсем другой.
К нам обратились создатели проекта «Береги Камчатку» Тарас и Татьяна Шарыга. Он создал этот бренд вместе с женой Татьяной. Если посмотреть на сайт проекта, то сразу трудно дать однозначный ответ, чем занимается «Береги Камчатку» — это и фотоблог о красоте природы, непотребительском к ней отношении, и личная история двух нашедших друг друга людей, и собственный бренд одежды с авторскими рисунками. Кроме того, часть средств с каждой проданной вещи идет в фонд Кроноцкого биосферного заповедника, вместе с которым проект планирует облагородить несколько лежбищ для морских львов – сивучей – на Камчатке. Поэтому язык не поворачивается назвать «Береги Камчатку» обычным интернет-магазином.
Работая над этим проектом, мы, конечно, поломали голову.
Отправная точка — в магазин за вдохновением
У проекта уже был сайт на Tilda, что создавало некоторые технические ограничения. Нам нужно было собрать новое решение с нуля, на более гибкой CMS и в свежем дизайне. Татьяне и Тарасу требовался сайт, на который удобно добавлять новый контент, будь то статьи или коллекции одежды. Для посетителей он должен был стать местом, куда хочется возвращаться — за новыми историями о Камчатке, за подарками для себя и близких людей, за фотографиями и вдохновением. Сайт должен был воодушевлять на добрые дела не меньше, чем соцсети проекта.
Страница «Береги Камчатку» в Instagram
Это было интересной задачей — просто по-человечески и с технической точки зрения.
Дизайн проекта — теплота и свобода
Для многих жителей Центральной России Камчатка ассоциируется с чем-то недостижимо далеким. Разрабатывая сайт, мы хотели сделать ее ближе, доступнее для всех. Нетипичное стремление, если ты разрабатываешь интернет-магазин, правда?
Ставку сделали на визуальную часть. У основателей есть очень много качественных фотоматериалов про Камчатку, накопленных за время путешествий по полуострову. Татьяна сама рисует принты для одежды и логотип компании тоже создавала сама. Эти элементы мы и использовали в оформлении. В результате соединения иллюстраций, фотографий, созданных основателями проекта, и нашего опыта в разработке получился сайт на стыке технологий и свободного творчества. Посетители чувствуют теплоту и свободу, которую такой подход позволил нам вложить в этот интернет-магазин.
Основные элементы дизайна
- Огромные фотографии от края до края экрана
- Элементы навигации — легкие и контурные, чтобы ничто не отвлекало.
- Фотографии для каждого блока. Где уместно — сделали отзывчивую анимацию.
- Большие виджеты соцсетей на главной — «Береги Камчатку» публикует потрясающий контент.
Виджеты соцсетей мы заверстали таким образом, чтобы они гармонировали с дизайном страницы. Для Instagram купили LightWidget и донастроили, а для Facebook взяли стандартный и настроили под адаптивный дизайн.
У «Береги Камчатку» большая лояльная аудитория. Чтобы она расширялась, мы добавили форму подписки на рассылку. Многие захотят оставить свой email, чтобы раньше всех узнавать о новостях проекта, получать оповещения о новых коллекциях и статьях в блоге.
Разработка и интеграции — забота о пользователе
Хотя, на первый взгляд, коммерческая составляющая — не главное на этом сайте, было важно сделать качественный интернет-магазин. Невесомость и дух свободы, который мы передали в дизайне, легко могло уничтожить небрежное отношение к потребностям пользователя.
Поэтому мы создали удобный дизайн списка товаров, максимально наглядный и лаконичный.
Модифицировали стандартную панель сортировки.
На детальной странице товара вывели крупный блок с фотогалереей — для каждого товара загружается целый альбом фотографий, все можно увеличить и рассмотреть. На фотографии, кстати, сами Тарас с Татьяной.
Умная таблица размеров и полная информация о товаре
Предусмотрели таблицу размеров, разместили основные характеристики товаров. Для удобства покупателей вывели в каждом товаре информацию об оплате, доставке и возврате.
Как у любого магазина одежды, у «Береги Камчатку» не всегда есть все размеры в наличии. Поэтому мы запрограммировали возможность указать в системе администрирования, сколько изделий осталось в каждом размере. Эта информация используется в публичной части для пользователей — нельзя добавить в корзину и оплатить больше товаров, чем их существует на самом деле.
Кому-то это могло показаться мелочью — махнули бы рукой: «Потом разберемся, заменим или вернем деньги». Но не в нашем случае. Любое неудобство оставит осадок, и все добрые намерения основателей уйдут на второй план. Мы проявляем заботу о посетителях сайта, даже когда они об этом не подозревают.
Агрегатор доставки
Также мы подключили агрегатор способов доставки eDost, который появляется на стадии оформления заказа. Покупатель указывает свои данные, и в зависимости от выбранного города ему предлагается выпадающий список всех возможных видов доставки (включая международную) с их ценой. После выбора цена автоматически прибавляется к сумме заказа, что удобно как для владельца сайта, так и для покупателя.
Публикация и итоги проекта
Суммарно все работы заняли около трех месяцев — время от первичного получения информации до финальной публикации утвержденного результата. Учитывая нестандартный дизайн, доработки и необходимость наполнить сайт — это приемлемый срок.
В команде трудились два project-менеджера, арт-директор, дизайнер интерфейсов, frontend-разработчик, два backend-разработчика, два специалиста по тестированию.
Деньги и трудозатраты:
Коммерческие проекты часто терпят неудачу из-за недостаточно проработанной стратегии взаимодействия с потенциальным покупателем. Сегодня, набрав любую комбинацию букв в адресной строке, вы с большой вероятностью попадете на интернет-магазин. Конкуренция в сфере онлайн-продаж просто бешеная.
| Бюджет | 160 000 рублей |
| Срок разработки | 60 рабочих дней |
Одна ошибка — и ваш посетитель уйдет туда, где удобнее, дешевле, шире выбор. Двойная ответственность лежит на основателях «Береги Камчатку».
- Во-первых, как любой коммерческий проект, он должен приносить прибыль.
- Во-вторых, основатели взяли на себя обязательство помогать заповеднику, а без продаж на сайте и отчислений в фонд заповедника риск исчезновения сивучей будет только расти.
Каждая мелочь имеет значение, потому мы старались обеспечить максимально комфортный пользовательский интерфейс — от входа на сайт до совершения покупки — наполнив его свободой и атмосферой заповедной Камчатки.
Опыт этого проекта показал, что некоторые из реализованных пользовательских функций отлично подойдут для любого сайта, и их нужно встроить в базовую комплектацию нашей CMS, чтобы сайты с большим количеством полезных функций обходились нашим клиентам дешевле.
Работа с такими добрыми, социально-ответственными проектами всегда вдохновляет, хочется становиться лучше самому, быть внимательнее и заботливее.
Берегите природу и делайте добрые сайты :)
Автор: Kuz_ma
