Pointing the DART in the right direction: quick UI fixes for a new easy to comprehend transit map
Recently I’ve been taking a break from San Francisco and staying in Dallas. Staying in a place with public transit is my preferred choice when possible. Some of my closest travel companions may know that I have an affinity towards transit maps, so when I tried to ride the Dallas DART rail platform, it was barely comprehensible and left much to be desired!
What does a DART rider desire?
Platforms and trains are the points of immediate needs; riders may have to decide to embark or disembark in seconds. I’ve encountered quite a lot of riders looking at the maps confused at almost every station…
I remember helping out a couple on the platform. They knew Fair Park station was on the Green line, but still, they couldn’t find it on the map, they had been looking up and down, yet still missed it and the train that would have taken them there. They must have been lost in the maze-like twists and magically reappearing routes on the map.
What are we looking at?
In fact, the platform map looks bootstrapped. While I don’t think this narrow area is the best format, for this self-initiated project, I’d try to make it work with existing form factors.
The horizontal map in the train isn’t as bad, while the two grey zones look like the East Berlin stations that the West Berlin trains had to skip.
Grid
Grid provides visual consistency, which makes it easier for viewers to understand the system. DART system is relatively simple, lines branching out from a few downtown station.
On the platform map, with the exception of the vertical lines, there is no obvious grid system, everything goes! On the train map, I believe there is a conscious attempt to use the 30, 150, 210, and 330 degree grids, catching on the DART logo pattern. While the seemingly random branching points (probably in part due to lack of space) diluted the effect.
My first attempt was to use the same 30, 150, 210, and 330 degree grids to echo the DART branding. And adopted a hexagonal grid in the second version.
Routing
I haven’t done a scientific research like the one from MIT. But we may easily tell from the results that easily recognizable routes with obvious turns and maximum space between each line are preferred.
It is very difficult to perceive the contour of each line from the platform map. For one, the routes are unnecessarily rugged. The use of bold typefaces distracts viewers from seeing that. The train map is not as challenging, while it is very unfortunate the Orange line twists at both ends of the shaded area.
Typeface
Avant Garde in various forms is being used in most signages, including the train map… Some signs even uses different weights for the same line. Choosing a typeface for transit map is quite similar to highway signs. Recognizable characters from a good range of distances and lighting conditions. Learn more from this article about Wayfinder Sans Pro.
For the platform map, Helvetica Neue Bold and its condensed form are being used. The characters in Helvetica Neue are more distinctive than Avant Garde, yet still not a good signage typeface.
To make sure cost is not a deal breaker, I looked into open source and found Overpass by Delve Withrington (and his team), who I met in TypeThursday San Francisco! Thanks to Red Hat to fund this and make this open sourced!
The termini are labeled in all caps. Which is not quite effective with the scattered layout and varied colors.
Color & Legend
My initial biggest concern is the orange text, which can be difficult to read on white. When you can make a good layout with sufficient spacing, color coded station names are not necessary.
Legend indicating each line is not provide on both maps. It will be very difficult for color-challenged riders. Then I put the map into test with Photoshop colorblindness proof modes. It is a challenge for the green/orange pair in particular. I introduced the white gap between each line, and a New York style line symbol at the ends of each line.
Zoning
For the Downtown Dallas and Fort Worth zones, the executions was either too ambiguous with a hidden label (platform map), or far too loud and disruptive (train map).
On fare zones, it is overly elaborated with the TRE train on the current version, while there is no mentioning for the A train. Since these are the maps on the DART system, it should be DART-centric. Marking the stations beyond the Local Zone is sufficient when same fare is applied to all stations in Regional Zones.
First Iteration
One of the major objectives is to unfold the downtown route. Airport access points from the system are also indicated. TRE is a peak hour commuter rail service, its access to DFW requires shuttle. Most, if not all, DART rail riders are better off using the Orange Line to DFW.
I sent my works to Madelena Mak, a fellow designer also from Hong Kong, who shares my obsession on transit maps for comments. She told me, for the platform map in particular, things seems to slow down in the downtown area (which is kind of true with traffic lights, and each block can’t take two 2-car trains). My understanding is that when the mostly vertical routes turn to horizontal, it is not as easy to follow the flow. So…
Second Iteration
To enhance the flow, I decided to make a bend between West End and Victory stations, which also matches better with the physical world. A hexagonal grid is adopted.
For the Green Line sharp turn east of Pearl/Arts District, which is the only place the lines have to overlap, I opted for two turns along with the grid instead of the smooth rounded route. This enhanced the clarity of the turn, and distinct itself more from the Blue Line.
Conclusion
I have to admit the DART maps are quite easy to make improvements upon. While to me this is about taking action on things I feel dissatisfy about, as I know how confused I was as a newcomer.
Thanks Madelena for pushing me for another iteration. Whose push boundaries are the ones that make changes. I don’t know if DART will do anything about their maps but I can only hope these works can get even one person to think, and to take action.
There are quite a lot more to talk about wayfinding in the DART system. Maybe some other time.
Special Thanks
To Madelena Mak and Ajay Desai
