Making mParivahan & Driving Licence Services Accessible to Everyone —…
Redesign the driving licence journey on mParivahan so a first-time applicant can go from learner's licence to permanent licence without getting lost.
- Track: Reimagining Government
Problem Statement 1: Making mParivahan & Driving Licence Services Accessible to Everyone
The Challenge
Applying for a driving licence can be confusing for first-time applicants, especially those unfamiliar with digital services, complex forms, or official procedures. From applying for a Learner’s Licence (LL) and preparing for the learner’s test to applying for a Permanent Driving Licence (DL) and navigating the driving test process, users may struggle to understand the steps involved.
Redesign or reimagine the mParivahan and driving licence service experience to make the entire journey simpler, more intuitive, accessible, and beginner-friendly.
Your solution should help users understand the requirements, complete applications, learn road safety rules, prepare for tests, navigate the online learner’s licence test, and understand the steps needed to obtain a permanent licence—all without feeling overwhelmed.
Possible Areas to Explore
Simplified UX: Make navigation, application forms, document requirements, fees, and each stage of the licensing process easier to understand.
Guided Applications: Provide step-by-step guidance for Learner’s Licence and Permanent Driving Licence applications, including appointments and required documents.
Interactive Learning: Teach traffic signs, road rules, and driving concepts through quizzes, illustrations, simulations, or short lessons.
Beginner-Friendly Test Experience: Improve learner’s licence test preparation and the online test interface through mock tests, clear instructions, feedback, and progress indicators.
Multilingual Accessibility: Support users who are more comfortable learning and navigating services in regional languages.
AI-Powered Assistance: Build a conversational guide that explains procedures, answers common questions, and helps users understand their next steps in simple language.
Inclusive Design: Consider users with low digital literacy, disabilities, limited internet connectivity, or older devices.
Process Transparency: Help users understand eligibility, application status, fees, appointments, next steps, and common mistakes throughout the licensing journey.
Expected Outcome
Build a working prototype that demonstrates how your solution makes the driving licence journey easier—from applying for a Learner’s Licence and preparing for its test to applying for a Permanent Driving Licence and understanding the driving test process.
Important
You are not required to rebuild the entire official platform. You may focus on one high-impact part of the journey or combine multiple stages, provided you clearly explain the problem, your design decisions, and how your solution improves the experience. Use simulated data where necessary; integration with official government systems is not mandatory.
Evaluation Focus
Usability, accessibility, clarity of information, application-flow improvements, learning effectiveness, technical execution, and real-world usefulness.
Build it with AI
- Build 1 · The whole prototype: Build a working web app prototype for a hackathon. Build the whole thing, not a plan: every screen below should work when I open it. OUR CHOICES (change these, or leave them as they are) - App name: Licence Saathi - Main user: Ramesh, 19, applying for his first licence (motorcycle), uses a low-cost Android phone on a slow connection, most comfortable in Hindi - Part of the journey we go deepest on: preparing for and taking the learner's licence test THE PROBLEM Getting a driving licence in India through mParivahan / Sarathi confuses first-time applicants: the steps, documents, fees, the online learner's licence (LL) test, the wait before the permanent driving licence (DL), and the driving test itself. The app takes someone from "I want a licence" to "my licence is on its way" in plain language, one step at a time. It does not connect to any government system. Everything is simulated, and the footer says so in one line: "Prototype with sample data. Check rules and fees with your state's RTO." HOW TO BUILD IT - React + Vite + Tailwind CSS, plain JavaScript (no TypeScript), React Router. No backend and no login. Save the user's progress in localStorage.…
- Build 2 · Finish what's missing: Go through the app you built and check it against this list. For each item, say whether it is done, partly done or missing. Then build everything that is partly done or missing, one item at a time, and keep everything that already works exactly as it is. - Home with "where are you in your journey" buttons and a six-stage journey map showing the one next step - Can I apply? (age, vehicle, state, then yes or no and the date they can) - Documents checklist built from their answers, each item explained with examples, each one can be ticked off - Learner's licence application: one question per screen, progress bar, Back keeps answers, review screen, fee summary, simulated payment, receipt with application number - Learn: at least 18 signs drawn in SVG across three categories, rules of the road, Listen button, flashcards - Mock test: practice mode with instant feedback, test mode with timer and pass mark from config.js, results with explanations, attempt history, readiness meter, 40+ questions in English and Hindi - Test day guide with a 3-question run in the real test's layout - Permanent licence: dates worked out from the learner's licence date, countd…
- Add-on · Real AI answers in the chat: Replace the keyword-matching chat helper with real AI answers, using [your AI provider, e.g. Gemini, OpenAI or Claude]. - Never put the API key in the frontend. Add a small server endpoint (a serverless function at /api/chat if we deploy to Vercel or Netlify, otherwise a tiny Express server) that reads the key from an environment variable and calls the AI. Put the variable name in a .env.example file and tell me where to put my key. - Give the AI a system prompt: it helps people get a driving licence in India; it replies in the language the user writes in; it uses short sentences a Class 8 student would understand; it asks which state the user is in when the answer depends on it; it uses the facts in src/data/config.js and src/data/faq.js (send them with the prompt); it says when it isn't sure and points to parivahan.gov.in or the local RTO; it never asks for an Aadhaar number, a phone number or any other personal details. - Send the user's saved progress (which stage they're at) so it can suggest their next step. - Keep the old keyword matching as a fallback for when the server can't be reached or returns an error, so the chat always answers.…
- Add-on · Works offline: Make the app installable and usable offline, for people on slow or patchy connections. - Turn it into a PWA (with Vite, use vite-plugin-pwa): an app name, simple SVG icons, a theme colour, and an "Install app" button in Settings that appears only when the browser offers it. - Cache the app and everything in src/data, so the journey, documents, lessons and mock test all work with no connection after the first visit. - When the connection drops, show one small line saying the user is offline and what still works. Hide it when the connection comes back. - Make sure form answers and test progress are never lost if the connection drops halfway through. - Then tell me how to test it in Chrome (DevTools, Network, Offline) and with a Lighthouse report.
- Add-on · Another language: Add [Tamil] to the app as a third language. - Translate every string in src/i18n, every quiz question and explanation, every chat answer, the lessons and the document explanations. Use simple everyday words rather than formal government terms, and keep official terms like RTO as they are, in brackets. - Show each language's name in its own script in the language picker. - Make sure no screen still shows English when the new language is picked, and that longer words don't break any layout at 360px wide. - Make the Listen button use a voice for that language if the browser has one, and hide the button for that language if it doesn't.
- Submit · README, link and demo: Get this ready to submit to the hackathon. 1. Write a README.md: the problem in two lines, who the app is for, what it does (one line per screen), the design decisions we made and why (plain language, one step per screen, offline use, languages, accessibility), how it improves on the current process, how to run it, what is simulated, and what we'd build next. 2. Tell me step by step how to put it online on Vercel or Netlify from a GitHub repo, so the judges can open a link. Include the setting that stops a page refresh from showing a 404. 3. Write a 3-minute demo script for judges who score usability, accessibility, clarity of information, application-flow improvements, learning effectiveness, technical execution and real-world usefulness. Include the user we present as, the exact path to click through, and one sentence for each part on the problem it solves. Spend 20 seconds showing it on a phone in Hindi at the largest text size. 4. List anything that could go wrong during a live demo, and how to avoid it.
- Debug · An error message: I'm getting this error: [paste the full error message from the terminal or the browser console] It happens when: [what you did, e.g. opened the mock test, ran npm run dev] The file it points to: [paste the file, or the part the error names] Explain in two lines what is causing it. Then fix only that: give me the corrected code for each file that changes, with its file name, and don't change anything unrelated. Tell me how to check it's fixed.
- Debug · Blank white screen: The app shows a blank white screen. The browser console (right-click the page, Inspect, Console) shows: [paste any red text, or write "nothing"] The terminal shows: [paste it] What I changed last: [describe it] Find the cause step by step: the console error first, then the entry files (main.jsx and App.jsx), the routes, and any import that might be wrong. Fix the cause, not the symptom. Also add a simple error screen, so a crash in one screen shows a message instead of a blank page.
- Debug · A feature isn't working right: [The screen or feature, e.g. the mock test] isn't working properly. What I expected: [e.g. the test ends after 15 questions and shows my score] What happens instead: [e.g. it keeps going past 15 and the score is always 0] Steps to make it happen: [1, 2, 3] Read the code for this feature and work out why it behaves this way before changing anything. Explain the cause in plain words, then fix it with the smallest change that works. Check the fix against the numbers in src/data/config.js and tell me exactly how to test it.
- Debug · It broke after my last change: Everything worked until my last change. Now [what's broken]. The change I made, or asked you to make: [describe it or paste it] Compare the code before and after that change and find what broke. Fix it so the new change and everything that worked before both work. If the change can't work without breaking something, tell me and suggest another way to do it.
- Debug · The AI keeps going in circles: Stop. We've tried to fix this several times and it still isn't fixed. Don't write any more code yet. The problem: [describe it] 1. List what we've already tried, and why each attempt didn't work. 2. List three possible root causes, most likely first, and what would confirm each one. 3. Tell me exactly what to check or log (one console.log, or one thing to look at) to find out which it is. Once I tell you the result, make one focused fix.
- Debug · Broken on a phone: The app looks broken on a phone: [describe it, e.g. buttons go off the side of the screen on the mock test]. Fix the layout so every screen works at 360px wide and at the largest text size in Settings: nothing scrolls sideways, no text is cut off, buttons are at least 48px tall and don't overlap, and long Hindi words wrap. Check every screen, not only the one I named, and tell me which ones you changed.
- Debug · Broken after deploying: The app works on my laptop but not after deploying to [Vercel / Netlify / GitHub Pages]. What happens: [e.g. a blank page, a 404 when I refresh a page, the chat doesn't answer] The build log or browser console shows: [paste it] Check the usual causes one by one: the build command and output folder; the base path; a rewrite so every route serves index.html; file names whose capital letters differ from their imports (my laptop may ignore case, but the server doesn't); and environment variables that exist on my laptop but were never added to the host. Tell me exactly which settings to change and where.
- Debug · The AI chat isn't answering: The AI chat helper isn't answering. It shows: [what you see] In the browser's Network tab, the request to /api/chat shows: [the status code and response, e.g. 401, 404, 500 or a CORS error] The server log shows: [paste it] Work out which of these it is and fix it: - the API key is missing or wrong (401 or 403) - the endpoint path is wrong (404) - the request or the AI's response is in the wrong format (500) - the frontend calls the AI directly instead of going through our server (move the call to the server and keep the key out of the browser) - a CORS problem between the frontend and the server Make sure the keyword fallback answers whenever the AI call fails.