1. Services
  2. Work
  3. About
  4. Research
  5. Careers
  6. Contact

Driving the public debate on DC’s multi-modal transportation vision

Statistics

Client
The District Department of Transportation
Awards
Red Dot Design Award
CSS Design Award – site of the day
The Webby Award – Honoree
BNO Infographics Jaarprijs
Communication Arts Design Award
European Design Award – Finalist
Awwwards – honorable mention
Deliverables
Microsite

The challenge

The District of Columbia - District Department of Transportation (DDOT) asked CLEVER°FRANKE to create a digital experience that informs citizens, commuters and stakeholders on the opportunities and solutions for the growing mobility challenges within the district.

Value delivered

Using data visualization to inform and shape the public debate and empower people to talk about a variety of mobility topics and opportunities including accessibility, reliability, and mode options.

Background

The District of Columbia has one of the most elaborate and multimodal transportation systems in the USA. Residents, commuters and visitors can use motor vehicles, taxi cabs, public transit, bicycles and the pedway network to access goods and services across the District.

However, traffic congestion, poor accessibility and poor travel time reliability are issues that have a negative effect on these means of transportation.

DDOT is working to understand these challenges and to better define a program of improvements that addresses these.

Thorough research of congestion management studies and a two-day workshop with all DDOTs business stakeholders, traffic engineers and analysts provided valuable insights on the ‘pains’ and ‘gains’ of commuters. This laid the foundation of the design process hereafter.

Phases and toolkit items used

Qualitative research
Personas & user goals
Competitor analysis & benchmarking
Data inventory
Concept design & visualization
Data engineering
Style guide & design rationale
UI/UX design
Visual design
Front-end development
Technical design
DevOps
Content strategy & editorial outline

Solution

Every chapter begins by telling a story around a certain topic. A brief introduction outlines the topic and explains the challenges faced by the district. We employed captivating, purposefully photographed imagery to complement each topic.

In subsequent views, a map of the district remains fixed on the right side of the page. Being a constant element on every page, different datasets and information are overlaid on the map as the user scrolls through the chapter.

Additional information, highlights, variables and map controls allow the user to dive further into the topic. The interplay between the map on the right and the controls on the left creates a dynamic, yet clear experience.

The overall minimalistic style, accentuated by the lines and shapes of the map, dictates the tone of every page. The clean, elegant look and feel drive the focus to the content, drawing the user into each topic. Throughout the website, four colors are used consistently to indicate different modes of transport, while red is used as a universal accent color.

Landingpages

Each section has a different landing page that strengthens the narrative and highlights the main findings, guiding users in the exploration.

Datavisualizations

The screen is split into two sections: the left side contains the overall narrative and specific visualizations, and the right side always shows the map. The text contains the most important insights on the topic and is complemented with visualizations that show specific breakdowns of the data. The charts are interactive, and the map is updated to show specific slices of the data. The map is a persistent element, always showing the complete picture through street-level data. Highlights on the map allow people to see specific points where the data is interesting. Users can zoom in on the visualizations and select several parameters to discover more details.

Mobileoptimized

Our component-based design and development workflow allowed us to easily adapt the design to a small screen layout.

Project screencast

Technology

The data for this project, aggregated from several data sources, is loaded, filtered and finally visualized on custom-made maps in the microsite. The microsite allows in-depth exploration of the data based on selections made by the user.

For easier maintenance, we have automated the conversion from shapefiles to GeoJSON files as much as possible with scripts. These GeoJSON files are then converted to TopoJSON files to reduce the file size.

The reports are based on the same datasets and are available to download on the microsite. These reports are less exploratory, but offer conclusions made by DDOT.

Results

The interactive, data-rich design of District Mobility provides an innovative platform for sharing the state of mobility and DDOT’s progress towards reducing congestion on our roads.

Leif Dormsjo, Director, DDOT

Statistics

Publicity
Image for Washington Post publicity item
Icon indicating link is from an external source and will open in new tab

It also gives the public access to the same information as transportation planners.

Washington Post

Image for WAMU 88.5 publicity item
Icon indicating link is from an external source and will open in new tab

It showcases the staggering amount of data now available to transportation planners and private citizens alike.

WAMU 88.5

Image for Popville publicity item
Icon indicating link is from an external source and will open in new tab

District Mobility is a dynamic web tool that shows the District’s state of mobility for surface transportation modes.

Popville

Image for WTOP publicity item
Icon indicating link is from an external source and will open in new tab

When and where you’ll find the worst traffic congestion in DC.

WTOP

<-Back to work overview
Image for next project, HERE Traffic Analytics
Next case

HERE Traffic Analytics

Red Dot Award 2023 - Agency of the Year
Data driven
experiences
Part of ADC consulting
Get in touch

If you’d like to learn more about how we can add value to your business, contact Thomas Clever.

Photo of Thomas Clever
thomas@cleverfranke.com
+31 6 19 55 29 81
© 2025
Privacy policy
Receive updates

Subscribe to our newsletter to receive quarterly updates.

Or follow us on social

We use cookies to offer you an optimal user experience and to monitor traffic.

Find out more

Discover & define

Competitor analysis & benchmarking

During benchmark and analysis, we look at products, systems and platforms with related or similar purposes. This helps us to learn from the solutions applied there. Above all, we study the various patterns of interactivity and use cases for the project. From there we translate insights into an analysis of strengths and opportunities of the existing implementation and researched solutions.

Deliverables C°F
  • Competitor benchmark & strengths and opportunity Analysis
Go to toolkit overview