Caltrans
The California Department of Transportation (Caltrans), in partnership with the Rebuilding California Program and the statewide Build.ca.gov initiative, sought to modernize its public-facing infrastructure website. Build.ca.gov is California’s central transparency portal for showcasing how state and federal funds are invested across more than 16,000 infrastructure projects statewide. The platform is critical for public accountability, legislative communication, and community engagement around historic infrastructure investments.
Increase in average user engagement
Decrease in redundant or conflicting content
Reduction in weekly content maintenance time
Building the
Foundation
Spruce partnered with Caltrans to redesign and modernize the Rebuilding California website and integrate it into the broader Build.ca.gov infrastructure ecosystem.
The goal was to transform a fragmented, difficult-to-maintain legacy site into a scalable, accessible, data-forward platform. The redesigned site needed to communicate complex project information, support rapid updates, and meet statewide standards for transparency, accessibility, and plain-language communication.
THE CHALLENGE
Before our involvement, the Rebuilding California website lacked a centralized content management system (CMS). As a result, duplicate content with inconsistent messaging was scattered across the site, making updates time-consuming, prone to error, and not easily achievable by the Rebuilding CA team. This fragmented approach limited Caltrans’ ability to engage with the public, partner agencies, and legislators—and hindered the growth of the Rebuilding CA program’s digital presence.
Additionally, the legacy site structure interface created friction for users seeking project data, hindering the platform’s ability to serve as a transparent accountability tool.
Our
Strategy
UX Strategy and Visual Design
Spruce began with an in-depth UX audit examining navigation structure, content hierarchy, accessibility compliance, and page-level layout challenges. Based on this research:
Visual Design System
We created a full visual design system—typography, palette, components, and content guidelines—to unify the experience across the platform.
Prototyping for Reality
Designed page-level mockups introduced a modernized design system, optimized for readability, project discovery, and mobile accessibility.
Intuitive UI
While the overarching layout was preserved at the client’s request, key interface improvements were implemented, establishing a scalable, future-ready design foundation.
Visual Design System
We created a full visual design system—typography, palette, components, and content guidelines—to unify the experience across the platform.
Prototyping for Reality
Designed page-level mockups introduced a modernized design system, optimized for readability, project discovery, and mobile accessibility.
Intuitive UI
While the overarching layout was preserved at the client’s request, key interface improvements were implemented, establishing a scalable, future-ready design foundation.
Technical Implementation
To support long-term flexibility and ease of content management, Spruce transitioned Caltrans to a headless CMS architecture using Contentful and Next.js. This new structure empowered Caltrans content editors to manage updates independently through reusable content models and page templates—reducing weekly content maintenance time by an estimated 60%.
To address long-term scaling and content governance needs:
GraphQL Data Layer
The team leveraged GraphQL for efficient, targeted data queries and built custom parsers that convert rich text JSON from Contentful into dynamic React components. These components preserve intended formatting and allow for seamless integration of embedded assets such as images, videos, and links.
Next.js Frontend
For optimized media delivery, Next.js’s built-in image features were used in combination with lazy loading and smart caching strategies—boosting performance across all modern devices.
Automated Search Indexing
To ensure real-time content discovery, Spruce implemented webhook-based indexing. When specific content types are published in Contentful, an automated webhook triggers an update to the site’s Typesense search index, delivering fast and accurate search results for users.
GraphQL Data Layer
The team leveraged GraphQL for efficient, targeted data queries and built custom parsers that convert rich text JSON from Contentful into dynamic React components. These components preserve intended formatting and allow for seamless integration of embedded assets such as images, videos, and links.
Next.js Frontend
For optimized media delivery, Next.js’s built-in image features were used in combination with lazy loading and smart caching strategies—boosting performance across all modern devices.
Automated Search Indexing
To ensure real-time content discovery, Spruce implemented webhook-based indexing. When specific content types are published in Contentful, an automated webhook triggers an update to the site’s Typesense search index, delivering fast and accurate search results for users.
Project Management and Delivery
Project management was structured around agile principles, with regular sprint planning, stakeholder check-ins, and QA cycles to maintain alignment and adaptability. The project team helped Caltrans balance the adoption of new features with the preservation of key legacy elements, delivering a phased rollout plan that supported both innovation and continuity.
This approach enabled Spruce to deliver a compliant, scalable, and user-friendly platform within the project’s scope and timeline—laying the groundwork for continued digital modernization.
Results &
Impact
Improving transparency, usability, and long-term maintainability.
What began as a fragmented, difficult-to-maintain website evolved into a clear, accessible window into how California is building its future. The modernized Build.ca.gov platform transformed complex infrastructure data into an experience the public can easily explore, understand, and trust.
· 60% reduction in weekly content maintenance time
· 85% decrease in redundant or conflicting content
· 40% increase in average user engagement (measured by time on site)
· Real-time search updates via webhook-driven Typesense integration
· ADA and WCAG 2.1 AA compliance across all new components
· Faster load times through image optimization and performance tuning
· Modular architecture supports future enhancements and expansion
We have a website, build.ca.gov, designed and developed by Spruce, where Californians can go see and track the state’s infrastructure investments: over 28,000 projects and 200,000 jobs behind them, taking shape across communities small and big. Moments like that reflect real progress toward clearer, more transparent public services
Governor Gavin Newsom, State of the State Address, January 2026
Platform Development / CUNY IT Helpdesk Portal
The City University of New York (CUNY) is the nation’s largest urban public university, with 25 colleges and professional schools serving over 275,000 students, faculty, and staff across New York City.
Website Design & Development / Office of the Senate Legislative Counsel
The Office of the Senate Legislative Counsel provides expert, nonpartisan drafting assistance to United States Senators and Senate committees — playing a critical but often behind-the-scenes role in the legislative process.
No projects found in this category.
Join our
Team!
We genuinely look forward to connecting with you and learning about your vision. Our team is dedicated to creating meaningful solutions that help your business thrive.