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

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

Чем этот проект интересен?

  • У клиента был сайт с устаревшим дизайном. При этом, он хотел, чтобы сайт лучше работал на молодую аудиторию, так как они чаще становятся клиентами, чем другие группы ЦА
  • У клиентов открылись конкуренты в их же городе, которые имели намного более современный и удобный сайт, нужно было перепрыгнуть их
  • Сайт сделан в стилистике, которая совмещает объём и минимализм. Это позволяет избегать перегруженности, но об этом мы поговорим чуть позже
Одна из страниц старого сайта 
Одна из страниц старого сайта 

Вводные данные

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

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

Я сразу нашёл ряд грубых ошибок в этом проекте:

  • Явно устаревший внешний вид
  • Целевые действия были расставлены по странице не правильно и не мотивировали к покупке
  • Порядок блоков меня не устроил, потому что воронка продаж была не до конца правильной
Одна из страниц старого сайта
Одна из страниц старого сайта

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

Начало работы. Главный экран

Мы начали с главного экрана. Мне удалось совместить красоту и функциональность. Главной задачей здесь было - вызвать доверие, показать экспертность и при этом не забыть продать.

Для этого я разместил крупное фото команды, дал максимально простой оффер, который уже отлично индексировался в СЕО, а также, чтобы вызвать доверие рассказал о ключевых УТП со слов заказчика

Помимо этого, в блоке удобная навигация: это и меню сверху, и кнопка для связи и кнопка для записи.

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

Блок с сравнениями

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

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

Социальное доказательство

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

Целевое действие

Здесь пора дать клиенту возможность оставить заявку и при этом показать ограниченное предложение. Тут идёт простая форма заявки с простым оффером

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

Репутация

Блок "О нас" - это всегда ловушка. Я обычно ставлю этот блок почти в конец, потому что он, сам по себе не имеет ценности, а является лишь добивающим фактором. Но не тут. Здесь УТП школы держится на профессионализме и опыте команды и очень важно этот опыт отразить и дать с ним ознакомиться.

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

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

Цены

Блок, с которым возникло больше всего трудностей.

До начала работы с сайтом, я оформлял для ребят прайс-лист. Следовательно, там была вся та же самая информация, но она у меня растянулась на 4 страницы А4.

Здесь же мне нужно было уложить её в небольшой блок, чтобы все товары поместились на одном экране. Да не просто товары: Цена со скидкой, содержание и отличие каждой программы, выгода при оплате 100% курса.

Это много информации. Здесь мне пришлось включить все свои навыки копирайтера, сократить текст и сделать то, что вы видите в картинках.

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

Но этот блок не планировал прекращать мои мучения

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

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

Это было максимально удобное решение, о котором мы не пожалели.

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

Дальше идёт снова призыв к действию уже с другим оффером, но всё с той же простой формой для записи\

FAQ

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

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

Зачем нужен блок с записью в конце?

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

Логично, что совсем недавно у нас уже была форма заявки, буквально один блок назад. Да, но есть нюансы:

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

Финальный результат

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

Опыт

Теперь уберём все вот эти СЕО приколы из статьи, я хочу с вами поболтать по человечески, а не ради продвижения)

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

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

Клиент сейчас уже активно гонит на него трафик, получает клиентов и это самое главное. Это был отличный опыт, который 100% я запомню

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

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

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

Но есть место, где я пишу с эмоциями, матюками, блэк-джеком, и другими непотребствами - это мой телеграм-канал

Я буду рад, если вы туда зайдёте, почитаете и подпишитесь.

Там правда очень классно. Помимо того, что я там более живой, так я там ещё и более полезный. Очень много контента, который призван помогать предпринимателям, экспертам, фрилансерам и самозанятым.

Там же можно будет найти ссылку на этот сайт, который мы обозревали сегодня, она лежит в закреплённом сообщении

Всем пока и спасибо, что дочитали!

11
реклама
разместить
Начать дискуссию