Design User Interface

Overview

This page provides the details on designing the transactional user interface and performance dashboards.

Steps

Design Transactional User Interface

Identify the points different roles interact with the system from the process model.

Activity	User Interface Required
Apply for Birth Certificate	New Application UI Applicated Submitted UI
Make Payment	Payment UI Payment Successful UI
Verify Application	Verify Application UI Application Verified UI
Send Notification	Notification UI
Update Application	Edit Application UI Update Successful UI
Approve Application	Approve Application UI Application Approved/Rejected UI
Download Certificate	Download Birth Certificate UI Birth Certificate UI

DIGIT UI design guidelines are available here.

FIGMA designs using the above Guidelines are available here. Feel free to copy and modify as per your needs.

DIGIT UI Accelerators available in React and Flutter implement these Guidelines as reusable components and UI frameworks. The entire source code is open and available here.

Design Performance Dashboard

DIGIT Decision Support Dashboard (DSS) looks like below.

Cantonment Citizen Dashboard - All Services

Each of the widgets corresponds to one service and that displays basic performance metrics for that service. This can be further drilled down to the below view for deeper analysis.

Cantonment Citizen Dashboard - Complaints Dashboard

The performance metrics and dimensions identified of the service can be mapped to different available visualizations in DSS.

Metric	Dimension	Comparison	Visualisation
Total Birth Certificate Applications	None	Previous Year	Metric
Average Time	None	Previous Year	Metric
Total Applications	By Location		Pie Chart
Total Applications	By Status		Pie Chart
Total Applications	By Week		Line Chart