Цель и решаемые задачи

Основными бизнес-целями для сайта было:

  • продвижение концепции и идеи микрорайона, а также новых для Ижевска принципов строительства;
  • вывод на контакт с отделом продаж квалифицированные обращения для выполнения плана продаж. 

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

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

Основные этапы проекта

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

Анализ бизнес-целей

Стартовали с проведения предварительных (предпроектных) встреч для получения общей информации о проекте как о продукте и о тех задачах, которые должен решать сайт как один из элементов интернет-маркетинга.

По полученной информации строим описание продукта, которое будет помогать на всех последующих этапах.

Краткий свод информации о проекте микрорайона

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

Анализ целевой аудитории и точек принятия решений. Решаемые проблемы.

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

В итоге делаем документ, содержащий:

  • сведения о реализуемом проекте, его целях и задачах;
  • концепцию решения для сайта;
  • описание отдельных элементов проекта с характеристиками и особенностями, которые мы должны показать на сайте;
  • описание целевой аудитории и задач, посетители ожидают решать, заходя на сайт проекта;
  • обзорную модель структуры сайта;
  • гипотезы для проектных решений по сайту.
Отчет по результатам проведенного воркшопа
Создание концепции. Основные сущности сайта. Информационная структура сайта

Также на основании полученной информации формируем список сущностей (контент, функционал), которые должны быть реализованы на сайте и их предварительное структурирование.

Сущности на сайте
Прототип и техническое задание

Исходя из карты сущностей и концепции (включая задачи целевой аудитории, цели бизнеса), проектируем информационную и навигационную структуру

Информационная и навигационная структура

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

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

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

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

Ниже все остальное.

Прототип главной страницы

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

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

Про кладовые и парковочные места в ходе анализа наших проектов мы выяснили, что необходимо именно простое информирование, т.к. попытка вывести на выбор и явную заявку по данному виду товаров является ошибочной и приводит к нулевым результатам и пустым тратам на различные интерактивные блоки выбора парковочных мест или кладовых. Причина в том, что эта недвижимость является добавочной к квартире, а продавать дополнительный «товар», когда еще не продан основной, является ошибкой. А сайт не продает квартиры — он продает контакты покупателей, находящихся на разных стадиях выбора. По этой причине мы обязаны просто проинформировать людей о дополнительной недвижимости, а продать ее должен отдел продаж.

Прототип страницы «Квартиры»

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

Мы делаем интерфейс с учетом того, что планировку покупатель выбирает в одном подъезде, заранее понимая, куда должны выходить окна. Т.е. мы не показываем ему типовую планировку по всему дому, запутывая его. Позже, уже на дизайне (после тестирования), мы сделали возможность вывода таких же планировок в других подъездах, что существенно улучшило опыт выбора квартир

Прототип страницы планировки квартиры в одной секции

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

Вкладки просмотра плана этажа и дома на карте на странице планировки

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

Прототип страницы описания особенностей проекта

Готовим прототипы вкладок этой же страницы, где более подробно рассказано о технических и инженерных решениях, применяемых при строительстве, а также есть просмотр фотоотчета прогресса строительства — для тех, кто глубоко вовлечен в изучение особенностей. И как показал анализ (забегая вперед), таких вовлеченных более 50% от посетителей раздела.

Прототип вкладок «Инженерные решения» и «История строительства»

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

Создаем прототип главной страницы раздела «Как купить».

Прототип главной страницы раздела «Как купить»

Готовим шаблон для внутренних страниц самих способов оплаты. Учитываем то, что способы оплаты могут отличаться количеством, структурой информации и подвидами способа. И то, что данный этап лучше проходить непосредственно со специалистом по оплате, — т.е. выводим на контакт.

Прототипы шаблонных страниц способов оплаты
Прототипы примеров страниц способов оплаты

Готовим страницу контактов и обязательный раздел для застройщиков по раскрытию информации.

Прототип страницы контактов и раскрытия информации

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

Прототип фильтров, акционного баннера и информации о доме

Еще раз проводим сверку прототипа сайта на бизнес-цели и задачи посетителей, пишем техническое задание, продумываем варианты приемочного тестирования.

Разрабатываем карту KPI сайта и событий, настройка которых даст информацию о поведении пользователей на сайте.

Карта KPI сайта и событий
Дизайн

После окончательного согласования прототипа начинаем готовить дизайн-макеты ключевых страниц сайта.

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

