Case Study
Passport Seva Portal Redesign
Improving task visibility and usability for key passport services through simplified information architecture and clearer user guidance.
My Role
UX Designer (End-to-End)
Team
Solo
Timeline
Nov 1–20, 2025
Project Type
Personal UX Redesign
Tools Used
Figma, Notion, Miro, FigJam
Scope
Improving task discovery and application experience
Chapter One
Introduction
Overview
The Passport Seva Portal is India's primary platform for Indian citizens to apply and manage passport services online. Users visit to apply for passports, track applications, and book appointments. The current interface contains many informational sections but does not clearly prioritize user tasks, creating friction for first-time users and slowing down the application process.
Problem
Homepage contains many informational sections but does not clearly prioritize user tasks. Primary actions are buried in dense content, and users must navigate multiple pages before starting an application.
Goal
Improve task visibility and simplify the passport application journey. Create a task-first experience that prioritizes common user goals: apply, track, and book appointments.
Outcome
A task-focused homepage with prominent primary actions and clearer navigation. Expected to reduce time to locate apply CTA from 8-12 seconds to 2-4 seconds.
Chapter Two
Problem & Solution
Core Issues
- Primary actions not immediately visible
- Important tasks buried in dense content
- Inconsistent visual hierarchy across sections
- Users must scroll extensively to find application links
Solution Strategy
- Prioritize user tasks instead of internal categories
- Place "Apply for Passport" prominently above the fold
- Create step-based guidance for applications
- Implement clear visual hierarchy for all actions
Chapter Three
User Research & Insights
Research Methodology
User Journey Analysis
Key Observations
Task Initiation: Users must visit several pages before starting the passport application, creating confusion and drop-off.
Process Clarity: Appointment booking feels disconnected from the main application process, lacking step-by-step guidance.
Benchmarking Results: Platforms like DigiLocker and Income Tax Portal clearly show primary actions above the fold with strong CTAs and progress indicators.
Chapter Four
Before & After Impact
Homepage Clarity & Task Visibility
Primary actions now visible immediately upon page load with clear visual hierarchy and dominant CTA buttons.
Application Process Simplification
Linear step-based workflow guides users through the passport application with clear progress indication.
Workflow Transparency
Step indicators and process visualization provide clarity about what users need to accomplish.
Service Discovery Improvement
Related services and secondary actions organized logically below primary tasks for easy discovery.
Impact Metrics
| Area | Improvement |
|---|---|
| Task Discovery | Primary actions visible above the fold |
| Navigation Structure | Task-focused instead of category-based |
| Workflow Clarity | Step-based guidance throughout |
| User Confidence | Clear status and progress indicators |
Chapter Five
Information Architecture & Structure
New Structure
The redesigned structure prioritizes user tasks instead of internal service categories, enabling users to quickly locate and begin their primary actions.
Primary User Tasks
Apply for Passport
Main CTA - Start new application
Track Application
Monitor existing application status
Book Appointment
Schedule passport office visit
Chapter Six
Design System & Consistency
Design Semantics
Blue for Trust: Communicates government reliability and official authority, used for primary actions and headings.
Green for Success: Indicates completed tasks and positive states during the application process.
Red for Alerts: Highlights urgent notifications and service alerts requiring immediate attention.
Step Indicators: Clear numbering and progress visualization for multi-step application processes.
Chapter Seven
Wireframes & Prototyping
Wireframing
Mid-fidelity wireframes were created to explore layout options, task hierarchy, and navigation structure before visual design.
Focus Areas:
- Homepage layout and visual hierarchy
- Placement of primary action buttons
- Navigation structure and information flow
- Step-based workflow visualization
Prototyping
A clickable Figma prototype was created to validate the primary user flows including passport application, application tracking, and appointment booking.
Flows Tested:
- Start passport application
- Track application status
- Book passport office appointment
- Access help & support
Chapter Eight
Final UI & Key Screens
Key Improvements
- Prominent "Apply for Passport" CTA button positioned above the fold
- Quick access to "Track Application" and "Book Appointment" functions
- Step-based application guidance showing clear progression
- Simplified homepage layout with logical task grouping
- Integrated help and support access throughout the portal
Homepage
Redesigned layout with clear task hierarchy, prominent primary CTA, and organized secondary services below the fold.
Application Flow
Step-based guidance system that helps users understand the passport application process with clear progression indicators.
Appointment Booking
Organized interface for selecting passport office locations and scheduling appointments with calendar integration.
Chapter Nine
Conclusion & Results
Executive Summary & Impact
This redesign transforms Passport Seva from an information-heavy portal to a task-focused experience. By prioritizing user goals and simplifying the application journey, the redesign significantly improves task discovery and reduces friction for Indian citizens applying for passports.
Usability Testing
To validate the redesigned flows, a usability test was conducted with 5 participants using a Figma interactive prototype. The core tasks included starting a passport application, tracking application status, and booking an appointment.
Key Observations
- Participants located the "Apply for Passport" action significantly faster.
- Less scrolling was required to start key tasks.
- Users reported better understanding of the process due to step-based guidance.
Participant Feedback
"I found the Apply button immediately on the homepage."
"The steps made it clear what I needed to do next."
Measured Results
| Metric | Before | After |
|---|---|---|
| Time to Find Apply CTA | 8–12 seconds | 2–4 seconds |
| Scroll Depth to Primary Action | 2+ scrolls | Above fold |
| Clarity Score (Self-reported) | 2.8/5 | 4.6/5 |
| Task Completion Confusion | High | Minimal |
Key Learnings
- Information hierarchy is crucial for government platforms
- Task-first design reduces cognitive load for users
- Clear visual hierarchy improves task discovery
Future Enhancements
- Conduct testing with diverse user groups
- Optimize experience for mobile-first users
- Enhance accessibility for varying digital literacy
Design Process & Tools
This redesign was completed using Figma, Notion, Miro, and FigJam for collaborative ideation and documentation. The process involved heuristic evaluation, user research, benchmarking analysis, iterative wireframing, and interactive prototyping. All design decisions were validated through usability testing with 5 participants.
Interested in working together?
Let's start a project