THE CLIENT
San Francisco County Transportation Authority
A Component-Based Website Redesign
How Exygy used a component inventory to guide the redesign of sfcta.org into an accessible, easy to manage Drupal website.
.png)
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.
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.
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.
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.
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.
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.
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.
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.
Through strong collaborative partnerships, we were able to balance SFCTA’s multiple stakeholders and users needs and deliver value to each:
