The District Department of Transportation (DDOT) launched DC Streetcar in 2016 after more than 50 years. The rebirth of the streetcar emerged out of a mid-2000s planning effort to shape the future of transit in the city. Although the program's website was only four years old, it was performing poorly. My task was to audit the site, provide recommendations for improvements, and ultimately to redesign the site to be an accessible, mobile-first, fast-loading tool for riders to navigate the system.
The audit reviewed user goals and flows, accessibility, load times, site analytics, page count and organization, and the visual and written style. My first deliverable was a report summary and key recommendations. Once these were approved, I recommended a new site structure to prioritize the primary goals of the people who use the site: find a streetcar, plan a trip, learn about riding rules and streetcar safety. Knowing that the majority of people using the site were using their mobile devices to find route information, I focused on decluttering the sitemap to surface these immediate tasks, reducing the total page count from 70 to 30 and the items in the primary navigation from 53 to 7.
In addition to optimizing the site's architecture, I developed an updated visual style and a component-based system that lands at the intersection of consistency (so people can easily find what they need on every page) and variety (to keep the site looking fresh and engaging). Wherever possible, the site makes use of lightweight vector graphics and optimized photography. The design also includes built-in fallback background patterns in case images are not available or desired.
To help our primary audience (streetcar riders and potential riders) use the site as a trip planning tool, we developed a streetcar tracker widget for use on the homepage. This was previously buried on an interior page. With the new design, the "Where's the Streetcar" widget is the first thing people encounter on the homepage, and resulting stop locations are displayed within the widget so they don't need to visit anywhere else on the site to get what they need. In this case, site visits that are shorter in length are metrics of success, (at least on the homepage).
We partnered with White Rabbit, a (fantastic) development agency to build this site, and managed the scoping, discovery, coordination, and handoff of the site. In my work, I consider my developer relationships among the most important, and took care to provide a thorough handoff file and style guide.