CicLAvia · Website case study

Turning ciclavia.org into the platform that runs Los Angeles' open streets

A research-led redesign and rebuild that moved CicLAvia off NationBuilder and gave its team an events platform they run themselves. It's accessible, fast on phones, and built for event-day traffic.

The new ciclavia.org homepage, with the headline "Imagine a More Resilient Los Angeles," impact statistics, and photos of people walking and biking on car-free streets.

Key outcomes

14 → 1
separate page types per event replaced by one template that staff manage themselves
2M+
requests handled in a single day during CicLAvia's flagship Heart of LA event
90%
of real page loads rated "good" on each of Google's three Core Web Vitals
435
legacy pages audited and mapped, preserving every CicLAvia event since 2010

Project at a glance

Client
CicLAvia, a Los Angeles nonprofit that has turned city streets into car-free public space since 2010
Audiences
Event participants, residents and businesses along each route, volunteers, donors, and corporate and public sponsors
Services
Discovery and research, UX strategy, information architecture, design system, development, content migration, accessibility, training, and ongoing support
Platform
WordPress with Elementor Pro, ACF Pro, and custom React components, plus Algolia search and Cloudflare
Integrations
Little Green Light (donations), Vome (volunteers), Proxi (interactive maps), Google Translate, GA4, and Microsoft Clarity
Timeline
Discovery and design in 2025, a 12-week build in 2026, and launch in July 2026 (soft launch July 13, public launch July 17)
Standards
Built to WCAG 2.2 AA, with Core Web Vitals targets for real-world performance
Engagement
Multi-phase project, now an ongoing maintenance and support partnership. Client reference available on request.

The challenge

Since 2010, CicLAvia has closed Los Angeles streets to cars and opened them to people for walking, biking, skating, and connecting with neighbors. In the days before each event, the website becomes the place where they check routes, closures, parking, and transit. It's also where sponsors, donors, volunteers, and the businesses along each route decide how to get involved.

The old site, built on NationBuilder about a decade earlier, was designed for political campaigns, not recurring public events. CicLAvia's team had worked around it for years:

  • Event information was scattered. Each event needed more than a dozen separate pages (accessibility, detours, parking, volunteering, local businesses, and more), rebuilt by hand every time.
  • Print deadlines drove workarounds. Staff created placeholder pages months ahead just to get a web address they could print on flyers and QR codes.
  • Key logistics were hard to find. Maps and closure details sat inside long, text-heavy pages and images that screen readers and translation tools couldn't read, so staff fielded calls from people looking for them.
  • Supporters had no clear path. The homepage covered when and where, but not why CicLAvia matters, and donors, sponsors, and volunteers all landed in the same place.
  • The site didn't meet accessibility standards, and the homepage weighed more than 11 MB, a real cost for visitors on limited mobile data plans.

Our approach

We ran the project in phases, with CicLAvia's team reviewing and approving each foundation before we built on it. CicLAvia engaged us for discovery and design, then asked us to carry the project through development and beyond.

  1. Phase 1

    Discover

    We audited what existed and listened to the people who run CicLAvia, so every later decision was grounded in evidence.

    Key deliverables

    • Current state analysis covering the site, analytics, social channels, and storytelling
    • Interviews with CicLAvia's leadership
    • A crawl and audit of all 435 legacy pages
    • A technical plan and platform recommendation

  2. Phase 2

    Define

    We mapped who the site serves and what each person needs to do, then designed the structure to match.

    Key deliverables

    • 13 personas and journey maps, from first-time families and wheelchair users to sponsors and foundation program officers
    • Information architecture built around "jobs to be done"
    • A page and functionality matrix for about 50 pages
    • A content model and a page-by-page migration plan

  3. Phase 3

    Design

    We built a design system from CicLAvia's brand and designed every page type for desktop and mobile, reviewing structure, then visuals, then final approval.

    Key deliverables

    • A Figma design system with an accessible version of CicLAvia's palette
    • Desktop and mobile designs for every page type
    • Audience pathways and a mobile-first event experience

  4. Phase 4

    Build and launch

    In a 12-week build, we developed the platform, migrated content in two waves, and launched the week of CicLAvia's next event.

    Key deliverables

    • A custom events platform and Activities Along the Route guide
    • Donation, sponsorship, and volunteer integrations
    • Content migration with redirects for every retired address
    • Cross-browser, mobile, and accessibility QA
    • Hands-on staff training and a website how-to guide

  5. Phase 5

    Support

    After launch, we stayed on as CicLAvia's web partner, preparing the site for each event and adding what the team needs next.

    Key deliverables

    • Event-readiness, performance, and security work before each event
    • New features such as group-ride pages and expanded search filters
    • Ongoing training as the team's needs grow

What we built

An events platform the team runs itself

One flexible template replaces more than a dozen standalone pages per event. Staff fill it in once, and the platform does the rest:

  • A permanent address from day one, ready for flyers, QR codes, and partner emails months ahead
  • Automatic lifecycle: events move from upcoming to live to past on their own, and the site-wide alert bar updates itself
  • Everything for the day in one place: a countdown, an "Add to Calendar" menu, downloadable route maps, and an interactive map
  • A dozen planning sections (Rules of the Route, Accessibility, Getting There, Volunteering, and more) that staff switch on or off per event, each with its own shareable link
  • Built for phones: a "Jump to" menu takes visitors straight to the section they need
A CicLAvia event page for Pasadena, with a large route map and a sidebar of collapsible sections such as Ways to Participate, Rules of the Route, and Accessibility.The same event page on a phone, showing the route map, a "22 days left" countdown, and a "Jump to" button.

