Overview

In every Mapbox map there's a link for users to submit feedback about this map. The feedback tool has the highest page view among all pages on mapbox.com. 

In May 2017, I redesigned the UX of this page for Snapchat integration, which increased the page view by 150%. In Jun, I was in charge of the second iteration of the page UI and iconography. 

Launch date

May 2017 

My roles

UX design
User research
Visual design

 

 


Redesign goal

We want to engage more end-users to report map data feedback using this tool, to improve the data quality of Mapbox maps, and reduce friction as people interact with the the map/ application.

Metrics: total page views (increased by 150%), total feedback tickets submitted (tripled), % of actionable feedback tickets (dropped).

Mobile friendly

In May 2016, 72% of the page traffic is on mobile, compared to a mere 12% back in 2015.

One tool

The differentiation between OpenStreetMap data, satellite imagery data and geocoding should be completely hidden from an end user.

Personality

It's going to be a simple, fast-speed, and painless tool, also with a stronger Mapbox brand presence.

 


Research

Due to limited time and resources for user research, I conducted guerrilla usability testings with new hires in the office; I also read through hundreds of existing feedback tickets in the database.

Through affinity diagramming, my top 5 findings were:

- On mobile, a small map canvas makes interacting with the map difficult;

- People weren't sure if when to focus on the map vs. the instructions;

- Confusion around word count requirement;

- Will they be notified when this issue was fixed?

- 3/6 people were confused by the 'edit the map' link.


Provisional personas

The design needs to strike a balance between the casual users and power users across platforms. 

 

Inspirations

How might we create a positive and enjoyable experience for feedback reporting?

 


Wireframes

Early sketches

How might we balance clarity of the feedback being collected and complexity of the tasks?

One "wild card idea" here is to create an open-ended twitter style feedback system, with free hand map annotations. 

 

User flow


 


Testing and iterations


Description screen

Here are three iterations of the description screen. As a result, I opted out controls and buttons from the web design to purposely create a simple and focused experience.

 

Categorization + wordings

By tweaking the copies and iconography of the location question types, we made sure the design was disambiguous to the end users and useful for the data team.  

 


Hi-fi mockups

Motion design

Motion clarifies the relationship between UI elements, and animations makes the experience more pleasant in case the user comes to the feedback tool feeling really frustrated. 

I prototyped the motion in keynote.

 

Larger screens


Tablet


 

Iconography

Nice icons calm the user down and help explain abstract concepts. In this iteration, I designed the location type set and issue type set.

 

 

Yunjie Li, 2017
Using Format