‹ Start page

Directorate General Monitoring & Evaluation, P&D Board, Government of the Punjab

RTMES Design Story Book

How each RTMES screen looked before and how it looks now, with what changed and what we tried and dropped along the way. Tap any screen to enlarge it.

Web8 – 21 Oct 2026

Monitoring dashboard

The government dashboard was redesigned in four variations (Classic, Vivid, Bold, Bold Blue). Bold Blue is now the default, using the same calm blues as the mobile app.

Before
Old dashboard
Old dashboard, detail
Old dashboard, detail
After
Bold Blue, the default variation

What changed

  • Clear top bar: Monitoring / Evaluation switch, SMDP as its own button, All Modules grid
  • Headline tiles with plain-language helper text under every figure
  • Red, amber and green kept only for status (Good / Average / Critical)
  • Report workflow reduced to two steps; Department summary and PC-III as separate compact cards
  • Logo-fill loader, consistent tables (Rs million, 2 decimals) and phone-width layout
  • Blue scheme by default (Monitoring sapphire, Evaluation azure); the original green scheme kept unchanged

Tried and dropped

  • A dark section that did not fit the flow
  • 4px card borders (too heavy; 2px kept)
  • Teal as a module colour (read as green next to blue)

Files: RTMES-web/RTMES-dashboard-v4.html RTMES-web/RTMES-dashboard.html -v2 -v3

Web12 – 13 Oct 2026

Evaluation dashboard

Rebuilt in all four variations while keeping the old order and labels, so users need no retraining.

Before
Old Evaluation dashboard
After
Evaluation, Bold Blue

What changed

  • Same two rows as before: PC(IV) pipeline, then evaluated projects and their results
  • Compact tiles (icon and number on one line, name underneath)
  • Evaluation azure as the module colour
  • Each Monitoring page links to the Evaluation page of its own variation and back

Tried and dropped

  • Full-size Bold tiles (too big compared with the old dashboard)
  • Arrows linking one tile to the next

Files: RTMES-web/RTMES-evaluation-v4.html

Web21 – 23 Oct 2026

Document Categories (super admin)

New page where the super admin sets up the document lists the mobile app uses: main categories, their sub-categories and the documents mapped to each.

New screen
Document Categories

What changed

  • Three linked steps: main categories, sub-categories, documents
  • Add is always on top; rename and delete at every level, deletes always ask first
  • Columns view and a Tree view of the whole set-up; a Guided card variation with step colours
  • Plain wording for non-technical users ('main category', 'sub-category')

Tried and dropped

  • A purple step colour
  • A step 3 colour that looked disabled
  • A header that felt too big

Files: RTMES-web/RTMES-documents.html

Mobile app12 – 19 Oct 2026

Home · Monitoring

A compact, native-feeling Home where everything important fits in the first view of a phone.

Before
Old Home (Monitoring)
After
New Home (Monitoring)

What changed

  • Fixed app bar: profile photo, module chip (Monitoring / Evaluation) and a notification bell with a count
  • Start journey as a one-line action card
  • Monitoring Report and PC(III) as two equal, simple tiles in white with a soft blue glow
  • New Report Status card: Total Visits (overall) and Last 5 Days as a list or a bar chart
  • Visits as three solid colour tiles (Today On-Visit, Upcoming, Completed); the ring chart was dropped
  • Sapphire blue for Monitoring, Figtree font, high contrast for users aged 40+
  • Bottom bar: Home, WBS, Attendance, Profile (Notifications moved to the profile drawer)

Tried and dropped

  • One solid and one pale report tile
  • Solid blue, navy, indigo + teal, slate and blue + rose report tiles
  • A folder-shaped report tile
  • A dark navy visits card
  • The route-style visits version
  • A header that scrolled away

Files: RTMES-mbl/RTMES-app-home.html

Mobile app12 – 30 Oct 2026

Home · Evaluation

