Дизайн WebCanape
2 512

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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "WebCanape", "author_type": "self", "tags": [], "comments": 39, "likes": 26, "favorites": 69, "is_advertisement": false, "subsite_label": "design", "id": 69809, "is_wide": false, "is_ugc": true, "date": "Thu, 30 May 2019 10:19:48 +0300" }
{ "id": 69809, "author_id": 179067, "diff_limit": 1000, "urls": {"diff":"\/comments\/69809\/get","add":"\/comments\/69809\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/69809"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

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

Популярные

По порядку

Написать комментарий...
0

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

Ответить
8

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

Ответить
4

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

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

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

Ответить
2

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

P.S: Животных жалко.

Ответить
0

Я тоже согласен, что все правильно. Не давай людям рыбу, дай им котика.

Ответить
4

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

Ответить
4

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

Ответить
3

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

Ответить
0

Идея не нова, как говорится:
"Green marketing refers to the process of selling products and/or services based on their environmental benefits".
https://www.thebalancesmb.com/green-marketing-2948347

Ответить
5

Прикольный проект, пожалуй куплю что-нибудь. А по поводу статьи, сложилось ощущение, что тут идёт упор на "ненавязчивую" рекламу движка.

Ответить
0

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

Ответить
1

Полностью согласен по поводу рассказа о движке. Я говорил о своих ощущениях, что мне пытаются что-то продать. А так, вообще вопросов нет.

Ответить
5

КПДВ - death stranding

Ответить
0

Коджимба гений!

Ответить
2

посмотрел магазин, почитал блог и как-то у меня не срослись в голове призыв "Береги" и выпуск абсолютно не утилитарных магнитиков. компании, ориентированные на поддержку эко-инициатив должны у клиентов формировать модель осознанного потребления и лучший пример тут - производители outdoor одежды типа Patagonia, использующей переработанный пластик и топящей за fair trade. Растущий этичный бизнес лучше сувенирной благотворительности для природы.

Ответить
7

Компании Патагония больше 50ти лет. Броекту «Береги Камчатку» всего 5. У Патагонии есть возможность закупать сырье большими объемами, у нас - нет задачи делать эти объемы. В нашем производстве одежды всё максимально экологично. Все обрезки ткани используются для пошива матрасиков в приюты для животных; весь мусор от офиса и производства сортируется и сдается в переработку; логистика сведена к минимуму; вся подиграфия напечатана на вторсырье. И мы не претендуем на лучший пример эко-компании) мы делаем добрые дела насколько имеем возможность и желаем всем эти возможности в своей деятельности находить✌🏽

Ответить
3

А почему МИШКА ВЕГАН? Это убеждения авторов или попытка проехаться на тренде? А почему не Мишка-мясоед или Мишка с бухлишком?

Ответить
3

Убеждения авторов✌🏽

Ответить
1

С бухлишком есть уже

Ответить
2

Увидел в заголовке слова Интернет-Магазин, Камчатка и классный рюкзак на фото. Пошел на сайт. Там тоже классный рюкзак на фото.

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

Окей, посмотрим в Мужском, может там есть чо. Там какие-то шмотки. Отфильтровать по категориям товаров - нет такой опции.

С недоумением закрываем сайт, отличный интернет-магазин создала компания Webcanape.

Ответить
0

Артур, раздел "Магазин" не на главной и не на первом месте в меню, потому что мы изначально хотели сделать акцент на идее сохранения природы Камчатки.
Фильтры, о которых вы говорите, есть в сборке. В качестве примера вот наш сайт, где это реализовано https://www.mebelverona.ru/.

На сайте https://mykamchatka.ru/ таких фильтров нет, потому что сейчас там не так много товаров, чтобы заводить дополнительные критерии фильтрации.

А рюкзак вы в каталоге не нашли, потому что он не из ассортимента "Береги Камчатку". Мы уточним у основателей магазина, где его можно купить.

Ответить

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

1

Бред какой-то. Камчадалы сами губят свою природу. Хочешь сохранить ее - борись с браконьерами. А тут песни о 62%, готовых менять... Это вы во время путины местных спросите.
На Камчатке 20000 туристов в год. Против 300000 местного населения. Поэтому, защита природы - вопрос в первую очередь к местным.

Ответить
1

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

Ответить
0

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

Ответить
2

К сожалению🤷🏽‍♀️ Это и поразило, когда переехали туда жить. «Зачем ходить на вулканы? Я их из окна вижу»

Ответить
1

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

Ответить
1

Основная идея этого кейса - рассказать об особенностях разработки сайта для социально ответственного бренда. Это интересный проект для нас, и надеемся, кому-то он тоже покажется интересным. Магазин "Береги Камчатку" нельзя назвать традиционным интернет-магазином, построен он не по канонам. И именно об этом мы говорим в этом материале.

Усовершенствования, которые мы внедрили в свой движок, не подаются здесь как "неимоверное достижение мысли". Мы хотели показать, что платформа развивается и что наши клиенты влияют на то, каким будет следующий релиз.

Ответить
0

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

Ответить
1

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

Ответить
1

Что-то ссылки на Canape CMS не кликабельны на айпаде.

Ответить
0

Свитшот- sweetshot? )

Ответить
0

sweatshirt
потная рубашка:)

Ответить
0

Тогда это свэтшот, а не свитшот

Ответить
0

А чем не устроила Tilda заказчика? Суде по тому что сделали - там такой функционал присутствует. Основной упор делается на фото, а значит отдельный CMS для этого ну требуется, опять же Tilda вывозит.

Какие плюсы?

Ответить
0

Интеграция Тильды с 1С – довольно болезненный процесс. И обойдется дорого, потому что нет нормализованных практик.
Да и eDost не предоставляет готового плагина для интеграции с Тильдой.

Ответить
0

Ну 1С это скорее вынужденное решение, нежели удобное. К сожалению они заняли рынок и альтернатив практически не существует.
Tilda не предназначена для такой серьезной интеграции и требовать конечно от них не стоит. А зачем для такого небольшого каталога интеграция с 1С?

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }