The importance of a map

Designing a single webpage is one thing. But the real world of user experience is a complex tangle of digital and non-digital, mobile and laptop, app and website, online and in person. How do we design for that mess?

${vImageAlt}
The signage system for the New York City subway, as designed by Massimo Vignelli half a century ago

Massimo Vignelli is a legendary figure in design history. The Italian-born designer was responsible for some of the most timeless designs of the 20th century. Logos for Ford, American Airlines and Bloomingdale’s, in addition to furniture, household objects, and even church interiors are just a sampling of his career. Vignelli’s work is so enduring that the iconic system of signage for the New York City subway system that he designed in the late 1960s still exists to this day.

Vignelli died in 2014 after “a life of fight against the ugliness”. In an essay published after Vignelli’s death, designer Michael Bierut wrote of Vignelli’s mark on New York City:

“It seemed to me that the whole city of New York was a permanent Vignelli exhibition. To get to the office, I rode in a subway with Vignelli-designed signage, shared the sidewalk with people holding Vignelli-designed Bloomingdale’s shopping bags, walked by St. Peter’s Church with its Vignelli-designed pipe organ visible through the window.”

${vImageAlt}
Designer Massimo Vignelli (1931-2014)

New York, 1972

Stick to the subway

One of Vignelli’s contributions to the NYC experience was a 1972 map of the city’s complex subway system. Vignelli took on the project after designing the signage system and knew he could improve the paper map used by tourists and locals alike. Previous maps, he said, were riddled with “too much information” and plagued with fragmentation, something he referred to as a “disease”.

${vImageAlt}
1948 NYC subway map. Vignelli criticized this map for having too much information.

Vignelli drew inspiration from a diagram of the London Undergound: “The greatest thing about the London map, if you’ve ever seen it, is that they stick to the subway, the underground. Therefore, there’s no reference to above.”

${vImageAlt}
1933 London Underground subway map. Vignelli admired the strict focus of this map.

Vignelli applied the London approach to the New York map. In typical Vignelli fashion, he followed a strict system that reduced the spaghetti of subway lines to colour-coded 90- and 45-degree angles. He made minimal reference to the land above using only shades of grey, and he labelled everything with a single typeface (Helvetica, of course).

In his words, “every line a different color, every stop a dot.”

Simple. Beautiful.

The Vignelli-designed 1972 New York City subway map

The design world hailed the map as a triumph. Michael Bierut kept a copy as a souvenir after a 1976 trip to New York. A copy of the map even made it into the collection of the Museum of Modern Art in New York.

New Yorkers and tourists, on the other hand, weren’t so pleased. Tourists using the map would get out at a Central Park stop, walk north for a few very long NYC blocks, and slowly discover that the park wasn’t the tight square depicted on the map but a long rectangle. What was supposed to be a walk around the park became a grueling marathon.

Locals would wonder why the map suggested a subway stop existed to the east of a certain street when in reality it existed to the west. Even the rendering of water in a grey-ish beige threw people off.

Eventually, in 1979, the map was replaced.

Vignelli never stopped defending his design. He insisted that it was not a map but a diagram and that when it comes to navigating a subway all that matters is getting from point A to point B. Geography is irrelevant when you’re speeding through an underground tunnel. 

Mapping the experience

The ups and downs of design

Vignelli's attitude was based on stubbornness rather than empathy. The reality was people didn’t want to use a diagram when they’re below ground and cross-reference it with a geographical map for when they’re above ground. They wanted one thing that did both. They wanted a seamless experience.

How can we ensure we’re giving users a great end-to-end experience? It turns out, that also starts with a map.

Observing users travel through a complex process is the most important piece in understanding their experience. When you watch users first hand you can plot each point of their journey on a simple scale of frustration to delight. You can understand their pain points and start to really empathize. Here’s how it works:

When you start, your map might look something like this:

${vImageAlt}
Your starting point: an empty experience map

Ask a person to go through a process start to finish. Let them start wherever makes sense to them. For example, their start point to apply for a something at the university (like admission, or a job, or a scholarship) might be Google, not PAWS or usask.ca. That’s fine. In fact, take note of it.

Follow their interactions and ask them about their experience. Ask them to voice what they’re thinking as they do it. Don’t instruct them if they hit a roadblock, just listen to them.

Plot each point of their journey on your map. The person might start out fine but then encounter trouble areas. Then they might bounce back a bit. You'll likely end up with a jagged line of points:

${vImageAlt}
What your experience map might look like after plotting your points

This is an experience map for your design. The experience map shows you exactly where your design is causing frustration, satisfaction and delight. The more maps you create, the more accurate a picture you'll have.

The experience map can help you plan improvements around reducing frustrations and creating positive experiences. You can map your own goal line and work towards it:

${vImageAlt}
An experience map with a goal line. The blue line is where you want your user experience to be.

When you map user experience you can frame each version of your design around solving concrete user problems. This saves you from wasting time and resources implementing questionable features or improving things that are already just fine. Most importantly, it ensures your users won’t be stuck above ground trying to make sense of a diagram for use below ground.