Still in the works, I will complete the project creation process as soon as possible.

Police dashboard to manage complaints

Police dashboard to manage complaints

Police dashboard to manage complaints

About The Company

About The Company

The police are a body of officers representing the civil authority of the government. The police are responsible for maintaining the order and security of the government and society, enforcing the law, and preventing, screening, and investigating criminal activities under criminal and civil law.

The police are a body of officers representing the civil authority of the government. The police are responsible for maintaining the order and security of the government and society, enforcing the law, and preventing, screening, and investigating criminal activities under criminal and civil law.

My Role

UX Designer

UX Designer

Year

2021-2022

2021-2022

Tools Usage

Figma

Figma

01

01

Creative Team

Creative Team

We are a creative team consisting of a Creative Lead, UX Designer and UI Designer responsible for creating great user experiences. We work together to understand user and business needs, then design and build interfaces that are intuitive, engaging, and easy to use.

We are a creative team consisting of a Creative Lead, UX Designer and UI Designer responsible for creating great user experiences. We work together to understand user and business needs, then design and build interfaces that are intuitive, engaging, and easy to use.

Joshua Aditiya

Creative lead

Joshua Aditiya

Creative lead

Joshua Aditiya

Creative lead

Agni Fauzan

UIUX Designer

Agni Fauzan

UIUX Designer

Agni Fauzan

UIUX Designer

02

02

Objective Project

Objective Project

Create an internal police dashboard to manage Indonesian people's complaints about the performance of the police with a good user interface and user experience by applying dark mode and light mode themes

Create an internal police dashboard to manage Indonesian people's complaints about the performance of the police with a good user interface and user experience by applying dark mode and light mode themes

03

03

Problem

Problem

  • The government often receives various complaints from the public, but there is no clear visualization of what types of complaints are most frequently filed, for example related to corruption, public services, health, or education.

  • Complaints about government performance can vary by region. The government needs a better understanding of which regions report the most complaints or dissatisfaction.

  • The government may not have a clear picture of which sectors (e.g. education, health, infrastructure) receive the most complaints from the public.

  • Not all groups of people file complaints in equal numbers. The government may not know the demographic profile (age, occupation, education) of those who complain the most.

    Translated with DeepL.com (free version)

04

04

Design Process

Design Process

Design process is an iterative and flexible process. This process can be adjusted based on product type, product complexity, budget, time and resources to produce the optimal design. The following is the UIUX design process when build the insurance BCALIFE Application.

Design process is an iterative and flexible process. This process can be adjusted based on product type, product complexity, budget, time and resources to produce the optimal design. The following is the UIUX design process when build the insurance BCALIFE Application.

Discovery

Discovery

  1. Understand Objectives

    • Collaborate with Polri stakeholders to understand the specific goals and operational objectives, considering the importance of visual preferences for both dark and light environments.

    • Conduct interviews with Polri personnel to understand their preferences regarding dashboard readability in different lighting conditions.

  1. Understand Objectives

    • Collaborate with Polri stakeholders to understand the specific goals and operational objectives, considering the importance of visual preferences for both dark and light environments.

    • Conduct interviews with Polri personnel to understand their preferences regarding dashboard readability in different lighting conditions.

GAMBARAN UMUM SYSTEM

  1. System monitoring mengumpulkan dan mengolah data dari konten di social media, media online (suara pembaca) yang berupa percakapan terkait topik pelayanan publik polri

  2. Sistem dilengkapi dengan wadah untuk menampung data hasil survei nasional ataupin survei mandiri yang dilakukan tiap daerah

  3. System dapat memetakan penilaian publikterhadap pelayanan polri ke masing masing provinsi dan kota/kabupaten

  4. System dapat memiliki fitur yang dapat mengatir parameter penilaian, pembobotan masing masing submer data dan mengolah data secara otomatis dan teal-tima

  5. System kemudian memvisualisasikan hasil penilaian dalam satu dashboard geomap

  1. System monitoring mengumpulkan dan mengolah data dari konten di social media, media online (suara pembaca) yang berupa percakapan terkait topik pelayanan publik polri

  2. Sistem dilengkapi dengan wadah untuk menampung data hasil survei nasional ataupin survei mandiri yang dilakukan tiap daerah

  3. System dapat memetakan penilaian publikterhadap pelayanan polri ke masing masing provinsi dan kota/kabupaten

  4. System dapat memiliki fitur yang dapat mengatir parameter penilaian, pembobotan masing masing submer data dan mengolah data secara otomatis dan teal-tima

  5. System kemudian memvisualisasikan hasil penilaian dalam satu dashboard geomap

USER DASHBOARD

1

Autentication

  1. Login System

  2. Forgot password

  3. register form

  1. Login System

  2. Forgot password

  3. register form

2

Data Visualization

  1. Chart

  2. Call Saved Visual Template

  3. Realtime notification

  4. Auto refresh

  5. List

  6. Detailed drill-down

  7. Theme (dark-light)

  8. Responsive layout resolution

  1. Chart

  2. Call Saved Visual Template

  3. Realtime notification

  4. Auto refresh

  5. List

  6. Detailed drill-down

  7. Theme (dark-light)

  8. Responsive layout resolution

CMS DASHBOARD CONFIGURATION

1

Autentication

  1. User registration / Management form

  2. Group Registration/Management Form

  3. Role Management Form

  4. Role Assignment Form

  1. User registration / Management form

  2. Group Registration/Management Form

  3. Role Management Form

  4. Role Assignment Form

