ava-city.ru ava-sochi.ru

Два корпоративных сайта
за четыре месяца
по методу SCRUM

Февраль 2020 Июнь 2020
AVA Group

Холдинг AVA Group, который включает 10 компаний строительной направленности: проектный институт, предприятия спецтехники, инженерной инфраструктуры и управления строительством. У двух ключевых компаний холдинга — AVA City и AVA Sochi — не было корпоративных сайтов.

Ситуация и задача

В декабре 2019 года AVA Group устроил тендер на разработку сайтов для AVA City и AVA Sochi. Условие — максимально скорая реализация.

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

Мы предложили решение, с которым 30 декабря выиграли тендер.

Решение

Если будущие сайты должны быть очень похожи друг на друга, то дешевле и быстрее сделать их на одной административной панели и разработать по одной структуре — в системе многосайтовости «Битрикса». Смета получилась дешевле на 30%.

Работа над двумя сайтами закипела одновременно. Для ускорения релиза мы использовали метод SCRUM.
2020
2020 2020

Почему не Waterfall

В разработке популярна каскадная модель (waterfall): этапы следуют строго друг за другом, а на боевой домен сайт попадает уже готовым и отполированным. Пока один этап не завершен, к следующему не приступают. Такой формализм может тормозить работу и раздувать сроки. И мы выбрали более гибкий итеративный метод — SCRUM.

Суть SCRUM

Итерации предполагают постепенный релиз проекта. На боевой домен сайт попадает не целым, а частями по мере готовности. Сперва главная страница, потом страница ЖК, страница квартиры и так далее — по приоритетности.

Порядок и срок релиза каждой страницы мы согласовали с клиентом. Все задачи прописали в документе Product Backlog. Там же указаны спринты — отрезки времени, за которые мы должны выполнить пул задач и дать результат. Один спринт — один месяц.

Работа команды

Спринт включает задачи сразу по нескольким направлениям: дизайну, вёрстке, программированию. Многие задачи выполнялись параллельно. Мы не ждали, пока клиент даст все-все данные для контента; не ждали, когда будут готовы все макеты всех страниц. Мы делали всё что могли в текущий момент. Пока дизайнер собирал мудборд, программист разворачивал «Битрикс». Как только утверждали макет, передавали его на вёрстку. Так мы выкатывали одну страницу за другой.

Особенности дизайна

Главное отличие двух сайтов — дизайн. От клиента нам достались логотипы AVA City и AVA Sochi. Остальное предстояло создавать с нуля.

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

Главные

Первое, что задизайнили после заглушек, — главные страницы AVA City и AVA Sochi. Выполнены в схожей цветовой гамме, но со своими особенностями. AVA Sochi создаёт летнее расслабленное настроение, благодаря округлым элементам и вставкам цвета одуванчика. А у столичного AVA City более сдержанный облик из-за прямых углов и геометричного паттерна. Отличительные элементы попали в основу остальных страниц двух сайтов.
изображение
изображение

Мобильная
версия

Мобильную версию разработали для AVA City, а для второго сайта сделали копию с небольшими поправками. И это тоже сэкономило часы работы.
изображение
изображение

Ускоренная
вёрстка

Очень помог UI kit. К его разработке приступили, когда дизайнер закончил первые 3 страницы. UI kit содержит размеры шрифтов, межбуквенные интервалы, формы элементов, цвета и другие исходные файлы визуала. Благодаря UI kit легко придерживаться единой стилистики и переносить её на новые страницы. Вся вёрстка занимает меньше времени. А второй сайт сверстали в 5 раз быстрее, чем первый.

Фрагмент UI kit для AVA City:
Скриншот кода

Бэкенд-разработка

Ещё до вёрстки первых страниц решали задачи бэкенда.
Разработали архитектуру всего проекта: что с чем взаимодействует, как и на что переключается, какие свойства у каждого объекта. Для обоих сайтов архитектура идентичная.
Настроили обмен с Profitbase, откуда выгружаются все данные по планировкам, ценам, остаткам и пр.
Создали единый API — центр управления всей структурой сайта и всеми данными. Удобно, когда нужно автоматически что-то отфильтровать или выгрузить. Must have для техподдержки крупных сайтов.
Потом на бэкенд потянулись свежесвёрстанные странички — одна, вторая, третья. Программируем и сразу выкатываем на боевой домен. С каждым спринтом сайт растёт и крепчает.

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

Результаты

Сегодня оба сайта успешно выполняют свои функции — презентуют компанию и её объекты. Квартиры можно фильтровать по 8 параметрам, добавлять к сравнению и в избранное. Ипотечный платеж рассчитывается в калькуляторе, где учтены актуальные ставки банков. У каждого ЖК отдельная страница с описанием. Представлены все способы покупки с пошаговой инструкцией и FAQ.

Всё это реализовано за 4 месяца, благодаря системе многосайтовости и методу SCRUM. Каждый сайт переезжает на домен постранично и сразу способен выполнять часть своих задач. Его можно тестировать в боевых условиях, оперативно получать обратную связь и вносить правки. Мы не тратим время на работу в ошибочном направлении, а клиент быстрее получает функционирующий продукт.
  • 2
    функциональных
    корпоративных сайта
  • 4
    месяца потребовалось
    на реализацию

Нужен
эффективный сайт?

Отправьте заявку, и мы начнём работу
Письмо отправлено!
Мы скоро вам ответим
Кейс «AVA Group»
Задать вопрос