Jaga Id It Blueprint - Final - 1

JAGA.
ID Platform Development
Blueprint
Komisi Pemberantasan Korupsi (KPK)
Author : Frank Valensco
Creation Date : November 30, 2020
Last Updated : March 09, 2021
Version :1
Approvals:
Fransisca Silalahi – GIZ TTD : Date :
Hasan Faiza – GIZ TTD : Date :
Ursula Rosyana Garini – KPK TTD : Date :
Frank Valensco – Apergu TTD : Date :
30 Nov 2020
© 2021, Apergu Solutions. All right reserved. This is a confidential document. Any copying, redistribution, or retransmission of any part of this
document without express written consent of PT. Solusi Paripurna Indonesia is prohibited.
Document Control
Change Record
Date Author Version Change Reference
30 Nov 2020 Frank Valensco V1 No Reference

16 Feb 2021 Frank Valensco V2 Inputs from Progress Blueprint
Development Meeting with GIZ
09 Mar 2021 Frank Valensco V3 Inputs from Final Draft Blueprint
Meeting with GIZ and KPK
Reviewers
Name Position
Ursula Rosyana Garini KPK Key User
Hasan Faiza Principal Advisor GIZ APCC

Metta Yanti Principal Advisor GIZ APCC
Distribution
Position Name Copy
Executive Summary
The purpose of preparing the Blueprint document is to provide the latest design solutions
offered in the development of the JAGA.ID platform.
This document will be the basis or reference for carrying out platform development in terms
of UI / UX design, feature development process, and configuration of each related
component. The JAGA.ID platform development blueprint document will cover several
things including, comparison of existing conditions with the future platform, timeline for
platform development, UI / UX Design guidelines, technical architecture for JAGA.ID
platform development, to the development log process.
Table of Content
Document Control .................................................................................................................... 2
Executive Summary ................................................................................................................. 3
Table of Content ...................................................................................................................... 4
Scope ........................................................................................................................................ 5
Catalog Blueprint ..................................................................................................................... 5
JAGA-01: JAGA.ID Overview and Development Timeline ..................................................... 7
JAGA-02: JAGA.ID Platform Development Architecture ..................................................... 12
JAGA-03: UI / UX Guidelines ................................................................................................. 18
JAGA-04: Previous and Current Design ................................................................................ 54
JAGA-05: Future Recommendation ....................................................................................154
JAGA-06: Development Log ................................................................................................178
Scope
This document describes the development of the JAGA.ID platform. The scope of the
module includes Regional Window, Sectoral, Discussion, JAGA News, National Strategy,
Monitoring Research and Development, SPI.
The entire module is developed based on the results of discussions with interested parties
and is related to the related modules. Each module has a design, features, and information
output that matches its module designation. In general, the platform development process
set out in the blueprint document will cover:
• Project Timeline
• JAGA.ID Platform Development Architecture
• Previous and Current Design
• Development Log (Development and Bug Fixes)
• UI / UX Design guideline
The platform development process will be divided into 2 major phases, namely the first
phase for the overall UI / UX design of the module and the second phase for module
development based on the agreed UI / UX. Each phase will have a log (documentation) of
technical progress which will also be included in this blueprint document.
Catalog Blueprint
ID Name Reference
JAGA-01 Project Timeline Schedule UI / UX design for all modules in JAGA.ID and
schedule development platform
JAGA -02 JAGA.ID Platform Development Mind-map platform development JAGA.ID
Development
Architecture
JAGA -03 UI / UX Guidelines End-to-end features for creating simple, intuitive and good
user experiences for web and mobile platform
JAGA -04 Previous and Comparison of existing JAGA.ID features, designs with
Current Design JAGA.ID's future concept based on UI/UX design and user
journey map.
JAGA -05 Development Log Detailed documentation in the form of a development log and
bug fixes log
JAGA-01: JAGA.ID Overview and Development Plan
JAGA.ID Overview
JAGA.ID is a public information portal on corruption prevention initiated by the Corruption

Eradication Commission to encourage Participation, Accountability, Response and
Transparency from the Government and Society under the name Indonesian Corruption
Prevention Network (JAGA.ID).
In 2016-2018, the https://jaga.id/ link leads to the official JAGA website which displays
information and discussions related to the public service sector such as education, health,
villages and licensing. Along with the development of the mobile version of JAGA, the
JAGA.ID page was then optimized with the addition of information about the corruption
prevention application belonging to the KPK which is summarized in the "Regional Window"
Menu. Not only Jendela Daerah, JAGA.ID also summarizes applications belonging to the
National Corruption Prevention Team, which is a joint team of 5 (five) Ministries / Agencies
(Presidential Staff Office, Ministry of Home Affairs, Ministry of State Apparatus
Empowerment and Bureaucratic Reform, Ministry of Development Planning National /
National Development Planning Agency, and the Corruption Eradication Commission),
named "National Corruption Prevention Strategy" (Stranas PK).
Until now, JAGA.ID website is a platform that provides information related to the progress
of improving governance in Jendela Daerah, National Strategy for Corruption Prevention,
Gratification Report, State Assets Report, and Information and Data on 7 (seven) public
service sectors. Not only obtaining information, but public can exchange ideas and
information on the discussion to encourage participations.
JAGA.ID mission is to encourage the creation of Open Government & Empowering Citizen
ecosystem between government institutions as information providers, and public as
information recipient, through 4 values: Participation, Accountability, Responsiveness,
Transparency.
JAGA.ID main goals are: (1) integrated Corruption Prevention information system, (2)
holsitic information of Corruption Prevention for users, (3) enrich knowledge of users
related to public services. Thus focus of optimalization consists of JAGA.ID as:
a) an integrated data pool; centralization of information on corruption prevention

across internal directorates,
b) instant prevention programme report; acting as reference for internal stakeholders

when conducting monitoring activities,
c) one stop information portal; information accessible for public related to corruption
prevention
JAGA.ID Development Methodology
Agile, a type of project management that focuses on teamwork and flexibility. Agile is best
understood in terms of how it differs from more traditional methods for project
management. Traditional project management is characterized by a linear (step-by-step;
sequential) approach that usually has some or all of these broad steps: (1) Initiation
(starting the project), (2) Planning, (3) Execution, (4) Monitoring, (5) Completion. Instead of
being completed in the “Planning” step, requirements and solutions evolve throughout the
process through collaboration between self-organizing, cross-functional teams. Execution
of project work is done continuously throughout the life of the project. Agile methods
involve adaptive planning, evolutionary development, early delivery, and continuous
improvement. Agile encourages rapid and flexible response to change. In summary, Agile
is a method of project management that focuses on dividing tasks into short phases of
work, with frequent reviews of the project and adaption of planning mid-execution as
needed. An Agile approach is flexible and less rigid than some other methods of project
management.
Image 1.1 Agile Methodology
Given the multitude of requirements and modules that need to be designed and developed
in a short period of time, an agile development and implementation methodology is
appropriate for JAGA.ID
Agile Tools:
a) Scrum; advises that each sprint begins with a brief planning meeting and closes
with a review. Scrum is a management and control process that cuts through
complexity and is a simple framework for effective team collaboration. By focusing
on what each person accomplished yesterday and will accomplish today, the team
gains an excellent understanding of what work has been done and what work
remains to be done,
b) Sprints; collections of work confned to a regular, repeatable work cycle, known as a

sprint or iteration. The Scrum team works on very specifc and agreed-upon work
and nothing can be changed during the sprint.
c) Planning process; the most important document is the project charter/timeline

(PC). The PC should contain summary aspects of any other documents created and
reviewed in the initiation phase. Agile techniques (Agile) and, in some cases, Lean,
on the other hand, promote the following: Transparency, Frequent inspection,
8
Adaptation. In business models favoring transparency, everyone knows how the
project is progressing. The team members who touch the product or service
evaluate the process frequently and, based on the fndings, collaborate on
adjustments.
d) Execution; where piloting and testing are ongoing. A great deal of attention is paid
to the voice of the customer (VOC). Agile has the ability to adapt a project plan on
the fy to meet or exceed a customer expectation.
e) Monitoring, controling, and closing; developing data collection plan, communicate

frequently with key users and stakeholders, manage and track decisions or action
items.
JAGA.ID Development Timeline
In the context of implementing the JAGA.ID development platform, the project timeline is
important in project management planning. There are 2 timeline macros, namely the UI /
UX Design JAGA.ID timeline and the JAGA.ID development timeline.
The following is the UI / UX Design JAGA.ID project timeline, with updates as of March 9,
2021.
Plan Plan End Actual Start Actual End

Activity Description Duration Duration Access Platform Status
Start Date Data Date Date
UI/UX DEVELOPMENT JAGA.ID PLATFORM

Kick Off 10-Aug-20 10-Aug-20 1 10-Aug-20 10-Aug-20 1 Done
Research
Client Interview 11-Aug-20 17-Aug-20 5 11-Aug-20 17-Aug-20 5 Done
Users Survey 14-Aug-20 20-Aug-20 5 14-Aug-20 20-Aug-20 5 Done
Competitive UX Analysis 16-Aug-20 20-Aug-20 5 16-Aug-20 20-Aug-20 5 Done
Activity
UX Documentation & User Flows (Master 24-Aug-20 31-Aug-20 6 22-Aug-20 27-Aug-20 5 Done
Initial Wireframes (Master Page) 24-Aug-20 31-Aug-20 6 23-Aug-20 27-Aug-20 5 Done
Functional Design Prototypes 25-Aug-20 31-Aug-20 5 25-Aug-20 30-Aug-20 4 Done
Testing & Review 27-Aug-20 31-Aug-20 3 27-Aug-20 31-Aug-20 3 Done
Module Breakdown
Design System 1-Sep-20 3-Sep-20 3 1-Sep-20 6-Sep-20 4 Done
Home Page/ Beranda 3-Sep-20 6-Sep-20 2 3-Sep-20 6-Sep-20 2 Done
Jendela Daerah
Koordinasi Wilayah 7-Sep-20 9-Sep-20 3 7-Sep-20 10-Sep-20 4 Public and KLPD Web Done
Beranda 8-Sep-20 13-Sep-20 4 10-Sep-20 16-Sep-20 5 KLPD Web Done
Dashboard 8-Sep-20 13-Sep-20 4 10-Sep-20 15-Sep-20 4 KLPD Web Done
Keluhan Bansos 14-Sep-20 17-Sep-20 4 14-Sep-20 17-Sep-20 4 KLPD Web Done
SPI 15-Sep-20 21-Sep-20 5 17-Sep-20 24-Sep-20 6 KLPD Web Done
Gratifikasi 15-Sep-20 20-Sep-20 4 17-Sep-20 22-Sep-20 4 Public Web Done
Jejak Kasus 21-Sep-20 24-Sep-20 4 21-Sep-20 24-Sep-20 4 Public Web Done
SPI 24-Sep-20 30-Sep-20 5 24-Sep-20 4-Oct-20 7 Public and KLPD Web Done
Sektoral
Pendidikan 22-Sep-20 28-Sep-20 5 3-Oct-20 7-Oct-20 4 Public Mobile/Web Done
Bansos Covid 23-Sep-20 29-Sep-20 5 4-Oct-20 7-Oct-20 4 Public Mobile/Web Done
Desa 1-Oct-20 6-Oct-20 4 4-Oct-20 6-Oct-20 3 Public Mobile/Web Done
Fasilitas Kesehatan 1-Oct-20 7-Oct-20 5 4-Oct-20 8-Oct-20 5 Public Mobile/Web Done
Anggaran 13-Oct-20 18-Oct-20 4 13-Oct-20 14-Oct-20 2 Public Mobile/Web Done
Perizinan 14-Oct-20 19-Oct-20 4 14-Oct-20 18-Oct-20 3 Public Mobile/Web Done
Diskusi 20-Oct-20 27-Oct-20 6 20-Oct-20 27-Oct-20 6 Public Web/Mobile Done
Berita Jaga 23-Oct-20 2-Nov-20 7 23-Oct-20 29-Oct-20 5 Public Mobile/Web Done
Stranas
Capain Stranas 26-Oct-20 29-Oct-20 4 27-Oct-20 29-Oct-20 3 Public Web Done
Realisasi Instansi 27-Oct-20 2-Nov-20 5 28-Oct-20 3-Nov-20 5 Public Web Done
Dashboard 3-Nov-20 16-Nov-20 10 3-Nov-20 12-Nov-20 8 KLPD Web Done
Form Verifikasi 5-Nov-20 16-Nov-20 8 5-Nov-20 16-Nov-20 8 KLPD Web Done
Laporan 12-Nov-20 24-Nov-20 9 12-Nov-20 24-Nov-20 9 KLPD Web Done
Monitoring Litbang 14-Nov-20 26-Nov-20 10 14-Nov-20 25-Nov-20 9 Public Web Done
Penyelamatan Keuangan Negara 23-Nov-20 2-Dec-20 8 23-Nov-20 30-Nov-20 6 Public Web Done
Table 1.1 UI/UX Development Timeline
The activity description is a module and a submodule in accordance with the scope of
JAGA.ID development. In general, the realization of the UI / UX design implementation for
the agreed module and submodule scope is in accordance with the planning timeline. The
completion of the JAGA.ID UI / UX Design timeline also shows the start of the next timeline,
namely the development of JAGA.ID.
The details of the actual vs plan progress curve are as follows:
Graph 1.1 UI/UX Development Actual vs Plan Progress Curve
The JAGA.ID development timeline, which focuses on the back-end development process
based on the UI / UX that has been designed and is still in progress. The following is the
timeline and milestones that need to be achieved in the development process.
10
Table 1.2 Back-end Technical Development Timeline
11
JAGA-02: JAGA.ID Platform Development Architecture
The web mind-map is part of the JAGA.ID module architecture, so that the future
development of JAGA.iD ideas can be well organized. Another function is a classification
of information output tailored to each module.
Image 2.1 Mind-Map JAGA ID
The technical architecture of the database - backend - frontend, is illustrated in the

following chart:
13
Image 2.2 Technical Architecture JAGA ID
1. The database used is PostgreSQL, an open-source relational database software

that runs on the Linux platform and functions with objects as relational components
in the database management system. The advantages of PostgreSQL are, very
strong and reliable, easy recovery process, and lower maintenance costs and
manual effort, relational database management system (RDBMS)\
2. The backend uses the Phalcon tool as a PHP framework, a framework that
implements object-relational mapping (ORM) in C Language. In addition to PHP
development tools, integration with 3rd party is better using API (Application
Programming Interface), due to easy and fast configuration to implement. This API
integration is intended for collecting data sources or information intended as data
input in accordance with the existing module in JAGA.ID.
In facilitating public user access, the authentication feature through social media is
applied to JAGA.ID. The goal is that the script is open so that it is easy to implement
but does not leave high security functions.
3. Web and mobile front-end using QuasarVue and Apache Cordova. Quasar is a
JavaScript framework that can be used to develop single-page applications that can
combine a JavaScript program package with a single developed component.
QuasarVue is supported with multiplatform features covering all major browsers
such as Google Chrome, Firefox, IE11 / Edge, Safari, and Opera. This will provide
efficiency in terms of the development process.
14
Apache Cordova allows developers to build mobile applications using CSS3, HTML5
and JavaScript instead of using platform-specific APIs such as Java for Android,
Swift for iOS and C# for Windows Phone. With the same source code, Apache
Cordova can wrap applications so that they can run on many types of devices.
The module and submodule architecture developed in the JAGA.ID platform is as follows:
Module Submodule Feature
Window Area Regional • Outcome maps at the Provincial and

→ Name of District Head and Coordination District/City levels
Deputy Regional Head • Indicators and sub-indicators of 8 focus
→ List: e-SPI score, BPK’s areas
audit result, LAKIP’s • Regional achievement ranking
valuation • National and Regional achievement values
→ Pilkada’s administration • Search by Region
information • Information, publication, and contact
sections
• APBD graphics (nominal simplification)
• Report Export
• Data cut-off description
• Usage guide (js.intro)
Window Area LHKPN • Compliance map at Provincial and
District/City level
• LHKPN status report and download of
District Head, Secretary, Council
• Compliance trends per field
• LHKPN contents button (re-direct
elhkpn.kpk.go.id)
• Search by Region
• Information, publication, and contact
sections
• National and Regional compliance values
• Embed search engine e-Announcement
• LHKPN status report and download
optimization of District Head, Secretary,
Council
• Regional compliance ranking
• Optimization of compliance trends per area
• Increase in literacy about LHKPN
• LHKPN in the scope of the Ministry
• Usage Guide (js.intro)
• Report Export
Window Area Gratification • Map of distribution of provincial level
gratification reporting
• Recapitulation of Gratification reporting
• UPG contacts per Province, District/City
15
• Gratification reporting button (re-direct

gol.kpk.go.id)
• Information, publication, and contact
sections
• Increase in literacy about Gratification
• UPG contact update
• Recapitulation of Gratification reporting
update
• Gratification reporting trends
• Ministry Gratification
• Report Export
Window Area Case Trail • Map of the distribution of decisions on
corruption crimes handled by KPK
• Convict profile
• Search by Convict
• 2016-present case update
• Loot updates
• Auction information update
Sectoral Education • School List
• General Profile (Accreditation, Headmaster,
Number of Educators, Number of Students,
etc.)
• Teacher information, Subjects
• Map
• BOS Budget
• PIP Check
• Higher Education Module
• Education Dashboard
Village • Village List
• General Information (number of KK,
population)
• Village fund budget (Channeling and
Absorption)
• Guide
• Absorption detail/realization to project
description
• Profiles of village heads, experts, and village
assistants
Medical Facility •
Licensing •
16
Road •
Diskusi Discussion • Create Discussion
• Discussion List
• Filter by Theme
• Sorting
• Counter comment and like
• Share FB, TW, WA, Tele
• News thumbnail when sharing discussions
Berjaga Berjaga • Create News
• News List
• Filter by Theme
• Share FB, TW, WA, Tele
• Sorting
• Counter view, comment, like
• News thumbnail when sharing discussions
Stranas Stranas • Achievements of Stranas
• Agency Realization
• Dashboard
• Verification Form
• Report
Litbang KPK • Litbang Database’ Backend Input
recommendations • Search for Litbang Database
and Litbang • Workflow recommendation
database
Saving State Finances Rescue of State • Static page summary showing the total
Finance amount of state financial rescue performed
by the KPK
• Information content:
• Asset recovery in the scope of K / L and
BUMN, total assets and value
• Optimization of Regional Revenue, Trend of
increasing revenue
• Assets converted into Public Facilities and
Social Facilities (Total)
• List of R&D studies with recommendations
that save state finances
Table 2.1 Future Module and Submodule JAGA.ID
17
JAGA-03: UI / UX Guidelines
User Interface (UI) is the graphical layout of an application, while User Experience (UX) design is the process design teams use to create products that
provide meaningful and relevant experiences to users. This part of the document shows the list of contents in which is the UI and UX created for the
website and mobile application of JAGA.ID.
JAGA.ID future UI/UX is based on developments from Material Design, a design system created by Google to help teams build high-quality digital
experiences for Android, iOS, Flutter, and the web, uses more grid-based layouts, responsive animations and transitions, padding, and depth effects
such as lighting and shadows. It is also the primary design language of Android and Chrome OS. The main purpose of material design is creation of
new visual language that combines principles of good design with technical and scientific innovation.
Material Components are interactive building blocks for creating a user interface, and include a built-in states system to communicate focus, selection,
activation, error, hover, press, drag, and disabled states. Component libraries are available for Android, iOS, Flutter, and the web, which gives flexibility
for future design developments yet always giving the latest design look and feel.
Components cover a range of interface needs, including:
• Display: Placing and organizing content using components like cards, lists, and sheets.
• Navigation: Allowing users to move through the product using components like navigation drawers and tabs.
• Actions: Allowing users to perform tasks using components such as the floating action button.
• Input: Allowing users to enter information or make selections using components like text fields, chips, and selection controls.
• Communication: Alerting users to key information and messages using components such as snackbars, banners, and dialogs.
Theming is also the next essential step to match the look and feel of JAGA.ID brand, with built-in support and guidance for customizing colors,
typography styles, and corner shapes. The base color of future JAGA.ID UI/UX is extracted on the
1. original color logo of JAGA.ID,
2. original color logo of KPK,
19
© 2021, Apergu Solutions. All right reserved. This is a confidential document. Any copying, redistribution, or retransmission of any part of this document without express written consent of PT. Solusi Paripurna Indonesia is prohibited.
3. solid black color representing neutrality and bold.
4. JAGA.ID Brand Identity sugested by Strakom KPK
20
5. Discussion Appendix
The following are some discussion points that serve as a benchmark for UI/UIX work from KPK Team:
a) Regional Coordination is divided into 2 submenus, Regional Government and Ministries
b) Export data feature will be made per module
c) Display Model for Ministries and Government Agnecies uses logo
d) Simplify text appearance in Jendela Daerah module
e) Stranas PK will be part of main information in Jendela Daerah
f) Map feature will be made on Mobile application version
g) Adding Regional Information Summary section in Jendela Daerah
h) Feature of Cut-off data per year
i) Adding Numbering sequencial to table data
j) Navigation Link for search function
k) Request bold UI for every reporting button
21
l) Suggestion for LHKPN section, includes government agency grading which consists of 3 stages. Will store data into table and eliminate
total calculation.
m) Suggestion for “Gratifikasi”:
i. Modification in graph position, showing Total Summarization and trend
ii. Suggestion of photo deletion for simpler UI
n) Adding “Jejak Kasus Nasional” to main page
o) “Penyelamatan Keuangan negara” by region view (will be added in Jendela Daerah). Displaying format is in aggregate.
p) Adding a CTA to each submodule to increase users interest in forum.
i. Adding a CTA to the home page.
Example: CTA banner on the homepage
ii. Addition of CTA to each submodule
22
Example: CTA in the Regional Coordination sub-module
List of Contents
Components Patterns
Components are the intuitive building blocks Patterns are reusable combination that will be
for Design System used to guide solve common user problem
Foundations Color Typography