Также добавляем пиктограмму просмотра видео о проекте — с низким приоритетом, но в якорное место. Впоследствии мы выяснили, что доля тех, кто просматривал видео, достаточно велика.

Дизайн-макет главной страницы сайта

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

Дизайн-макет страницы каталога планировок

Согласовываем и делаем макет таба с информацией о доме.

Дизайн-макет таба «Дом» на странице каталога планировок

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

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

Также по предложению клиента мы сделали возможность просмотра плана с различными вариантами расстановки мебели для разных сценариев проживания (составов семьи).

Дизайн-макет страницы типовой планировки в секции
Дизайн-макет страницы квартиры

После согласования макетов страниц планировки и квартиры делаем макет следующего основного раздела — описание проекта.

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

Порядок блоков делаем, как и предполагали на старте — от общего (микрорайон) к частному (особенности квартиры).

Дизайн-макет страницы общего описания особенностей микрорайона

Делаем макеты подразделов — «Технические решения» и «История строительства».

Дизайн-макеты подразделов раздела «О проекте»

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

Дизайн-макет главной страницы раздела «Как купить»
Дизайн-макет внутренней шаблонной страницы раздела «Как купить»

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

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

Дизайн-макеты страниц раздела «Акции и мероприятия»

Основной точкой контакта (точкой принятия решения) на сайте является запись на посещение экскурсии (демо-этаж). Но для части целевой аудитории экскурсию на демо-этаж необходимо продвигать отдельно через рекламные каналы. Как правило, это целевая аудитория, которая уже имела контакт с компанией на любом уровне. Для такой целевой аудитории мы готовим страницу приземления, на которой презентуем экскурсию, рассказываем о том, что можно будет посмотреть и что эта экскурсия даст человеку. Как правило, такой подход дает очень хороший результат.

Дизайн-макет посадочной страницы «Экскурсия на демо-этаж»

Делаем и согласовываем страницы контактов и обязательного раздела «Раскрытие информации».

Дизайн макеты страницы «Контакты» и раздела «Раскрытие информации»

Прорисовываем страницу 404 и состояния фильтров при взаимодействии с ними.

Дизайн-макет страницы «404» и дизайн фильтров

Создаем макеты всех модальных окон, которые будут на сайте.

Дизайн-макеты модальных окон

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

Дизайн-макеты сайта для вывода на мобильных устройствах

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

Дизайн элементов сайта (UI-Kit)
Фронтенд- и бэкенд-разработка

Отдаем на верстку, параллельно начинаем готовить бэкенд.

В ходе работы с серверной частью сайта проводим интеграцию с информационной системой заказчика («ЭЛМА») через API. Делаем выгрузку всех заявок в CRM, загружаем информацию о квартирах из системы на сайт.

Далее проводим интеграцию и переходим на стадию альфа-тестирования.

Тестирование и релиз

Тестируем, готовим баг-лист, исправляем, делаем мелкие доработки и получаем beta-версию.

Скриншоты из баг-листа alfa-тестирования
Скриншоты из баг-листа тестирования сверстанного макета

Отдаем на пользовательское тестирование и исправляем появившиеся баги и проблемы.

Скриншоты из баг-листа beta-тестирования
Результат

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

Направляем созданный проект на активное продвижение. Готовим дорожную карту развития сайта.

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

Скриншоты отчетов по прямым и многоканальным конверсиям

Мы собираем информацию по событиям, переходам по сайту, тепловым картам и анализируем. В целом спроектированный интерфейс работает. Выявленные проблемы обсуждаем,

согласовываем и ставим в план развития. Часто от самого заказчика поступают предложения, которые мы проверяем в системе аналитики и при подтверждении проблемы вносим правки.

Скриншоты отчетов по взаимодействию посетителей с сайтом
В ходе проекта было сделано
  • Создали 2 аналитические записки (анализ продукта и бизнес-целей по результатам воркшопа, анализ целевой аудитории)
  • Спроектировали информационную структуру и проанализировали основные сущности на сайте, исходя из задач целевой аудитории
  • Подготовили модель KPI сайта
  • Спроектировали 18 прототипов уникальных страниц и прототипы модальных окон, динамических блоков, фильтров в каталоге
  • Написали техническое задание на реализацию проекта
  • Создали 21 дизайн-макет уникальных страниц, макеты модальных окон и UI-Kit для сайта
  • Сверстали столько же страниц и написали много-много строк кода
  • Настроили аналитику

Сроки реализации 5 месяцев 2017 года

Создание сайта микрорайона «Новый город»

Связаться с нами