Как улучшить дизайн сайта строительной компании: 3 совета на примере редизайна Finnlam

Привет! Я Коляс Иванов, основатель дизайн-студии grafdesigna. Хочу рассказать, как мы сделали редизайн сайта строительной компании Finnlam, и поделиться ценными советами, которые повысят эффективность любого сайта в этой отрасли.

Ребята уже 30 лет строят элитные деревянные дома из финского клеёного бруса и с 2006 года занимают лидирующие позиции на рынке домостроения.

Finnlam хотели обновить дизайн сайта — старый уже не соответствовал образу компании, которая строит элитные дома.

Ребята заранее привлекли другое агентство, которое занялось разработкой и SEO-продвижением нового сайта, а нас попросили сделать именно дизайн для строительной компании.

1. Провести дизайн-аудит сайта. Найти, какие проблемы нужно исправить в старом сайте.
2. Провести дизайн-исследование. Исследовать сайты конкурентов и использовать лучшие решения на сайте Finnlam.
   
3. Утвердить направление дизайна. Показать клиенту коллекцию референсов, собранную для проекта.
4. Учесть требования SEO-оптимизации. Следовать всем рекомендациям команды SEO-оптимизации по мере выполнения проекта.
   
5. Разработать и утвердить дизайн. Отразить подход и позиционирование компании на сайте, выделить Finnlam среди конкурентов.

Начали с аудита, обнаружили проблемы на старом сайте, изучили ЦА, рекомендации SEO и информацию о Finnlam. Что мы выявили:

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

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

Неправильные акценты. В примере выше находится ключевой элемент для продажи — кнопка «Узнать стоимость», но она в 50 раз меньше заголовка. Вероятность, что кнопку заметят и захотят узнать стоимость, падает в 50 раз.

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

Сайт не соответствует сегменту компании. Finnlam строят элитные дома из дорогих материалов, и ЦА компании — люди с высоким доходом. Сайт не отражал позиционирование компании и выглядел дешевле своего сегмента.

Затем, мы изучили сайты главных конкурентов Finnlam. Выявили лучшие решения для будущего дизайна:

1. Основной акцент на сайте — дома, без лишних элементов.
2. Обеспечим быстрый доступ к ключевой информации, включая портфолио, каталог и конкретные дома за счёт удобного интерфейса.
   
3. Фокус в текстах — на клиенте, чтобы обеспечить легкий поиск и понимание информации.
   
4. Подчеркнём уникальность компании в сравнении с конкурентами.
   
5. Реализуем удобный каталог для быстрого поиска нужного дома.

На этом этапе мы подобрали референсы и сразу утвердили с клиентом направление будущего дизайна.

Для начала разработаем дизайн каталога домов и страницы дома в нём — они ключевые на сайте.

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

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

Информацию о компании отделили от каталога. Внутри этого меню выделили портфолио фотографией дома — везде в интерфейсе хвастаемся нашими крутыми домами.

После утверждения дизайна, клиент предложил свои идеи для сайта. Естественно, мы отозвались на просьбу :)

1. Клиент попросил сформулировать оффер в первом блоке. Решили так: «Строим элитные дома из финского клеёного бруса».
2. Клиент предложил сделать сторителлинг во втором блоке, чтобы рассказать посетителю о продукте и компании. Мы согласились — это выделит уникальность компании.
   
3. Клиент предложил сделать лид-магнит в третьем блоке, но мы отказались — это лишнее для сайта данного сегмента.
   
4. Клиент попросил, чтобы форма обратной связи не преследовала посетителя в каждом блоке. Мы разместили кнопку заказать проект в шапке, которая ненавязчиво сопровождает при скроллинге.
   

Клиент согласился с нами и поделился подробностями своей уникальной технологии изготовления. Мы внедрили этот рассказ в дизайн в виде сторителлинга.

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

Итоги

1. Проработали смыслы, тексты и прототипы страниц. Сделали акцент на фото и удобный интерфейс.
2. Пообщались с клиентом, переубедили перегружать главную страницу лишней информацией и функционалом.
3. Внедрили идею клиента — сторителлинг с преимуществами их технологии.
   
4. Утвердили дизайн-концепцию сайта с клиентом.
   
5. Внесли правки коллег, отвечающих за SEO-оптимизацию.

После утверждения дизайн-концепции разработали дизайн прототипов остальных страниц.

Затем адаптировали сайт под телефоны, провели встречу с клиентом, внесли небольшие правки и вот, что у нас получилось!)

Обновление дизайна сайта заняло два месяца, а вёрстка была реализована уже не нами. Готовый сайт смотрите тут — finnlam.ru.

Если эта статья наберёт больше 100 лайков, мы бесплатно задизайним Finnlam фирменный бланк ❤

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

Как и обещали, делимся советами, которые обеспечили успех проекта:

Совет 1. Фотографии домов должны быть большими

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

Совет 2. Фотографии домов должны быть даже в интерфейсе

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

Как мы это реализовали:

1. Сделали большие фотографии в начале каждой страницы
   
2. Внедрили фотографии в каталог внутри шапки сайта
   
3. В меню выделили «Портфолио» фотографией одного из проектов компании.
   

Совет 3. Отражать уникальность, через выгоду для клиента

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

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

Эти советы помогут улучшить дизайн сайта любой строительной компании.

Другие кейсы смотрите тут.