Activities Along the Route

Every CicLAvia route is lined with hubs, food, arts and culture, health and wellness activities, and family fun. The new searchable guide lets visitors filter by hub or type of activity, see the amenities at each hub, and share a link to any activity.

Behind the scenes, staff upload a whole event's activities from a spreadsheet, and the site matches each one to the right event and hub automatically.

The Activities Along the Route page for CicLAvia—Heart of LA, with a description of hubs, a hub amenities panel, and filter buttons by activity type.

A homepage that welcomes every audience

The new homepage leads with why CicLAvia matters and the impact it has made, then routes each visitor to their next step. A "Get Ready for CicLAvia Sunday" section offers distinct paths for participants, the local community, local businesses, and sponsors.

Donors and sponsors get separate journeys: embedded donation forms with every way to give on one side, and a sponsorship hub with an interactive deck and case studies on the other. Donate and Sponsor buttons stay in the header on every page.

The new homepage on a phone, with the headline "Imagine a More Resilient Los Angeles," buttons to get to know CicLAvia or support it, and an impact statistic.

Accessible, multilingual, and searchable

  • WCAG 2.2 AA built into every component: a reworked color palette that passes contrast checks, 48-pixel tap targets, no hover-only interactions, and zoom always on
  • Language access: translation available from the header on every screen size
  • Site search powered by Algolia across events, news, FAQs, and activities, with filters by type and date, plus focused search on the FAQ, Activities, and Past Events pages

Infrastructure built for event day

Traffic to CicLAvia's site spikes sharply in the days before each event. We put Cloudflare in front of the site for global caching, security, and bot protection, and set up separate staging and production environments so changes are tested before they go live.

In the 30 days around Heart of LA, the site handled 12.5 million requests, with 82% served straight from Cloudflare's cache.

Fifteen years of history, preserved

We audited all 435 pages of the old site and gave each one a decision: migrate, combine, or retire with a redirect. Every CicLAvia event since the first one in 2010 now has its own permanent page, the blog archive reaches back to 2011, and old links from partners and press still land in the right place.

Before and after

Before

The previous CicLAvia homepage in June 2026, with a two-row text menu, a blue banner reading "Click HERE to get our updates!," and an event route map.

After

The new CicLAvia homepage, with a mission headline, two calls to action, and impact statistics beside event photos.
Homepage. The old site led with a sign-up prompt and a single upcoming event. The new homepage explains why CicLAvia matters, shows its impact, and gives each audience a clear next step.

Before

The previous event page for CicLAvia—Leimert Park meets Expo Park, with a large title banner and a yellow sidebar of links to separate pages.

After

The new event page for CicLAvia—Pasadena, with the route map at the top and collapsible planning sections in the sidebar.
Event page. Before, each event's logistics were spread across separate pages linked from a sidebar. Now everything lives on one page, with the map up front and every section a click away.

Results

The new ciclavia.org went live on July 13, 2026, with a public launch on July 17, two days before CicLAvia—Meet the Hollywoods. When a water main break forced a route change that week, CicLAvia's team updated the site-wide alert and the route maps themselves, without waiting on a developer.

Three months later, the site carried CicLAvia's flagship Heart of LA event, including more than 2 million requests in a single day.

Goals, what we delivered, and the evidence
GoalWhat we deliveredEvidence
Visitors arrive prepared and confidentMap-first event pages, downloadable route maps, "Add to Calendar," and mobile "Jump to" navigationIn the month of Heart of LA, 2,378 visits included a download and 535 added an event to a calendar. Just 0.01% of visits showed rage clicks, a common sign of frustration.
Less staff time on event contentOne event template with automatic status, alerts, and calendar files, plus spreadsheet import for activitiesMore than a dozen page types per event became one. Staff now publish events, maps, activities, and alerts on their own.
Permanent addresses for print and QR codesA stable address for every event from the moment it's createdEvery event since 2010 has a permanent page, and upcoming events go live with their final address weeks ahead.
Accessible and welcomingWCAG 2.2 AA components, an accessible palette, and translation on every screen sizeA 96 accessibility score in Google Lighthouse on the mobile homepage.
Reliable on event dayCloudflare caching, security, and bot protection, with separate staging and production environmentsMore than 2 million requests in a single day, 82% of requests served from cache, and 90% or more of real page loads rated "good" on all three Core Web Vitals.

Sources: Cloudflare and Microsoft Clarity, 30 days ending October 23, 2026, which includes the Heart of LA event; Google Lighthouse, October 24, 2026. Before screenshots are from the Internet Archive, June 2026.

An ongoing partnership

We continue to support CicLAvia through a maintenance partnership: security and performance tuning before each event, new features like group-ride pages and expanded search filters, regular training, and quick help whenever a route changes.

Is this project like yours?

This case study is most relevant if your organization:

  • Runs events, programs, or seasons that send traffic spiking around key dates
  • Serves several audiences at once, such as participants, donors, sponsors, volunteers, and partners
  • Is outgrowing NationBuilder or another platform its team has to work around
  • Needs to meet WCAG 2.2 AA and serve multilingual communities
  • Wants staff to own day-to-day updates without calling a developer

Capabilities demonstrated

  • Discovery and UX research
  • Personas and journey mapping
  • Information architecture
  • Design systems
  • WordPress and React development
  • Content migration and SEO preservation
  • Accessibility (WCAG 2.2 AA)
  • Site search
  • Performance and security
  • Staff training
  • Ongoing support

Planning a redesign or issuing an RFP?

We'd welcome the chance to bid. Tell us about your timeline and requirements, and we'll share relevant work, references, and an approach tailored to your organization.

← All our work