Новая разработка сайта юридической фирмы по травмам и несчастным случаям — 17 страниц за 44 дня

Клиент (конечный пользователь): Big Joe Law — Los Angeles, CA
Формат сотрудничества: White-label разработка для маркетингового агентства из США
Сроки: май – июль 2025 · 44 дня · 78 часов на сборку главной, остальных страниц и согласование QA

Подход к разработке

17 страниц на 9 шаблонах по прототипу в Figma — с hero-анимацией набора текста и каруселью вердиктов. Главную запустили первой в рамках бюджета 15 часов, пока контент для внутренних страниц ещё дописывался. Оставшиеся 16 страниц собрали под задерживающийся контент — без поломки дизайн-сетки и без выхода за построчные часовые оценки.

Краткий обзор

Постановка задачи

Маркетинговое агентство из США, ведущее проект Big Joe Law — юридической фирмы по травмам и несчастным случаям в Лос-Анджелесе — передало нам библиотеку дизайнов Figma, таблицу Google Sheets с отслеживанием прогресса, доступы к тестовой среде Kinsta и поэтапный бриф: сначала собрать главную страницу, пока контент для внутренних страниц готовится параллельно.

Конструктор страниц — Elementor; контактные формы настраивались в рамках сборки. Агентство владело дизайном, контент-стратегией, SEO и отношениями с клиентом. Наш объём работ заключался в том, чтобы построить каждую страницу в точности по Figma, настроить контактные формы, реализовать фильтрацию блога по категориям и проработать две параллельные очереди задач QA до принятия сайта агентством.

Задача была поэтапной. Этап 1: собрать главную страницу (15 часов) по прототипу в Figma, включая hero-анимацию набора текста и карусель вердиктов. Этап 2: собрать оставшиеся внутренние страницы — о нас, лендинг практик, 8 отдельных страниц практик, результаты, лендинг блога и шаблон отдельной записи, контакты и политику конфиденциальности — после утверждения контента и дизайна.

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

Как мы это сделали

1. 9 шаблонов, 17 страниц, один процесс сборки — сначала главная, затем внутренние страницы. Страницы Big Joe Law распределились по библиотеке юридических шаблонов агентства: Homepage (1), About Us (1), Practice Area Lander (1), Individual Practice Area Page (8 — personal injury, car accidents, truck accidents, motorcycle accidents, bicycle accidents, slip and fall, dog bites, rideshare accidents), Results (1), Blog Lander (1), Individual Blog (1), Contact Us (1) и Default Template для политики конфиденциальности.

Главная страница собрана первой по прототипу в Figma; внутренние страницы последовали во втором этапе, когда контент был готов. Каждая страница построена на назначенном шаблоне из строки sitemap; ни одна страница не была сделана вручную вне шаблонной системы.

2. Спецификация выполнена строка-в-строку — включая построчную колонку Hours Estimated. Таблица агентства содержала значение Hours Estimated для каждой строки. Главная страница получила самый большой построчный бюджет (6 часов в sitemap, 15 часов с учётом итерации QA); 8 отдельных страниц практик получили фиксированную ставку каждая. Итоговый объём уложился в согласованные 78 часов проекта.

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

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

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

4. Два параллельных цикла QA, закрытых до запуска. Задачи отслеживались в двух очередях задач агентства — очередь задач SEO (83 строки, охватывающие meta titles, H1-заголовки, структуру URL, внутренние ссылки и адаптивное поведение) и очередь задач CX (34 строки, охватывающие соответствие Figma, единообразие шрифтов, качество изображений и функциональность форм). Обе очереди прорабатывались параллельно на финальном этапе QA. Контрольный список запуска из 29 пунктов — Design, Functionality, Pre-Migration, Post-Migration — подписан после закрытия обеих очередей.

Скролл-анимации прототипа в Figma не могли быть воспроизведены в Elementor без поломки при обратном скролле. Мы назвали это явно: передать замысел штатными эффектами прокрутки Elementor, а не воспроизводить прототип кадр-в-кадр. Это решение на этапе главной страницы означало, что сборка внутренних страниц не застряла в ожидании анимационного решения, которое Elementor не мог надёжно обеспечить.

Результаты

Результат, если просто: сборка юридического сайта агентства на 17 URL запущена на 9 шаблонах в среде Kinsta, в рамках оценённого бюджета 78 часов. Две очереди задач QA (SEO + CX) доведены до приёмки агентством, и контрольный список запуска подписан до выкладки сайта в работу.

Контроль качества

QA после запуска выявил две категории исправлений: сообщение проверки контактной формы отображалось красным текстом на красном фоне hero-блока — нечитаемо, и при отправке выезжало за край экрана — и комментарий разработчика на русском языке (// Проверяем, появились ли новые элементы поиска), оставленный в отрендеренном DOM страницы /car-accidents/, обнаруженный контент-сканом агентства и удалённый до согласования с агентством (Redmine #969, #937).

QA перед передачей проводилось через Site Checker — см. наш подход к QA по категориям и принципу нулевых ошибок. Свой проверочный контур агентства выполнялся после передачи и фиксировал замечания в общую очередь задач для нашего цикла исправлений до момента согласования с агентством.

Процесс

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

Команда

Команда проекта

• Никита Тумашевич — ведущий разработчик (сборка главной страницы, шаблоны внутренних страниц, согласование Figma)
• Павел Сажин — итерации QA и исправления
• Тимур Арбаев — итерации QA и проверка перед передачей
• Анна Полунина — поддержка разработки на поздних этапах (обновления контента, коррекции очередей задач)
• Людмила Травкина — проход QA и координация проверки перед передачей
• Антон Херсун, xaverPRO — руководитель проекта (оценка, коммуникация с аккаунт-менеджером агентства, согласование)

Управление проектом со стороны агентства и коммуникация с клиентом оставались на стороне агентства-партнёра на всём протяжении. Наша команда была невидима для конечного клиента.

Агентствам, заказывающим разработку WordPress