Jasper Stephenson

UX engineer, friendly ghost.
Header image – Traveling Circus of Urbanism: Giving Urbanism a Sense of Place

Traveling Circus of Urbanism: Giving Urbanism a Sense of Place

Visit the Traveling Circus of Urbanism here!

It makes sense, right? Urbanism is the study of places and the people who live in them, so of course it would have a 'sense of place'. The thing is, though, that much of the current discourse — essays, interviews, event reports — tends to exist in a bubble; just the one report about the one city, or the event series only in the one building, and so on and so forth. What about all the other urbanism-related topics in that city? In that country? In that continent? I was lucky enough to lead the design (ux, interaction, and visual) and full-stack development on a new responsive platform that puts urban narratives and practices in context with one another, globally.

Writer Mariko Sugita speaking at an event for The Guardian in Tokyo
Writer Mariko Sugita speaking at an event for The Guardian in Tokyo

Traveling Circus of Urbanism's lead writer, Mariko Sugita, is an urbanist. In every city she visits, she finds stories, interviews, and locations that expose the unique urban fabric of that place. Each of these is inextricably linked to its geographical position, and has relationships and ties to other spaces, districts, and cities around it. In fact, geographic context is what gives an article on urbanism its relevance to the larger discourse. This was the founding concept that our team struck out with to build a new platform for global urban narratives and practices.

Every Story is Better With Context

One of Traveling Circus of Urbanism's city pages. See it live!
One of Traveling Circus of Urbanism's city pages. See it live!

The one type of diagram that makes the most sense to an urbanist is a map. Everything they do, from planning a city to designing a house to charting migration, happens on a map. We decided to meet urbanists where they already are: we made a huge map. Specifically, a huge map designed to help place each article within the context of all articles in the surrounding area.

Bonus! This layout also has the added benefit of naturally forming a sort of "unofficial travel guide for urbanists" who might want to visit these areas — all the points of urban interest are mapped!

A New Way to Browse

The map is fully interactive, and is linked with the content and navigation. Try it!

Of course, if you can see other locations that have urbanist content, of course those locations need to be interactive as well! I put a lot of work into making zooming, clustering, hovering, and other microinteractions feel as natural as possible.

Hovering over the name of a location focuses the map on that location. Try it!

There are multiple heavily intertwined discovery paradigms at play here. When a user clicks/taps on the map, the content changes to match. When they hover or click/tap on the content, the map moves and highlights. When they go to an article, the whole map zooms to fit its locations. Wherever the user interacts with the website, the content and map stay right in sync with them, becoming one single experience instead of two side-by-side ones.

This also means that no matter what type of browsing the user feels most comfortable with — clicking on the map, browsing a list, or searching directly — the whole site is accessible and interactive from there.

Bi-Directional UX

Our writers write in both English and Japanese. They're not developers (obviously), and they need an easy, distraction-free, previewable publishing environment that can handle anything they throw at it. In other words, this project isn't just about the UX of the reader; we need to focus just as much on the UX of the writer.

We decided against Wordpress or any existing content management platform for various performance, cost, and inflexibility reasons, opting instead to wholly custom-code our own content management system. (It's based on Nuxt, for anyone who's curious.)

One of our writers' workspace
One of our writers' workspace

Our system has been developed over more than a year of usage > feedback > revision cycles. It's always evolving to stretch the limit of what our authors can create.

It includes:

  • Platform-agnostic writing using markdown
  • Dead-simple map locations and polygons
  • Fine-grained publishing controls for each language
  • Live previews
  • Live, automatic image versioning & scaling
  • Automatic language-specific SEO for every post

Onward and Upward!

Our first zine!
Our first zine!

Traveling Circus of Urbanism continues to be one of the most rewarding projects I've worked on. In addition to continually updating the website, we've also recently expanded into making zines! The zine-making process is enough of a story for its own post, though, so I won't address it here too much. Keep an eye out for a post about it!

That's it for now! I'll keep updating this post as Traveling Circus of Urbanism continues to evolve and update.