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
Platform:
iOS Mobile App
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 relating it back to 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...
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
Design Thinking Methodology with a Human Centered Design approach
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.
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 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
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.
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.
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.
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.
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.
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 assess 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
Version 3
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
Version 3
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
Version 3
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
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.
LOGO TYPEFACE
PRIMARY TYPEFACE
PRIMARY COLOURS
ACCESSIBILITY CLASSIFICATION
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.
FINALIZED WORDMARK
Primary Logo
Alternate logo
Black on White Logo
App Icon
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.
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.
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?
Shoutout Adrian Fypher for this meme that helped retain that term
Piqued your Interest?
Check out my other projects
