One of the joys of working with talented startups is that we often get to watch products graduate through their various stages of maturity. The relationships we build and retain with a product (and its team) through that growth provides a backbone of consistent feedback and other inputs that allow us to better understand the vision, position and users over time. This inevitably enables us to deliver even better work round after round, phase after phase.

In celebration of My City Live’s relaunch, I thought I’d take a trip down memory lane and share a glimpse of where things started.

Take One

Early conversations with the Adam, Adil and Paul very quickly revealed that My City Lives wouldn’t just be an ordinary website. Not only would its technology stand out, but its design needed to support the significance of what it meant to tell a story and explore others in a natural and seamless way.

It can’t look like a regular website, it needs to feel like an application, but in your browser.”
Paul (in our early meetings with My City Lives)

This idea guided our earliest concepts and what eventually became My City Lives. A full screen map would be the central feature of the application and provide a focused environment to explore a seemingly endless map of videos. A sliding drawer would pop open over the map to, in a sense, clear the canvas and leave the spotlight on the single video being watched. Finally, the absence of browser reloads from screen to screen (still a rarity back then) ensured that the experience of discovery felt responsive, instantaneous and natural.

The Identity

What’s perhaps most unconventional was our approach to the identity. Rather than derive the identity purely from the creative strategy and define guidelines for the application design, we thought it was quite fitting to do the reverse.

From one angle, we understood that the brands of the businesses that we work with often derive solely from the brands of their flagship products. My City Lives was no different, which made it more sensible to extract identity concepts from the interface of its application after it was designed.

From another angle, we wanted to approach the identity with a functional lens. We wanted to build something iconic and recognizable (and who doesn’t), but also needed to ensure that it would work pragmatically within the My City Lives application interface. The magenta was chosen for this very reason, as we knew the full screen map wouldn’t have that colour tone, which inevitably meant that the identity could retain a strong contrast against it. Any other colour had potential for blending into the map.

Take Two

About a year after its first launch in early 2010, My City Lives re-approached us to begin conversations about the next evolution of its product. Not only was the technical infrastructure due for a makeover, but it was time to rethink and refine the design of My City Lives based on valuable insights and feedback that had been collected from their power users over the course of the year.

One of the first areas we started exploring was the relationship between the map and the content browsing/watching area. In the initial version, the content in the slide-down drawer mirrored what was shown on the map, and vice versa. Essentially, all content would have two ways of consumption.

From feedback gathered over time, we realized more and more that this relationship needed to change. The map needed to be a tool on its own that was designed for exploration, while the content browsing/watching area also needed its own space to evolve and serve a different purpose. The two “worlds”, as we started calling it, would encourage different workflows and have different requirements to support those workflows. Of course, we would also need to tie the two worlds together by sending content from one area to the other.

This change in architecture informed the new design to become what you see now on My City Lives. Rather than layering the content browsing/watching area over the map, we gave both of them their own defined real estate and connected them with a common masthead and navigation.

The map also saw a great deal of new improvements: a redesigned status notifier to aid wayfinding, improved video pins to help identify relevant content faster, more robust filters and tags to narrow down searches, and all-round more intuitive map interactions help vastly improve the exploration experience that the map is intended for.

In the other world, the interface is tamer but designed to support the new tools (Channels, Venues, Voices, Trending) that have been added to create a second complimentary method of video browsing and discovery. Designed for practicality and the comfort of browsing content in a more orderly fashion, the clean and minimal interface provides a perfect contrast against the visually-stimulating map.

On The Go

What makes videos more relevant on My City Lives is the fact that they’re tied to a location – often one you’ve been to or are curious to learn more about. When you blend this idea with a location-aware device that immediately finds you videos that have been created nearby, that relevance increases even more.

We knew when we set out to work on this second version, it would be important to make it responsive to mobile browsers. More importantly though, we needed to understand the unique needs and behaviours users would have when on the road in order to deliver a focused and refined mobile experience.

Specifically, the mobile map is designed to simply find videos that have been created near your current location. All other features that are less likely to be used on a mobile device have been stripped away to provide a simpler interface.

More to Come

We’re glad to see that the new My City Lives has been well-received by the community thus far and we’re even more excited for what’s yet to come! For now, I hope you’ve enjoyed this brief peak into some of the process and design decisions behind our adventures with My City Lives.

We can’t wait to show you what’s next!