Helping Communities Find Missing People with Proximity Alert Technology.

Radar is the emergency alert IOS app that lets you know when someone nearby is reported missing. With Proximity Alert Technology and Real-Time updates, users can help in any way they can.

UX/UI DESIGN

AT A GLANCE

Project Overview

Project Type:
Capstone project for UX Design course at BrainStation

Timeline:
8 Weeks

Tools:

Figma, InVision, Adobe Illustrator, Photoshop

As a part of my UX Design Bootcamp with BrainStation I was tasked with completing an 8 week Capstone Project aimed at proposing, understanding and developing a digital product to help people in a meaningful way. This project explored an end-to-end UX design process that took me through the stages of idea generation, research and developing a mobile app interface and brand.

Role:

Lead UX Designer, Research, Ideation, Testing & Prototyping.

My Motivation

This Capstone project merges together some topics that are heavy but very important to me.

Inclusivity and helping to make the world a better place. 


In recent years, I have enjoyed watching true crime investigations due to their involvement in problem solving. But watching these shows, I’ve also developed a deep empathy for the families of the victims involved. As someone who has always wanted to know how to help, the topic of missing people has been on my mind for quite some time. Especially when seeing how the media portrays BIPOC, I knew this was a problem space that needed to be addressed.

The Design Approach 

My process was to leverage a Design Thinking Methodology because of its approach to solve complex problems. By focusing on 5 key phases of Human-Centered Design to create an effective and impactful solution concentrating on a small group of people and those that are systemic. “Solve for one, extend to many”

Tight on time? Select a Phase to Skip Ahead...

Frame 6.png
Frame 24hover.png
Frame 7.png
Frame 25hover.png
Frame 8.png
Frame 26hover.png
Frame 9.png
Frame 27hover.png
Frame 10.png
Frame 28hover.png

EMPATHIZE

Problem Space

 

Secondary Research
 

Primary Research

DEFINE

Persona

Experience Map

Competitive Analysis

IDEATE

User Stories & Epics

Storyboard

Task Flow

PROTOTYPE

Concept Sketching

Wireframes

Mid-Fi Prototype

TEST

Usability Testing

Incorporating Feedback

REFINE

Visual Identity

Hi-Fi Prototype

Human-Centered Design Process

EMPATHIZE

 

DISCOVERY

The Problem Space

In 2020, more than 540,000 people went missing in the USA alone. While not every case will get widespread media attention, the coverage of white and minority victims is far from proportionate. Studies show that media coverage can positively impact how long a victim remains missing.

Mockup of a home screen from Radar app

SECONDARY RESEARCH

Digging Deeper into the Problem

In conducting Quantitative Research I discovered that there is no national framework for missing persons in Canada. Due to this, navigating through the process is often unbearable, inconsistent and unfair to the victims and families involved.

 

There is also a clear discrepancy in media coverage that ultimately influences success rates. The Wyoming’s Taskforce on Missing and Murdered Indigenous Persons report found that only 710 Indigenous people were reported missing between 2011 and 2020, and while most have since been found, their recovery rate is lower than their white counterparts.

30%

Of Indigenous homicide victims had newspaper media coverage compared to 51% of white homicide victims.

21%

Of Indigenous missing people remain missing after 30 days compared to 8% of white missing persons.

Research also shows that the first 48hrs of an investigation are critical because that’s when investigators have the best chance of following up on leads before people’s memories start to fade. Which led me to question: If generating as much awareness and leads as possible is important, why is there not equal coverage for all missing people regardless of age, gender and race?

DESIGN CHALLENGE

How might we inform the public of all missing people's cases so that they can help with information to connect them back to their loved ones?

PRIMARY RESEARCH

Themes and Insights

I conducted three 1:1 interviews to speak with people familiar with this problem space between the ages of 20 - 30 that self-identify as a visible minority. Hearing their stories to better understand their feelings and thoughts on the topic. After completing the interviews, I organized my notes to identify pain points, motivations and behaviours and used an affinity map to obtain six main themes and insights:

Lack of Media Coverage