Represent brand and help to create Consist on our products fonts. Each fonts
consistency across product conveys appropriate sentiment.
Content Fonts Logos
23
Selected font to provide better experience to Our logo as a brand Identity of the products
communicate product content
Components
Components are the reusable building blocks of our design system. Each component meets a
specific interaction or UI need, and has been specifically created to work together to create
patterns and intuitive user experiences.
Avatar
An avatar is a visual representation of a user or entity.
A default image is displayed for avatars when a chosen source is

unavailable (for example, when there is a problem displaying the image
due to an error), or simply unspecified.
24
Button
The default form of a button, used for most cases. They are not
impactful enough to represent the primary action in a container.
Show how size of a button compare
The most commonly used button component. This button has

different appearances, as well as supported the existing dark
mode solution.
Buttons may include an icon before the text.
25
Checkbox
A checkbox is an input control that allows a user to select one or
more options from a number of choices.
Radio Button
A radio input allows people to select only one option from a number
of choices. Radio is generally displayed in a radio group.
26
Toggle
A toggle is used to view or switch between enabled or disabled
states.
Progress Bar
A progress tracker displays the steps and progress through a
journey.
27
Tabs
Tabs are used to organize content by grouping similar information on
the same page.
Text Field
A text field is an input that allows a user to write or edit text.
28
Modal Dialog
A modal dialog displays content that requires user interaction,
in a layer above the page.
Pagination
Pagination allows you to divide large amounts of content into
smaller chunks across multiple pages.
29
Dropdown
A dropdown item populates the dropdown menu with items. Every item should be inside
a dropdown item group.
Dropdown Checkbox
Use defaultSelected to make the item appear checked. The user may interact with the
item after mount.
30
Textfield
A text field is an input field that merchants can type into. It has a range of options and
supports several text formats including numbers.
Select
Select lets merchants choose one option from an options menu. Consider select when
you have 4 or more options, to avoid cluttering the interface.
31
Main Menu Navigation
Web navigation refers to the process of navigating through pages
Sub Menu Navigation Backend Main Navigation

Select lets merchants choose one When the main navigation is
option from an options menu. presented in a vertical menu on the
Consider select when you have 4 or left or right.
more options, to avoid cluttering the
interface.
32
Foundations Color
The following are primary colors and secondary colors along with their derivatives that can be used.
Typhography
Consist on our products fonts. Each fonts conveys approriate sentiment.
33
Content Font
Selected font to provide better experience to
communicate product content. Using Roboto
as product main font.
Logo
Our logo as a brand Identity of the products Main Logo
Negative Logo
34
Patterns
Patterns are reusable combinations of components that solve common user
problems. These best practice solutions help users achieve their goals and help
ensure consistency across experiences.
Banner
A banner is an entry point for users that focuses their attention on a large or impactful The benefits modal component is made up of the
update (for information on how we size first impressions see). The banner can be following elements :
followed by a series of spotlights to highlight changes and benefits at the right time 1. Illustration: Should be composed of metaphorical
and place. imagery that relates to the content or benefit (see
best practices below).
2. Title: A primary heading (h600). The title provides
a concise overview of the contents of the journey.
3. Message: The contents of the dialog. See content
guidelines below.
4. Actions: Contains a maximum of centred buttons.
A primary action and some sort of dismiss button.
The main action should be self-describing action
verbs ('Get started' instead of 'OK').
5. Blanket: Covers the content underneath the modal,
so that the focus is on the modal, and the content
beneath is not accidentally selected.
35
Message
A section message is used to alert users to a particular section of the screen.
36
Page Navigation
The page header is the first section people see before scrolling. It provides the core information users need when viewing the page.
Main Menu Navigation
Sub Menu Navigation

Used in Page:
Determine New Main Menu Navigation 1. Jendela Daerah Module
Content is different and has its own uniqueness 2. Pelayanan Publik Module
compared to the existing modules 3. Diskusi Module
4. Berita Jaga Module
Determine New Sub Menu Navigation 5. Tentang
As derivative information from a module. Information
objectives should relate to primary module
37
Toolbar Section Jendela Daerah
Used in Page:
The function used on the page window area to perform searches,
filters, as well as other menus in each module area window. 1. Koordinasi Wilayah
2. E-LHKPN
3. Gratifikasi
4. Jejak Kasus
5. SPI
6. Stranas PK
Distribution Map Jendela Daerah

Used in Page:
Displays data based on national and regional maps according to
search results performed on the toolbar section. 1. Koordinasi Wilayah
2. E-LHKPN
3. Gratifikasi
4. Jejak Kasus
5. SPI
6. Stranas PK
38
Chart
Serves to display data or values in the form of a diagram.
1. Bar Graph
Used in Page:
Function / Usability: 1. Jendela Daerah Summary (Kepatuhan e-
Used to display growth lhkpn)
data with a single value. 2. Gratifikasi (Status Gratifikasi)
3. Desa Detail (Tingkat kesejahteraan KK)
4. Universitas Detail (Anggaran BOPTN)
2. Bar Graph Comparison

Used in Page:
Function / Usability: 1. Jendela Daerah Summary (Data tanah
Used to display growth pemda)
data and compare value 2. Gratifikasi (penerimaan uang dan barang)
categories.
3. Stacked Bar Graph

Used in Page:
Function / Usability:
1. Stranas PK (Capaian Stranas PK)
Used to display growth
data as a percentage of
the Value category in a
data unit.
39
4. Line Graph
Used in Page:
1. E-LHKPN (Tren kepatuhan perbidang)
Presenting data in the form
2. Gratifikasi (Tren pelaporan gratifikasi
of trends or information nasional)
developments from time to
time.
5. Horizontal Bar Graph

Used in Page:
1. Koordinasi Wilayah Detail (Progress
Present growth or weight
indicator APBD)
data based on the most 2. Dashboard Pendidikan (Komponen dana
and lowest value. BOS)
3. Dashboard Desa
4. Dashboard Fasilitas Kesehatan
5. Detail Sekolah
6. Donut and pie graph

Used in Page:
Function / Usability: 1. Jendela Daerah Summary (Dashboard
Used to present data in Umum)
the form of a 2. Koordinasi Wilayah (Progres keberhasilan)
percentage. 3. Stranas PK (Fokus Stranas PK)
4. Detail Bansos (Usulan alokasi APBD)
5. Detail Fasilitas Kesehatan Rumah Sakit
(Detail ketersediaan kamar)
40
Table
Information of values like numbers that are used to substitute one variable.
1. Simple Table
Used in Page:
Function / Usability: 1. Koordinasi Wilayah (Peringkat instansi)
Used to present table 2. E-LHKPN (Peringkat instansi)
data based on a single 3. SPI (Peringkat instansi)
value.
2. Simple Line table

Used in Page:
1. Anggaran Profil Umum Koordinasi Wilayah
Used to present table
(Informasi belanja)
data based on one value,
that is, static data with
another.
41
3. Table fill grey
Function / Usability: Used in Page:
Used to present a 1. Anggaran Profil Umum Koordinasi Wilayah
(Perubahan APBD)
breakdown of data from
2. Perizinan Detail (Daftar perizinan)
values.
4. Table fill grey with filter and search

Used in Page:
1. Sekolah Detail
Used to present data
(Cari tenaga Pendidikan)
with single search.
2. Universitas Detail (Cari program studi)
42
5. Table matrix fill grey
Used in Page:
1. Desa Detail (Informasi penyaluran)
Used to show the
relationship between
two, three or four groups
of information.
43
Dashboard
A dashboard is a type of graphical user interface which often provides at-a-glance views of key performance indicators (KPIs) relevant to a particular
objective or business process.
1. Dashboard Jendela Daerah General Summary

Used in Page:
1. Jendela Daerah Summary
2. Dashboard Pelayanan Publik

Used in Page:
1. Pendidikan
2. Desa
3. Faskes
44
General Information Jendela Daerah
Used in Page:
Display general information for each module in the window area 1. Koordinasi Wilayah
2. E-LHKPN
3. Gratifikasi
4. Jejak Kasus
5. SPI
6. Stranas PK
Shortcut Diskusi
Used in Page:
Make it easier for users when entering one of jaga.id modules to do 1. Jendela Daerah Module
discussion without having to go to the discussion module 2. Pelayanan Publik Module
45
Card List View
Used in Page:
Displays data or information in the form of a card view 1. Home
2. Jejak Kasus
3. Pendidikan
4. Desa
5. Faskes
6. Perizinan
7. Bansos
8. Berita Jaga
Pop Up Profil Umum

Used in Page:
Information display when general profile button is opened
1. Profil Umum Jendela Daerah
Module
46
Pop Up Js.Intro
Used in Page:
Information that will exist and appear in each module and can be viewed 1. All Pages
back if you press the Js.Intro button
Pop Up Panduan Umum

Used in Page:
General guide view for users to learn about whatever in each submodule 1. Jendela Daerah Module
2. Pelayanan Publik Module
47
Pop Up Profile Information
Used in Page:
Displays personal information data 1. Jejak Kasus
Detail Information with Image

