City of Oakland
An UI case study to take note of complaints about the misconduct of police forces over citizens.
Explore
Services
User Experience Design OutSystems
User Interface Design OutSystems
Responsive Interface Design
Brand Interface Styleguide
Front-End Development OutSystems
Deliverables
Live Styleguide
Sitemaps
Hight Fidelity Mockups
Interactive Prototypes
Responsive Front-End
Client
City of Oakland
Project Name
CPRA - Community Police Review Agency
Project Explanation
CPRA is the designation for Community Police Review Agency. This entity was created to take note of complaints about the abuse and misconduct of police forces over citizens in the city of Oakland. To assist this agency, both in collecting complaints and in resolving these cases, the City of Oakland has decided to launch a digital platform, which would allow the citizens of Oakland to report incidents of this nature through any device that connects to the internet. On the other hand, this platform allows the delegation of work, detection of behavioral patterns, the sharing of information and documents in a more efficient way among researchers, supervisors and other Internal Affairs positions. In short, the idea behind this platform, allows to revolutionize the way of working of the CPRA, as well as facilitate the notification of police incidents in a safe and anonymous way for the population.
Product
CPRA platform contains two main areas, one external for the Oakland citizens and other internal for the CPRA staff to work. his platform aims to be a helpful tool of communication between the citizens and the authorities in a safe way. This tool also helps CPRA staff to get access to the all data of these incidents, to reach the best outcome and apply justice.
Challenge
Because this application has social implications, the complaint area it must have to be very accessible over the internet through a large type of devices, such laptops, tablets or smartphones. For that reason, it was mandatory and crucial to create a responsive and an intuitive interface for CPRA. To conceive this application we had to consider three components that must be deliver in the final product: "1. Allows the public unprecedented ability to file and track complaints of police misconduct online via phone, tablet or computer. 2. Provides a case management infrastructure so intake and investigatory staff have a centralized location to build and store electronic case files, and supervisors can track the progress of investigations as well as staff workloads and workflow. 3. Provides back-office functionality to perform advanced analytics on data related to investigations, allowing CPRA staff to track patterns of complaints and investigatory details, and to create the flexibility to change the functionality of the system as the needs of the CRPA change.”* *Quoted in City of Oakland, Friday, May 11, 2018 | Press Release
Research and Exploration
Through analysis of the project requirements, research and exploration phases were developed, understanding how the pages could exist and how they relate to each other.
Sitemap
Through a sitemap begins the understanding how the navigation structure and how many pages are necessary to create. This process is fundamental to know the depth of the project and is an excellent way to put all the team aligned in the work that is taking place.
Styleguide
We established a styleguide to keep the visual color on the interface to be used by the user across the various screens.
Typography
Iconography
Colors
British Racing Green
R: 0
G: 76
B: 13
Deep Harlequin
R: 35
G: 122
B: 2
Eclipse
R: 64
G: 64
B: 64
White Smoke
R: 241
G: 241
B: 241
Illustrations
To help in the communication of some functionalities and to be more intuitive to the user, some illustrations were drawn.
The Final User Interface
Some screens for the internal and external users