People feel there is a lack of media coverage surrounding BIPOC Missing People cases and are actively searching for information themselves. 

Willing to Help

People would be willing to come forward with information and help in any way they could. They just feel there’s a lack of Call to Action.

Amber Alerts

All interviewees find Amber Alerts the most memorable and useful. However, they have expressed discontent and would like for some changes to be made.

Informed by News

People are most informed by the news on their phone in visible apps they see daily like Instagram and Apple News.

Helping the Community

People want to help their communities but have expressed that in the current problem space, they’re unsure how to do so.

Closely Affected

All interviewees have expressed they were most closely affected by knowing someone in their network who had gone missing.

KEY INSIGHTS

The  selected themes I chose to focus on are: 

Lack of media Coverage, Helping the Community and Willing to Help

While individuals are willing to help, the most significant barrier is not knowing where to start. These themes combined can solve the lack of equal coverage and provide users with an alternative plan to get involved with a direct call to action.

DEFINE

 

PERSONA & EXPERIENCE MAP

Finding the Moment of Opportunity

After synthesizing my interviews, I developed a persona and experience map to ensure my design process was driven by my target user’s goals and behaviours. These artifacts helped me:

1

Build Empathy by understanding the user's frustrations and behaviours

2

Keep the user in mind throughout design decisions moving forward.

3

Develop an optimal product based on addressing the user’s goals.

My primary persona, Ava Smith is a 27-year-old Human Resources Coordinator who is aware of the racial imbalances facing her community. She was affected when someone close to her disappeared and was met with uncertainty about navigating through the process to provide help and spread awareness.

Primary UX Persona for radar app

Primary Persona: Ava Smith

Using Ava, I developed an experience map of her current state to understand the challenges of her end-to-end process for spreading awareness and staying informed in the problem space. This allowed me to identify moments of opportunity where I could intervene with a digital solution.

Experience Map for Ava Smith Radar App

Experience Map for Ava Smith

ADJUSTING OUR STRATEGY

Competitive Analysis

Most of my Interviewees mentioned Amber Alerts as the method of information they are most familiar with and they also expressed discontent with its limitations. Due to this interview insight, I felt it was necessary to conduct a competitor analysis before proceeding to the user flow for my app. Doing this helped me ascertain where there are areas of opportunity in the current alerting system for Missing Peoples. Guiding me to consider features before proceeding to User User Stories. 

Example screen of an Amber Alert Notification

AMBER ALERTS

OPPORTUNITIES:

FEATURES:

  • A nationwide alert system, for all phones.

  • Cases are alerted geographically by province.

  • Provides basic information of name, age and suspect details.

  • Loud alarm catches attention.

WEAKNESSES:

  • Only alerts for children that meet specific criteria:
    Believed to be in immediate danger

  • Not actually that common. Only 17 Amber Alerts were issued in all of Canada for the entire year of 2021.

  • Information disappears after notification is cleared.

  • There is no way to reference back to the alert.

  • Constraints: No images are provided, or physical descriptions or direct link.

  • Some people are discontent with sound and the time the alerts are issued.

  • People feel that there is no follow up on cases. They wouldn’t know about the investigation progress unless they are actively searching for information.

  • Extend the criteria of alerts to people of all ages while being non-discriminatory.

  • Ability to reference back to cases or follow up on cases.

  • Ability to interact with the alert. To share information with others or view more upon clicking on a link.

  • Ability to see more information beyond the name, age and suspects car. Visual Components would be needed to help users identify whether the person they are seeing is in fact the same person that is reported missing.

  • Alerts can be targeted to people using GPS tracking.

After creating a Primary persona and User Experience Map, I developed a deeper understanding of my user so I revisited my “How might We” Statement to ensure that it best framed the problem at hand:

REVISED DESIGN CHALLENGE

How might we empower millennials and provide them with resources so that they can help all missing people reunite with their loved ones?

 

IDEATE

USER STORIES & TASK FLOWS

Aligning Design with User Behaviour