2

Data Visualization

  1. Visualization Template Designer

  2. Color Theme Designer

  3. Drag & drop visualization (Custom color, chart, list, image, custom text)

  4. Data drill-down designer

  1. Visualization Template Designer

  2. Color Theme Designer

  3. Drag & drop visualization (Custom color, chart, list, image, custom text)

  4. Data drill-down designer

3

Data Connect

  1. Connect visual with data (via API) configuration/management

  2. Auto-refresh management

  3. Realtime notification management

  1. Connect visual with data (via API) configuration/management

  2. Auto-refresh management

  3. Realtime notification management

CMS SPECIFICATIONS

1

Performance specifications

  1. Can filter by time period

  2. Can filter by list of police stations

  3. Can filter by list of police stations

  4. Can filter by data source

  5. Can select the list of matrices to be displayed

  6. Can adjust the position of graphs, maps and text

  7. Can fill in the text on the title panel of the graph, map and text

  8. Can choose the template and layout you want to create

2

Design system specifications

  1. Has a dashboard interface with fields for the start and end time of the data period.

  2. Has a list of police stations that can be selected.

  3. Has a list of police stations that can be selected.

  4. Has a list of data sources that can be selected.

  5. Has a list of data matrices that can be selected.

  6. Has a preview display according to the selected matrix.

DATA DASHBOARD

DATA DASHBOARD

1

Data jenis kelamin

>> Pie Chart & Bar Chart

  1. Laki laki

  2. Perempuan

2

Data Pekerjaan

>> Pie Chart & Progress Bar

  1. Karyawan swasta

  2. Ibu Rumah Tangga

  3. Wiraswasta

  4. Pelajar/mahasiswa

  5. PNS/ASN

  6. Belum bekerja

  7. Professional (dokter, pengusaha dsb)

  8. Karyawan BUMN/BUMD

3

Data Usia

>> Bar chart

  1. Generasi Z (1997 - 2012)

  2. Generasi Milenial (1981 - 1996)

  3. Generasi X (1965 - 1980)

  4. Generasi Boomers (1946 - 1964)

4

Data SES

>> Progress Bar

  1. SES A (Penghasilan > 6 juta)

  2. SES B (Penghasilan 4 - 6 juta)

  3. SES C (Pebghasilan < 4 juta)

Create UI Dashboard

Create UI Dashboard

Lorem ipsum dolor sit amet consectetur. Mi nibh congue sapien at facilisi non auctor. Id scelerisque integer dictum a ipsum feugiat molestie ornare eget. Mi ultricies ultricies gravida ante vitae lectus integer odio. Neque eget viverra massa magna lacinia aliquet ac nunc. Egestas.

Lorem ipsum dolor sit amet consectetur. Mi nibh congue sapien at facilisi non auctor. Id scelerisque integer dictum a ipsum feugiat molestie ornare eget. Mi ultricies ultricies gravida ante vitae lectus integer odio. Neque eget viverra massa magna lacinia aliquet ac nunc. Egestas.

  1. Theme Switching Mechanism:

    • Implement a user-friendly mechanism to switch between dark and light modes.

    • Consider placing the switch in an easily accessible location.

  2. Adaptive Typography:

    • Optimize typography for both modes, ensuring readability without causing eye strain.

    • Adjust font sizes and weights as needed for each mode.

  3. Contrast and Visibility:

    • Ensure sufficient contrast for text and graphical elements in both dark and light modes.

    • Test the visibility of important information under various lighting conditions.

  4. Dynamic Element Styling:

    • Design dynamic styles for interactive elements, ensuring a smooth transition between modes without

      compromising usability.

  1. Theme Switching Mechanism:

    • Implement a user-friendly mechanism to switch between dark and light modes.

    • Consider placing the switch in an easily accessible location.

  2. Adaptive Typography:

    • Optimize typography for both modes, ensuring readability without causing eye strain.

    • Adjust font sizes and weights as needed for each mode.

  3. Contrast and Visibility:

    • Ensure sufficient contrast for text and graphical elements in both dark and light modes.

    • Test the visibility of important information under various lighting conditions.

  4. Dynamic Element Styling:

    • Design dynamic styles for interactive elements, ensuring a smooth transition between modes without

      compromising usability.

LIGHT MODE

LIGHT MODE

DARK MODE

DARK MODE

04

04

Final Solution

Final Solution

  • Categorical Analysis: Use data visualization tools (e.g., bar charts, pie charts) to show complaint types, highlighting which areas (like health or education) are most frequently reported. This visual clarity can help prioritize sectors that need immediate attention.

  • Geographic Heatmaps: Integrate a geographic information system (GIS) to create heatmaps, visualizing complaint density by region. This allows the government to identify hotspots of public dissatisfaction and target interventions regionally.

  • Demographic Insights: Break down complaints by demographic data (age, occupation, education), enabling analysis of which groups are most active in reporting issues. This helps understand demographic disparities and engage underserved groups.

EST. 2024

JAKARTA, INDONESIA

CRAFTING THE FUTURE OF

PRODUCT DESIGN

EST. 2024

JAKARTA, INDONESIA

CRAFTING THE FUTURE OF

PRODUCT DESIGN

CRAFTING THE FUTURE OF

PRODUCT DESIGN