The New Mapillary—Design Principles

Redesigning and reimplementing Mapillary turned out to be an unprecedented project in the life of the company, as we basically rebuilt everything from scratch. We started from the ground up: first, we built a new tiler, which allowed us to actually show each photo in a sequence, just like beads on a string. We then asked ourselves if it would be possible to use Mapillary on the full screen map/photo at all times?

The whole product was designed around this concept, which was one of our key design tenets: being able to see which areas on a map have photomapped coverage, and then being able to interact with that interface in various ways. Basically, whatever you do, you don’t have to leave this view. We wanted to make the visual design subtle and reserved.

Viewing and Exploring

mapillary_map

Whenever you hover on a green area, you get a quick preview of that area. It’s great for exploring many areas of the world quickly. If you want to explore somewhere by seeing the sequences of that location, just click and you’ll immediately be taken to a photo of that area.

Everything related to the map or the photos is easily accessible from the … (dot-dot-dot icon) menu found in the middle of the screen.

We’re embracing photo sequences. This means that photos uploaded at the same time by the same contributor, when selected, will have a blue color on the map. Exploring and navigating on the same sequence is now easier using the controls at the top: you can step forward, backward, or even play back the sequence.

mapillary_map

You can use the spatial navigational controls on the bottom of a photo to navigate among sequences and explore the world as if it had been mapped with a continuous stream of photos. One of the design challenges we faced was how to display the photos adjacent to your location, so that you’ll always be able to understand where you’re traveling. We had many different variations of a “radar”-like interface, until we realized that actually incorporating the map at all times is an experience that no artificial design will be able to beat.

“You are here” is displayed as an orange marker, and photos from the same sequence are displayed in blue, while other sequences are in green. If you hover over any of the navigational controls, you will see where you’re going, either taking you to a different sequence or keeping you on the same one.

Editing

We rebuilt the interface for editing photos as well. You can now select a sequence and make quick edits regarding placement of photos, or change the facing of individual photos. Using GPS alone to place photos on a map can have limitations, so now if you really want to exercise control over your uploaded photos, you can do it in an easy and convenient way. We also revised our blurring feature: just select any photo and you can edit or add new blurs. After making the changes you need to “submit” your work—which in turn needs to be approved by Mapillary staff member.

mapillary_map

Uploading

We have big plans for improving the image uploader. We’ve started with a new web uploader that can be accessed from the so-called “hamburger menu.” The new uploader also embraces the “bead” concept that we used in the Mapillary viewer: your photos are shown as dots on the map. You can add them by either dragging or selecting them, and then we take care of the rest. It is also possible to place photos prior to uploading by clicking on them to preview and correct the GPS positioning by hand.

mapillary_map

It’s a start

With this release we are laying down the foundations of the future of Mapillary and are committing ourselves to continuing to improve the experience over time. We are excited to hear what you think about it!

/Józsi

As always we file issue in the open here.

Continue the conversation