This session designs what the Passenger, Reservation Clerk and Administrator of the Railway Reservation System (RRS) actually see: which screens exist, how a user moves between them, what each screen shows and asks for, and what the system says when the input is wrong. The manual asks for an easy-to-follow interface with no hidden buttons, little graphics, and proper error messages, and every screen here is drawn to those rules. The business rules of Session 1 (max 6 passengers per PNR, no booking after departure, refund by hours before departure) become validation rules on specific fields, so the interface enforces the same rules the design in Session 5 enforces in code.
Objectives
×Do not copy. Read for understanding and the viva
List every screen of the RRS with its actor, purpose and entry point.
Draw a navigation map showing how a user moves from login to booking, cancellation and admin tasks.
Draw text wireframes for the seven main screens.
Specify every input field with type, validation rule and exact error message.
Apply the manual’s interface rules (easy to follow, no hidden buttons, proper error messages) and show where each one is used.
Problem Statement
Write in lab record
Session 6: Develop user interface design for RRS.
Concept
×Do not copy. Read for understanding and the viva
Screen inventory and navigation map
Start by listing screens, not drawing them. A screen is one page the user sees with one purpose. If a page has two purposes (search and book), split it. The inventory gives each screen an id (S1, S2, …) that the navigation map and field tables refer to. A navigation map is then a graph: screens are nodes, user actions are edges. It shows the happy path (login, search, select, enter passengers, pay, see PNR) and the side paths (cancel, admin). The rule from the manual is “no hidden buttons”: every edge in the map must be a visible button or link on the source screen.
Wireframes, validation and error messages
A wireframe is a box drawing of a screen with labels, input fields, buttons and messages, and no colours or graphics. Draw fields as underlined blanks, buttons in square brackets, and the error message area as a fixed line so the student knows where feedback appears. The manual says “proper error messages” and “you must do the type checking”. For each field write three things: the type, the rule, and the exact text the user reads. A message must say what is wrong and what to do: “Journey date cannot be in the past” is proper; “Invalid input” is not.
Screen Inventory
Write in lab record
Screen id
Name
Actor
Purpose
Reached from
S1
Login
All
Verify email and password; route to the role’s home
Application start, S2 Register
S2
Register
Passenger
Create a Passenger account
S1 link “New user? Register”
S3
Passenger Home
Passenger, Reservation Clerk
Menu: Search Trains, Cancel by PNR, My Bookings, Logout
S1 after login
S4
Search Trains
Passenger, Reservation Clerk
Enter source, destination, date
S3 button “Search Trains”
S5
Availability and Fare
Passenger, Reservation Clerk
Show matching trains, seats per class, fare; pick one
S4 button “Search”
S6
Passenger Details
Passenger, Reservation Clerk
Enter 1 to 6 passengers with berth preference
S5 button “Book” on a row
S7
Payment and Confirmation
Passenger, Reservation Clerk
Choose payment mode, pay, see PNR and status
S6 button “Proceed to Pay”
S8
Cancel by PNR
Passenger, Reservation Clerk
Look up PNR, show refund amount, confirm cancellation
S3 button “Cancel by PNR”
S9
My Bookings
Passenger
List own bookings with status
S3 button “My Bookings”
S10
Admin Home
Administrator
Menu: Add Train, Add Schedule, Set Fare, Reports, Logout
S1 after admin login
S11
Admin Add Train
Administrator
Enter train number, name, type, coaches
S10 button “Add Train”
S12
Admin Add Schedule
Administrator
Create a run of a train on a date
S10 button “Add Schedule”
S13
Admin Reports
Administrator
Occupancy, revenue, cancellation report for a date range
S10 button “Reports”
Navigation Map
Write in lab record
Register +-----------+ Administrator +-------------------------| S1 Login |---------------------+ | +-----+-----+ | v Passenger/Clerk | v+-------------+ v +----------------+| S2 Register |--Register-->(S1) | | S10 Admin Home |+-------------+ +---------+-------+ +--+----+-----+--+ | S3 Passenger | | | | | Home | Add |Add |Reports +--+-----+-----+--+ Train |Sch.| Search Trains | | | My Bookings v v v v | v +----+ +----+ +----+ +-----------+ | +----------+ |S11 | |S12 | |S13 | | S4 Search | | | S9 My | +--+-+ +-+--+ +----+ +-----+-----+ | | Bookings | | | Search | | +----------+ +--Save-->(S10) v | Cancel by PNR +-----------------+-+ | | S5 Availability | v | and Fare | +----------------+ +--------+----------+ | S8 Cancel by | Book (row) | | PNR | v +-------+--------+ +------------------+ | Confirm Cancel -> refund shown -> (S3) | S6 Passenger | | Details | +--------+---------+ Proceed to Pay | v +------------------+-- Pay OK: PNR shown, Done -> (S3) | S7 Payment and | | Confirmation |-- Pay FAILED: Retry, stays on S7 +------------------+ Logout in the top bar of every screen returns to S1.
Edge (from, to)
Trigger on source screen
Guard
S1 to S3 or S10
Button “Login”
S3 for Passenger or Reservation Clerk; S10 for Administrator
S1 to S2
Link “New user? Register”
none
S2 to S1
Button “Register”
All fields valid; account created
S3 to S4, S8, S9
Buttons “Search Trains”, “Cancel by PNR”, “My Bookings”
none
S4 to S5
Button “Search”
All three fields valid
S5 to S6
Button “Book” on a train row
Departure time is in the future
S6 to S7
Button “Proceed to Pay”
1 to 6 valid passengers
S7 to S3
Button “Done” after PNR shown
Payment SUCCESS
S7 to S7
Button “Retry”
Payment FAILED; booking not created
S8 to S3
Button “Done” after refund shown
Cancellation saved
S10 to S11, S12, S13
Buttons “Add Train”, “Add Schedule”, “Reports”
none
S11, S12 to S10
Button “Save”
Record saved
Wireframes
Write in lab record
Conventions: ______ is a text field, [ Button ] is a button, ( ) item is a radio option, [v] is a drop-down. The line starting with ! is the fixed message area where errors and confirmations appear.
Disabled when 6 rows exist (max 6 passengers per PNR)
Maximum 6 passengers are allowed on one PNR
Contact mobile
text, 10 digits
Required; starts with 6 to 9
Enter a 10-digit mobile number
Contact email
text, max 100
Required; valid email format
Enter a valid email address
Proceed to Pay (action)
button
At least 1 passenger; every row valid; departure still in the future
Add at least one passenger before proceeding
S7 Payment and Confirmation
┌────────────────────────────────────────────────────────────────────┐│ RRS | Home | Asha Verma (Passenger) [ Logout ] │├────────────────────────────────────────────────────────────────────┤│ Payment ││ Amount payable Rs 6,110 ││ Mode (o) UPI ( ) Card ( ) Net banking ││ UPI ID ____________________ ││ [ Pay Rs 6,110 ] [ Cancel booking ] │├────────────────────────────────────────────────────────────────────┤│ Booking Confirmed ││ PNR 4521098763 ││ Train 12952 Mumbai Rajdhani 14/10/2026 Dep 16:25 ││ From / To NDLS New Delhi -> BCT Mumbai Central ││ 1. Asha Verma 34 F B2 / 21 LOWER CONFIRMED ││ 2. Rohan Verma 36 M B2 / 22 MIDDLE CONFIRMED ││ Paid Rs 6,110 by UPI Txn UPI2026101416251234 ││ SMS and email sent to 98xxxxxx21 and as**@gmail.com ││ [ Print ticket ] [ Done ] ││ ! ________________________________________________________________ │└────────────────────────────────────────────────────────────────────┘
Field
Type
Validation rule
Error message
Mode
radio UPI, Card, Net banking (Cash shown only to Reservation Clerk)
Required
Select a payment mode
UPI ID
text, max 50
Required when mode is UPI; must contain one @
Enter a valid UPI ID such as name@bank
Card number
text, 16 digits
Required when mode is Card; passes Luhn check
Enter a valid 16-digit card number
Pay (action)
button
Gateway returns SUCCESS; on FAILED no booking is saved
Payment failed. No amount was deducted. Press Retry or choose another mode
PNR (output)
read-only, 10 digits
Shown only after SUCCESS
none
Status (output)
read-only CONFIRMED or WAITLISTED per passenger
From book_ticket
none
S8 Cancel by PNR
┌────────────────────────────────────────────────────────────────────┐│ RRS | Home | Asha Verma (Passenger) [ Logout ] │├────────────────────────────────────────────────────────────────────┤│ Cancel Ticket ││ PNR __________ [ Look up ] ││ Booking found ││ 12952 Mumbai Rajdhani 14/10/2026 Dep 16:25 Class 3A ││ 1. Asha Verma CONFIRMED B2/21 ││ 2. Rohan Verma CONFIRMED B2/22 ││ Total fare Rs 6,110 ││ Time to departure 72 h 10 m (more than 48 h: 100% less Rs 60) ││ Refund amount Rs 6,050 ││ Reason (optional) ________________________________ ││ [ Back ] [ Confirm Cancel ] ││ ! ________________________________________________________________ │└────────────────────────────────────────────────────────────────────┘
Field
Type
Validation rule
Error message
PNR
text, exactly 10 digits
Required; digits only
PNR must be a 10-digit number
Look up (action)
button
PNR exists; belongs to logged-in user or user is Reservation Clerk; status not CANCELLED
No booking found for this PNR, or: This PNR is already cancelled
Refund amount (output)
read-only
100% minus flat clerkage if more than 48 h before departure; 50% between 48 and 12 h; 0 under 12 h
none
Reason
text, max 100
Optional
none
Confirm Cancel (action)
button
Second confirmation dialog: “Cancel PNR 4521098763? Refund Rs 6,050. This cannot be undone.”
Cancellation could not be saved. Try again
S12 Admin Add Schedule
┌────────────────────────────────────────────────────────────────────┐│ RRS | Admin Home | Suresh Nair (Administrator) [ Logout ] │├────────────────────────────────────────────────────────────────────┤│ Add Schedule ││ Train [v] 12952 Mumbai Rajdhani ││ Run date ____/____/________ (DD/MM/YYYY) ││ Status (o) ACTIVE ( ) CANCELLED ││ Route preview (read-only, from Route table) ││ Seq Station Arr Dep Km ││ 1 NDLS -- 16:25 0 ││ 2 KOTA 21:00 21:05 465 ... 4 BCT 08:15 -- 1384 ││ [ Back ] [ Save ] ││ ! ________________________________________________________________ │└────────────────────────────────────────────────────────────────────┘
Field
Type
Validation rule
Error message
Train
drop-down of Train
Required; train must have at least one Route row and one Coach
Train 12952 has no route defined. Add the route first
Run date
date DD/MM/YYYY
Required; today or later; no existing Schedule for same train and date
A schedule for 12952 on 14/10/2026 already exists
Status
radio ACTIVE, CANCELLED
Required; default ACTIVE
none
Save (action)
button
All rules pass; on success message “Schedule 3107 created” and Seat rows generated from Coach
Schedule could not be saved. Check the fields marked in red
UI Design Principles Applied
Write in lab record
Principle
Rule from the manual
Where it is applied in the RRS
Consistency
Easy to follow interface
Every screen has the same top bar (system name, Home, logged-in user, Logout), the same message line at the bottom, and the primary button always at the bottom right (Search, Proceed to Pay, Pay, Confirm Cancel, Save)
Feedback
Proper error messages
S7 prints the PNR, seat numbers and transaction reference on the same screen after payment; S8 shows the computed refund amount before the user confirms; every action button reports success or failure in the message line
Error prevention
Type checking, field overrun
S4 stations are drop-downs so a code cannot be misspelt; S6 “Add passenger” is disabled at 6 rows; S5 “Book” is hidden for departed trains; S8 asks a second confirmation before an irreversible cancellation
Visibility
No hidden buttons
Every edge in the navigation map is a labelled button or link on the source screen; there are no keyboard-only or menu-only actions
Accessibility
Easy to follow
Every field has a text label to its left, not a placeholder that disappears; error messages name the field and row (“Passenger 2: age must be between 1 and 120”); colour is never the only signal, the message line carries the text
Mobile
Easy to follow
Fields stack in one column under 600 px width; the S5 table collapses to one card per train with class rows below it; buttons are full width and at least 44 px tall
Viva Questions
×Do not copy. Read for understanding and the viva
Q: Why is the PNR shown on the Payment screen instead of a separate screen? A: The user has just waited for the gateway; showing the PNR immediately, with the transaction reference, is direct feedback and avoids a page where the PNR could be lost if the connection drops.
Q: How does the interface enforce the six-passenger limit? A: The “Add passenger” button is disabled at six rows and the counter reads “6 of 6”; the server checks again in book_ticket.
Q: How does the interface stop a booking after departure? A: S5 hides the “Book” button when departure time has passed, and S6 “Proceed to Pay” re-checks it, because the user may have kept the page open.
Q: What makes an error message “proper”? A: It names the field, says what is wrong, and says what to do, such as “Journey date must be between today and 120 days from today”.
Q: Why are stations drop-downs and not text boxes? A: Error prevention: the user cannot type a code that is not in the Station table, so search_trains never raises UnknownStationError from the UI.
Q: Where does the Reservation Clerk’s interface differ from the Passenger’s? A: Only on S7, where Cash appears as a payment mode, and on S8, where the clerk can look up any PNR, not only their own.
Common Mistakes
×Do not copy. Read for understanding and the viva
Drawing screens with logos, colours and icons. The manual asks for zero or very little graphics; marks go to fields, buttons and messages.
Writing “Invalid input” as the error message for every field. Each message must name the field and the fix.
Putting a validation rule in the table without a matching element on the wireframe, or a button on the wireframe that has no edge in the navigation map.
Showing a booking as confirmed before payment succeeds. The PNR appears only after the gateway returns SUCCESS.
Copying the passenger limit or departure rule into prose only. Put them on the specific field and button where they are enforced.
Session Summary
Write in lab record
Screen inventory table with 13 screens, navigation map diagram and its edge table.
Seven wireframes: Login, Search Trains, Availability and Fare, Passenger Details, Payment and Confirmation with PNR, Cancel by PNR, Admin Add Schedule.
One field table per wireframe with type, validation rule and error message, including the six-passenger limit and the no-booking-after-departure rule.
Principles table tying consistency, feedback, error prevention, accessibility and mobile to named screen elements.
