Атмосферный редизайн: кейс перезапуска корпоративного сайта жилого комплекса
Рассказываю, как мы помогли жилому комплексу Новая Боровая переосмыслить дизайн их корпоративного сайта. Создали и проработали информационную архитектуру, прототипы и разработали свежий стиль, подходящий под позиционирование компании.
О проекте
Новая Боровая - жилой комплекс, позиционирующий себя, как город-сообщество с особой атмосферой, где люди доверяют друг другу. Район располагается на участке площадью более 100 гектаров, рядом с главным проспектом Минска. Проект одержал победу в премии «Home Awards: Лучшее для жизни в сфере ремонта, строительства, архитектуры и дизайна Беларуси» в номинации «Лучший жилой район».
Целевая аудитория - в первую очередь это покупатели квартир для жилья. Групп может быть несколько: молодые семьи без детей, семьи с детьми, одинокий молодой человек (любого пола), пожилые люди. Также это могут быть люди покупающие недвижимость для последующей продажи.
Цели у проекта - это достичь максимального комфорта при использовании сайта. Вся информация должна быть доступна и находиться в четкой иерархии.
Чем вдохновлялись
Для вдохновения и поиска интересных референсов я в основном обращаюсь к dprofile, behance, awwwards, savee.it
Конечно, обязательно нужно изучить конкурентов, но в большинстве случаев уровень их дизайна не всегда соответствует требуемому. Но все же после анализа, я выделяю ряд ux фич, которые планирую применять в проекте.
Чтобы найти крутые работы среди хлама на behance, можно изучить кейсы веб студий. Мои требования к референсам - работы должны быть достаточно минималистичными и с акцентом на изображения и типографику. Обязательно должны быть в проекте реализованы интересные блоки с простой, но выделяющейся анимацией.
Прототипы и информационная архитектура
По техническим требованиям, относительно потребностей целевой аудитории мы выделили ряд обязательных функций и страниц. Все более или менее понятно с информационными страницами (главная, о жк, о застройщике, информация о ипотеке и условиях покупки). Но архитектура сайта выходит достаточно сложной: многие страницы переплетаются и важно организовать четкую навигацию.
Из важных фич: 3d обзор жилого комплекса.
Итог: четко продуманная информационная архитектура, user flow, прототипы с организацией всей информации.
В чем суть, как формировать подачу?
Итак, я пришел к выводу, что дизайн нужно делать не банальным (как бы это банально не звучало) Перед нами задача не только разработать сайт с общей информацией, а передать атмосферу этого места. Я уже отметил в описании жилого комплекса, что эти ребята говорят о сообществе, построенном на доверии. Они реализуют крутые дизайн-решения в архитектуре, но в тоже время делают все для людей.
Решение - сайт должен быть простым, но необходимо делать акцент на изображениях, передающих атмосферу. Блоки и страницы не должны быть примитивными и однообразными, должна чувствоваться активность.
Дизайн
Но все же, как акцентный цвет мы выбрали синий. Холодный, но передающий надежность и в какой-то степени умиротворение.
Типографика максимальна простая и четкая. Шрифт San Francisco. Большие и длинные заголовки сочетаются с мягким текстом. В целом легко читать и не приходится бегать глазами чтобы найти нужные отрывки текста.
Общий вид сайта напоминает журнальную верстку - то есть качественные фото должны сочетаться с блоками текста. В итоге страницы имеют очень много “свободы”и негативного пространства, что позволяет не перегружать восприятие.
Достаточно интересный слайдер с описанием условий покупки. Простой, но информативный и понятный.
Для реализации формы я использовал длинный заголовок, простые поля для ввода и контактные данные.
Каталог
Суть каталога в том, что в Новой Боровой есть отдельные кварталы, внутри которых дома, парковки и любая другая инфраструктура. На сайте я выделил планировку жилого комплекса с указанием каждого здания. И каталогом будет уже являться сетка номеров зданий с фильтрами типовых квартир внутри них.
Сделал настраиваемое отображение товаров: можно просматривать карточки формата сетки, а также уменьшенный формат с большим количеством информации - это сделано для того, чтобы всем пользователям было удобно изучать информацию.
Интересные дизайнерские решения
Я на самом деле обожаю совмещать строгий стиль с интересной сеткой и композицией. В этом проекте было достаточно информации и изображений.
Длинные заголовки прекрасно сочетались с пластами текста и интересными вариантами расположения изображений. В нескольких разделах я использовал изображения больших размеров, которые разбавляют текст, помогают пользователю сохранить концентрацию и создают дополнительный эмоциональный эффект.
Новости
В целевой аудитории, помимо покупателей квартир, есть также жильцы и инвесторы. Им необходимо узнавать новости об изменении условий облигаций, выплатах облигаций, мероприятиях и любые другие предупреждения. На странице была использована блочная сетка для новостей, а также возможность фильтровать события по их типу.
Кредит
Продумали удобные карточки с условиями кредита от банков партнеров. Например потенциальный клиент хочет найти определенный параметр кредита, для этого ему не придется кликать на каждое предложение, основываясь только на поверхностных данных.
Гамбургер меню
Так как количество страниц на сайте достаточно большое, уместить их все в хедере не удается. Там мы оставили, только самые важные страницы. Но уже рядом имеется гамбургер, где хранятся другие страницы и контакты.
Результат: создали эстетичный корпоративный сайт, отвечающий потребностям бизнеса. Повысили глубину просмотра и лояльность.
Итогом стал удобный для пользователя продукт, который отвечает всем его потребностям. Легкий и доступный текст повысил глубину просмотра, следовательно облегчил задачу консультантам.
При взаимодействии пользователь получает необходимое количество данных: детальную информацию о жилом комплексе "Новая Боровая" и другой тематический контент.
Бизнес в свою очередь получил площадку для привлечения продаж и построения плодотворных отношений с клиентом. Из дополнительных плюсов: возможность делиться анонсами событий и привлекать персонал в команду.
Автор кейса — Волков Арсений
Для заказа писать — t.me/arsenijtut
Проект на dprofile ❤
Сайт то где?
В рамках проекта реализовали пока только дизайн
У вас же написано «повысили глубину просмотра». Только а мечтах?
Это ж прямое враньё получается в тексте.
Сами глубоко посмотрели когда рисовали
Нет, почему) мы до вёрстки и запуска можем изучить взаимодействие реального пользователя с дизайном благодаря функционалу фигмы
Мда, отсутствие в кейсе исследования пользователей ломает красивую логику повествования, к сожалению :/
Спасибо за комментарий) В следующем кейсе обязательно подробно расскажу про исследование пользователей
"Удобный для пользователя продукт, который отвечает всем его потребностям" - это схема застройки с квартирами, ценами и окружающими объектами (школами, парковками, автобусными линиями и т.п.). А тут - сплошная вода, побуждающая раздражённого пользователя поскорее покинуть это бессмысленное место.
К сожалению в статью не уместил все страницы. Но я отметил, какие фичи реализовывал. На странице отдельного района жилого комплекса есть карта с домами, парковками и т.д
Учитесь : https://gkufa.ru
Домовой чатик уже не канает для 'города - сообщества' ?
Ох уж эти чатики конечно)
Ох уж эти чатики конечно)
Признали аварийным, выселять жильцов, а не давать рекомендации по переселению