НА ЭТОЙ СТРАНИЦЕ Я ХОЧУ ПОДРОБНО РАССКАЗАТЬ О СОЗДАНИИ САЙТА ПОД МИНИ ONLINE-МАГАЗИН ПО ПРОДАЖЕ НАБОРА ДЛЯ РОСТА БОРОДЫ: Посмотреть сайт
В конце февраля этого года в Директ моего Инстаграм пришло письмо следующего содержания:

ОСНОВНАЯ ЗАДАЧА:
Нарисовать максимально простой и понятный дизайн сайта в формате мини online – магазина для продажи набора для роста бороды «BEARD GROWTH KIT».

ОСНОВНАЯ ЦА – ЭТО:
1. Мужчины от 18 до 40 лет, которые хотят начать отращивать бороды, либо которые хотят скорректировать свою бороду: добавить густоты и избавиться от «дыр» на зонах роста бороды.
2. Девушки от 18 лет, которые хотят подарить набор в качестве подарка для своих мужчин.

ТРЕБОВАНИЯ К САЙТУ:
1. Минимум ярких цветов;
2. Много крупных фотографий самого набора;
3. Обязательное упоминание об актуальном количестве наборов (заказчик попросил научить его менять количество самостоятельно, чтобы он каждый день мог предоставлять актуальную информацию на сайт).


КОНТЕНТ:
Заказчик предоставил очень много фотографий самого набора, но попросил помощи в написании текстов и поиске фотографии на основную страницу.


А ЧТО ПО КОНКУРЕНТАМ?
Первое, с чего я решила начать работу над этим проектом – это анализ конкурентов. Надо сказать, что подобных наборов на нашем Российском рынке не оказалось. Существуют большие online-магазины, где можно купить средства по уходу за бородой разных брендов, но передо мной стояла задача нарисовать дизайн и собрать сайт одному конкретному набору.

Кроме того, анализ Российского рынка средств по уходу за бородой показал, что набор, который собирается продавать мой заказчик, намного дороже тех, которые уже существуют на рынке, несмотря на то, что сравнивать их нельзя. Заказчик, объяснив основные преимущества его набора, дал мне понять основную разницу между ними, доказав объективность дорогой цены его набора. Поэтому, ещё одной задачей, которая передо мной стояла, было нарисовать дизайн сайта, который бы выглядел дорого. Чтобы зайдя на сайт, у потенциального покупателя сразу появилось ощущение, что здесь продают что-то дорогое, а значит, что-то очень хорошее. При этом, мне надо было нарисовать такой дизайн, чтобы он не отпугнул своей дороговизной, и потенциальные покупатели не начали его закрывать, подумав, что то, что на этот сайте продают, им не по карману.
ОБСУЖДЕНИЕ КОНТЕНТА:

Цветовое решение:

Заказчику было важно, чтобы сайт не был ярким. Ему хотелось что-нибудь по минимуму. Я сразу призналась ему, что бородатый мужчина не ассоциируется у меня, как это обычно бывает, с каким-нибудь грязным хипстером. Я сразу мысленно переношусь в Европу, где бородатый мужчина – это самый настоящий образ жизни. Они модно, дорого и опрятно одеты, а их борода всегда в идеально ухоженном состоянии. Оказалось, что мы с заказчиком смотрим в одну сторону, поэтому, мы сразу сошлись на идее о том, что сайт должен быть в классическом «мужском» цветовом решении: а именно, ч/б.

Шрифт:

Заказчику понравилось моя идея подсмотреть шрифты из журналов Esquire и Vogue. Он сам предложил идею выбрать шрифт, который бы ассоциировался с журнальной статьей. В итоге, мы остановились на «Playfair Display».


Фото:

У заказчика было очень много фотографий набора и его компонентов, которые я, в итоге, задействовала в дизайне. Единственное, с чем он попросил меня помочь – это найти фотографию для основного экрана. Изначально он хотел разместить на первом экране фотографию самого набора, но я предложила создать определенный триггер: найти фотографию красивого, хорошо и богато одетого мужчины с ухоженной, густой бородой, чтобы у посетителей сайта создавалось следующая цепочка ассоциаций: будете пользоваться этим набором – обзаведётесь не только красивой и густой бородой, но и деньгами.

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


Не подходит, потому что одно из моих важных требований к фотографии – модная и дорогая одежда как показатель благосостояния. Эта фотография не продаёт, не провоцирует на эмоциональную дорогую покупку.
Не подходит, потому что мне не нравится, что у неё обрезан верх. Кроме того, по этой фотографии вообще не понятно, что мы конкретно пытаемся продать. Шампунь? Футболку? Услугу набиванию тату?
Это уже отредактированное фото (я убрала фон), которое мне понравилось на все 100%. Красивый, модный, в меру накаченный мужчина в костюме, со стильной прической, татуировками, украшениями и густой, ухоженной бородой. Весь его вид показывает, что у него есть деньги.
Тексты:

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

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