To get a better understanding of Ava and her desired goal to help the community in missing people searches. I authored 20+ User stories under different epics to process the ways that Ava might need this product to work functionally, as a concerned millennial. While also taking into consideration the areas of opportunity seen from my competitor analysis.


There was an overwhelming amount of functions focused on obtaining information and sharing the information. Both of these cater best to the themes and insights identified for lack of coverage, equal coverage regardless of age, gender or race and community involvement.

Table of User Stories and Chosen Epics

User Stories and Chosen Epics

STORYBOARD

Shaping the User Journey

In order to imagine how Ava could use the product in her daily life, I illustrated a storyboard. This helped me visualize how Ava would need to interact with the app and the features she might need within the task flow.

Ava's Storyboard

TASK FLOW

Aligning Design with Interactions

After selecting my chosen epics of “Obtaining information” and “Sharing Information” I created a task flow diagram while also considering my storyboard. This flow also creates a bonus benefit for Ava to save posts she sees for reference and view analytics on how well the post is reaching others.

An image showing the task flow diagram. Illustrating the steps needed to complete task

Primary Task Flow: Onboarding,  receiving information and sharing

PROTOTYPE

 

EXPLORING SOLUTIONS

Concept Sketching

Once I was clear on my task flow, I began to sketch out different ideas. Drawing inspiration from my UI BOARD to consider UI components and features. After exploring various screens, I refined my best ideas into solution Sketches that would be translated into wireframes.

A gif showing the stages of my sketching process
An image showing my chosen solution sketches

Solutions Sketches for radar app screens

GREYSCALE PROTOTYPE

Sketch to Screen

From my solution sketches to wireframes, I developed the first round of mid-fidelity grayscale prototypes. Allowing me to move into user testing to test the efficiency of components, layouts, information hierarchy and accessibility before injecting a visual identity.

An image showing Greyscale Prototype. Version 1

Version 1 of Mid-Fi Greyscale Prototype

TEST

 

USABILITY TESTS

Gathering Feedback

Throughout my process, I conducted two rounds of usability tests on ten different individuals to obtain feedback. Making alterations to the design after each round to improve the user experience. The users were asked to complete a set of five tasks which helped me observe how they interacted with the app to see where there were areas for improvement.

While there were not any major usability issues. Hearing feedback and observing the users I noted a few insights to continually improve the app. These were taken and put into a Design Prioritization Matrix. Allowing me to access which insights would be a low effort to fix and bring the user the highest value.

Major Change #1: Text was too small throughout the app.

Throughout the testing process, I heard from some users that the text was too small. From others, I observed them leaning closer to the screen when reading. Increasing the text size was crucial for improving accessibility and readability.

Version 1

Image of the Home page from Version 1 prototype
An X showing where on the screen there was an opportunity for improvement
An X showing where on the screen there was an opportunity for improvement

Version 3

A screen grab showing Version 3 of the Homepage with improvements made
A check mark showing where on the screen there was a change
A check mark showing where on the screen there was a change

Major Change #2: Icons are not recognizable.

When asking participants to share the post to their social media accounts, many had trouble identifying the connected dots icon as the share feature. I realized after analyzing my user's notes that they were all IOS users and the icon I had initially used is more commonly seen on android devices. 

Version 1

Missing person profile screen version 1
An x showing where on the screen there is an opportunity for change
An x showing where on the screen there is an opportunity for change

Version 3

Missing person Profile screen with changes made
A check mark showing where on the screens changes were made

Major Change #3: Sharing beyond Social Media

Participants that aren't actively posting content on social media expressed that they wouldn't normally share to their accounts. They would instead prefer to send it as a text message to a select few.

Version 1

A pop up of the share feature screen in version 1 before changes are made
An x indicating where on the screen there is an opportunity for improvement

Version 3

A pop up of the share feature screen in version 3 after changes are made
A check mark showing where on the screen changes were made

These were the three major changes to the design, but I incorporated all the most critical feedback from users that would add to their experience. Finally landing on my final greyscale prototype, Version 3 

An image showing the mid fidelity screens of the radar app once changes were made in version 3

Version 3 of Mid-Fi Greyscale Prototype

REFINE

 

