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.
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).
In May 2016, 72% of the page traffic is on mobile, compared to a mere 12% back in 2015.
The differentiation between OpenStreetMap data, satellite imagery data and geocoding should be completely hidden from an end user.
It's going to be a simple, fast-speed, and painless tool, also with a stronger Mapbox brand presence.
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.
The design needs to strike a balance between the casual users and power users across platforms.
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.
Testing and iterations
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.
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.
Nice icons calm the user down and help explain abstract concepts. In this iteration, I designed the location type set and issue type set.