Used in Page:
Displays information with a wide image 1. Bansos Detail
2. Pendidikan Detail
3. Desa Detail
4. Faskes Detail
5. Perizinan Detail
48
Simple Card List View
Used in Page:
Displays data or information in the form of a card view 1. Rumah Sakit Detail
2. Universitas Detail
CTA
Used in Page:
Information banners that will appear in several corners of the page 1. Daerah Koordinasi Wilayah
Detail
2. Pelayanan Publik Module Detail
3. Tentang Jaga
4. Tentang KPK
5. Tentang Privacy Policy
49
Card View with Combination Filter and Tabs
Used in Page:
Displays information in the form of a card view based on sort and combination tabs 1. Diskusi Module
50
Large Card View
Used in Page:
Display card view with large images 1. Berita Jaga
Form
Used in Page:
Display when doing the input form 1. Login
2. E-LHKPN
51
Carousel
Used in Page:
Card view display with a slider 1. Berita Jaga Module
Video Embedded
Used in Page:
Videos contained in the body of the page 1. Berita Jaga Detail
2. Tentang Jaga
52
List View with Rich text
Used in Page:
Combination of simple list view with input in the form of rich text 1. Diskusi Detail
2. Berita Jaga Detail
Form with Image setup

Used in Page:
Display the input form with image settings 1. Profile
53
Three lines List view
Used in Page:
Displays information data in the form of 3 lines of text information 1. Pop Up Notification
54
JAGA-04: Previous and Current Design
The existing condition of JAGA.ID refers to the design and features that are currently
accessible to the public, both the general public and K / L / P / D. Meanwhile future (to-be)
is a design and feature that has been previously completed by UI / UX development based
on discussion and agreement with the user key per each module. The design for both
website and mobile application were made according to the new logo design and added
into it are some new features to better the UI / UX of the website and mobile application.
Future UI / UX will be the main reference in the next back-end development process.
Website Platform
Module Homepage
Submodule -
Section Header
Previous
Current
Remarks: Menu module is always placed at the top of web page, clean and simple UI/UIX
login feature, along with an extra banner below the scrolling header which can
be used to highlight information/news/update in accordance with the latest
national issues.
56
Module Homepage
Submodule -
Section JAGA News
Previous
Current
Remarks: A big scale window to highlight the headline news
57
Module Homepage
Submodule -
Section Public Services
Previous
Current
Remarks: Public Services section shows the latest update related education, village, and
other public services.
58
Module Homepage
Submodule -
Section Discussion
Previous
Current
Remarks: This section displays the discussion submitted to the website through
Discussion module.
59
Module Homepage
Submodule -
Section Footer
Previous
Current
Remarks: Footer color theme is adjusted with the new logo design
60
Module Jendela Daerah
Submodule Rangkuman Jendela Daerah
Section -
Current
61
Jendela Daerah (M) > Daerah / Kementerian > Rangkuman Jendela Daerah (SM) >
Dashboard Umum (SC) / Penyelamatan Keuangan (SC)
62
Jendela Daerah (M) > Daerah / Kementerian > Rangkuman Jendela Daerah (SM) >
Search: Cari Wilayah > Profil Umum (B)
63
Remarks: General Overview is an additional Feature under Jendela Daerah. It can be
filtered for National Level or Regional Level, then drills down the dashboard
information given. For each submodules in Jendela Daerah, user will be
directed to a pop-up introduction (js.intro) in a slider mode which generally will
inform users on how to use the submodules, how to read the data, also
overview information and it’s purpose. General information in a dashboard
view will be presented including Head and Deputy of Region, e-SPI score, BPK
audit results, and LAKIP Assessment. Information regarding of the general
election will also be presented, including Name of Candidate, LHKPN, and the
election schedule based on each region. This feature is a representative of
government transparency and opennes to public, also as a reference for
individuals to know specific data/information based on their region
64
Submodule Koordinasi Wilayah
Section -
Previous
65
Current
Jendela Daerah (M) > Daerah / Kementerian > Koordinasi Wilayah (SM) > Sebaran
Capaian (SC) / Program Keberhasilan (SC)
66
Jendela Daerah (M) > Daerah / Kementerian > Koordinasi Wilayah (SM) > Search: Cari
Wilayah > Profil Umum (B) > Penjelasan (SC)
Wilayah > Profil Umum (B) > Anggaran (SC)
67
68
69
Wilayah > Profil Umum (B) > Informasi Pemilu (SC)
70
Jendela Daerah (M) > Daerah / Kementerian > Koordinasi Wilayah (SM) > Diskusi (SC)
Remarks: The latest design will present a simpler and ease of reading, yet detailed
information. Ministries and government agencies will be separated for a better
user segmentation in viewing the information and data. For APBN and APBD
data view, pie Charts will be best used to inform percentages also
comparisons for income and expenditure, which can also be shown in National
level or detailed drill down on each region. In terms of Covid-19, budget
refocusing and allocation from the earlier budgeting version will also be
displayed to enhance public transparency. To further increase information
transparency to the public, cut off data date will be shown to inform the last
71
updated data. Reports will be made possible to be downloaded with a
generation of direct link

Submodule E-LHKPN
Section -
Previous
72
Current
Jendela Daerah (M) > Daerah / Kementerian > E-LHKPN (SM) > Sebaran E-LHKPN (SC) /
Kepatuhan Pejabat (SC)
73
74
Jendela Daerah (M) > Daerah / Kementerian > E-LHKPN (SM) > Diskusi (SC)
Remarks: Specific module E-LHKPN, contains detailed information of compliance of

each region. Additional features will include, Nilai Kepatuhan for national and
region level, Embed search engine e-Announcement (will query information
directly from elhkpn.kpk.go.id as source data), optimization of Report Status
and Download LHKPN, regional compliance ranking, literacy about LHKPN
consists of general descriptions, regulation basis, and reporting mechanism.
75
Submodule Gratification
Section
Previous
76
Current
Jendela Daerah (M) > Daerah / Kementerian > Gratifikasi (SM) > Sebaran Gratifikasi (SC)
/ Tren Pelaporan (SC)
77
Jendela Daerah (M) > Daerah / Kementerian > Gratifikasi (SM) > Diskusi (SC)
Remarks: Specific module Gratification, contains detailed information of Gratification in

each region. Feature developments that will be implemented for Gratifikasi:
• Additioanl literacy of gratification: will be separated between Ministry and
regional government, to specify segmentation of user viewing
• UPG contact update: data updating which is currently not available in UPG
will be initiated
• Updated recapitulation of Gratification reports and trends in Dashboard
view. Summarize data on goods and services receipts per region that will
78
be consolidated to national level. Outputs will be provided in graph format
of regional and national level.

Submodule Jejak Kasus
Section
Previous
Current
Jendela Daerah (M) > Daerah / Kementerian > Jejak Kasus (SM) > Sebaran Jejak Kasus
(SC) / Daftar Kasus (SC)
79
Jendela Daerah (M) > Daerah / Kementerian > Jejak Kasus (SM) > Diskusi (SC)
80
Remarks: Data of Jejak Kasus is currently available in JAGA. Feature enhancements
consist of redesigning Jejak Kasus submodules and additional features to give
the ease of use for users. Additional features:
• Search by convict, with overall lists and enable to view detail of each
convict for the latest trial occur.
• Frequently update cases 2016-now
81
Submodule SPI
Section
Previous
82
Current
Jendela Daerah (M) > Daerah / Kementerian > Survey Penilaian Integritas (SM)
Remarks: Information with map dashboard and list view will be implemented to
summary data from Integrity Survey Assessment (SPI).
Ministry/agencies/regions can be selected to specify more detailed report and
publications.
83
84
Submodule Stranas
Section
Previous
85
Current
Jendela Daerah (M) > Daerah / Kementerian > Stranas PK (SM) > Sebaran Realisasi
Instansi (SC) / Kepatuhan VS Realisasi (SC) / Sebaran Capaian Stranas (SC) / Perizinan
dan Tata Negara (SC)
86
87
Jendela Daerah (M) > Daerah / Kementerian > Stranas PK (SM) > Diskusi (SC)
Remarks: Stranas PK is one of the most critical modules to highlight corruption

prevention efforts. Information and data will be more presented in a dashboard
view with rich graphics, charts, and maps. Information will include Distribution
of realization, compliance, national strategy achievement target vs realization.
Features to encourage public participation corruption prevention efforts will
also be implemented, including focused action that can be monitored in detail
each activity, accessible documents, reports, and infographics, also
discussion section.
88
Submodule Anggaran APBD
Section
Current
Jendela Daerah (M) > Daerah / Kementerian > Anggaran APBD (SM)
89
Remarks: Dashboard for Anggaran APBD will be implemented to acknowledge
transparency in the annual financial plans for local governments in Indonesia
that are approved by the Regional People's Representative Council. The APBD
is stipulated by a Regional Regulation.
90
Module Pelayanan Publik
Submodule Pendidikan
Section
Previous
Current
Pelayanan Publik (M) > Pendidikan (SM) > Dashboard Umum (SC) / Program Indonesia
Pintar (SC) / Cari Pendidikan (SC)
91
Pelayanan Publik (M) > Pendidikan (SM) > Cari Pendidikan (SC) > Search: Cari Provinsi /
Cari Nama Sekolah > Tampilkan (B) > SDN … (SC) / Tenaga Pendidikan (SC) / Fasilitas
Sekolah (SC) / Anggaran Dana BOS (SC)
92
Pelayanan Publik (M) > Pendidikan (SM) > Cari Pendidikan (SC) > Search: Cari Provinsi /
Cari Nama Sekolah > Tampilkan (B) > Universitas … (SC) / Dosen dan Mahasiswa (SC) /
Program Studi (SC) / Anggaran BOPTN (SC)
93
Pelayanan Publik (M) > Pendidikan (SM) > Diskusi (SC)
Remarks: Dashboard for Education will be implemented to acknowledge transparency

and prevention aspect, including planning and realization of DANA BOS. List of
Education level will also be available by selecting each region. Data will be
integrated with Kemdikbud server and database for real-time data and profile
of schools and universities. Information will give a whole profile of education
institutions, including accreditation status, general information, students and
teachers composition, transparency of budget and allocations. The integration
is initiated, but data source validation and cleansing process is still required
within internal Kemdikbud. For universities, additional feature and menu will
be implemented in web application (currently only exists in the Mobile App).
94
Submodule Desa
Section
Previous
Current
Pelayanan Publik (M) > Desa (SM) > Dashboard Umum (SC) / Cari Desa (SC)
95
Pelayanan Publik (M) > Desa (SM) > Dashboard Umum (SC) > Panduan Dana Desa (B)
Pelayanan Publik (M) > Desa (SM) > Cari Desa (SC) > Search: Cari Wilayah / Cari Desa >
Tampilkan (B) > Desa … (SC) / Anggaran Dana Desa (SC)
96
Pelayanan Publik (M) > Desa (SM) > Diskusi (SC)
Remarks: On the existing website, only project names and the budget are presented.
Dashboard for Village will be implemented for public transparency, including
planning and realization of DANA DESA, Family Welfare Index (National and
Regional level). Project transparency currently occurring in selected village will
be shown in real-time. Information of projects information of projects and
project statuses/progress encouraging local societies to monitor. DANA DESA
Guidelines will also be publicly shared to further educate in terms of
regulations. Specific module Village, contains details of every Village in each
region. Detail profile of village will be shown, including profile of Village Head,
experts, and village assistant. Data source for village profile will be
implemented with the integration to Ministry of Village, Development, and
Disadvantaged Regions. Further transparency of information that could be
implemented in the near future consists of: (1) programs of village owned
97
enterprise/business “BumDes”, (2) integration with Village financial system
“Siskeudes”

Submodule Fasilitas Kesehatan
Section
Previous
Current
Pelayanan Publik (M) > Fasilitas Kesehatan (SM) > Dashboard Umum (SC) / Cek
Kepesertaan JKN (SC) / Cari Fasilitas Kesehatan (SC)
98
Pelayanan Publik (SM) > Fasilitas Kesehatan (SM) > Dashboard Umum (SC) > Panduan
(B) > Panduan BPJS Kesehatan / Panduan JKN
99
Pelayanan Publik (M) > Fasilitas Kesehatan (SM) > Cari Fasilitas Kesehatan (SC) >
Search: Cari Wilayah / Cari Nama Faskes > Tampilkan (B) > RSU … (SC) / Fasilitas Rumah
Sakit (SC) / Ketersediaan Tempat Tidur (SC)
100
Pelayanan Publik (M) > Fasilitas Kesehatan (SM) > Diskusi (SC)
Remarks: General dashboard for Medical Facilities will be implemented, including the
summarized data of docter and medical personnel. Specific dashboard of
room availability each class in every Medical Facilities will also be accessible
by public. The information of the dashboard can be filtered further by
Categories. Real-time data should be the main concern to implement this
feature due to the accessibility of data, where it includes private sector.
General information of Medical Facilities will be accessible by public, consists
information of general profile and reachable contacts, medical resources, and
facilities. National Health Insurance membership status will also be accessible
for public by inputting ID Number (NIK), made possible with BPJS integration.
101
Submodule Perizinan
Section
Previous
Current
Pelayanan Publik (M) > Perizinan (SM) > Cari Perizinan (SC)
102
Pelayanan Publik (M) > Perizinan (SM) > Cari Perizinan (SC) > Panduan (B) > Panduan
Perizinan
Pelayanan Publik (M) > Perizinan (SM) > Cari Perizinan (SC) > Search: Cari Provinsi / Cari
Nama > Tampilkan (B) > Provinsi … (SC) / Daftar Perizinan (SC)
103
Pelayanan Publik (M) > Perizinan (SM) > Diskusi (SC)
Remarks: Permits and licensing each region/province will be accessible by public. List
of permits and licensing from central to regional, including categories of basic
to doing business will be included. Guide for permits and licensing will be
shared with FAQ and Regulation list features that can be downloaded. Due to
future possibilities of change in permits and licensing regulations, frequent
updates, coordination and integration of data with related ministries and
agencies will be needed.
104
Module Diskusi
Submodule Diskusi
Section
Previous
Current
Diskusi (M) > Kumpulan Diskusi (SM)
105
Diskusi (M) > Kumpulan Diskusi (SM) > Mulai Diskusi (B)
106
107
Diskusi (M) > Diskusiku (SM)
Remarks: Discussion Interaction for this Module is updated, when a posted discussion
has started. The updated design in comment section will give a better
experience and increase ease of use for users. This updated design, also
including feature of sharing to external platforms will encourage participation
of users for discussing corruption prevention topics on various aspects.
Discussion report feature will also be implemented to maintain the
conduciveness of discussion plaftorm.
108
Module Berita Jaga
Submodule Berita Jaga
Section
Previous
Current
Berita Jaga (M) > Semua (SM) / Umum (SM) / Pendidikan (SM) / Kesehatan (SM) /
Perizinan (SM) / Desa (SM) / Bantuan Social Covid-19 (SM)
109
Remarks: Comment section for discussion interaction for this Module is updated, when
a posted news has been published. The updated design in comment section
will give a better experience and increase ease of use for users. The updated
design includes additional feature sort by Publish Date and Trending Topic
News
110
Module User Internal KPK
Submodule Litbang
Section Cari Kajian
Current
Litbang (M) > Cari Kajian (SM) > Search: Cari Nama/Tema/Peneliti Kajian
111
Remarks: Litbang User Access of Research and Publications. Assessment search
feature by sector. Summarized information about the research, includes
background, research objectives, collection methodology, location of research
subjects, and research information. Supporting references can also be
attached to each study to enrich documentation, including covering topic
selection, study work plans, and TOR, RAB, SPT
112
Module Admin and Internal
Submodule Litbang
Section Dashboard
Current
Dashboard (M)
Remarks: Dashboard for Litbang will have an overview of study submitted into the
system by the admin / user, along with the newly published study. It views the
summarized and accumulated view for: (1) research by stages, (2) research by
sectors. It also gives an updated view to admin for newest list of published
researches.
113
Module Admin and Internal
Submodule Litbang
Section Admin User
Current
Admin (M) > Tambah Admin (B)
Remarks: Admin and User Access Control in Litbang Module with access to every
account registered for the Admin and User. Each admin access can be
assigned with different roles, thus certain priveleges/activity may be executed
based on the assigned roles.
114
Module Administrator
Submodule Litbang
Section Repositori Kajian
Current
Repositori Kajian (M) > Tambah Kajian (B)
115
Remarks: Study and Publications Repository section will consist of list study that has
been submitted to the system, this will also has Edit feature to update
submitted study and submit a new study. Filter feature will be implemented to
facilitate searches based on sectors, researcher name, topic. Also can be
sorted by latest/oldest researches. Research and publications repository not
only acts as a central database for studies, but also intended as a medium
enabling researchers to update/edit in direct web-based platform anywhere,
anytime, thus providing flexibility for researchers.
116
Submodule Litbang
Section Pengajuan Kajian
Current
Pengajuan Kajian (M) >
117
Pengajuan Kajian (M) > Buat Kajian (B) > Pemilihan Topik (SC) > Rencana Kerja Kajian
(SC) > KAK, RAB dan SPT (SC) > Kick Off Meeting (SC) > Pelaksanaan Kajian (SC) >
Konten Laporan (SC) > Review Draft (SC) > Paparan (SC)
118
119
120
121
Remarks: Submission of Studies section will be where admin submit a new study in
accordance to the study topic, work plan, KAK, RAB, SPT and the stages of the
study. A new feature of approval and rejection of the study will be added to
these processes with the notification to the admin if the study is approved or
rejected.
122
Submodule Litbang
Section Rekomendasi Kajian
Current
Rekomendasi Kajian (M) > Search: Cari Nama/Tema/Peneliti Kajian / Buat Rekomendasi
(B)
123
Rekomendasi Kajian (M) / Monitoring Rekomendasi Kajian (SM) > Kick Off Meeting (SC)
/ Pemantauan (SC) / Rapat Kemajuan (SC) / Tinjauan Lapangan (SC) / Evaluasi
Kemajuan (SC) / Surat PP Action Plan (SC)
124
125
126
127
128
129
130
131
Remarks: Recommendation of Studies section will be where monitoring of the study
happened. After a study is approved, the continuation of the process will be
able to monitor and evaluate here. At the end of the process, final report of the
study shall be presented here.
132
Submodule Pendidikan Anti Korupsi
Section Dashboard
Current
Dashboard (M)
Remarks: Dashboard of Pendidikan Anti Korupsi which can be accessed by the Admin,
will consist of overview about the regulations and applications related anti-
corruption education in schools. Dashboard view highlights main informations
including minister regulation, regent regulation, monitoring status of each
shools that will be implementing anti-corruption education.
133
Section Admin and User
Current
Admin (M) > Tambah Akun (B)
User (M) > Tambah User (B)
Remarks: Admin and User Access Control in Pendidikan Anti Korupsi with access to
every account registered for the Admin and User. Each admin access can be
assigned with different roles, thus certain priveleges/activity may be executed
based on the assigned roles.
134
Section Master Questioner
Current
Master Questioner (M) > Buat Questioner (B)
Remarks: New Features in creating new questionnaires related to the anti-corruption

