City of Oakland

An UI case study to take note of complaints about the misconduct of police forces over citizens.


City of Oakland Portal on Devices by Mediaweb


User Experience Design OutSystems
User Interface Design OutSystems
Responsive Interface Design
Brand Interface Styleguide
Front-End Development OutSystems


Live Styleguide
Hight Fidelity Mockups
Interactive Prototypes
Responsive Front-End


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.




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.


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.

City of Oakland Portal Wireframe by Mediaweb
City of Oakland Portal Wireframe by Mediaweb


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.

City of Oakland Platform Sitemap


We established a styleguide to keep the visual color on the interface to be used by the user across the various screens.


City of Oakland Portal Typography


City of Oakland Portal Iconography


British Racing Green

R: 0

G: 76

B: 13

Deep Harlequin

R: 35

G: 122

B: 2


R: 64

G: 64

B: 64

White Smoke

R: 241

G: 241

B: 241


To help in the communication of some functionalities and to be more intuitive to the user, some illustrations were drawn.

  • City of Oakland Portal Illustration
  • City of Oakland Portal Illustration
  • City of Oakland Portal Illustration
Testimonials Image
  • Tomé Ferreira


    “It was an interesting project to develop because of the social impact of this platform. This subject compels us to reflect on the importance of interfaces, our designs and the experiences provided by them. “



The Final User Interface

Some screens for the internal and external users

  • City Of Oakland Portal by Mediaweb