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

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

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

Главная цель брендинга компании — выделиться, запомниться и создать положительный образ у потребителей. Выбранное название должно отражать философию компании, быть оригинальным и запоминающимся, вызывать положительные ассоциации и эмоции у клиентов.

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

Web-дизайн (UX/UI) — это многогранная концепция, которая включает множество дисциплин: интерактивный дизайн, информационную архитектуру, визуальный дизайн, юзабилити и взаимодействие между человеком и компьютером.

Это не только "красивый" внешний вид, но и функциональность и удобство сайта для пользователя.

UX ― это функционал интерфейса, UI ― его внешний вид.

Дизайн сайта влияет на следующие показатели:

• время пребывания на сайте;
• глубина просмотра;
• конверсия сайта;
• продвижение сайта;
• влияние на репутацию компании, повышение конкурентноспособности.

Над созданием дизайна сайта работает команда из маркетолога, веб-дизайнера, веб-аналитика и разработчика.

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

Мы провели 2 интервью по 1.5 ч, в течение которых собственники компании отвечали на наши вопросы, чтобы мы четко поняли цели, ценности компании, бизнес-процессы, ассортимент, проблемы в работе данной ниши.

В итоге мы структурировали информацию по следующим пунктам:

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

Далее мы более детально рассмотрели ЦА и конкурентов.

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

На основании этих данных мы составили путь клиента от входа на сайт до покупки (CJM), который мы учитывали при дальнейшем брендинге и редизайне сайта.

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

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

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

Анализировали коммерческие показатели, позиции на рынке и представленность в интернете.

Так как сайт должен реализовывать продажи услуг в России и СНГ, то мы выбирали среди нескольких наилучших вариантов.

Для сайтов-визиток мы используем Tilda, для онлайн-магазинов малого и среднего бизнеса используем платформу Insales, а для крупного e-commerce наиболее подходит Bitrix.

Для данного проекта мы выбрали Insales – одну из лучших по функционалу и надежности в России платформ для онлайн-магазинов, которая обладает рядом преимуществ:

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

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

После проведенных исследований и полученных вводных по дизайну от собственницы, маркетолог собрал прототип сайта на базе маркетингового пути клиента с учетом UX-аудита и передал прототип web-дизайнеру на создание концепций дизайна.

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

Мы создали несколько вариантов главной страницы, вместе с клиентом выбрали лучший. Важно, что дизайн сайта должен отображать ДНК бренда.

Дизайн сайтов мы всегда делаем на платформе Figma.

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

В соотвествии с утвержденным UI kit и прототипами дизайнер создал дизайн страницы каталога товаров, карточки товара и ошибки 404.

Для скорости запуска мы использовали один из наших шаблонов функционала, поэтому у нас не было необходимости рисовать дизайн всех остальных страниц, так как они собираются по UI kit.

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

При создании интернет-магазина мы учли следующие важные характеристики:

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

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

Мы провели тестирование по следующим параметрам:

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

Разработка концепции, дизайна и создание сайта длились около 1.5 месяца.

После того как мы сделали редизайн сайта, мы приступили к SEO-оптимизации и дальнейшему продвижению сайта, но об этом расскажем в отдельных кейсах :)