education.
135
Section Implementasi PAK
Current
Implementasi PAK (M) > Buat Baru (B) / Search: Cari Nama Dinas Pendidikan
136
Remarks: Implementasi PAK section will consist of detailed documentation for anti-
corruption education implementation in every region and schools, added also
the feature to submit new implementation of anti-corruption education with its
documentation such as regulations and work plan regarding the
implementation.
137
Section Form Isian Kegiatan PAK
Current
Form Isian Kegiatan PAK (M) > Input Kegiatan (B) / Search: Cari Nama Sekolah
138
Remarks: Form Isian Kegiaatan PAK section will have features to submit application
method used in every implementation of anti-corruption education done in
every school and region.
139
Mobile Platform
Module Homepage
Submodule -
Section Login / Rekomendasi / Filter / Profile
Current
Remarks: Features for users: Login to enter the mobile application of JAGA.ID,
Rekomendasi as a shortcut for users who is interested to see the background
of JAGA.ID and latest issues related to JAGA.ID, Filter to choose category
preferred to see, and Profile of user according to what user has been registered
into JAGA.ID.
Module Homepage
Submodule -
Section Header
Current
140
Remarks: Homepage of Mobile Application with a clean and simple UI/UX with highlight
of information/news/update in accordance with the latest national issues
Module Homepage
Submodule Tentang
Section -
Current
Homepage (M) >

Tentang (SM) >
Homepage (M) > Jendela Daerah (SC)
Tentang (SM) > Jaga
(SC) Homepage (M) >
Homepage (M) > Tentang (SM) >
Tentang (SM) > KPK Waspada Korupsi (SC)
(SC)
Remarks: Tentang will consist of background of JAGA.ID, what it’s about, how it
started, and how it can provide information users are looking for.
141
Submodule Rangkuman Jendela Daerah
Section -
Current
Jendela Daerah (M)

Rangkuman Jendela
Daerah (SM) > Diskusi (SC)
> Semua Diskusi (B) /
Diskusi Saya (B) / Buat
Diskusi (B)
Jendela Daerah (M) >

Rangkuman Jendela
Daerah (SM) >
Penyelamatan Keuangan
Negara (SC)
Jendela Daerah (M) >
Rangkuman Jendela
Daerah (SM) > Capaian
(SC) / Penyelamatan
Keuangan Negara (SC)
Remarks: Rangkuman Jendela Daerah will consist of overview content of every modules
on JAGA.ID. This feature is a representative of government transparancy and
opennes to public, also as a reference for individuals to know specific
data/information based on their region.
142
Submodule Koordinasi Wilayah
Section -
Current
Jendela Daerah (M)

> Koordinasi
Wilayah (SM) >
Jendela Daerah (M)
Diskusi (SC) >
Koordinasi Wilayah
Semua Diskusi (B) /
(SM) > Program
Diskusi Saya (B) /
Keberhasilan
Buat Diskusi (B)
Nasional (SC)
Jendela Daerah (M)
Jendela Daerah (M)
> Koordinasi
> Koordinasi
Wilayah (SM) >
Wilayah (SM) >
Capaian (SC) /
Gambaran Umum
Program
Keberhasilan
Nasional (SC)
Remarks: Specific module Koordinasi Wilayah will contain detailed information related to
Provincial and District/City such as their success progress in APBD planning and
budgeting and achievements of programs the town made. A new feature
Discussion will also be added to this submodule.
143
Submodule E-LHKPN
Section -
Current
Jendela Daerah (M) Jendela Daerah (M)

Jendela Daerah (M)
> E-LHKPN (SM) > > E-LHKPN (SM) >
> E-LHKPN (SM) >
Diskusi (SC) > Publikasi
Kepatuhan Pejabat
Semua Diskusi (B) /
(SC)
Diskusi Saya (B) /
Buat Diskusi (B)
Jendela Daerah (M)

> E-LHKPN (SM) >
Capaian (SC) /
Kepatuhan Pejabat
(SC)
Remarks: Specific module E-LHKPN, will contain information such as compliance of higher-
ups and its rank on both nationally and regionally. A new feature Discussion will
also be added to this submodule.
144
Submodule Gratifikasi
Section -
Current
Jendela Daerah (M)

> Gratifikasi (SM) >
Jendela Daerah (M) Diskusi (SC) >
Jendela Daerah (M)
> Gratifikasi (SM) > Semua Diskusi (B) /
Capaian (SC) Diskusi Saya (B) /
Jendela Daerah (M) Capaian (SC) / Unit
Pengendalian Buat Diskusi (B)
Capaian (SC) Gratifikasi (SC)
Remarks: Specific module Gratification will contain detailed information of gratification

according to gratuity report with chart showing the area distribution of
Gratification in each region. Gratifikasi Control Unit for each region will be
presented in this module along with their contact information. A new feature
Discussion will also be added to this submodule.
145
Submodule Jejak Kasus
Section -
Current
Jendela Daerah (M)

> Jejak Kasus (SM)
> Diskusi (SC) >
Jendela Daerah (M) Jendela Daerah (M) Semua Diskusi (B) /
> Jejak Kasus (SM) > Jejak Kasus (SM) Diskusi Saya (B) /
Jendela Daerah (M) > Daftar Kasus (SC) > Daftar Kasus (SC) Buat Diskusi (B)
> Jejak Kasus (SM) > Profil Tersangka
> Capaian (SC) /
Daftar Kasus (SC)
Remarks: Specific module Case Trail will contain information of cases happening in each
region. This module will also present the profile of each individual involved and
detailed sentences given to those individuals. A new feature Discussion will also
be added to this submodule.
146
Submodule SPI
Section -
Current
Jendela Daerah (M)

> SPI (SM) >
Capaian (SC) Jendela Daerah (M)
> SPI (SM) > Jendela Daerah (M)
Capaian (SC) > > SPI (SM) > Diskusi
Metodologi > Indeks (SC)
Integritas Umum
Jendela Daerah (M)
> SPI (SM) >
Capaian (SC)
Remarks: Specific module SPI will contain information of Integrity Survey Values which are
held in each region and the result of it. A new feature Discussion will also be
added to this submodule.
147
Submodule Stranas
Section -
Current
Jendela Daerah (M)

> Stranas (SM) >
Jendela Daerah (M)
Jendela Daerah (M) Capaian (SC) > Nilai
> Stranas (SM) > Jendela Daerah (M) > Stranas (SM) > Kepatuhan BS Nilai
Capaian (SC) > Stranas (SM) > Capaian (SC) > Realisasi > Pemda
Capaian (SC) / Fokus Aksi > Tingkat I (Provinsi)
Fokus Perizinan dan Perizinan dan Tata
Tata Negara (SC) Negara
Remarks: Specific module Stranas will contain information of distribution of Stranas
achievement nationally, state licensing and administration, and realization of
local government targets. A new feature Discussion will also be added to this
submodule.
148
Submodule Pendidikan
Section -
Current
Pelayanan Publik
(M) > Pendidikan
(SM) > Program
Indonesia Pintar
Pelayanan Publik (SC) > Cek Nomor
(M) > Pendidikan KIP Pelayanan Publik
Pelayanan Publik (SM) > Program (M) > Pendidikan
(M) > Pendidikan Indonesia Pintar (SM) > Cari
(SM) > Dashboard (SC) > Cek Nomor Pendidikan (SC) >
Umum (SC) KIP > Search: Cari Search: Cari
Kategori / Nomor Kategori / Wilayah /
KIP > Cari (B) Nama Sekolah >
Cari (B)
Pelayanan Publik
Pelayanan Publik Pelayanan Publik (M) > Pendidikan
(M) > Pendidikan (M) > Pendidikan (SM) > Cari
(SM) > Cari Pelayanan Publik (SM) > Cari Pendidikan (SC) >
Pendidikan (SC) > (M) > Pendidikan Pendidikan (SC) > Profil Sekolah >
Hasil Pencarian (SM) > Cari Profil Sekolah > Anggaran Dana BOS
Pendidikan (SC) > Tenaga Pendidikan
Profil Sekolah
Remarks: Specific module Pendidikan will provide information of education available in

each region and details of mentioned education, such as how many teachers or
education personnel does one school has, or how much facility the school
provided for their students.
149
150
Submodule Desa
Section -
Current
Pelayanan Publik Pelayanan Publik

(M) > Desa (SM) > Pelayanan Publik
(M) > Desa (SM) >
Dashboard Umum (M) > Desa (SM) >
Cari Desa (SC) > Pelayanan Publik
(SC) Cari Desa (SC) > Hasil Pencarian (M) > Desa (SM) >
Search: Cari Wilayah
Desa Cari Desa (SC) >
Provinsi/Kabupaten/
Profil Desa
Kota / Search: Cari
Desa > Cari (B)
Pelayanan Publik
Pelayanan Publik (M) > Desa (SM) >
Pelayanan Publik
(M) > Desa (SM) > Panduan (SC)
(M) > Desa (SM) >
Pelayanan Publik
Cari Desa (SC) > Cari Desa (SC) >
(M) > Desa (SM) >
Profil Desa > Profil Desa >
Cari Desa (SC) >
Anggaran Dana Anggaran Dana
Diskusi > Semua
Desa Desa > Tahap I
Diskusi (B) / Diskusi
Saya (B) / Buat
Diskusi (B)
Remarks: Specific module Desa will provide information of every Village in each region,
how many head of family and total population of people living in the Village,
along with the realization of distribution of funds for said Village.
151
Submodule Fasilitas Kesehatan
Section -
Current
Pelayanan Publik
(M) > Kesehatan
(SM) > Cek
Kepesertaan JKN
(SC)
Pelayanan Publik
(M) > Kesehatan
(SM) > Dashboard Pelayanan Publik
Pelayanan Publik
Umum (SC) (M) > Kesehatan
(M) > Kesehatan
(SM) > Cari Fasilitas
(SM) > Cek
Kesehatan (SC) >
Kepesertaan JKN
Search: Cari
(SC) > Search: Cari
Kategori / Wilayah /
NIK / Tanggal Lahir
Nama Faskes >
> Cari (B)
Tampilkan (B)
Pelayanan Publik
(M) > Kesehatan
Pelayanan Publik
Pelayanan Publik
Pelayanan Publik (SM) > Cari Fasilitas
(M) > Kesehatan
(M) > Kesehatan
(M) > Kesehatan Kesehatan (SC) >
(SM) > Cari Fasilitas Profil Rumah Sakit >
Kesehatan (SC) >
Kesehatan (SC) >
Kesehatan (SC) > Ketersediaan
Profil Rumah Sakit >
Profil Rumah Sakit >
Profil Rumah Sakit Tempat Tidur >
Ketersediaan
Fasilitas Rumah
Rawat Inap
Tempat Tidur >
Sakit
Ketersediaan Kamar
Remarks: Specific module Fasilitas Kesehatan will contain information of Medical Facility
available in each region such as hospital and clinic. Detailed information of each
152
medical facility such as how many rooms available and specialist provided will
also be mentioned.

Submodule Perizinan
Section -
Current
Pelayanan Publik Pelayanan Publik