The same Home in the Evaluation colour, showing only what Evaluation needs.

Before
Old Home (Evaluation)
After
New Home (Evaluation)

What changed

  • Azure blue for Evaluation, switched from the module chip in the app bar
  • Evaluation Report and PC(IV) tiles; results read Successful / Partial Success / Not Successful
  • No Start journey (Monitoring only)
  • PC(V) Reports tile (full row) added on 30 Oct 2026

Tried and dropped

  • Violet and deep navy as the Evaluation colour

Files: RTMES-mbl/RTMES-app-home.html?module=evaluation

Mobile app16 Oct 2026

The app on the web

The same Flutter build also runs in the browser, so every screen adapts from phone to laptop.

New screen
Home at laptop width

What changed

  • Navigation rail on the left from tablet width; it collapses to icons with tooltips
  • Official emblem in full colour at the foot of the rail; the user's name beside the photo
  • Soft gradient backdrop with two faint, slowly turning DGM&E stamps
  • Two-column dashboard from 900px

Tried and dropped

  • The official emblem greyed out or used as the rotating stamp

Files: RTMES-mbl/RTMES-app-home.html?preview=web

Mobile app13 – 26 Oct 2026

Profile drawer

Profile opens a drawer from the left; Notifications moved here from the bottom bar.

Before
Old: Notification and Profile in the bottom bar
After
New profile drawer

What changed

  • Header with photo, edit button and name
  • Notifications as a highlighted first row
  • Grouped settings: Account Settings, Personalize, Other (Logout in red)
  • Signature row shows 'Uploaded' and a small preview of the signature
  • Version number pinned at the bottom

Files: RTMES-mbl/rtmes-app.js (drawer)

Mobile app12 Oct 2026

Remarks

A Word-like editor with every option visible at once.

Before
Old Remarks
After
New Remarks

What changed

  • Five rows of seven tools: undo / redo, font and size, headings, bold to highlight, lists, alignment, link, image, table
  • No tabs, no 'more' menu, no sideways scrolling
  • Fixed Save and Continue button at the bottom

Tried and dropped

  • A tabbed toolbar

Files: RTMES-mbl/RTMES-app-remarks.html

Mobile app16 – 19 Oct 2026

Monitoring Report

The seven report statuses as clear solid tiles, each in its own calm colour.

Before
Old Monitoring Report
After
New Monitoring Report

What changed

  • Same seven items in the same order: Schedule Visit, Complete Visit, Submitted, Refer Back, Approved by DG, Issued, Cancel
  • Solid tiles with white text, icon top left and a big count top right
  • Refer Back in a calm blue-indigo; Cancel as a full-width row
  • No black tile, no identical blue tiles

Tried and dropped

  • Pale tinted tiles with coloured numbers ('so bad')
  • Amber and orange for Refer Back

Files: RTMES-mbl/RTMES-app-mreport.html

Mobile app16 – 19 Oct 2026

Scheduled visits

One compact card per visit with everything readable at a glance.

Before
Old Scheduled
After
New Scheduled

What changed

  • Blue header band: project icon, GS number, 'Synced' with a blinking dot, and Edit / Report Test
  • Start date → End date with labels; a passed end date turns red with a warning icon
  • District as a chip with a pin
  • Project Documents | Sync Previous Report as two buttons in the footer
  • Real red YouTube button for the video guide

Tried and dropped

  • A ticket / boarding-pass view
  • A timeline under the dates
  • Big button tiles
  • A grey facts box ('dull')

Files: RTMES-mbl/RTMES-app-scheduled.html

Mobile app19 Oct 2026

PC(IV) Projects

The three loose tiles became two clear groups: Self and Assigned.

Before
Old PC(IV) Projects
After
New PC(IV) Projects

What changed

  • Self (In-Process, Submitted, Refer Back) and Assigned (Refer Back, Completed) as two group cards
  • Each group in its own colour with its total in a white pill
  • Counts on every step

