Flare: Simplifying Crime Visualization for University Students
Where: Treehacks
Timeline: 1 Day
Achievements: Category Winner
Treehacks
I spent this past weekend with a few of my friends that decided to form a last minute team for Stanford’s annual hackathon, Treehacks. We tackled the safety and awareness verticals. After lots of design, code, and snacks, we combined crime and spacial data to create Flare — a mobile app that helps students navigate their university communities by mapping out crime hotspots around campus.
Team
Developers: Tim Wong, Kyle Chua, Yunji Lee
Design: Kyle Kawaguchi
Background
University Park, the home of USC, has one of the highest property crime rates in all of Los Angeles, ranking 8th out of 209 neighborhoods. It is nearly impossible to walk more than a block around campus without spotting the remnants of a stolen bike. Thousands of unassuming students across the nation fall victim to crime simply for being in the wrong place at the wrong time.
Crime pockets can arise within specific areas due to geographical factors (such as terrain, lighting, police patrol schedules) and Flare helps students identify these areas. Flare shows students that sometimes it’s not always worth it to take a shortcut through an alleyway, or to park farther from a destination to get free parking.
Currently, Flare provides crime mapping services to four college campuses in the Los Angeles area: USC, UCLA, CSUN, and CSULA.
Although other crime mapping solutions exist, they fall into one of two categories: 1) report-by-report crime maps, with information-dense, yet extremely cluttered interfaces, or 2) neighborhood-generalizing maps used to inform real estate investors or encourage sales of home security systems.
Flare combines the best of both worlds. Intuitive design that clearly maps out crime data without sacrificing transparency, all packaged in a mobile application focused on usability and simplicity.
How We Built It
Flare was built as an iOS app using Xcode and Swift. We used Esri’s ArcGIS Runtime SDK for iOS to display the maps of college campus neighborhoods. In order to get our crime statistics (time, location, description, etc.) we used the LA Times’ crime maps. We had to do some front-end processing magic in order to use their data, because not only is their API not public, their JSON isn’t returned as a string but rather a JS object encoded as a string. This meant that no JSON parser could parse their json file, because it wasn’t actually a legitimate JSON object. To get around that we did some magic with Swift’s JSContext class by hard coding a js function, calling it using Swift’s JS engine and then getting the object returned as an array of objects. We then had to map this to a JSON array and then from there decode them into our Crime models.
After we were able to get the data from LA times, the rest was fairly straightforward. We found the neighborhoods containing and surrounding the schools we chose for this demo — USC, UCLA, CSULA, CSUN — and then loaded those crime statistics on launch. We also used Apple’s location services to detect the real-time threat level based of the user using crime statistics of that month in order to convey to the user what type of danger they are in or if they should be worried at all.
Design Decisions
As the main designer on the team, this experience was invaluable. Working against the clock on such a tight sprint forced the team to be scrappy and make every second and task count. It helped tremendously that we were all in sync and had fluid communication, allowing us to make informed decisions on what features to prioritize when building our product.
Visual System
Before creating the user interface, I created a visual language to systemize my design decisions. I wanted the user to feel aware, informed, and to be able to clearly visualize trends in crime frequency and danger zones.
Shape Explorations
To indicate dangerous areas, I explored representing radiuses around recent crimes as hexagons and circles. I wanted to compare which shape would allow users to visualize the most dangerous areas in the most intuitive way. Initially, I thought hexagons would look the most uniform, especially in crime dense areas, where I thought too many circles might overcrowd the interface and overwhelm the user. Ultimately, circle crime radiuses are the easiest to understand for new users, and make the most sense logically, as the edges of each danger zone is equidistant from the epicenter.
Cognitive Associations
At the top of the heat map screen, a status bar indicates to the user the level of threat that they are in based on their approximate distance to crime zones. I created three icons to indicate when the user is safe, should take caution, and is in danger. These icons are modeled after common cognitive associations that residents of the United States have in relation to navigation, traffic, and space. With more time, I would animate the organic shapes within these icons to make them more prominent and appealing to the eye.
Crime Pins
In the interface, crimes are displayed through a color system. I used the same associations as above to select red as the color indicating the most severe crimes (violent crimes), while yellow pins represent less severe crimes (burglary, theft, etc.)
To communicate recency, radiuses slowly decrease in size as time from the incident passes.
Logo
When designing the logo, I wanted to create an icon that would tie the brand together while embodying the overall user experience. After dozens of iterations, I created a location pin with flame imagery. Throughout all iterations, it was a goal of mine to incorporate the hexagon atom element that I implemented in the user interface to represent crime.
Additional Features and Next Steps
Since Flare is meant to provide real time crime alerts to students, we have also integrated push notifications that alert students when they are entering dangerous areas.
To expand upon the project, we are looking to partner with universities to access campus crime data to make our product even more informative. We are also looking to create a feature that allows users to navigate based on the safest route to their destination.
