HeartFinder

Designing a system to efficiently initiate and coordinate searches for missing persons within community

The Brief

This is an individual project that I worked for folks who planned to propose a missing persons solution on the Conference of Mayors.

Based on their requests, I developed wireframes and high-fidelity mockups of the products, including a web-based platform for dispatchers in the state departments and a mobile app for people who want to help search missing persons.

Role

Duration

Key Skills

Tools

Type of Porject

UI/UX Designer

1 month

Stakeholder Interviews | Story Map | Visual Design | Sketching | Wireframing | Prototyping

Adobe Xd | Overflow

Individual project | Volunteer work

Create alignment with stakeholder

To align the goal and learn more details about this project, I conducted a stakeholder interview with the project lead. It helped me to further understand why the stakeholder wanted to build this project, what user needs led to this, and what work was already done.

Why we need to build the HeartFinder

When a loved one goes missing, it is important to seize the moment to save him/her from the danger, as with each passing hour decreases the likelihood that the subject will be found. However, with the insufficient police force, it is difficult to conduct a thorough search in a specific area. On the other hand, even with the help of people within the community, the areas people searched are often overlapped. Therefore, the HeartFinder aims to bridge this gap by helping the state departments utilize the power of communities to effectively organize and conduct searches for missing persons.

What needs to be started from scratch

The team has developed a list of product requirements before they came to me. They hoped me to build the wireframes and create high-fidelity prototypes based on the requirement, but also welcomed any recommendations and further changes as well.

Defining target users

There are two defined user groups. One is dispatchers who worked in the Law Enforcement Agency, they are usually the police in the Police Department. The other is volunteers who are willing to participate in the search mission launched by the law enforcement agency.

Map out the story

After reviewing the product requirements (an excel file) provided by the project lead, I found that it was difficult to map out the user flow across the entire product. Therefore, I collaborated with two UX designers who are the friends of the project lead and also familiar with this project to create a story map. This story map helped me to better understand how user flow would be like, what pieces were missing in the product requirements, and what features and functionalities we need to prioritize first. 

Story Map.png

Ideas to actions

Brainstorm

Based on the insights from the story map and the goal we developed, we started to brainstorm various possibilities and sketch out our ideas. 

Ideas for dispatcher platform

  • Map view as a dominant feature - because the map can shows dispatchers the specific locations of volunteers, clues, and searching areas, which facilitates them to make sense of information and further coordinate the volunteers.

  • Customizable map layer - so that dispatchers can filter out the unnecessary information while analyzing and coordinating searches

Ideas for volunteer app

  • Map view as a dominant feature - because the majority of the time, volunteers will need to rely on the map to search the assigned area to search missing persons

  • Well organized missing person info- the screen size of mobile phone is relatively small while the missing person info is a lot that the information needs to be displayed in a way that volunteers can easy to digest. 

  • Providing sufficient details while sending a searching request -giving the information like the distance to search area and required skills can help users to decide to join or not. It can also decrease their chance to drop out in the middle of the search, which will cost dispatcher extra time and effort to rearrange volunteers.

Some early exploration for the web and the app

Wireframes and Iteration

After ideation, I started to build the wireframes to demonstrate what elements will exist on the key pages and provide the stakeholder with visual understanding of the product before getting approval before creating hi-fi prototypes.

Dispatcher Platform

At this stage, I spent much time developing the design for the dispatcher platform that they can have a holistic view of each information but have flexibility to filter the information at the same time. I created 3 different versions of wireframes based on the feedback from the stakeholder and two UX designers. Also, I did a lot of research on products using the map as a dominant feature, such as fleet management software to explore more possible interaction design upon map.

 

Here's how it evolved:

wireframe-v1.png

Version 1

The main problem was that this design made users hard to find, digest and synthesize information as they switch among various types of data due to the fixed panel with the hierarchical menu.

wireframe-v2.png

Version 2

To help users can better find and synthesize data, I put a quick view of the progress of search and clues below the map. Users can also easily follow the information as the details panel will pop up on the map as the click the icon on the map. However, the information panel took much space that users can hardly have a holistic view of the map.

wireframe-v3.png

Version 3

In this version, I made the panel more flexible to users. Each piece of information will be shown as a panel that users can open, pin, resize, or move around on the map. It gives users more flexibility to control the panel according to their needs and spares more space to the map.

Volunteer App

For the app, as the screen is way smaller, I encountered the problem of how to make control easy to access and clear to understand for users. Here's how it evolved:

There are too many and alike control buttons in the first version that it was not easy for users to discern among buttons. Also, the icons are not straightforward enough to understand. After recognizing the problem of similar look and interaction, I tried to reorganize the control buttons and implement different ways of interaction.

 

Considering that applying map layers is an action like turning on and off things, I decided to adopted switches toggle for this feature. Also, I put the Exit button next to Report button as they are both an important action that need to be salient to users and both reflect that the search will be ended. Last but not the least, in the first version, users can go to Clue page by clicking the button at the top-right corner. However, such interaction might not match the user's expectation since it's more like a button used to make changes to the map. As a result, I created a tab bar to separate clues from the map where users can add and view all clues.  Moreover, users can still view each clue by tapping clue icon within the map.

Version 1

Version 2

The Challenge

How might we create a system for dispatchers to efficiently coordinate volunteers, and for volunteers to maximize their contributions toward searches

Key Features - Dispatcher Platform

Easy access & flexible control to key information

Users can quickly acquire various information they want with less than 3 clicks within the map view. The flexibility of controlling panel also allows them to synthesize the information "in the context" without shifting from different tabs. It facilitates users to 

Clear Navigation

The navigation reflects the key tasks of the search mission. Each tab gives them more complete information where they can search and filter.

Customizable Map Layer

To avoid information overload, it allows users to filter out unwanted information on the map.

Goals for designing platform for dispatchers

Easy to navigate

Since dispatchers need to pay attention to various information while coordinating searches, from the progress of search to the clues sent by volunteers, the interface needs to provide a clear path for dispatchers to find the information they want.

Flexibility of use

Because dispatchers may need to synthesize different data to make decisions, it is important to provide dispatchers flexibility to organize data in the way they want.

Goals for designing app for volunteers

Visibility of search status

As volunteers will not fully focus on their device while searching missing persons, the design should make the changes of search status easy to be noticed and informs users what to do next to keep track of the search plan. In this way, volunteers will feel more in control as they may have little experience in searching for missing persons and feel terrified if they don't know what is going on.

Enhancement of sense of control

As users are mostly likely inexperienced in searching missing persons and may feel nervous before and during the search, the app should clearly inform users what's going on, as well as help them to deal with problems to enhance their sense of control.

Key Features - Volunteer App

Sufficient details for better decision-making

Before joining the search, the app will inform users what to expect about the search. It not only give users more sense of control but also prevent them from quitting in the middle of the search.

Real-time updates within the map

Users can always get the newest updates from the map which clearly show the search progress, updated clues and the location of other volunteers. By knowing what's going on, users can make better decisions on taking which routes. 

Communication between others and dispatcher

The dispatcher can directly message or call volunteers in an emergency or necessary situation to give an order. The users can also contact other volunteers in the app to better cooperate.

Screen Flow

I created the screen flows by using overflow to help the team better understand the logic between screens and how a user will interact with the interfaces in different scenarios.

Dispatcher Platform

Userflow.png

Volunteer App

© 2020 by Angie Wang. 

  • LinkedIn - White Circle