AI Mapping Tool UX/UI Re-Design

Over 1 billion people globally reside in unmapped areas that are often remote or resource-poor. Open Street Map is tackling this issue by developing an open-source alternative to Google Maps. Humanitarian organisations use it in times of crisis.

The New York Times: A Mapathon Finding Areas Worst Hit in Puerto Rico
WIRED: The Open Source Maps That Make Rescues in Nepal Possible
The Guardian: Missing Maps: Nothing less than a human genome project for cities

AI May Not Kill Us All (Yet)

Open Street Map's 'fAIr' tool employs AI to help non-technical volunteers identify buildings from drone images, accelerating the mapping of disaster-affected areas. It uses computer vision to build and apply local models for efficient mapping across entire regions.

Computer Vision Conundrum

The team built a proof of concept, but it required a 30-minute onboarding for non-technical users, as development of the front-end was rushed. As the first product designer, my role was to simplify the tool to a level where onboarding calls could be eliminated completely.

Project Stakeholders

The platform primarily served experienced volunteer mappers, community managers, and data scientists seeking advanced features. The devs wanted to ensure any new designs were technically feasible, would speed up onboarding and didn’t compromise prediction quality.

AI Is Cool, But We’re Stuck
On The Homepage

The research identified user and business needs by reviewing existing research and speaking with the devs, a senior PO, and two community managers. Key concerns included the platform's complexity, language barriers for volunteers and integrating the tool into the wider tech stack. This phase also included competitor analysis, and reviewing existing user research.

Ideation

I ran a group ideation session with six Open Street Map community members to brainstorm ways to solve user and business problems. The ideas fit into two broad categories; improving the onboarding/homepage/login screen and reducing technical jargon.

Early Designs

I aimed to simplify the platform to a 6th-grade English level. My initial ideas included an interactive walkthrough and a design system to help facilitate future tech integrations. However these ideas ended up in the low impact and high effort quadrant.

The Solution

However, I later realised that the actual UX/UI of the AI model parameters needed to be simplified, in order for non technical users to truly use it autonomously. I streamlined the interface with a slider, hid advanced settings, added tooltips and enlarged fonts and icons for better accessibility.

AI Model Parameters - Current State Issues

1. Key information about model hard to understand at a glance
   
2. Order of operations unclear
   
3. AI model parameter adjustments (epoch & batch size) are too technical to easily understand. Unclear how adjusting numbers will impact the mapping
   
4. Some adjustments not explained at all
   

My initial design ideas focussed on making the epochs and batch size much easier to understand:

AI Model Parameters
- Future State Solutions

My final designs included the following changes:

1. Key model info summary easier to understand
   
2. Order of operations follows linear top down approach, required fields have red asterisk
   
3. Tooltips added throughout interface
   
4. AI model parameter simplified. Epoch and batch size + other adjustments now only available for expert mode users (i.e. data scientists)
   
5. ‘submit model’ renamed for clarity and moved to bottom, as it’s the final operation
   

Building Detection Refinement
- Current State Issues

1. Unclear terminology
   
2. Too technical and unclear to average user how these parameters will impact the building detection
   
3. Cognitive overload; info is mostly relevant for backend purposes

Building Detection Refinement
- Future State Solutions

1. Re-design for clarity and providing user feedback with loading button
   
2. Simplified UI to focus user’s attention on the key parameter that influences AI model
   
3. Additional settings and insights hidden
   

We’ve Won The Battle, But The War Has Just Begun

UI updates included aligning elements with other Open Street Map tools to ease future integration, explaining the platform simply in a four step process, adding a settings page to allow data scientists to toggle expert mode and updating the Learn page to include more resources.

Homepage - Current State Issues

1. Login button hard to find
   
2. Too much text

Homepage - Future State Solutions

1. Included link to main Open Street Map website to indicate it is part of the ecosystem
   
2. Language adjustment on first landing page to allow for future compatibility of Spanish and French to serve African users
   
3. Brief blurb and screenshot of fAIr tool, to give new users a quick understanding of fAIr
   
4. Clearer directive to login and option to create Open Street Map account
   
5. Clearer overview of fAIr, including explanation of the main steps in the process (upload sample data, run prediction, validate prediction, upload to Open Street Map)
   
6. Additional context on Open Street Map as an organisation
   
7. Updated footer

New additional pages
(sign-in, settings, learn):

Testimonial

Faiz conducted a series of interviews with stakeholders to understand the context and proposed great deliverables. His commitment to deliver according to agreed plan were remarkable. I used to have 1-2-1 call with Faiz and noticed how good listener he is and patient to grasp the feedback and improve the design. Faiz seemed to be motivated by supporting organization in the social impact ecosystem and willing to put time and efforts for the values he shared with those originations.

I would for sure seek to work again with Faiz in any coming opportunity. From fAIr team, thanks fAIz.

Omran Najjar

Senior PO @ Open Street Map