(M) > Perizinan (SM) (M) > Perizinan (SM)
Pelayanan Publik
> Search: Cari > Daftar Wilayah
Pelayanan Publik (M) > Perizinan (SM)
Kategori / Wilayah / (SC) > Profil Wilayah
(M) > Perizinan (SM) > Daftar Wilayah
Nama Wilayah > Daftar Wilayah (SC) > Profil Wilayah
(SC) > Daftar Perizinan
Remarks: Specific module Perizinan will contain many information of how to make and
report a license in each region. Contact information for every region will also be
presented in this submodule.
153
Summarized Enhancement Features for JAGA.ID
1. Menu module is always placed at the top of web page, clean and simple UI/UIX login
feature, along with an extra banner below the scrolling header which can be used to
highlight information/news/update in accordance with the latest national issues.
2. General Overview is an additional Feature under Jendela Daerah. It can be filtered
for National Level or Regional Level, then drills down the dashboard information
given. For each submodules in Jendela Daerah, user will be directed to a pop-up
introduction (js.intro) in a slider mode which generally will inform users on how to
use the submodules, how to read the data, also overview information and it’s
purpose. General information in a dashboard view will be presented including Head
and Deputy of Region, e-SPI score, BPK audit results, and LAKIP Assessment.
Information regarding of the general election will also be presented, including Name
of Candidate, LHKPN, and the election schedule based on each region. This feature
is a representative of government transparency and opennes to public, also as a
reference for individuals to understand specific data/information based on their
region
3. The latest UI/UX design will present a simpler and ease of reading experience, yet
without diminsihing detailed information on the content. Ministries and government
agencies will be separated for a better user segmentation in viewing the information
and data. For example, in APBN and APBD data view, pie Charts will be best used to
inform percentages also comparisons for income and expenditure, which can also
be shown in National level or detailed drill down on each region. Other examples
such as Covid-19, budget refocusing and allocation in Ministries and government
agencies, will also be displayed in separate views to enhance public transparency
and clearer view. Furthermore, cut-off data date will be shown to inform the last
updated data.
• Dashboard for Anggaran APBD will be implemented to acknowledge
transparency in the annual financial plans for local governments in
Indonesia that are approved by the Regional People's Representative
Council. The APBD is stipulated by a Regional Regulation.
• Reports will be made possible to be downloaded with a generated direct link
4. Module E-LHKPN, contains detailed information of compliance for each region.
Additional features will include:
• Nilai Kepatuhan for national and region level,
• Embed search engine e-Announcement (will query information directly from
elhkpn.kpk.go.id as source data),
• optimization of Report Status and Download LHKPN,
• regional compliance ranking,
• general descriptions, regulation basis, and reporting mechanism to increase
literacy about LHKPN
5. Module Gratification, contains detailed information of Gratification in each region.
Feature developments that will be implemented for Gratifikasi:
• Additional literacy of gratification: will be separated between Ministry and
regional government, to specify segmentation of user viewing
154
•UPG contact update: data updating which is currently not available in UPG
will be initiated
• Updated recapitulation of Gratification reports and trends in Dashboard
view. Summarize data on goods and services receipts per region that will be
consolidated to national level. Outputs will be provided in graph format of
regional and national level.
6. Data of Jejak Kasus is currently available in JAGA. Feature enhancements consist
of redesigning Jejak Kasus submodules and additional features to give the ease of
use for users. Additional features:
• Search by convict, with overall lists and enable to view detail of each convict
for the latest trial occur.
• Frequently update cases 2016-now
7. Module Survey Penilaian Integritas (SPI) will have information with map dashboard
and list view will be implemented to summary data from Integrity Survey
Assessment (SPI). Ministry/agencies/regions can be selected to specify more
detailed report and publications.
8. Stranas PK is one of the most critical modules to highlight corruption prevention
efforts. Presentation of information and data will be in a dashboard view with rich
graphics, charts, and maps. Information will include Distribution of realization,
compliance, national strategy achievement target vs realization. Features to
encourage public participation corruption prevention efforts will also be
implemented, including focussed action that can be monitored in detail each
activity, accessible documents, reports, and infographics, also discussion section.
9. Dashboard for Education will be implemented to put forward transparency
intentions and prevention aspect, including planning and realization of DANA BOS.
List of Education level will also be available by selecting each region. Data will be
integrated with Kemdikbud server and database for real-time data and profile of
schools and universities. Information will give a whole profile of education
institutions, including accreditation status, general information, students and
teachers composition, transparency of budget and allocations. The integration is
initiated, but data source validation and cleansing process is still required within
internal Kemdikbud. For universities, additional feature and menu will be
implemented in web application (currently only exists in the Mobile App).
10. Dashboard for sub-module Village will be implemented for public transparency,
including planning and realization of DANA DESA, Family Welfare Index (National
and Regional level). Transparency for ongoing projects in selected village will be
shown in real-time. Information of projects and project statuses/progress
encouraging local societies to monitor. DANA DESA Guidelines will also be publicly
shared to further educate in terms of regulations. Specific module Village, contains
details of every Village in each region. Detail profile of village will be shown,
including profile of Village Head, experts, and village assistant. Data source for
village profile will be implemented with the integration to Ministry of Village,
Development, and Disadvantaged Regions. Further transparency of information that
could be implemented in the near future consists of:
• programs of village owned enterprise/business “BumDes”,
• integration with Village financial system “Siskeudes”
155
11. General dashboard for sub-module Medical Facilities will be implemented, including
the summarized data of doctor and medical personnel. Specific dashboard of room
availability each class in every Medical Facilities will also be accessible by public.
The information of the dashboard can be filtered further by Categories. Real-time
data should be the main concern to implement this feature due to the accessibility
of data, where it includes private sector. General information of Medical Facilities
will be accessible by public, consists information of general profile and reachable
contacts, medical resources, and facilities. National Health Insurance membership
status will also be accessible for public by inputting ID Number (NIK), made possible
with BPJS integration.
12. Sub-module Perizinan will provide permits and licensing for each region/province
and will be accessible by public. List of permits and licensing from central to
regional, including categories of basic to doing business will be included. Guide for
permits and licensing will be shared with FAQ and Regulation list features that can
be downloaded. Future developments focussing in integration with related
minsitries and government agencies is recommended to streamline frequent
updates of permits and licensing regulations
13. For module Discussion, the interaction for this Module is updated when a posted
discussion has started. The updated design in comment section will give a better
experience and increase ease of use for users. This updated design, also including
feature of sharing to external platforms will encourage participation of users for
discussing corruption prevention topics on various aspects. Discussion report
feature will also be implemented to maintain the conduciveness of discussion
plaftorm.
14. In module Berita Jaga, comment section in overall discussion interaction feature is
updated, when a posted news has been published. The updated design in comment
section will give a better experience and increase ease of use for users. The updated
design includes additional feature sort by Publish Date and Trending Topic News.
15. Litbang User Access of Research and Publications:
• Assessment search feature by sector. Summarized information about the
research, includes background, research objectives, collection
methodology, location of research subjects, and research information.
Supporting references can also be attached to each study to enrich
documentation, including covering topic selection, study work plans, and
TOR, RAB, SPT
• Dashboard for Litbang will have an overview of study submitted into the
system by the admin / user, along with the newly published study. It views
the summarized and accumulated view for: (1) research by stages, (2)
research by sectors. It also gives an updated view to admin for newest list
of published researches.
• Admin and User Access Control in Litbang Module with access to every
account registered for the Admin and User. Each admin access can be
assigned with different roles, thus certain priveleges/activity may be
executed based on the assigned roles.
• Study and Publications Repository section will consist of list study that has
been submitted to the system, this will also has Edit feature to update
156
submitted study and submit a new study. Filter feature will be implemented
to facilitate searches based on sectors, researcher name, topic. Also can be
sorted by latest/oldest researches. Research and publications repository
not only acts as a central database for studies, but also intended as a
medium enabling researchers to update/edit in direct web-based platform
anywhere, anytime, thus providing flexibility for researchers.
• Submission of Studies section will be where admin submit a new study in
accordance to the study topic, work plan, KAK, RAB, SPT and the stages of
the study. A new feature of approval and rejection of the study will be added
to these processes with the notification to the admin if the study is approved
or rejected.
• Recommendation of Studies section will be where monitoring of the study
happened. After a study is approved, the continuation of the process will be
able to monitor and evaluate here. At the end of the process, final report of
the study shall be presented here.
16. Pendidikan Anti Korupsi:
• Dashboard of Pendidikan Anti Korupsi which can be accessed by the Admin,
will consist of overview about the regulations and applications related anti-
corruption education in schools. Dashboard view highlights main
informations including minister regulation, regent regulation, monitoring
status of each schools that will be implementing anti-corruption education.
• Admin and User Access Control in Pendidikan Anti Korupsi with access to
every account registered for the Admin and User. Each admin access can be
assigned with different roles, thus certain priveleges/activity may be
executed based on the assigned roles.
• Implementasi PAK section will consist of detailed documentation for anti-
corruption education implementation in every region and schools, added
also the feature to submit new implementation of anti-corruption education
with its documentation such as regulations and work plan regarding the
implementation.
• Form Isian Kegiaatan PAK section will have features to submit application
method used in every implementation of anti-corruption education done in
every school and region.
17. Features for users management: Login to enter the mobile application of JAGA.ID,
Rekomendasi as a shortcut for users who is interested to see the background of
JAGA.ID and latest issues related to JAGA.ID, Filter to choose category preferred to
see, and Profile of user according to what user has been registered into JAGA.ID.
157
JAGA-05: Future Recommendations
I. Deployment and migration methodology from standalone web into JAGA.ID module
This section will explain the process of migrating a separate website to JAGA.ID.
An example of the case used is the development of the Stranas module. Stranas PK is a
national policy direction that contains the focus and target of corruption prevention which
is used as a reference for Ministries/Agencies, local governments and stakeholders in
implementing corruption prevention actions in Indonesia. Following are recommended
steps that should be taken for migrating standalone web into JAGA.ID.
There was an idea to move and routing stranas module as https://stranas.jaga.id,

after further analysis and discussion, moving to https://jaga.id/stranas will be the better
option. The case with as https://stranas.jaga.id was it would be a stand alone website.
Stranas it self is a modul in Jaga which should be following the modul pattern on exisiting
jaga.id so every modul positioning would be consistet in terms of website structure.
Identification of the old website structure and the overall JAGA.ID structure, in this
case the stranas.kpk.go.id and JAGA.ID/stranas websites.
The following is a description of the structure of the stranas website at

stranas.kpk.go.id and JAGA.ID/stranas.
159
Image 5.1 Website structure on stranas.kpk.go.id
160
Image 5.2 Website structure at JAGA.ID/stranas
a. Determine which information will be entered into JAGA.ID/stranas

Based on the results of the analysis and the user's needs, in the stranas case it is
concluded that there are 2 important pages that must be plastered into
straans.kpk.go.id, namely the homepage and news respectively.
b. Map point “b” into the JAGA.ID structure

Regarding the results of mapping number 2, identify each module to be mapped into
the JAGA.ID application.
- News: Because there is a news module in JAGA.ID itself, then all news
information about stranas will be added to Berjaga module (Berita Jaga)
with the addition of the stranas news category.
- Home: Because the existing display does not have a homepage, the website
structure will be changed as shown below.
Image 5.3 Stranas future structure on JAGA.ID
Structural changes includes:

- url JAGA.ID/stranas will be the main page containing information on the
homepage of the previous stranas website
161
- Add a "Report Card" section to link the strategic homepage to the strategic
achievement page and the strategic action page on the previous guard page.
c. In general, there are seperate systems which have different databases, which will
impact the migration process. Two ways could be implemented as following:
i. For static data, the static content will be transferred in HTML to the new
website (JAGA.ID)
ii. For dynamic content, adjustments will be made to the database data
structure from the old website to the new website. Next, the export import
function will be made using excel or SQL data.
d. After the implementation of data mapping, next step is adjusting with the design
based on the latest UI/UX design components.
e. The development stage, several steps are required:
i. Timeline definition: Set the work plan schedule needed to determine the time
and resources required for module development.
ii. Functional Design Document (FDD): In this process the Business Analyst
(BA) and development team will analyze in more detail user's requirements
related to modules. The results of the analysis will be made in the form of
an FDD (functional design document) which will be used further by UIX team
and development team as a development and implementation guideline or
module design.
iii. UI UIX Design: In this process the UI / UIX team will design a mockup
according to the base design system and application flow. Further
confirmation by presentation to Key user is required and acts as approval,
before proceeding to the development process
iv. Development: Based on the completion of FDD and mockup, the backend
and frontend development teams will carry out the development process
v. Testing: After the development process is complete, the Business Analyst

team will test the module according to the flow and scenarios
vi. UAT: Passing the testing phase, business analyst team will present the
module to key users as final confirmation based on the requirements.
Modification of features, process flows, scenarios are minor accepted in this
phase, and will return to development phase for bug fixing and feature
additions.
vii. Deployment: The developed module in TEST Instance is released to the

production server and is ready for use by end users.
II. Obstacles that are often encountered in point number 1 above, and how to solve them
162
a. Differences in website structure à perform analysis related to the old and new
website structure
What are the components of the analysis and how is the analysis process?
Answer: The structure of this website is related to the menu layout of the old and
new websites.
b. Duplicate module à As in the case of Stranas news, this content will be moved into
the vigil module
c. Adjustment of the old website UX into JAGA.ID à analysis of the use of basic
components then mapped to each information to be transferred.
III. Future Features and Enhancments
Better design and innovative features can all add to the user experience. There are a host
of different features which will help focus the attention of visitors on the website and
encourage them to engage more to the site. One key factor in choosing the right features
for a website is to have customer and usability at the heart of the design process. The other
is understanding what features are actually available and how they can be deployed.
Here, we take a closer look at future recommendations that are not only going to improve
engagement with the audience but will also give distinctness from other government
website:
1. Thumbnail Share Link
This function is expected to increase reader traffic from links shared by users to several
social media. These links shared by users will directly link to the Discussion, so that when
people follow the link, they will be able to start joining in the discussion already happening
in JAGA.ID website. The following is an illustration when the information is shared, in this
case discussion information and news. For the complete file, see the Design System at
figma JAGA.ID
a. Share a Discussion link

- Discussions on Facebook
163
- Discussions on WhatsApp and Telegram
- Discussions on Twitter
164
b. Share a news link
- Share news link on Facebook
- Share news link on WhatsApp or Telegram
165
- Share news link on Twitter
2. Embedded Video Channel or Podcast
Finding different ways to connect and engage with customers is vital in today’s
competitive environment. Video and podcasting can be embedded on your site and
deliver another way that people are able to engage with your platform.
The main reasons are: billion videos are watched on the platform every day, video get
41% more traffic to their than non-video users, putting your video on a landing page
can boost attention conversions by as much as 80%.
Podcasting is another way to engage using rich content that entertains and informs
your customers. A lot will depend on the type of discussion topics you run, but if you
can find the time to create a regular podcast that gains a following, you should expect
traffic and public’s great interest involvement for corruption prevention.
Podcasting Equipment:
• Microphone
Do not use built-in computer microphone. The audio quality is atrocious and
there’s not much you can do on the editing end to fix that.
Then choosing a microphone, you have a choice between two basic options,
USB and XLR mics. USB mics are plug-and-play microphones that tend to be
cheaper and easier to use, but less customizable than XLRs. XLR mics require
an extra cable and audio interface to work. They tend to be more expensive and
higher quality than USB microphones.
An XLR mic + audio interface is the way to go and need to record more than
one person in one room, because plugging in multiple mics into USB ports can
mess up your sound quality, and recording more than one person on one mic
can make it difficult to edit your audio.
• Audio Recording-Editing Software
Audacity is a recommended audio recording/editing software. Audacity works
on Windows, Mac, and Linux computers, and can record, playback, edit, and
166
export your audio into a variety of different audio formats (MP3, WAV, FLAC,
etc). Plus, unlike Pamela and some of its freemium competitors, Audacity is
open-source and free.
For Mac users, Garageband is another free audio software, and another
alternative is to invest in a Digital Audio Workstation (DAW).
• Other Recording Equipment
- A pop filter
Pop filter is a noise protection screen that helps to reduce or eliminate
sibilance (hissing noises) and plosives (popping noises).
- A pair of headphones
Headphones protect microphone from picking up extra sounds from
computer speakers. They also help you hear what you sound like as you
speak, so you can adjust your presentation style.
Podcast Promotion
Promote podcast with sending an announcement to users and followers on your

