КЕЙС: РАЗРАБОТКА САЙТА ДЛЯ АГЕНТСТВА НЕДВИЖИМОСТИ "ГОРИЗОНТ" - Разрабатываемый продукт - каталог недвижимости в новостройках, по которому легко ...
←
→
Транскрипция содержимого страницы
Если ваш браузер не отображает страницу правильно, пожалуйста, читайте содержимое страницы ниже
КЕЙС: РАЗРАБОТКА САЙТА ДЛЯ АГЕНТСТВА
НЕДВИЖИМОСТИ «ГОРИЗОНТ»
Разрабатываемый продукт – каталог недвижимости в
новостройках, по которому легко ориентироваться и выбирать
будущую квартиру
ВКРАТЦЕ О ПРОЕКТЕ
Какие этапы включены в проект: Какие возможности были реализованы:
• Удобный поиск квартир в каталоге новостроек: по району, сроку сдачи
Аналитика дома, типу квартиры, цене, застройщику или ЖК
• Расширенные параметры фильтра: оплата, отделка, санузел, город и
область, по площади.
Проектирование
• Отображение найденных объектов на карте
• База квартир по переуступке
Дизайн • Модуль импорта объектов из базы агрегатора застройщиков их xml-
файла
• Калькулятор для расчёта ипотеки онлайн
Вёрстка
• Вывод на страницу объекта похожих предложений по расположению,
цене и застройщику
Программирование • Каталог застройщиков
Интеграция со сторонними системами
ЦЕНТР НЕДВИЖИМОСТИ «ГОРИЗОНТ»
Это компания с 5-ти летним опытом на рынке
недвижимости Санкт-Петербурга и Ленинградской области.
Основная задача — помощь клиентам в решении жилищных
вопросов.
О КОМПАНИИ
Квартиры в новостройках продаются по ценам и условиям
застройщика. Предусмотрены различные формы оплаты -
рассрочка, ипотека, субсидия, сертификат и материнский
капитал.
АДРЕС САЙТА
http://gorizont-spb.com/
ЦЕЛЕВАЯ АУДИТОРИЯ
B2C
Частные клиенты, подбирающие жильё для жизни
B2B
Инвесторы и частные лица с целью перепродажи
ПРОБЛЕМЫ СТАРОГО САЙТА:
• Неадаптивный сайт с устаревшим дизайном.
• Каталог недвижимости не соответствовал запросам клиента
по функциональности и не позволял пользователям быстро
сориентироваться в предложениях.
• Навигация по сайту была неудобной, доступ к важной
информации неочевидным.
СТАРЫЙ САЙТ
• Все объекты и квартиры на сайт заводились и обновлялись
менеджерами вручную.
http://old.gorizont-spb.com/
• Уменьшить нагрузку на отдел обновлению/внесению
БИЗНЕС – ЦЕЛИ: продаж по первичным вопросам и информации (простую загрузку
возражениям (компания и услуги) новых объектов, фотографий,
внесение текстов и проч.);
• Увеличить количество целевых
обращений с сайта; • Привлечь новых клиентов из
поисковых систем.
• Упростить, минимизировать
работу администратора по
ЭТАП АНАЛИТИКИ
Изучение информации о компании, ее продуктах и услугах. Проведение
интервью с представителями бизнеса, сбор и детализация требований всех
заинтересованных сторон.
03
АНАЛИТИКА
02
SEO-READY
АНАЛИЗ ЦА
01 СБОР ТРЕБОВАНИЙ
РАЗРАБОТКА
ПЕРСОНАЖЕЙ И
ПОЛЬЗОВАТЕЛЬСКИХ
СЦЕНАРИЕВ
01. СБОР ТРЕБОВАНИЙ
Работа над любым проектом начинается с брифинга и интервью.
Наш аналитик структурировал всю вводную информацию, задал
нужные вопросы клиенту и сформировал требования к
разрабатываемому сайту.
Бриф – это базовый документ, необходимый для работы на всех
дальнейших этапах разработки.
АНАЛИТИКА
02. АНАЛИЗ ЦА
РАЗРАБОТКА ПЕРСОНАЖЕЙ И
ПОЛЬЗОВАТЕЛЬСКИХ СЦЕНАРИЕВ
С помощью Яндекс.Метрики мы проанализировали текущих
пользователей сайта, выявили поведенческие особенности и
проблемы интерфейса.
АНАЛИТИКА
Определили приоритетные для бизнеса группы пользователей: 6
групп со своими целями, ожиданиями и мотивами.
Спроектировали персонажей для каждого сегмента и базовые
сценарии использования сайта.
03. SEO-READY
При проектировании сайта мы всегда работаем в связке с SEO-
специалистами, и учитываем рекомендации. Такой подход
позволяет избежать этапа подготовки сайта к продвижению. Все
требования уже учтены.
АНАЛИТИКА
ЭТАП ПРОЕКТИРОВАНИЯ
ПРОЕКТИРОВАНИЕ
• Разработка оптимальной структуры (карты) сайта, структуры шаблонов интерфейса.
• Создание информационной модели (категории и справочники каталога,
свойства/характеристики объектов, и др.), которая позволит на этапе программирования
сайта реализовать весь необходимый пользователям функционал: фильтры, сортировки,
поиск, сравнение и др.
• Разработка и защита детализированного интерактивного прототипа сайта, который
позволит увидеть как и из чего будет скомпонована каждая страница вашего сайта.
03
02
СПЕЦИФИКАЦИЯ К
ПРОТОТИПУ
ИНТЕРАКТИВНЫЙ
01 ИНФОРМАЦИОННАЯ
АРХИТЕКТУРА
ПРОТОТИП
01. ИНФОРМАЦИОННАЯ
ПРОЕКТИРОВАНИЕ
АРХИТЕКТУРА
В рамках информационной архитектуры мы прорабатываем
внутреннюю часть сайта, которая скрыта «под капотом»
пользовательского интерфейса.
• Карта сайта и перечень необходимых страниц с учётом SEO
• Объектная модель сайта
• Разработка фильтров по параметрам объектов02. ИНТЕРАКТИВНЫЙ ПРОТОТИП
ПРОЕКТИРОВАНИЕ
В программе Axure RP 8 мы создали интерактивную модель сайта. Элементы страниц скомпоновали с учётом
рекомендаций, сформированных на предыдущем этапе. В итоге получилось 14 страниц высокой детализации. Во
время прототипирования приходило много вводных, что создавало необходимость постоянной доработки. В
итоговой версии были учтены все требования и ограничения бизнеса.03. СПЕЦИФИКАЦИЯ К ПРОТОТИПУ
ПРОЕКТИРОВАНИЕ
Спецификация помогла формализовать и согласовать все
требования и механизм работы сайта на начальном этапе. Эта
информация в разы снизила риски на этапе реализации.ЭТАП ДИЗАЙНА
При создании дизайна сайта мы ориентировались на фирменный стиль компании Горизонт,
пожелания заказчика, а также особенности целевой аудитории.
03
ДИЗАЙН
02
ОТРИСОВКА
ДИЗАЙН-МАКЕТОВ
ВИЗУАЛЬНАЯ
01 MOOD BOARD
КОНЦЕПЦИЯТипографика
01. MOOD BOARD
Мудборд – лёгкий документ, позволяющий понять ожидания
клиента по визуальной части.
Компания «Горизонт» позиционируется как открытое и
современное агентство, ориентированное на широкую целевую Цветовая гамма
аудиторию. Мы порекомендовали использовать шрифт гротеск
открытого типа, динамического, либо статического исполнения.
Цветовая гамма сайта соответствует фирменному стилю
компанию. Мы расширили цветовую гамму, добавив оттенки и
акцентные цвета.
Дизайн ориентирован на удобство для пользователей.
ДИЗАЙН
Интерфейс - простой, привычный и доступный.
Референсы
Наиболее подходящие концепции визуальной подачи: Flat,
Material02. ВИЗУАЛЬНАЯ КОНЦЕПЦИЯ
В дизайн-концепции мы описали принцип
построения сетки, навигации и адаптации дизайна
под мобильные устройства, поведение
интерактивных элементов.
Отрисовали главную страницу, которая стала
основой остальных макетов.
ДИЗАЙН03. ОТРИСОВКА ДИЗАЙН-МАКЕТОВ
ДИЗАЙН
Использовав цвета и элементы фирменного стиля, наш дизайнер
создал лёгкий, «разряженный» дизайн сайта, который
ненавязчиво подводит клиента к целевым действиям.ЭТАП АДАПТИВНОЙ ВЁРСТКИ
Мы создали верстку, которая которая корректно отображается и работает во всех
популярных браузерах и операционных системах. После разработки провели тщательное
тестирование и отладку на компьютерах и ноутбуках (на базе Windows и macOS), планшетах
и смартфонах (на базе IOS и Android).
АДАПТИВНАЯ
ВЁРСТКАУдобный фильтр в каталоге объектов
ПРОГРАММИРОВАНИЕ
ЭТАП ПРОГРАММИРОВАНИЯ
Сайт «внешне» выглядит простым, но реализует сложную логику поиска
и фильтрации объектов, а также механизмы автоматизации обновления
базы новостроек и переуступок.
Для данного сайта мы выбрали платформу CMS Битрикс. После
Просмотр объектов на карте
интеграции верстки в CMS и реализации функционала сайта, настроили
инструменты аналитики (Яндекс Метрика) и отладили все контактные
формы.
Ипотечный калькулятор
Информативная карточка объектаКТО ПРИНИМАЛ УЧАСТИЕ В ЭТОМ ПРОЕКТЕ
МЕНЕДЖЕР ПРОЕКТА АНАЛИТИК UX-СПЕЦИАЛИСТ ДИЗАЙНЕР
ВЕРСТАЛЬЩИК (FRONT END) ПРОГРАММИСТ (BACK END) ТЕСТИРОВЩИК (QA) КОНТЕНТ-МЕНЕДЖЕР
КОМАНДА
SEO-СПЕЦИАЛИСТКАК С НАМИ СВЯЗАТЬСЯ
info@web365.ru
+7 (812) 748-22-67
КОНТАКТЫ
СПб, Беговая 3, оф.14
Смотреть другие кейсыВы также можете почитать
