keycrime
We redesigned the information architecture, user flows & interaction patterns of an operative and analytical web application of Predictive Policing.
It improved the workflow efficiency & effectiveness of police officers allowing them to fully focus on their investigative work.
This project was carried out while working at the design agency, THINGS, in Milan.
know more about THINGS
Project context
KeyCrime, a digital tool, was created ten years ago by a policeman, today CEO of the company, Mario Venturi.
It was developed to fight crime in the metropolitan area of Milan. it analyses different kind of crimes such as robbery, sexual violence, theft, homicide and scam.
The police department of Milan (Italy) approached us to redesign the entire digital tool with the aim of making it more user-friendly.
KeyCrime combines the investigation and analytical experience of police officers with complex algorithms to provide them with accurate crime forcasting.
video on how KeyCrime worksIndustry
Information ServicesMy role
🔍 The Researcher and 📱the UX/UI Designer.I collaborated with Police Officers, subject matter experts, Front & Back-end Developers, and Visual Designer.
Client
the challenge
Redesign the interaction, user experience and visual design of the existing web application
Our aim was to make all the product functionalities easy to use leading to an improvement in the workflow; which in turn would allow for the product to be scaled and used by police officers in different cities in the world.
the approach
Understanding the existing KeyCrime software and workflows
A complex software & technology, it was important to start by fully understanding the mission and reason behind why KeyCrime came into existence.
This followed a deep dive session to understand how the existing software worked both from the front and back-end side.
The old interface of the application is shown in the pictures below.
Understanding the functionalities and workflow of the police officers allowed us to map an information architecture of the current and future-state product.
The design of each screen took into account the hierarchy of information and functionalities according to the needs of the police officers to carry out their tasks.
Designing of wireframes
The forms were designed to allow for logical and quick insertion of data.
KeyCrime works by first entering already committed crime information into the system, such as time, date, place & type of crime.
This meant grouping related information in one card, showing all selection options if under 6, using field length as an affordance, using auto-complete for longer fields and correctly using radio buttons, dropdowns & checkboxes depending on the type of information that had to be inputted.
Other types of information such as facial appearance, body, clothes, accessories, weapons & vehicles can then be added for the criminal event.
The input of these type of data required a kind of interaction which had a quick navigation between the different body part categories.
Tags were used as interaction design elements to simplify the experience of first inserting high level information
Then showing the contingent section of the form to insert more detailed information with clear communication of the next step the user has to take.
Different colours were used to show the different states of tags such as empty, selected & filled.
Media gallery is a key part of KeyCrime product. Police officers upload images and videos from the crime event into the system to see, analyse and identify different elements for clues/evidence.
To meet this requirement, a custom tagging interaction was designed;
where they had to choose the element to identify (e.g. red cap) and then the “red cap” tag can be added to parts of the image and video they click on.
After wireframes of key screens were finalised, the visual language was defined.
2 concepts for the look & feel of the product were made; dark and light.
The light theme was chosen as it made the insertion of data fields, scannability of information and visualisation of data easier on the eye.
Speech to text input of information & review
In order to predict behavior of criminals, KeyCrime collects data from reports as well as from interviews designed by psychologists.
In order to make this process seamless and natural, voice recognition was used so that witness interviews could be automatically converted from speech to text.
This functionality sped up the process and reduced the chance of human error that used to occur while listening, and typing the information they heard.
We went one step beyond by designing a user experience where keywords in the interview were detected and auto-filled directly into the forms.
The design then gave the officers the ability to accept the automatically filled information with a single click.
We further designed a system that suggests officers behavioural questions to ask based on the conversation flow it hears between them & witness.
Overall this UX and interaction design saved the officer time and mental effort allowing to focus on other things related to the interview.
Designing of search results and map visualisations
Keycrime’s strategic partnership with IBM watson for its AI capabilities has enabled efficient & reliable analysis of all the data in the database.
The software formulates links between different events and data sets to help link crimes and identify criminal series.
To allow officers to do this effectively, the search results were made up of tabs that grouped information into categories allowing for large amount of information to be concisely represented and easily accessible.
A custom method was designed to facilitate the comparison of the different search results. By changing the tabs or scrolling down in any of the search result; the same thing is seen on all other search results. This interaction made it quick to analyse and compare between events at a glance.
Finally, we made a 90 second explanation video about KeyCrime which could be shown to police agencies of other cities and potential investors.
We started by first listing down the main functionalities and values we had to communicate in this video.
This was followed by making rough sketches of the frames in the storyboard and writing voice over script.
Inspiration research regarding the visual style of the video and illustrations was then made.
Finally, the rough sketches were illustrated and all the scenes were animated.
the outcome
We successfully improved the usability of the KeyCrime web application enhancing the workflow of the police officers so that they can fully focus on the investigation and predict when, where and how the criminal is likely to hit next.
The user experience of the application was completely redesigned to make it easy to organise the huge amount of criminal event data in a easy-to-consult database.
The simplified Interface allowed for easy usage of the various features of the application such as quick input different types of information & tagging of Video/Photo & Documents and and optimal navigability to access different sections and details of the application.
In certain sections of the application custom interactions were designed to meet the specific needs of the police officers to do their job effectively and efficiently.
Finally, we also made sure that the newly designed application had a short learning curve so that it can be easily adopted by the current police forces in Milan and in other cities globally.
Visit keycrime.com to find out more.
Thank you & keep designing user-friendly digital products!💪📈