mailing list. Promote on social media about the impending launch of new podcast.
When uploading the Podcast, launch several episodes at once, ideally 2-3, so that
listeners can immediately listen to several episodes without waiting. Ask every users
to subscribe and leave a review, and may also reward users by reading top reviews or
thanking people by name on new episodes of the podcast.
To leverage traffic site, utilize JAGA.ID website share podcast updates. Feature the
podcast on homepage and About page, link to specific podcast episodes within
specific modules based on podcast episodes, and embed a podcast player on your site
for users.
3. Search engine for JAGA
Search engine is made to enhance users ease in reaching the dedicated content. Based
on usual practices implemented, search feature can be displayed on the upper main
page for direct accessibility when arrived in first landing display/main page. Moreover,
it will drive higher experience for users to use JAGA. The working estimate on this
feature is around 30 days with Sequential Search as the technology used for the
website. Sequential Search is a data search technique by means of inputting a keyword
and then starting from the beginning (or from the end) check all the records in the array
or list, by reading the data one by one based on the key being searched. If no data is
found in the end of the repetition, then the search engine will show “data not found”.
The development method is divided into five phases, which includes:
• Analysis
The first phase in the development, requirements of all modules, drilling down
to content level and mapping process of information storage in specific
database tables will be performed. User expectation and future “to-be” of the
search engine itself will be assessed. Proposed technology and timeline will be
suggested as an integral part of analysis.
• Design
167
During the Design phase, the system is designed to satisfy the requirements
identified in the previous phases. The requirements identified in the
Requirements Analysis Phase are transformed into a System Design Document
that accurately describes the design of the search engine that can be used as
an input for developers in the implementation phase. Proposed technology and
timeline will be finalized in this phase.
• Implementation
The next SDLC phase is the implementation or development of the search
engine. In this phase, developers initiate coding process according to
requirements and design approved in previous phases.
Sequential Seaerch:
When data items are stored in a collection such as a list, it has a linear or
sequential relationship. Each data item is stored in a position relative to the
others. In Python lists, these relative positions are the index values of the
individual items. Since these index values are ordered, it is possible for us to
visit them in sequence. This process gives rise to our first searching technique,
the sequential search. The diagram below shows how this search works.
Starting at the first item in the list, we simply move from item to item, following
the underlying sequential ordering until we either find what we are looking for
or run out of items. If we run out of items, we have discovered that the item we
were searching for was not present.
The function needs the list and the designated item and returns a boolean value
as to whether it is present.
To analyze searching algorithms, need to decide on a basic unit of
computation. For searching, it makes sense to count the number of
comparisons performed. Each comparison may or may not discover the item
we are looking for. In addition, we make another assumption here. The list of
items is not ordered in any way. The items have been placed randomly into the
list. In other words, the probability that the item we are looking for is in any
particular position is exactly the same for each position of the list.
• Testing
Testing the program using the sand box by producing in accordance with
expectations which was designed beforehand. Using sand box in application
testing will provide an explanation of conformity expectations in programming.
• Deployment
There are various phases of the deployment process that the project team must
follow to ensure that the code and technology to deploy appropriately. The
phases include deployment preparation and procedures, product deployment,
transferring ownership of the product, and closing the deployment phase.
• Documentation
Documentation in software engineering is the term that encompasses all
written documents and materials dealing with the search engine’s development
and use. All software development products, whether created by a small team
or a large corporation, require some related documentation.
168
During the development of documentation, the Development Team should:
o Write comprehensive, easy to understand documents with no redundant

information.
o Develop an organized document repository for critical project information, so
Development Team members can easily access, store, and reference project
documents and other deliverables from all life cycle phases.
o Implement routine deliverable reviews to correct inaccuracy, incompleteness,
and ambiguities.
Proposed Timeline for JAGA Search Engine:
Search Engine Draft Mockup:
Rumah Sakit
Berjaga : Seluruh Rumah Sakit menyatakan mengalami kesusahan

mendapatkan APD
Rumah Sakit : Rumah Sakit Tanjung Duren mengalami pelonjakan
pasien Covid
Desa : Desa Kali Sungai akan membangun Rumah Sakit Desa untuk
warga setempat
Pendidikan : Kepala Sekolah SMK Banyuan bekerja sama dengan Rumah
4. Chat Support (Bot and Live)
Chat support with built-in Bot and Live is one of future developments that focusses on
interaction and online presence with public users. Chat support is intended for public
users to communicate on further information request, general and specific questions
of JAGA modules. Public user requirements collected from Chat Support will later be
distributed to internal/government agencies/related parties so that it can be followed
up.
169
As a simple example, when user needed government spending data of a specifis
regional government, the user can easily acces the chat, then built-in bot will suggest
the internal and external links based on user location by retrieving Google data.
The estimation for the production is carried out for 120 days using geolocation maps
javascript API from google for location and python. As for the development method it
is divided into five phases, which includes:
• Analysis
In this phase the developer analyzes what data is needed to make machine
learning, what programming languages, and what libraries are used to create
chatbots. An example of the programming language used is python using NLTK
libraries, Keras, Tensorflow and etc.
• Design
This chatbot is designed to facilitate interaction with users. With this, all the
questions asked by the users about JAGA will be answered quickly. This
system will be able to find out the user's location, recording subscriptions, to
news updates and other information.
• Implementation
This application development will use Python programming language. Testing
data using tensorflow or deep learning, in order to get a high level of accuracy
for the answer to the question user entered. Chatbot implementation in detail
divided into several stages: preprocessing, the data transformation stage into
a .JSON file, then the data training stage, bag of words stage, and the last stage
is full connection.
• Testing
Testing the program using the sand box by producing in accordance with the
design made beforehand. Using sand box in application testing will provide
explanations of conformity expectations in programming.
• Deployment
Deploying the final version of product into production instance and ready to be
used by all public and end users of the product.
• Documentation
Documentation in software engineering is the umbrella term that encompasses
all written documents and materials dealing with a software product’s
development and use. All software development products, whether created by
a small team or a large corporation, require some related documentation.
Proposed Timeline for Chat Support (Built-in Bot and Live):
170
171
Chat Support Draft Mockup
JAGA Admin:
Hai saya June, ada yang bisa saya bantu?
Sam Wilson:
Apakah benar informasi tentang ketersediaan ruang inap RS Jakarta?
JAGA Admin:
Benar sekali, untuk lebih jelasnya silahkan mengunjungi link
berikut:
https://www.google.com/search?q=rumah+sakit+terdekat&
rlz=1C1CHBF_enID880ID880&oq=rumah+sakit+&aqs=chrom
e.1.69i
57j0i433j0l4j69i60l2.5158j0j7&sourceid=chrome&ie=UT
F-8
172
5. Autofill Locations
Autofill Location feature automates user for faster and profile-specific content
experience for data/information view in certain modules. Which in turn, will affect the
existing sort list in each category.
The simplest output implementation is as follow: JAGA application is access by user

in Anyer area. While user is accessing the provincial and district / city, data category is
filled in based on the user's location, so the user only has to fill in the area where he/she
lives. It is estimated that this project will take up to 120 days with the technology
geolocation maps API from google. As for the development method it is divided into
five phases, which includes:
• Analysis
The analysis stage aims to analyze user requirements. Analysis is required as
user information needs is an analysis of attributed data in the form of user
location.
• Design
System design is a batch activity that describes the system details to be shown.
The Place Autocomplete by Google service can match on full words and
substrings, resolving place names, addresses, and plus codes. Applications
can therefore send queries as the user types, to provide on-the-fly place
predictions.
The returned predictions are designed to be presented to the user to aid them
in selecting the desired place. You can send a Place Details request for more
information about any of the places which are returned.
A Place Autocomplete request is an HTTP URL where output may be either of
the following values:
o json (recommended) indicates output in JavaScript Object Notation
(JSON)
o xml indicates output as XML
Certain parameters are required to initiate a Place Autocomplete request. As is
standard in URLs, all parameters are separated using the ampersand (&)
character. The list of parameters and their possible values are enumerated
below.
Required parameters:
o input — The text string on which to search. The Place Autocomplete
service will return candidate matches based on this string and order
results based on their perceived relevance.
o key — JAGA application's API key. This key identifies your application
for purposes of quota management.
• Implementation
This system is built using geolocation techniques provided by Google. Data is
retrieved using the JavaScript API Maps.
• Testing
Testing the program with sand box by producing in accordance with design
made beforehand. Using sand box in application testing will provide an
explanation of conformity expectations in programming.
• Deployment
173
This phase is the final phase of the software development life cycle (SDLC) and
puts the product into production. After the project team tests the product and
the product passes each testing phase, the product is ready to go live. This
means that the product is ready to be used in a real environment by all end
users of the product.
• Documentation
Proposed Timeline for Autofill Locations:
Draft Mockup Autofill Locations:
Jakarta
174
Jakarta
175
176
6. Newsletter Subscription
Newsletter subscription is one of the features that can be implemented to maintain

JAGA user retention. This feature is intended to enable users for subscribing to
updates alert. This feature will be displayed when user accessed the main page of
JAGA. This feature is displayed with a pop-up, and a button which will be created in the
footer.
The technology is used in an email blast to make it easier to spread email to all users.
This project is estimated to take a month to work on.
• Analysis
Analysis includes feasibility studies and needs analysis, where the requirement
of this newsletter is to provide notification to users about information update
relating JAGA. Newsletter includes identifying user audience and targeting
them with valuable content. By individualizing content, it increases click-
through and conversion rates.
Creating Audience Segments by the more research, the better. Each customer
profile should include their background, demographics, interests, and their
expected level and preferences for engagement.
• Design
Make it user-friendly:
o Using Call-to-Action
Users must be able to determine why they are reading your newsletter
and if they find it interesting, they need to be able to take further action
from the newsletter itself.
• Implementation
This system is built using email marketing application, popup JavaScript etc.
A user-friendly structure is better, but also maintain the high quality content that
users expect. The key is in development of a strong, structurally balanced
newsletter containing images, headlines and short descriptions without leaving
out important details that the users read.
• Testing
Testing the program using sand box by producing in accordance with design
made beforehand. Using sand box in application testing will provide an
explanation of conformity expectations in programming.
• Deployment
the product passes each testing phase, the product is ready to go live.
o Make Unsubscribing Easy
Ad a very clear unsubscribe button. Otherwise, newsletter is marked as
spam for a handful of users, that may end up flagging it as spam and is
rather useless and can be incredibly counter-productive.
• Documentation
177
178
Proposed Timeline for Newsletter Subscription Pop up Feature and Menu:
Draft Mockup Newsletter Subscription:
7. SEO Optimization
SEO tools will help provide word content in a way that it attracts the most visitors
possible. Keyword optimization helps you to utilize the words other people are
searching to lead them directly to your website. It is estimated that the project will take
up to 120 days and the technology used is SEO on Page. The things that will be done
in the SEO on Page technique are as follows:
a. Title Tags
Provide a keyword insertion in the title on the website page.
b. Meta keywords and Meta Description
Provide pre-determined keywords so that the website is easily searchable by search
engines and describes the content created, in a meta description with a length of
150-160 characters
c. Heading tags
179
Provide ALT and TITLE tags on each image to define the image.
d. URL structure
e. Image
f. Content
Provide thickening of the words of the content of an article as a keyword marker.
• Analysis
Analysis to determine the words needed to make on-page SEO, so that it can
maximize visitor traffic on the JAGA application
• Design
Design to meet user needs in maximizing visitor traffic
• Implementation
Implementation in accordance to the design of SEO techniques that have been
made
• Testing
Testing using the gtmetrix tool to measure pagespeed, loading time and others.
Testing is carried out to assess the responsiveness of the design on web pages
on various devices.
• Deployment
the product passes each testing phase, the product is ready to go live. This
means that the product is ready to be used in a real environment by all end
users of the product.
There are various phases of the deployment process the project team must
follow to ensure the code and technology to deploy appropriately. The phases
include deployment preparation and procedures, product deployment,
transferring ownership of the product, and closing the deployment phase.
• Documentation
Proposed Timeline for SEO Optimization:
180
IV. Future Integrations
With application integration, single entry of data can be connected to multiple applications
instead of entering the same data as many times to varios applications. When you add new
data into an application that has been integrated with other applications, the data will be
automatically distributed throughout the connected applications. This reduces human
error, the need for manual intervention, and overall ensures consistency across your
platforms.
By having a comprehensive system that forms a bridge between heterogeneous

applications, it is made possible for integration process whether applications were
originally intended to communicate with each other or not.
Application integration is typically done with the use of APIs. An API (application
programming interface) is a package of functions or rules that allow user to reference and
interact with parts of an application for their own purposes. This allows for control and
flexibility for the end user while allowing the original creators to maintain their application
without interference.
While APIs these days are most often referencing web APIs, APIs have long been used to
integrate on-premise software systems. They have played a significant role in SOA (service-
oriented architecture), which has mainly taken place on-premise. This means application
integration was only really able to take place internally. With the web and the development
of cloud applications, application integration is more commonly an external process.
APIs for web applications have become very popular and essential for various tasks due to
the increase in mobile applications and cloud-based software. Web APIs are distinct for the
following reasons:
• They are exposed over the web using an HTTP or HTTPS protocol
• Public web APIs are available over the internet, typically with supporting
documentation
• They are most often built using JSON or XML
While web APIs do share consistencies, most web APIs will be unique in the way of using
them. These differences are dependent on how the developers of the application decided
to create the corresponding API. Therefore, the specific information that is needed to fully
make use of a specific API relies heavily on the documentation that is provided.
181
It can be seen in the picture that the API will make it easier for the database to be accessed
by all platforms for the explanation is as follows
1. Application Accessing API

