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.

ActivityUser 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.

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.

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

MetricDimensionComparisonVisualisation

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

Last updated

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.