THE CLIENT
San Francisco County Transportation Authority

How Exygy used a component inventory to guide the redesign of sfcta.org into an accessible, easy to manage Drupal website.

San Francisco County Transportation Authority (SFCTA) plans, funds, and delivers transportation projects to improve travel choices for residents, commuters, and visitors throughout San Francisco. The agency is governed by a board consisting of the 11 members of the San Francisco Board of Supervisors, sitting as the Transportation Authority board. SFCTA is focused on building a community that supports mobility and makes San Francisco a more sustainable urban area.


The Problem

SFCTA has a vast portfolio of projects and studies across a wide range of topics and issues. The previous website was built using a legacy content management system which was cumbersome and unintuitive for non-technical content authors. Visitors to the site include the general public as well as partners, advocates, and transportation insiders. Over the life cycle of the previous website, it became more difficult for authors and administrators to organize such a wide variety of content in a way that was easy for the public and stakeholders to discover and receive updates. 


The Approach

Exygy partnered with lowercase productions (lcp) to design and deliver the reimagined sfcta.org website. We led as the technical partner on the project and began the engagement by focusing on how we could drive design decisions based on technical feasibility. Our primary goal was to build a component library that would allow non-technical content authors to quickly assemble pages. Our work was expedited based on our previous engagements with other San Francisco agencies and departments, who shared a desire to create a consistent visual experience across city services.


With budget in mind, we worked closely with the design team to audit the visual design to utilize a consistent style guide and set of components. We met on a regular basis to find ways to combine similar features into a smaller number of components in order to expedite the process.

The new sfcta.org with improved information architecture and site navigation, allowing the most important information to be readily available to users.


Component Inventory

Starting with lcp’s wireframes and design comps, we conducted an interface audit to determine a set of core components that would be used consistently across the site. We created a component inventory which became a single source of truth to guide both design and development. The inventory described details for each component including naming, specific fields, taxonomies, and any design variations.


A component is any repeatable building block of an interface that can be reused across a product in various contexts with a variety of content.



Design in Browser

A site page based on a predefined template.

Based on the sitemap, we identified a limited set of page templates that would be used to build out the site. With the content author in mind, our engineering team created an intuitive authoring experience. By leveraging our components and templates, a non-technical user could quickly and easily test how a set of predefined building blocks would assemble any site page.


This flexibility allowed us to test responsiveness and interactivity on “generic” components in the browser, while our design partners finalized the visual design details. Once the design elements such as color and typography were decided, we were able to flow those updates into the experience seamlessly.


Focus on Discovery

The team understood that our success would be based on our ability to provide a simple set of patterns that would allow users to navigate a complex catalog of work and communicate it's value to the public and policymakers. 


The newly redesigned sfcta.org is much easier to navigate. As a result of deep collaboration with our design partners, we were able to implement an improved information architecture. Our focus was on providing robust custom landing pages for a smaller number of categories, allowing site visitors to get to the content they needed quickly. 


Iterative Development in Drupal

Our engineering team worked with the client and partners to conduct iterative releases, using a backlog to prioritize feature development. Although we didn’t launch the site to the public until all functionality was finalized, the build, test, and launch process was an iterative one. 


Initially we set up hosting and development environments on Pantheon and provided Drupal security updates as needed. We championed the use of Drupal 8 in order to ensure the new site’s longevity.


SFCTA is an organization with a vast database of content going back many years, and the process of migrating to a new system required substantial planning and testing. We worked with in-house engineers to automate the migration of documents and events as much as possible. This involved a detailed mapping of individual fields in order to clean the data and avoid duplication and redundancy.


Phased Launch

In order to socialize the new site and elicit feedback from internal stakeholders, we coordinated a soft launch and release of the site. We first launched a beta site, and circulated that among a small group for feedback and validation. Once we were able to iterate on the feedback that we received, we made the site live and archived the legacy system. 


By coordinating a phased launch, we ensured a smooth transition for users. This work allowed stakeholders and the public to test drive the new site and while maintaining access to legacy data. 



The archived sfcta.org, which was difficult for content admin to maintain and for users to navigate.


The Impact

Through strong collaborative partnerships, we were able to balance SFCTA’s multiple stakeholders and users needs and deliver value to each:

  • SFCTA content managers: By focusing on author as well as user experience, streamlined content entry has resulted in a smoother content management workflow.
  • San Francisco residents: Since we prioritized inclusiveness design principles, more residents now have access to SFCTA since our implementation of language translation into the city’s four main languages. 
  • Policy makers: Through improved navigation and discovery, local policy makers can easily see funding opportunities SFCTA is providing across the transit and infrastructure sectors.

Want to work together?

We are always looking to get in touch with partners to help build healthy and resilient communities together
contact us

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

image caption

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

image caption

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is some text inside of a div block.
This is some text inside of a div block.