The first stage is when the user accesses an application. To make it easier for us to
explain, we use the Traveloka example.
When you want to book a flight ticket for a specific destination, Traveloka will
access the API of the airline that has been linked.
2. API Making a Request to the Database / server
After the application has successfully accessed the API address, the request will be
forwarded to the airline servers. So, the API will notify that Traveloka needs flight
data for the dates and destinations that have been mentioned.
3. The Server Responds to the API
When it finds data that matches the request, the server calls the API again. The data
is in the form of information such as seat availability, departure times and others.
4. API Delivered Response to Application
The API then passes the information from the server to your application. In this
example, Traveloka will get information obtained from the airline being contacted.
This process takes place together with requests to other airlines. Therefore, in one
search, Traveloka can display flight schedules from various airlines at once.
As for the requirements needed for making an API are as follows:
1. Web Server
2. Programming language
3. Text Editor
4. Web Browser
5. Gitlab as an online repository of API source code
6. Postman application for testing RESTful API endpoints.
In addition, using API integration also has many advantages, there are several advantage
points that are obtained when using an API, including::
1. APIs are automatic, for example a computer that can manage jobs through an API.
So that agencies can update the way their workflows are faster and more
productive.
182
2. API can access the software components used for the delivery of a service and
information so that it can be more flexible.
3. The API has more scope on the application layer that can be created and used to
distribute information and new audience services can be personalized to create a
special user experience.
4. The API allows all the information generated to be upgraded to be available to every
citizen, not just a few people.
5. The API is more efficient when the data generated can be published automatically
or distributed more easily.
6. API can integrate data into any application easily. So that it can guarantee a
smoother delivery of information.
7. API can make personalization for users or companies who can customize data and
services according to their needs or desires.
8. The API is able to adapt to user needs changing frequently over time. So that the
API can help anticipate changes, when working with API technology.
183
Integration with Middleware
The use of middleware is one of the most common ways to set up an application integration
architecture. Without middleware, application integration would rely on tedious amounts of
programming and manual intervention (even more so with enterprise application
integration). Middleware is standard due to the efficiency it can add to your application
integration workflow, especially when you are dealing with multiple applications.
Middleware can be on-premise or cloud-based. No matter your choice, the program used
to implement application integration will allow for applications to communicate with each
other directly. System can also be set up in a consistent way among all applications, which
overall creates a well-organized structure. This also means that maintenance will be
straighter forward.
With middleware, you remove the need to manually enter data into each of your applications
and help facilitate the sharing of business data between your most important platforms.
For middleware there are several that can be suggested which are usually often used in
Indonesia, including the following:
• Oracle Database
Advantages
§ Have a good ability to perform database system management
§ The amount of data and numbers handled is very large
§ Can process data quickly and accurately
§ Has the ability to cluster servers
§ Can do User management
§ Multi-Platform
§ Fast data processing
§ Has flashback capability
Deficiency
§ The price of DBMS software is high and expensive
§ High minimum hardware specifications
§ Not suitable for application in small companies or agencies
§ Complicated in applying it
• Microsoft SQL Server.
Advantages
§ Supports many database software
§ Can make data clustering
§ Easy to use by the client as well as the user
§ Has a recovery feature and also restore data
§ Good and safe password management
Deficiency
§ The purchase price is quite high
§ Not multi OS, can only be used on operating systems made by Microsoft
§ Difficult to use in other programming languages
§ Not suitable for large database scale
• PostgreSQL.
Advantages
§ Reliable and Stable
§ It is an object-relational database
184
§Handles concurrency better
§implements Multiversion Concurrency Control (MVCC) without read keys
Deficiency
§ Built with extensibility, standards compliance, scalability, and data integrity
in mind, and that can sometimes sacrifice speed.
§ Doesn't support selectable stored procedures like Firebird yet
§ The physical database (table) files are scattered
• MongoDB.
Advantages
§ The performance offered by MongoDB is faster than MySQL because of
memcached and its JSON-like document format
§ Replication is a very useful feature for realtime data backup. MongoDB is
very suitable for use as news portals or blogs, but it is not yet suitable for
use in financial-related information systems because MongoDB does not
support SQL transactions
§ Auto-sharding, is a feature for breaking large databases into pieces for
optimization of database performance. Its use itself is very useful when
you have a website with a database of millions of rows, sharding will help
break it down into sections
§ MongoDB also supports C, C ++, C #, Erlang, Haskell, Java, JavaScript,
.NET (C # F #, PowerShell), Lips, Perl, PHP, Python, Ruby and Scala
§ Cross-platform, so it can be used on Windows, Linux, OS X and Solaris
§ The CRUD (Create, Read, Update, Delete) process feels very light
§ Map / Reduce, it will be very helpful when we perform aggregation
operations. Where all entries come from the collection and the output will
also become a collection too. In MySQL, we usually use the GROUP BY
query
§ GridFS, a specification used to store very large data
Deficiency
§ MongoDB must be installed on a server, and when we use PHP you also
have to restart your server your mongoDB driver can be used by PHP
§ Not yet supported on hosting, but can be tricked by using MongoHQ (for
free there is a limit of up to 16MB)
• IBM DB2
Advantages
§ Reducing administrative costs
§ Increase efficiency and reduce storage requirements
§ Very easy migration from other databases
§ Multi-platform support
Deficiency:
§ Platform Specified
§ Cannot download directly from IBM
§ Its speed is still inferior to MySql and Oracle
• Elasticsearch.
Advantages
§ Low Query
§ Easier to use because it is RESTful based.
Deficiency
185
§ because it's still new, not many people know this technology
• Redis
Advantages
§ Very fast
§ Supports rich data types
§ Operations are atomic
§ Multi-utility tool
Deficiency
§ does not support query language.
Middleware can provide certain benefits as explained below:

1. In a distributed system, 2 platforms or applications can be run simultaneously.
2. Can communicate on applications running on different platforms.
3. There is transparency on the entire network so that it can provide interactions with
other services or applications.
Middleware can be used for several purposes such as:

1. Provide facilities for programmers to distribute objects that will be used in several
different parts of the process.
2. As an interconnection to several applications and interoperability issues.
Middleware has become indispensable for migrating from mainframe applications
to client / server applications and also for providing communication between
different platforms.
186
JAGA-06: Development Log
Logs are part of the Version Control System. The version control system is very useful for
preventing developers from having difficulty analyzing changes & working with shared
code. Simply put, VCS is an important principle in a software configuration management
system that deals with the need for change management in projects. Changes / revisions
/ updates made can be identified by code or numbers. Information such as timestamps
and identities that made the changes also remains. Documentation of development logs
are best using GIT, regards to its features:
1. A distributed version control system, GIT uses a peer-to-peer approach, unlike

others such as Subversion (SVN) which uses a client-server model.
2. GIT allows developers to have independent and massive code branches. Creating,
deleting and merging these branches is faster, smoother and less time consuming.
3. All operations are atomic, meaning that an action is either completely completed or
completely failed. This is very important, because in some version control systems
such as CVS, the operation is non-atomic. If there is an operation that is "hanging"
and associated with the repository, the repository condition becomes unstable.
4. In GIT, everything is stored in the .git folder. In contrast to other VCS such as SVN
or CVS, where file metadata is stored in hidden folders such as .cvs, .svn, .etc.
5. GIT uses a data model that helps ensure the integrity of any cryptographic in the
repository. Every time a file is added or committed, the checksum is created; the
same thing, it is retrieved via the checksum as well.
6. Another interesting feature in GIT is the staging area or index. With the staging area,
developers can format commits and make them available for review before they
actually apply.
Following are development log progress of JAGA.ID platform development project which is
coordinated by the Project Manager and executed with the back-end technical programmer
team:
188
Updated At Closed At
Title State Description Author Assignee Due Date Created At (UTC) Milestone Labels
(UTC) (UTC)
Halaman Home New UI / UIX Closed Mohon bantuannya untuk mulai pengerajaan UI / UIX yang baru ya, untuk target minggu ini focus di page Frank (Apergu) Abdurros 10/24/2020 10/21/2020 0:51 1/25/2021 6:14 1/25/2021 6:14 2021 - TW 1 JAGA.ID,
Jaga home dulu saja sebagai base layoutnya. yid New
Untuk link Figmanya link dapat diakses di link berikut : figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web- (Cegah) UI,UI/UX
Jaga.id?node-id=0%3A1
Email mas rosyid sudah saya add di figma juga ya

Sesuai panduan di grup, pengerjaannya akan dilakukan 1 project dengan yang sudah ada sekarang yaitu
project jaga-quasar-reborn dengan pengelompokan component baru v6.
Halaman Profil Umum National Closed Mohon bantuannya untuk mengerjakan halaman Profil daerah ya. Frank (Apergu) Rubhi 10/21/2020 5:25 1/25/2021 2:38 1/25/2021 2:38 2020 Oct JAGA.ID,
dan Daerah Untuk UI terbarunya ada di figma, bisa diakses melalui : Home -> Jendela Daerah -> Koordinasi Wilayah -> Cegah New
Pr1ofil Umum. UI,On
Link Figmanya : figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web-Jaga.id?node-id=0%3A1 Progress,
UI/UX
Untuk profil daerah in pengerjaan tampilannya mengikuti UI yang baru (warna merah) tetapi karena
merupakan modul prioritas, halaman ini akan ditempatkan di jaga versi yang sekarang terlebih dahulu (v5)
dengan penyesuaian komponen warna, font tetap mengikuti warna jaga yang sekarang (hijau)
Halaman Pencarian Kajian Closed Mohon bantuannya untuk dibuatakan halaman cari kajian pada modul admin litbang Frank (Apergu) Arji Cegah 10/22/2020 10:39 2/18/2021 1:50 2/18/2021 1:44 2021 - TW 1 Done,JAG
Internal Berikut figmanya : https://www.figma.com/proto/aWWKHifdfQJ5WmAHJj5iJo/Web-Jaga.id?node- A.ID,New
id=780%3A1615&scaling=min-zoom UI,UI/UX

Untuk modul in pengerjaan tampilannya mengikuti UI yang baru (warna merah dan hitam) tetapi karena
dengan penyesuaian komponen warna, font tetap mengikuti warna jaga yang sekarang (hijau).
API Jejak Kasus untuk national Closed Mohon dibuatkan 1 API untuk mendapatkan data daftar jejak kasus tingkat national (seluruhnya). Frank (Apergu) Robeth 11/24/2020 3:07 1/25/2021 2:06 1/25/2021 2:06 New UI
Untuk yang existing sekarang hanya ada berupa provinsi. Rahmatul
lah
[new UI] Bansos Covid (New UI Open Implementasi Page Bansos Covid pada mobile dan web untuk Tampilan baru v6. Mohon cek figma untuk Frank (Apergu) Iqbal 2/11/2021 2/4/2021 0:47 2/17/2021 3:09 2021 - TW 1 Frontend,
Mobile) design baru (Akhdani) New
UI,On
Progress
[new UI] Rangkuman Jendela Open Implementasi Halaman Rangkuman Jendela daerah dan Penyelamantan keuangan Negara Frank (Apergu) Frank 2/18/2021 2/4/2021 0:53 2/4/2021 7:23 2021 - TW 1 Backend,
Daerah (Apergu) Frontend,
New UI
189
Updated At Closed At
Title State Description Author Assignee Due Date Created At (UTC) Milestone Labels
(UTC) (UTC)
[new UI] Profil
Halaman HomeDaerah
New UI / UIX Open
Closed MohonImplementasi Menuuntuk
bantuannya Profil mulai
Daerah Pada Jendela
pengerajaan UI Daerah
/ UIX yang baru ya, untuk target minggu ini focus di page Frank (Apergu) Rahmat
Abdurros 2/18/2021 10/21/2020
10/24/2020 2/4/2021 0:51
0:55 1/25/2021
2/25/2021 6:14
1:53 1/25/2021 6:14 2021 - TW 1 JAGA.ID,
Backend,
Jaga home dulu saja sebagai base layoutnya. Hidayat
yid Frontend,
New
Untuk link Figmanya link dapat diakses di link berikut : figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web- (Akhdani)
(Cegah) New
UI,UI/UX
Jaga.id?node-id=0%3A1 UI,On
Email mas rosyid sudah saya add di figma juga ya Progress
[ new UI] Bansos Covid - Web Open Mas @moris_akhdani dari sisi web frontendnya. Frank (Apergu) Agung 2/11/2021 2/4/2021 7:20 2/17/2021 3:09 2021 - TW 1 Frontend,
Frontend (new UI) Untuk detail
Sesuai panduandesign bisa pengerjaannya
di grup, di cek di figma ya
akan dilakukan 1 project dengan yang sudah ada sekarang yaitu Moris New
project jaga-quasar-reborn dengan pengelompokan component baru v6. (Akhdani) UI,On
Halaman Profil Umum National Closed Mohon bantuannya untuk mengerjakan halaman Profil daerah ya. Frank (Apergu) Rubhi 10/21/2020 5:25 1/25/2021 2:38 1/25/2021 2:38 2020 Oct Progress
JAGA.ID,
Diskusi
dan pada halaman jendela
Daerah Open 'Mohon
Untuk UIbantuan
terbarunyauntuk
adaimplementasi
di figma, bisafitur diskusi
diakses pada :halaman
melalui Home ->yang adaDaerah
Jendela di jendela daerah
-> Koordinasi Wilayah -> Robeth Rahmatullah Cegah
Rahmat 2/8/2021 10:02 3/1/2021 9:27 2021 - TW 1 New
Backend,
daerah
Pr1ofil Umum. Hidayat Frontend,
UI,On
Link - Koordinasi Figmanya Wilayah
: figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web-Jaga.id?node-id=0%3A1 (Akhdani) New
Progress,
- E-LHKPN UI,On
UI/UX
Untuk- Gratifikasi profil daerah in pengerjaan tampilannya mengikuti UI yang baru (warna merah) tetapi karena Progress
- SPI
- Jejak kasus
dengan penyesuaian komponen warna, font tetap mengikuti warna jaga yang sekarang (hijau)
Halaman Pencarian Kajian Closed Mohon bantuannya untuk dibuatakan halaman cari kajian pada modul admin litbang Frank (Apergu) Arji Cegah 10/22/2020 10:39 2/18/2021 1:50 2/18/2021 1:44 2021 - TW 1 Done,JAG
Internal Berikutbaik versi mobile :maupun
figmanya desktop. sesuai dengan desain figma di
https://www.figma.com/proto/aWWKHifdfQJ5WmAHJj5iJo/Web-Jaga.id?node- A.ID,New

id=780%3A1615&scaling=min-zoom UI,UI/UX
- desktop: https://www.figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web-Jaga.id?node-id=0%3A1
- mobile: https://www.figma.com/file/19M88YJFS4ePvXSLLCL5LS/UI-Jaga.id?node-id=0%3A1
Untuk modul in pengerjaan tampilannya mengikuti UI yang baru (warna merah dan hitam) tetapi karena
merupakan![elhkpn_diskusi](/uploads/fe9fa5748edbd834c951748bfcfd52a3/elhkpn_diskusi.png)
modul prioritas, halaman ini akan ditempatkan di jaga versi yang sekarang terlebih dahulu (v5)
dengan penyesuaian komponen warna, font tetap mengikuti warna jaga yang sekarang (hijau).
API Jejak Kasus untuk national Closed Mohon Isu dapat dikerjakan
dibuatkan setelah
1 API untukhalaman diskusidata
mendapatkan padadaftar
moduljejak
existing
kasus(pendidikan, kesehatan,
tingkat national desa, dll) selesai
(seluruhnya). Frank (Apergu) Robeth 11/24/2020 3:07 1/25/2021 2:06 1/25/2021 2:06 New UI
Untuk dikerjakan yangoleh massekarang
existing @rosyid_cegah dan berupa
hanya ada @arji_cegah .
provinsi. Rahmatul
Komponen UI pada diskusi existing dapat di-reuse untuk mempermudah development frontend. lah
[new UI] Bansos Covid (New UI Open
Implementasi Page Bansos Covid pada mobile dan web untuk Tampilan baru v6. Mohon cek figma untuk Frank (Apergu) Iqbal 2/11/2021 2/4/2021 0:47 2/17/2021 3:09 2021 - TW 1 Frontend,
Mobile) design Mohonbaru konfirmasi dari mas @valenscofrank, untuk diskusi pada halaman jendela daerah ini dikelompokkan (Akhdani) New
berdasarkan apa ? UI,On
Apakah berdasarkan `id_wilayah`? sehingga Progress
[new UI] Rangkuman Jendela Open Implementasi Halaman Rangkuman Jendela daerah dan Penyelamantan keuangan Negara Frank (Apergu) Frank 2/18/2021 2/4/2021 0:53 2/4/2021 7:23 2021 - TW 1 Backend,
Daerah - Ketika user klik area jawa barat, hanya diskusi pada jawa barat yang akan ditampilkan (Apergu) Frontend,
- ketika user membuat diskusi baru, user wajib memilik sektor "E-lhkpn - Jendela Daerah" dan wilayah "Jawa New UI
Barat"
- Ketika detail diskusi dilihat, maka "Jawa Barat" muncul sebagai objek terkait diskusi. Jika diklik maka
redirect ke halaman jendela daerah - elhkpn dengan area jawa barat di klik.

190
Halaman administrasi admin pada Open Mohon bantuannya untuk menyesuaikan semua UI terkait fitur administrasi/backoffice. Robeth Rahmatullah Iqbal 2/8/2021 10:20 2/17/2021 8:38
v6 (Akhdani)
Secara umum, yang disesuaikan:

1. Header/footer
2. Sidebar
3. Breadcrumb atau title
4. Primary color yang awalnya hijau menjadi merah-hitam

Existing:

![admin_v6](/uploads/a030287cdb7f87f19d818ddf265f2a34/admin_v6.png)

Target: referensi administrasi stranas https://www.figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web-
Jaga.id?node-id=2774%3A3005

![ui_admin_v6](/uploads/32908160b499656450c13c638b0aaa10/ui_admin_v6.png)

Pekerjaan dapat langsung dilakukan pada existing source code tanpa perlu membuat file/folder baru di v6
Halaman administrasi dan Open 'Deskripsi mirip dengan #744 , namun scope pengerjaan adalah halaman stranas untuk kepentingan Robeth Rahmatullah Agung 2/8/2021 11:19 2/22/2021 7:03
monitoring stranas pada v6 Moris
- Admin: manajemen master data (Akhdani)
- Verifikator: verifikasi input KLOP
- KLOP: input data KLOP

Link figma: https://www.figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web-Jaga.id?node-id=2774%3A3005

Halaman administrasi dan Open 'Deskripsi mirip dengan #744 , namun scope pengerjaan adalah halaman korwil untuk kepentingan Robeth Rahmatullah Iqbal 2/8/2021 11:22 2/8/2021 11:22
monitoring korwil pada v6 (Akhdani)
- Admin: manajemen master data
- Verifikator: verifikasi input KLOP
- KLOP: input data KLOP
- Monitoring: baca semua data korwil

Link figma: https://www.figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web-Jaga.id?node-id=2774%3A3004

[new UI] Modul Diskusi Mobile Open Mohon mengerjakan modul Diskusi untuk tampilan v6 sesuai design di figma ya. Frank (Apergu) Agung 2/18/2021 6:56 3/5/2021 7:07
dan Web Ada beberapa note terkait UINya Moris
Untuk Section hot diskusi blm ada APInya, sementara buat Placeholdernya dlu ya. APINya akan di siapkan (Akhdani)
oleh mas @rhidayat_akhdani disub task selanjutnya.
![Screen_Shot_2021-02-
18_at_13.55.59](/uploads/e00ac663114c1058b3d396192e212b7c/Screen_Shot_2021-02-
18_at_13.55.59.png)
191
[new UI] Issue Berita Jaga Open List issue untuk pengembangan modul berita jaga Frank (Apergu) Arji Cegah 2/22/2021 3:10 2/25/2021 16:41 2021 - TW 1 New
UI,On
Progress
Halaman daftar diskusi Open 'Mohon bantuannya untuk implementasi halaman daftar diskusi baik mobile dan desktop Robeth Rahmatullah Iqbal 2/22/2021 11:22 2/26/2021 4:35 2021 - TW 1 Frontend,
(Akhdani) New
- Link figma mobile: https://www.figma.com/file/19M88YJFS4ePvXSLLCL5LS/UI-Jaga.id?node-id=0%3A1 UI,On
- Link figma desktop: https://www.figma.com/file/aWWKHifdfQJ5WmAHJj5iJo/Web-Jaga.id?node- Progress,
id=0%3A1 V6

Ilustrasi versi mobile:

<img src="/uploads/6a07f6d434b43027c54e2a13c99db0f4/daftar_diskusi_mobile.png" width="600" />

Ilustrasi versi desktop:

<img src="/uploads/6c2cbbfde10060b80342733de7854a3d/daftar_diskusi_desktop.png" width="600" />

Mohon diimplementasikan dengan rapi sesuai checklist https://dev.kpk.go.id/gitlab/JAGA/jaga-quasar-
reborn/-/blob/master/.gitlab/merge_request_templates/Frontend.md ya mas :smile:

Bisa cek pekerjaan mas @arji_cegah terkait berita (mirip diskusi) yang masih on progress di
https://dev.kpk.go.id/gitlab/JAGA/jaga-quasar-reborn/-/merge_requests/245

Mas @valenscofrank izin tracking implementasi daftar diskusi di sini ya. melengkapi #753
Fitur Create Diskusi dan Keluhan Open 'Mohon bantuannya untuk implementasi fitur create diskusi dan keluhan bansos, baik mobile dan desktop Robeth Rahmatullah Bambang 2/22/2021 11:24 3/4/2021 15:52 2021 - TW 1 Frontend,
Bansos Yudhoto New
- Link figma mobile: https://www.figma.com/file/19M88YJFS4ePvXSLLCL5LS/UI-Jaga.id?node-id=0%3A1 mo UI,On
id=0%3A1 V6


<img src="/uploads/9770c022bdd4f151d015ba09fa3f4fb4/form_diskusi_mobile.png" width="300" />


<img src="/uploads/87f1ad9efd26f71a499ce8bfdf6b9eb8/form_diskusi_desktop.png" width="600" />


Mas @valenscofrank izin tracking implementasi form diskusi di sini ya. mungkin melengkapi #753
192
Open 'Mohon bantuannya untuk implementasi halaman detail diskusi baik mobile dan desktop Robeth Rahmatullah Agung 2/22/2021 11:28 3/5/2021 7:07 2021 - TW 1 Frontend,
Moris New
- Link figma mobile: https://www.figma.com/file/19M88YJFS4ePvXSLLCL5LS/UI-Jaga.id?node-id=0%3A1 (Akhdani) UI,On
id=0%3A1 V6


<img src="/uploads/e5ba22c796bb7e2f571694210d32d1d3/detail_diskusi_mobile.png" width="400" />


<img src="/uploads/315622fd6975326451a21d5be2a01786/Detail_diskusi_desktop.png" width="600" />


Bisa cek pekerjaan mas @arji_cegah terkait berita (mirip diskusi) yang masih on progress di
https://dev.kpk.go.id/gitlab/JAGA/jaga-quasar-reborn/-/merge_requests/245

Mas @valenscofrank izin tracking implementasi daftar diskusi di sini ya. melengkapi #753

Mas @bambang_giz mohon dibantu terkait form komentar nya ya. Karena dipakai oleh pemda/kementerian
untuk tindak lanjut bansos juga :pray:
Open Mohon bantuannya untuk review teknis semua halaman terkait pendidikan :smile: Robeth Rahmatullah Arief 2/22/2021 11:36 3/8/2021 2:02 2021 - TW 1 Frontend,
(Akhdani) New
Detail teknis yang direview mengacu ke checklist merge request: https://dev.kpk.go.id/gitlab/JAGA/jaga- UI,On
quasar-reborn/-/blob/master/.gitlab/merge_request_templates/Frontend.md ya mas :smile: Progress,
V6
Contoh temuan yang diharapkan:

1. Halaman detail sekolah tidak sesuai mockup (cantumkan screenshot)
2. Halaman detail bos belum menggunakan API Loader
3. Panduan BOS pada desktop ok, tapi pada versi mobile kurang tertata (cantumkan screenshot)
4. Banyak console.log pada halaman pencarian sekolah
5. Fitur KIP tidak berfungsi
6. dst

Daftar hal yang perlu diperbaiki dapat dikumpulkan menjadi 1 komentar.

Untuk eksekusi perbaikan baru dilakukan minggu depan (bulan maret) dan di tracking lewat isu ini juga.

Jika mas @valenscofrank ada daftar hal yang perlu diperbaiki monggo dicatat disini ya mas :pray:
193
Open Mohon bantuannya untuk review teknis semua halaman terkait kesehatan :smile: Robeth Rahmatullah Frasetiaw 2/22/2021 11:37 3/2/2021 8:10 2021 - TW 1 Frontend,
an New
Detail teknis yang direview mengacu ke checklist merge request: https://dev.kpk.go.id/gitlab/JAGA/jaga- (Akhdani) UI,On
V6

1. Halaman detail puskesmas tidak sesuai mockup (cantumkan screenshot)
2. Halaman detail rumah sakit belum menggunakan API Loader
3. Panduan puskesmas pada desktop ok, tapi pada versi mobile kurang tertata (cantumkan screenshot)
4. Banyak console.log pada halaman pencarian puskemas
5. Fitur cek ketersediaan tempat tidur tidak berfungsi
6. dst



Open Mohon bantuannya untuk review teknis semua halaman terkait Anggaran :smile: Robeth Rahmatullah Frasetiaw 2/22/2021 11:40 2/22/2021 11:40 2021 - TW 1 Frontend,
an New
Detail teknis yang direview mengacu ke checklist merge request: https://dev.kpk.go.id/gitlab/JAGA/jaga- (Akhdani) UI,V6
quasar-reborn/-/blob/master/.gitlab/merge_request_templates/Frontend.md ya mas :smile:


1. Halaman detail anggaran SKPD tidak sesuai mockup (cantumkan screenshot)
2. Halaman daftar SKPD belum menggunakan API Loader
3. Panduan APBD pada desktop ok, tapi pada versi mobile kurang tertata (cantumkan screenshot)
4. Banyak console.log/console.error pada halaman pencarian APBD
5. Diagram pada halaman detail anggaran SKPD
6. dst



194
Open Mohon bantuannya untuk review teknis semua halaman terkait desa :smile: Robeth Rahmatullah Arief 2/22/2021 11:41 3/3/2021 2:16 2021 - TW 1 Frontend,
(Akhdani) New
Detail teknis yang direview mengacu ke checklist merge request: https://dev.kpk.go.id/gitlab/JAGA/jaga- UI,On
V6

1. Halaman profil desa tidak sesuai mockup (cantumkan screenshot)
2. Bagian dana desa belum menggunakan API Loader
3. Panduan dana desa pada desktop ok, tapi pada versi mobile kurang tertata (cantumkan screenshot)
4. Banyak console.log/console.error pada halaman pencarian desa
5. Tabel dana desa tidak muncul
6. dst



Open 'Mohon bantuannya untuk review teknis semua halaman Umum :smile: Robeth Rahmatullah Frasetiaw 2/23/2021 0:45 3/8/2021 8:37 2021 - TW 1 Done,Fro
an ntend,Ne
Contoh Halaman umum: (Akhdani) w UI,V6

- Halaman login
- Halaman register user
- Halaman home/landing page
- Halaman tentang
- Halaman landing page sektor
- Halaman tentang
- Layout (notifikasi, menu, footer)
- Halaman profil (update data dan password)
- dll

Detail teknis yang direview mengacu ke checklist merge request: https://dev.kpk.go.id/gitlab/JAGA/jaga-


1. Halaman register tidak sesuai mockup (cantumkan screenshot)
2. Bagian profile picture belum menggunakan API Loader
3. Panduan stranas kurang tertata (cantumkan screenshot)
4. Banyak console.log/console.error saat login sosial media
6. dst



195
Open 'Mohon bantuannya untuk review teknis semua halaman jendela daerah :smile: Robeth Rahmatullah Arief 2/23/2021 0:48 3/5/2021 9:24 2021 - TW 1 Frontend,
(Akhdani) New
Contoh Halaman umum: UI,On
Progress,
- Layout (header, footer, menu) page jendela daerah V6
- Jendela daerah korwil
- Jendela daerah gratifikasi
- Jendela daerah elhkpn
- Jendela daerah jejak kasus
- Jendela daerah survey penilaian integritas
- dll

Detail teknis yang direview mengacu ke checklist merge request: https://dev.kpk.go.id/gitlab/JAGA/jaga-


1. Menu footer/sidebar menu tidak sesuai mockup (cantumkan screenshot)
2. Halaman jendela daerah elhkpn belum API Loader
3. Penjelasan jendela daerah gratifikasi kurang tertata (cantumkan screenshot)
4. Banyak console.log/console.error pada jendela daerah
6. dst



Open Kumpulan Issue untuk pengerjaan modul Pelayanan Public - Pendidikan Universitas Frank (Apergu) Abdurros 3/1/2021 3:19 3/4/2021 6:55 2021 - TW 1 New
yid UI,On
(Cegah) Progress
Open Seperti hot topic, untuk Berjaga buatkan API untuk trendinng topic. Frank (Apergu) Rahmat 3/9/2021 3:22 3/9/2021 3:22 2021 - TW 1 New UI
Ambil 3 berikta dengan interaksi terbanyak dalam **1 minggu** terakhir Hidayat
Interaksi = jumlah comment + jumlah like + jumlah share kemudian di total (Akhdani)

Misalnya sekarang tanggal 8 februari, berarti ambil 3 berita dengan jumlah interaksi terbanyak tanggal 1 Feb -
7 February
Table 6.1 Development Log JAGA ID
196

Jaga Id It Blueprint - Final - 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jaga Id It Blueprint - Final - 1

Uploaded by

Copyright:

Available Formats

JAGA.

Author : Frank Valensco

Creation Date : November 30, 2020

Last Updated : March 09, 2021

Fransisca Silalahi – GIZ TTD : Date :

Hasan Faiza – GIZ TTD : Date :

Ursula Rosyana Garini – KPK TTD : Date :

Frank Valensco – Apergu TTD : Date :

Date Author Version Change Reference

30 Nov 2020 Frank Valensco V1 No Reference

Ursula Rosyana Garini KPK Key User

Hasan Faiza Principal Advisor GIZ APCC

Position Name Copy

Document Control .................................................................................................................... 2

Executive Summary ................................................................................................................. 3

Table of Content ...................................................................................................................... 4

Catalog Blueprint ..................................................................................................................... 5

JAGA-01: JAGA.ID Overview and Development Timeline ..................................................... 7

JAGA-02: JAGA.ID Platform Development Architecture ..................................................... 12

JAGA-03: UI / UX Guidelines ................................................................................................. 18

JAGA-04: Previous and Current Design ................................................................................ 54

JAGA-05: Future Recommendation ....................................................................................154

JAGA-06: Development Log ................................................................................................178

• JAGA.ID Platform Development Architecture

• Previous and Current Design

• Development Log (Development and Bug Fixes)

JAGA.ID is a public information portal on corruption prevention initiated by the Corruption

a) an integrated data pool; centralization of information on corruption prevention

b) instant prevention programme report; acting as reference for internal stakeholders

JAGA.ID Development Methodology

Image 1.1 Agile Methodology

b) Sprints; collections of work confned to a regular, repeatable work cycle, known as a

c) Planning process; the most important document is the project charter/timeline

e) Monitoring, controling, and closing; developing data collection plan, communicate

JAGA.ID Development Timeline

Plan Plan End Actual Start Actual End

UI/UX DEVELOPMENT JAGA.ID PLATFORM

The details of the actual vs plan progress curve are as follows:

Graph 1.1 UI/UX Development Actual vs Plan Progress Curve

Image 2.1 Mind-Map JAGA ID

The technical architecture of the database - backend - frontend, is illustrated in the

1. The database used is PostgreSQL, an open-source relational database software

Module Submodule Feature

Window Area Regional • Outcome maps at the Provincial and

• Gratification reporting button (re-direct

Components cover a range of interface needs, including:

1. original color logo of JAGA.ID,

2. original color logo of KPK,

4. JAGA.ID Brand Identity sugested by Strakom KPK

Example: CTA banner on the homepage

ii. Addition of CTA to each submodule

Foundations Color Typography

Content Fonts Logos

An avatar is a visual representation of a user or entity.

A default image is displayed for avatars when a chosen source is

Show how size of a button compare

The most commonly used button component. This button has

Buttons may include an icon before the text.

Sub Menu Navigation Backend Main Navigation

Main Menu Navigation

Sub Menu Navigation

Distribution Map Jendela Daerah

2. Bar Graph Comparison