JOURNEY TO HI-FIDELITY

The Visual Identity

After completing my final revised greyscale prototype, I began the branding process. Establishing a clear visual identity for the radar app to ensure a consistent and cohesive digital product throughout. It was important to conceptualize the emotions I wanted users to feel when using the app so I established keywords to keep in mind throughout the process.

CALM

TRUST

HUMAN

SOCIAL

BRIGHT

FUTURISTIC

HOPEFUL

CONSIDERATE

HELPFUL

FRIENDLY

COLLABORATIVE

SYNERGIC

Using the keywords, I created a mood board, colour palette and typography system to ensure it was calm, futuristic, trusting and hopeful for users. While also making considerations to accessibility, striving to achieve AAA classification wherever possible according to the WCAG requirements.

An image showing images that inspired my moodboard
An image showing the fonts used within the app. Bastia  for logo and poppins as a primary

LOGO TYPEFACE

PRIMARY TYPEFACE

PRIMARY COLOURS

Image showing Colour swatches used within the app
Image showing Colour swatches used within the app
Image showing Colour swatches used within the app
Image showing Colour swatches used within the app

ACCESSIBILITY CLASSIFICATION

Image showing Accessibility classification for the colours chosen. Meeting AAA WCAG standards

Visual Identity

WORDMARK EXPLORATION

Establishing a Brand

Keeping my adjectives in mind, I began to think of brand name possibilities that would convey the purpose of the app and the emotions. I considered: Descry, Relink, Search Assist, Inven, Findem but ultimately decided on radar. The name represents a sense of awareness or perception. 

Ideating on various different types of styles and designs, I chose a bold serif to evoke a sense of trust. I knew it needed to be bold to allow for readability on a small scale, so I worked on making variations to the Bastia Typeface by Jen Wagner.​

An image showing the logo development process from sketch to digital

FINALIZED WORDMARK

Alternate Radar logo in colour
Radar logo in black on white
Primary Radar logo in colour

Primary Logo

Alternate logo

Black on White Logo

App icon for radar logo

App Icon

Radar logo in white on black

White on Black Logo

COMING TO LIFE

Hi-Fidelity Prototype

When moving out of greyscale and into High fidelity, I began to inject colour by considering the 60:30:10 rule. I maintained accessibility at the forefront of my design by ensuring that my colours had a high contrast striving to meet WCAG’s highest standard, and at least AA when AAA was not possible.

After obtaining feedback from my peers I finalized the design and created  a UI library based on the atomic design structure.

Helping Communities Find Missing People with Proximity Alert Technology.

Radar is the emergency alert IOS app that lets you know when someone nearby is reported missing. With Proximity Alert Technology and Real-Time updates, users can help in any way they can.

LOOKING AHEAD

SPREADING WORD

Building a Marketing Website

In order to market the radar app I created a marketing website for desktop and mobile. This establishes trust, promotes the product and educates future users on the key features of the app.

 

The marketing site was made to be responsive to Desktop and Mobile. I started the process with inspiration, sketches and mid-fidelity wireframes for user feedback. Upon approval, I applied the visual identity found and my UI library to remain consistent.

Mockup of the Radar app Marketing App

Marketing Website

MY TAKEAWAYS

Key Learnings

I need to let go of my perfectionist tendencies. I used to believe it was my greatest strength but through the time constraints of this project, it was also a weakness. Doing the first prototype I found myself trying to make it perfect, animated and extremely realistic. Sourcing out images, iOS interfaces and even creating a temporary logo. I realized during the process that I didn't need to overwork and burn myself out. This sense of overachieving is somewhat scraped away in the tech industry. It's like my educators say MVP! Done is better than perfect. 

I also learned that accessibility is soo important! However, realistically also very difficult to execute to the highest standards. I know with time and practice this will become much easier. But seeing how strict the standards are to achieve AAA is eye opening. I look at other apps and designs now with a fresh set of eyes and wonder, how accessible are they?

Image of a man crying while clapping. With the caption, "You the real mvp...Minimum Viable Product"

Shoutout Adrian Fypher for this meme that helped retain that term