Хабрахабр

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бюджет

160 000 рублей

Срок разработки

60 рабочих дней

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

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

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

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

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

Берегите природу и делайте добрые сайты 🙂

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть