Government Web Portal
PADRA
Official government website design for the Punjab Alternative Dispute Resolution Authority (PADRA), Government of Punjab — a credible portal for ADR accreditation, referrals and dispute resolution.
Client — Punjab ADR Accreditation Authority, Government of Punjab
Project Overview
PADRA provides a system of alternative dispute resolution of civil and criminal disputes in Punjab to ensure inexpensive and expeditious justice, and matters connected with and ancillary thereto. I designed the official government web portal that introduces the Authority, explains the ADR way, and routes citizens to accreditation and referral journeys.
- Role
- UI/UX Designer
- Timeline
- 3 Weeks
- Platform
- Responsive Website
- Industry
- Government · Legal / ADR
- Tools
- Figma, Design Systems, Web Design
- Duly Accredited
- 45
- ADR Service Providers
- 500+
- ADR Centres
- 36
- ADR Training Institutes
- 12
The Problem
Citizens, lawyers and ADR service providers had no credible single place to understand alternative dispute resolution in Punjab or to start a referral.
- Information scattered across notifications and PDF documents
- No clear pathway for each audience — citizens, mediators, centres, institutes
- Accreditation and referral steps were never explained in plain language
- No visible proof of the Authority's mandate, scale or activity
Project Goals
Deliver an authoritative, government-grade website that establishes trust, explains the ADR process step by step, and gives every audience a clear next action: apply for accreditation, refer a civil dispute, or refer a criminal dispute.
- 01
Establish government-grade credibility from the first screen
- 02
Explain the ADR process step by step in plain language
- 03
Give every audience one obvious next action
- 04
Keep the Punjab identity while keeping the layout modern and readable
Research & Discovery
- Four distinct audiences — citizens, mediators, ADR centres and training institutes — each need a separate but visible pathway.
- Legal credibility is driven by explicit mandate, statutory references and published statistics rather than marketing copy.
- Process clarity matters most: users repeatedly ask about costs, fees, timelines and who can refer a case.
- The green-and-white Government of Punjab identity had to be respected while keeping the layout modern and readable.
User Flow
- Landing
- About PADRA / Mandate
- How We Facilitate
- Accreditation Process
- ADR Referral Process
- ADR Proceedings
- Apply / Contact
From Wireframes to Final UI
Wireframes stacked the page as alternating light and deep-green bands so each block — mandate, facilitation, accreditation, referral, proceedings and news — reads as its own chapter, with primary CTAs repeated at the top and bottom.
Low Fidelity
Structure first
Grey-box layouts to settle hierarchy, navigation and the order of information before any styling.
High Fidelity
Final UI
Typography, colour, components and states applied on top of the approved structure.
UI Design
Website
A formal government palette built on the Punjab green with white cards, restrained typography, numbered process cards and photographic bands for on-the-ground activity. Key sections include the hero with four action buttons and trust badges (Government Regulated, Court Annexed ADR, Court Referred ADR, Online Dispute Resolution, Time Bound Resolution), a four-pillar mandate row, the How We Facilitate statistics band, and three numbered process tracks.
Building a Scalable Design System
A restrained government system so statutory content stays authoritative and readable at every screen size.
Colour
- Punjab green primary
- White and off-white surfaces
- Deep-green section bands
- Neutral text scale
Typography
- Formal display headings
- High-legibility body
- Numbered step labels
- Statistic display sizes
Components
- Trust badges
- Numbered process cards
- Mandate pillars
- Statistics band
- News cards
- Footer CTA block
Layout
- 12-column grid
- Alternating light / green bands
- Repeated primary CTAs
- Consistent section spacing
Platform Modules
Accreditation
- Submit application through the online portal
- Scrutiny and grant of certificate
- Rejection of application with written reasons
- Accreditation of ADR centres and training institutes
ADR Referral
- Who may undertake ADR
- Reference to the mediator judge
- Reference in civil disputes
- Reference in criminal disputes
ADR Proceedings
- Selection of ADR service provider or centre
- Costs and fees
- Power to refer a case at any time
- Judgment and enforcement of settlement
Public Engagement
- Regional accreditation summits
- Community outreach programmes
- MOUs with the High Court
- News, media and resources hub
Key Design Decisions
01Four Journeys in the Hero
The four primary actions sit directly in the hero so no audience has to hunt through legal pages.
02Chaptered Bands
Alternating light and deep-green bands make each block read as its own chapter of the ADR story.
03Statistics as Trust
Published authority numbers replace marketing copy as the credibility signal.
Outcome
The website gives PADRA a single official starting point: the Authority's mandate and statistics are visible immediately, and each audience reaches accreditation or referral in one click instead of hunting through legal documents.
What I Learned
Designing for a public institution taught me that trust is built through clarity and evidence, not visual flourish. Structuring statutory content as a readable step-by-step story made the same information far more usable.
Interactive Prototype
Prototyped the homepage journey end to end — hero CTA into the accreditation application, civil and criminal referral tracks, and the newsletter and contact flows in the footer.
Explore the final experienceView Prototype