- Заказчик
- Krays Group
- Задача
- Сайт должен был предоставлять всю информацию о жилом комплексе, от цены до юридической документации. Также в его задачи входило создать легенду дома: место, где начинается волшебство, при этом быть максимально удобным в использовании.
Профессионалы строительной индустрии Krays Group доверили нам создать особое пространство для жилого комплекса нового типа «Трамвай желаний». И мы сделали сайт, главная страница которого выиграла две международные награды.
Laravel
Для сайтов с большими объемами данных важнее всего скорость работы. Если раздел «подобрать квартиру» будет грузиться минуты — человек может не дождаться и закрыть сайт, а если и дождется, будет весьма раздражен.
Сделали сайт на фреймворке Laravel. Он максимально кастомизирован. Это значит, что мы всё создавали практически с нуля, под конкретные задачи сайта. Это намного труднее, чем брать опорные шаблоны и писать код по ним, зато позволяет воплощать всё, что пожелаешь.
Фреймворки отлично подходят для объемных сложных каталогов. Мы сделали так, что квартира со всеми параметрами хранится единой записью в таблице базы данных, а не разрозненно по принципу EAV, как на иных готовых платформах. Благодаря этому данные о квартирах быстро импортируются из внутренней базы на сайт, и быстро работают фильтры.
Решение
«Трамвай желаний» должен впечатлять, заставлять зажигаться огоньки восторга в глазах, а в сознании каждого оживлять легенду этого дома. Одновременно он должен быть удобным, навигация интуитивно понятной — целевая аудитория достаточно широкая, и пользоваться сайтом должно быть легко и молодым людям, и старшим поколениям.
Мы сделали по-настоящему новаторскую вещь: объединили самостоятельную эффектную промо-страницу и удобную традиционную часть с техническими разделами. Такого вы еще не видели!
Ретро и современность
Дизайн должен был передавать позиционирование жилого комплекса. Нестандартный проект, предлагающий современный, передовой и соответствующий западным трендам подход к сфере создания жилого пространства. Сочетание старого доброго ретро эпохи изобретений (викторианская эпоха и ретро стиль городского пространства, когда по улицам ходили трамваи), современных разработок и инновационных решений.
Мы отталкивались от идеи волшебства.
Придумали и воплотили образ интеллигентного пожилого джентльмена в классической «тройке» с элементами стимпанка в образе, белыми перчатками фокусника и шляпой, полной чудес. Полноценная фотосессия с профессиональным актером, было отснято более 30 разных сцен и образов: для 404 страницы, главной, отдельные элементы реквизита и части тела.
Для проекта заказали фотосессию с волшебником: интеллигентный пожилой джентльмен в классической «тройке» с элементами стимпанка в образе, белыми перчатками фокусника и шляпой, полной чудес.
В основе цветовой гаммы сдержанные, и в тоже время акцентные тона:
- кирпичный, как цвет домов;
- красный и латунный — оттенки классического трамвая, в котором по легенде волшебник посетил страны и времена, и решил воплотить в жизнь уникальный жилой комплекс.
Промо-страница
Структура
Отказались от обычного сторителлинга и приблизили промо к акту волшебства: внезапные появления объектов, нестандартный скролл, много мелких завораживающих деталей — всё это похоже на вытаскивание из шляпы пестрых платков, один за другим, и каждый видится чудом, и они никак не заканчиваются.
Фоном на странице поставили мелодию. Ритмичная и завлекающая, погружающая в атмосферу волшебства, она дополняет картину и помогает творить легенду.
Первый слайд подсказывает «Крути вниз», но движение начинается горизонтально. Приятная внезапность, нестандартный ход, гармонично вплетеный в общее настроение.
Анимации
Как волшебники любят вовлекать зрителя в процесс, так и мы пригласили пользователя принять участие в создании легенды дома.
На главной странице есть остановки, где предлагается совершить простое действие для продолжения просмотра. Вставить ключ, нырнуть в шляпу волшебника, дернуть за канат театральной портьеры. Эти интерактивные элементы удерживают внимание, завлекают и делают со-творителем пространства. Ты уже в этой легенде, наполовину в там, в доме мечты «Трамвай желаний».
На страницах много анимированных «живых» деталей: компас и трамвайчики, крутящийся по кругу текст «печати» и машущий рукой волшебник. Тексты заглавий, блоки паттернов также движутся, а тексты будто кто-то печатает у тебя на глазах.
Переход между блоками презентационной страницы сделали через тройное заполнение квадратной сетки на JavaScript Canvas: получился эффект калейдоскопа (в своей группе fb рассказали об этой детали подробнее).
Всё это заставляет проснуться внутреннего ребенка, испытать восторг момента, когда видишь настоящие чудеса. KPI это важно, но нельзя забывать о том, что все мы люди, и чаще всего действуем эмоционально, а не рационально. А жить в месте, где начинается волшебство, а мечты исполняются, хочет каждый.
Кстати, на главной странице мы спрятали пасхалочку. Подскажем, что она связана со шляпой ;)
Подбор квартиры
Мы сделали каталог квартир, который начинается с выбора дома, а затем и этажа на объемной модели. Здания, которые строятся уже сейчас — заливаются желтой маской при наведении, как и этажи при приближении здания. Здесь же поместили мини-план застройки, чтобы пользователь видел местоположение выбранного дома.
Внутри каталога мы продумали всё, что только возможно. Максимальная открытость компании, доступность документации и прозрачность ценовой политики вызывают доверие у потенциального покупателя. Плюс так проще определиться с выбором, не надо тратить время и нервы: вся доступная информация уже есть.
На плане этажа актуальный цветовой статус квартиры: свободна, бронь или куплена.
Компас показывает расположение помещений по сторонам света.
Каждая квартира с чертежом, метражом и рендером квартиры в интерьере.
Выбор по параметрам: этап, этаж, количество комнат, метраж.
Точная цена квартир.
Подбор похожей жилплощади.
Добавление в избранное для сравнения.
При выборе квартиры по параметрам не надо обновлять страницу, количество подходящих помещений выставится автоматически.
Ссылка на подробное описание отделки квартир.
Кнопка печати полюбившейся жилплощади или отправки на email.
Плюс сделали прямой переход на страницу с информацией об ипотеке. Нарисовали простую понятную схему процедуры, указали сроки, чем сняли страхи клиентов и приблизили на шаг к покупке.
Инфраструктура
Комплекс только строится, и важно понимать, насколько легко в нём будет жить: близко ли магазины и школы, что с общественным транспортом и где покупать корм коту.
Эту техническую информацию важно подать так, чтобы человеку захотелось ознакомиться с ней самостоятельно, рассмотреть и запомнить. Чтобы всё было понятно, наглядно, и интересно во взаимодействии.
Разработали послойную карту, где отметили все важные для современного человека места. Значок ключиков — тут можно найти нужное место. Традиционный пин с кругом — сам жилой комплекс.
Фотогалерея
«Трамвай желаний» уникален еще и тем, что сочетает элементы архитектуры нескольких стран, разные планировки квартир. У него необычные фасады с вертикальным озеленением. Всё это играет важную роль при выборе будущей квартиры.
Сделали рендеры пространств и поместили в два слайдера. Внешние: фасады и благоустройство и внутренние: отделка подъездов и квартир, дизайн интерьера и варианты планировок.
Подчеркнули максимальную открытость и прозрачность компании: здесь же поместили альбомы с этапами строительства и онлайн камеры со стройки.
Преимущества
Не просто текст, а основополагающие принципы обслуживания. То, что должно запомниться. Коротко, ярко, интересно.
Нарисовали символичные образы под каждое преимущество, вырезали по маске и наложили цветовые паттерны. Всё это упаковали в небольшой слайдер. Знакомиться с преимуществами можно нажимая на кнопки-стрелки или выбирая любую точку.
Добавили смысловую деталь. Анимированные образные штампы — вращающиеся по кругу лаконичные девизы каждого преимущества — ассоциируются с гарантией, проверенным продуктом, добавляют доверия в восприятие.
Результаты
«Трамвай желаний» в первую очередь имиджевый сайт. Он должен отражать позиционирование, создавать легенду компании. И быть удобным для любого, кто хочет подобрать себе квартиру.
Проект взял два серебра на Рейтинге Рунета 2017: в «Недвижимости» и «Промо-сайтах». А также получил две международные награды: «Сайт дня» на Awwwards и CSS Design Awards.
Спустя месяц после запуска сайта:
- глубина просмотров 5 - 5,5 страниц;
- среднее время на сайте более 8 минут;
- процент отказов за неделю 7%.
Недвижимость весьма узкий сегмент, и такие цифры для нового сайта это полный успех.
Также благодаря сайту компания создала для себя полноценную айдентику, от фирменных цветовых сочетаний до рекламной кампании.
Хотим заметить, что продажи жилплощади стартовали где-то за месяц до запуска сайта. Сколько продано и забронировано квартир на данный момент — можете посмотреть на самом сайте.
«Наш жилой комплекс «Трамвай желаний» — объект уникальный, со своим характером, и невероятно творческой концепцией продвижения. Приступая к работе над caйтом вместе с Red Collar, мы ставили задачу, как нам казалось, едва ли выполнимую А именно: мы хотели, чтобы сайт сочетал с в себе несочетаемое — волшебную атмосферу с нетривиальной анимацией и при этом высокую функциональность и технологичность. Не секрет ведь, что недвижимость — это очень серьезный продукт, и к выбору недвижимости люди относятся ответственно.
Мы получили сайт, который собрал в себе все эти характеристики воедино! Он завораживает, удивляет, очаровывает и вместе с тем он выполняет свою rлавнyю функцию: заинтересовывает людей, призывает посмотреть, прицениться и, в конце концов, выбрать себе квартиру по душе.
Команда Red Collar — молодые, но высокопрофессиональные люди с нестандартным подходом и восхитительной смелостью. Молодцы!», — говорит Казеннова Наталья, Председатель совета директоров Krays Group.
