Новая разработка сайта юридической фирмы по личным травмам — 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 Документах под управлением агентства вне таблицы, каждая внутренняя страница требовала перекрёстной сверки двух источников, а не сборки по единой спецификации, добавляя шаг тестовой среды контента перед наложением шаблона. На всём протяжении: не выходить на прямой контакт с конечным клиентом; возвращать неясности агентству; не импровизировать описания практик, адвокатскую квалификацию или язык результатов.

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

1. Девять шаблонов, 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 URL.

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 агентства — их инструменты, их процесс — выполнялся после передачи и фиксировал замечания в общую очередь задач для нашего цикла исправлений до момента согласования с агентством.

Процесс

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

Команда

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

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

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

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