Кроме триггерных текстов мы добавили на сайт краткое описание каждого из компонентов набора, например:

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

Кроме того, я предложила прибегнуть к дополнительному маркетинговому ходу:

Изначально планировалось, что на сайте, в разделе «Стоимость» будет просто указана цена набора – 6500 Рублей. Анализ рынка продуктов по уходу за бородой показал, что это цена выше среднего, поэтому, для того, чтобы заставить потенциального покупателя купить этот набор, было решено дополнительно его простимулировать: разместить перед ценой фотографии каждого из 4-х компонентов, чтобы показать, что за эту сумму он покупает не просто 1 набор, а набор из 4-х компонентов. Тем самым, нам удалось аргументировать указанную стоимость.



УТВЕРЖДЁННЫЕ ЭКРАНЫ САЙТА:

Закончив обсуждение контента, мы с заказчиком составили список экранов, которые мне было необходимо нарисовать:

1. Первый экран, благодаря которому сразу становится понятно, сайт на какую тему мы видим;
2. Блок с триггерными текстами, где мы «давим на боль» наших потенциальных клиентов;
3. Блок «Решение есть», где мы предлагает решение проблемы наших потенциальных клиентов, даём краткое описание набора, каждого из его компонентов и добавляем кнопку «Купить», чтобы уже на этом этапе дать возможность оформить заказ;
4. Блок «Стоимость», где мы указываем стоимость набора, даём возможность оформить заказ через кнопку «Купить» и даём информацию о доставке;
5. Блок «Количество ограничено», где каждые 12 часов заказчик будет обновлять информацию о наличии наборов. В этот блок мы также добавили кнопку «Купить, с помощью которой можно оформить заказ, решив, что фраза «Количество ограничено!» спровоцирует потенциального покупателя на покупку;
6. Блок обратной связи, где потенциальный заказчик, оставив свои контактные данные, может заказать бесплатную консультацию по набору;
7. Блок с кнопкой перехода в Инстаграм.

ПРОТОТИП:

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

ПОДКЛЮЧЕННЫЕ ИНТЕРФЕЙСЫ:

Заказчику было важно, чтобы потенциальный покупатель мог максимально быстро оформить заказ, поэтому, я решила добавить на сайт корзину и подключить её ко всем кнопкам «Купить» на сайте. Нажимая на кнопку «Купить», открывается окно с формой, заполнив и отправив которую, потенциальный заказчик автоматически попадает на страницу оплаты. Всё, что ему остаётся сделать – это оплатить набор. Получив оплату, мой заказчик позвонит совершившему покупку человеку, чтобы уточнить его контактные данные и оформить доставку.
Ко всем формам на сайте подключена платежная система «Яндекс Деньги».

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


ОПТИМИЗАЦИЯ САЙТА:


Мне было важно, чтобы сайт:

1. Быстро загружался
Поэтому я по максимуму сжала размер всех изображений.

2. Работал безопасно
Поэтому я настроила HTTPS и редирект WWW, HTTPS

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

Кроме того, я добавила теги Н1, Н2 и т.д., загрузила фавикон, проверила переадресацию https/http и www/без www, добавила сайт в Google Search Console и Яндекс.Вебмастер.


ТРУДНОСТИ, С КОТОРЫМИ Я СТОЛКНУЛАСЬ В ПРОЦЕССЕ:

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

Честно говоря, мне не понравилась идея о том, чтобы разместить на сайте много текста. Я пыталась переубедить заказчика этого не делать, потому что боялась, что никто не будет читать так много текста. Однако, он настоял на том, чтобы это сделать, но с оговоркой: если через 2-3 недели статистика сайта покажет, что тексты действительно никто не читает, он обратится ко мне с просьбой полностью переделать этот блок. Как оказалось, мой страх был напрасным, потому что, судя по статистике, потенциальные покупатели «замирают» на этом блоке на 2-3 минуты, а значит, они действительно читают тексты.


ОБЗОР ВЫПОЛНЕННОЙ РАБОТЫ:

1. Анализ конкурентов;
2. Анализ ЦА заказчика;
3. Подбор цветового решения;
4. Подбор шрифтов;
5. Помощь в написании триггерных текстов;
6. Помощь в поиске фотографии на главную страницу;
7. Оптимизация размера фотографий;
8. Дизайн ПРОТОТИПА №1 в Figma;
9. Дизайн ПРОТОТИПА №2 в Figma;
10. Вёрстка сайта на платформе Tilda;
11. Адаптив сайта под разные разрешения экрана + мобильную версию;
12. Подключение внутреннего интерфейса: корзина, кнопки с формами, платежная система.
13. Подключение домена;
14. Подключение аналитики;
15. Оптимизация сайта;
16. Тестирование.

Срок выполнения всей вышеперечисленной работы: 11 рабочих дней.

ГОТОВЫЙ САЙТ ВЫ МОЖЕТЕ ПОСМОТРЕТЬ ЗДЕСЬ
ОТЗЫВ ЗАКАЗЧИКА:

Made on
Tilda