Designing the Mapillary web app

Overview

Complete rearchitecturing and redesigning the Mapillary web app: imagery display and browsing.

Date

2016

Outcome

My designs enabled map editors and GIS professionalsAcronym for "Geospatial Information Systems"—people who work with maps and map data, so not just editors, but city officials, planners, departments of transportation etc. to make better maps. In 2016 we were finalists at Fast Company's Design Awards for the "Graphic Design & Data Visualization" category.

My role

  • Principal Product design
  • Information architecturing
  • Interaction design
  • Usability testing
  • Design system

What I've learned

To drive and lead initiatives, to do diligent work all the time. Invent and constantly refine design and build processes. Wear many hats and jump in whenever there is a need to be successful in a small sized team.

The problem

"How do you view user contributed street-level imagery on a map?"

The existing solution posed challenges: unrelated features were grouped together, use cases were not identified and solutions considered.

The website wasn't clearly presenting an option what to do next. Do I need to register an account? Who are the GIS professionals?

Using the map was too static: do I have to perform a search to jump in the experience or can I pick something?

The map viewer was small and cumbersome to use.

I collected every user facing interface elements in a document which served as a starting point to ignite discussions in understanding how things relate, what were considered essential features and what edge cases.

I talked to our existing and potential new users (sourced from our growth team, our ambassadors, and our sales team).

Designing the web app

Based on my research findings, I wanted to take an approach where the viewer puts the full context first: there is as little distraction as possible, it's either a map or the currently selected image occupying the biggest available space.

I also had to figure out a quick and easy way for anyone to see their own uploaded image sequences, or browse someone elses.

Early explorations on the main UI:

To show how the sidebars would work I designed and prototyped the animations and interactions in detail. The right sidebar provided space for logged and non-logged in users imagery display.

The left sidebar was reserved for global menus and admin related functions providing way to access functions only available on the home page.

A full stretched view was presented for the viewer with a small image preview. The two could be switched at any point. left image below

I created a workflow to display the spatial navigation arrows as perspective corrected artwork to allow for quick iterations. right

I repurposed the debug mode from one of the early builds: every image in our system was marked by a dot (ie. "beads on a string"). This provided a unique way to display user contributed street-level imagery.

A capability to preview imagery without requiring the user to click was also added during this iteration.

I also experimented with showing 360 imagery in a unique way by using a projection on hover.

Mapbox's SDK could not rotate custom sprites, so I created image location markers in 15 degree increments.

To keep it consistent and pixel-perfect for all angles, I programatically created the sheet in Sketch from basic elements.


Built version from product

Further optimizations

A product can change directions over the course of a couple of years based on different strategic priorities or use cases.

While working on tailoring our main UI for the GIS persona map data subscription use case, I found ways to improve and streamline our main browser. Below is a design concept for a stripped down main view.

All image related functions were grouped and available from the vicinity of the image. top right

Map data panel provided a straightforward workflow solving the problem of taking multiple steps to get to map data subscriptions.

Changes like this require much effort to test and develop. While working on the scene types design concept I explored how smaller steps could still solve UI clutter.

By merging the image options menu ... with the image description bottom right element an icon could be saved and yet it still provides the same functionality.