Files: RTMES-mbl/RTMES-app-pc4-hub.html

Mobile app14 Oct 2026

PC(IV) project list

Search, filter and one tidy card per project.

Before
Old PC(IV) list
After
New PC(IV) list

What changed

  • Full project titles, never cut
  • One action row: View PDFs and Edit as quiet buttons, Submit PC-IV as the main action
  • Floating + button to add a project

Tried and dropped

  • Three loose text links
  • A solid dark Submit button on every card ('rushed')

Files: RTMES-mbl/RTMES-app-pc4.html

Mobile app19 – 20 Oct 2026

Completed projects

Each completed project shows how much of its documentation is uploaded.

New screen
Completed

What changed

  • Green upload bar with 'Uploaded' / 'Not uploaded' percentages
  • The not-uploaded part stays empty (outline only)
  • Equal card heights on the web view

Tried and dropped

  • A soft red track for 'not uploaded'
  • A ring chart

Files: RTMES-mbl/RTMES-app-pc4-completed.html

Mobile app19 – 26 Oct 2026

Project Documents

Field staff choose the documents a project needs from the admin's lists, then upload them. The flow went through several rounds with the lead before settling.

New screen
Starts empty
Add Document drawer, open tree
By category
All documents

What changed

  • One way in: 'Add Document' opens one side drawer
  • Drawer shows the whole catalog as a tree (main category → sub-category → documents) with checkboxes, search and fold / unfold
  • Ticked documents appear under their category automatically; nothing is typed by hand
  • Two views of the result: By category (cards) or All documents (one list with 'Main › Sub' labels)
  • Upload, then View | Replace; a progress card shows how much is uploaded
  • Review options (bottom / side drawer, four views) kept in the review bar for the lead

Tried and dropped

  • Adding sub-categories by hand
  • A drawer per sub-category
  • Typing your own document names
  • Review switches inside the drawer
  • Full-width blue or bold divider lines

Files: RTMES-mbl/RTMES-app-pc4-docs.html

Mobile app30 Oct 2026

PC(V) annual reports

New: the Planning Commission PC-V annual performance report (revised 2024), filed by 31 July every year for 5 years after a project is completed. Designed in parallel with PC(IV).

New screen
PC(V) Projects: status tiles
All PC(V) projects
PC-V form, step 2
Demo brief (? button)

What changed

  • PC(V) tile on Evaluation Home with the number of reports In-Process
  • First screen like PC(IV): this year's round and large solid tiles with the same statuses as PC(IV): In-Process, Submitted, Refer Back, plus All projects; no tabs
  • Each tile opens its own list: one card per project with a 5-year tracker (Y1-Y5) and one action (Fill PC-V, Continue, Update, View)
  • Form: all 16 attributes in 5 steps (Project, Cost & resources, Output & results, Benefits, Operations & lessons)
  • Everything is entered on the spot, planned and actual (nothing is fetched from earlier PCs): numbers as fields, written answers as editors
  • Written answers are rich text editors with bold, italic, lists, link and image attachments
  • Planned (PC-I) and actual side by side; the difference is worked out automatically
  • Amounts in short units: Rs 45.00 M, Rs 1.20 B, Rs 14.00 K
  • A floating ? button opens the demo brief: what PC-V is, the 16 attributes, what we built, questions for the lead

Tried and dropped

  • Status counts with a tab filter on the list (users 40+ do not like tabs)
  • Invented statuses Overdue / Draft (not in the PC-V PDF; the PC(IV) statuses are used)
  • Invented unit labels and a "units" question (not in the PDF)
  • Read-only "From PC-I" values (the lead confirmed nothing is fetched)

Files: RTMES-mbl/RTMES-app-pc5-hub.html RTMES-mbl/RTMES-app-pc5.html RTMES-mbl/RTMES-app-pc5-form.html

Design demos for RTMES. New screens are captured from the live design files; before screens are the screenshots shared during the redesign.