Skip to content

Redesigning a City Corporation's Civic-Grievance App for First-Time Smartphone Users (Kannada/English, Figma)

  • 12 slides
  • 15 viva questions
  • 6 modules
  • No code needed

@civic-grievance-app-redesign-first-time-smartphone-usersUpdated Oct 2026

A B.Des graduation project that makes reporting a broken streetlight as easy as sending a voice note

B.Des, UX / UI Design · Final sem · Intermediate · 18 weeks · Solo

More info
Level
Intermediate · 18 weeks · Solo
Relevant for
All India
Common at
National Institute of Design, IDC School of Design, IIT Bombay, NIFT
Syllabus
Design schools Graduation / degree project · Graduation / degree project — process document + portfolio + jury · Final semester
Tech stack
  • Figma (wireframes, components, prototypes)
  • FigJam (affinity mapping, journey maps)
  • Adobe Illustrator (icons, illustrations)
  • Unmoderated remote-testing tool (optional)
  • Google Forms / Sheets (SUS scoring)
  • Screen and audio recorder for moderated tests
For educational purposes only

Unlock this project

Full PPT + speaker notes, the step-by-step method, READMEFIRST, instructions and all 15 viva answers.

One-time. No subscription, no auto-renew, no drama.

Project packs

Credits never expire and work on any project. Use one here, save the rest for your friend who “will pay you back”.

  1. Pinned

    1 min

    Overview

    This B.Des graduation project redesigns "NammaDoor", the civic-grievance app of a fictional mid-sized city corporation in Karnataka, for people who have only recently started using smartphones — street vendors, domestic workers, auto drivers, homemakers and senior citizens who are comfortable with WhatsApp voice notes and UPI but struggle with forms, menus and English labels.

    The existing app, like many public-service apps, was designed around the corporation's departments: users must pick a department, a sub-category, a ward number and a location from a list before they can report a garbage pile or a broken streetlight. Research showed that first-time users abandon the flow early, call a councillor instead, or ask a younger relative to file the complaint.

    The project follows a full design process: contextual inquiry with 15–20 residents across three wards, personas and journey maps, a heuristic evaluation of the current app against Nielsen's ten heuristics, three rounds of Figma prototypes, and moderated usability tests measuring task success, time on task, errors and the System Usability Scale (SUS). The redesign introduces photo-first reporting, automatic location, picture-based categories, voice description in Kannada, a plain-language status tracker and large touch targets, and checks everything against WCAG 2.2 and the Guidelines for Indian Government Websites (GIGW). Final deliverables are a clickable prototype, a design system, a process document, a portfolio and a jury presentation.

    Syllabus alignment

    Design schools · Graduation / degree project

    Graduation / degree project — process document + portfolio + jury · Final semester

    Subjects this project applies
    • User Research Methods (contextual inquiry, interviews)
    • Interaction Design and Information Architecture
    • Usability Evaluation (heuristic evaluation, task-based testing, SUS)
    • Visual Design and Typography (Kannada and Latin scripts)
    • Accessibility and Inclusive Design (WCAG 2.2)
    • Design Project Documentation
    How it is evaluated

    Team: individual

    jury on research, process, iterations, final artefact and presentation

    1 min read · 15 viva questions

  2. 2 min

    Synopsis

    Abstract

    Civic-grievance apps are meant to give every resident a direct line to the city, but their interfaces often assume literacy in English, familiarity with menus and knowledge of how the corporation is organised. This project studies how first-time smartphone users in a Karnataka city try to report civic problems, evaluates the existing app, and redesigns it through three iterations tested with real users. Success is measured by task completion, time on task, error counts and SUS scores before and after the redesign.

    Introduction

    Cheap data and UPI have brought millions of people online in the last few years. Many of them are fluent with a handful of apps — messaging, video, payments — but new to anything that asks them to navigate categories and fill forms. The corporation's app is a typical example: it offers complaint categories named after departments ("Solid Waste Management", "Electrical"), requires ward numbers most residents do not know, and shows status updates in bureaucratic language.

    Existing design vs proposed design

    • Existing: department-first navigation; English-first labels with partial Kannada; text-only categories; manual ward selection; six screens before submission; status labels such as "Forwarded to AEE"; small tap targets and low-contrast grey text.
    • Proposed: photo-first flow — take a photo, confirm the pin, pick a picture-category, optionally record a voice note, submit; full Kannada/English parity with a one-tap switch; automatic ward from location; a status tracker in plain words with expected dates; large targets, high contrast and support for system font scaling.

    Research gap

    Guidelines such as GIGW and WCAG set minimum standards, and there is a large literature on usability testing, but few published design projects in India document how first-time smartphone users actually attempt civic reporting and test redesigns with them in their own language. This project contributes that evidence and a reusable pattern set.

    Feasibility

    • Research access: participants are recruited through a residents' welfare association, a vendors' group and a senior-citizens' club, with informed consent.
    • Tools: Figma and FigJam run in a browser; testing needs only a phone, a screen recorder and a notebook.
    • Scope: the project is a design and research deliverable — a tested prototype and design system — not a production app, which keeps it achievable in one semester.
  3. 1 min

    Problem statement

    First-time smartphone users in Indian cities are the residents most affected by uncollected garbage, broken streetlights, water leaks and potholes, yet they are the least able to use the official grievance app. The existing app's department-first structure, English-heavy labels, long forms and bureaucratic status messages cause many to abandon the reporting flow or depend on others, so their complaints are either not recorded or routed informally without tracking.

    The problem this project addresses is: how can the civic-grievance app be redesigned so that a first-time smartphone user can report a common civic problem in Kannada or English, without help, in under two minutes, and understand what is happening to the complaint afterwards? The redesign must be grounded in research with those users, tested through iterations, and meet recognised accessibility guidelines.

  4. 1 min

    Objectives & scope

    1. 01Understand how first-time smartphone users currently report civic problems through contextual inquiry and interviews in three wards.
    2. 02Evaluate the existing app against Nielsen's ten usability heuristics and record severity-rated issues.
    3. 03Synthesise findings into personas, journey maps and design principles.
    4. 04Design a photo-first, bilingual reporting and tracking flow and iterate it through three rounds of Figma prototypes.
    5. 05Measure task success, time on task, errors and SUS scores for the existing app and each prototype round.
    6. 06Meet WCAG 2.2 AA and GIGW requirements for contrast, target size, text scaling and language support.
    7. 07Document the work as a design system, process document, portfolio and jury presentation.

    Scope

    In scope

    • Resident-facing flows: onboarding and language choice, reporting a complaint, tracking status, confirming resolution and giving feedback.
    • Six common categories: garbage, streetlights, drainage, water supply, roads and stray animals.
    • Research with 15–20 participants and usability testing with 6–8 participants per round.
    • A Figma design system with bilingual type scale, colour tokens, icons and components.

    Out of scope

    • Staff-side dashboards for corporation engineers.
    • Back-end development, integration with the corporation's systems and a production release.
    • Languages other than Kannada and English (the system is designed to add them later).
    • Formal accessibility audit with screen-reader users beyond a basic check.
  5. 1 min

    Methodology

    The project follows the Double Diamond design process — discover, define, develop, deliver — with usability testing closing each iteration. It runs for about 18 weeks.

    PhaseWeeksWorkOutput
    Discover1–4Desk research on civic apps and guidelines, contextual inquiry and interviews in three wards, observation at a ward office, baseline usability test of the existing appField notes, baseline metrics, photo log
    Define5–6Affinity mapping in FigJam, personas, journey maps, heuristic evaluation, design principles and success metricsResearch synthesis, problem framing
    Develop7–13Information architecture, paper sketches, three Figma prototype rounds, each tested with 6–8 participantsPrototypes v1–v3, test reports
    Deliver14–18Design system, accessibility checks, final prototype, process document, portfolio, jury rehearsalFinal deliverables

    Testing protocol: moderated sessions on the participant's own phone where possible, in their chosen language, using think-aloud; four core tasks (report garbage with photo, report a streetlight without a photo, check the status of an earlier complaint, confirm a resolved complaint); metrics recorded per task; SUS administered orally in Kannada or English at the end.

    Ethics: informed consent read aloud; no names, phone numbers or faces in the portfolio; recordings stored offline and deleted after analysis.

  6. 1 min

    Architecture & tech stack

    • Figma (wireframes, components, prototypes)
    • FigJam (affinity mapping, journey maps)
    • Adobe Illustrator (icons, illustrations)
    • Unmoderated remote-testing tool (optional)
    • Google Forms / Sheets (SUS scoring)
    • Screen and audio recorder for moderated tests

    For a UX project, the architecture is the research-to-design process and the information architecture of the new app.

    flowchart TD
      A[Desk research + guidelines] --> C[Contextual inquiry in 3 wards]
      B[Baseline test of existing app] --> D[Heuristic evaluation]
      C --> E[Affinity map]
      D --> E
      E --> F[Personas + journey maps]
      F --> G[Design principles + success metrics]
      G --> H[IA + sketches]
      H --> I[Prototype v1]
      I --> J{Usability test round}
      J -->|issues| K[Prototype v2 / v3]
      K --> J
      J -->|targets met| L[Design system + accessibility check]
      L --> M[Final prototype, process document, portfolio]
      M --> N[Jury]

    Information architecture of the redesign

    • Home: one large "Report a problem" button, a list of "My complaints" with plain-language status, and a language switch always visible.
    • Report flow: camera → confirm location on map (auto-filled) → picture-category grid → optional voice note or short text → review and submit → confirmation with a complaint number and expected date.
    • Track flow: complaint card → timeline (Received, Assigned, Work in progress, Done) with dates → confirm fixed or reopen.
    • Help: a call-back request and a short video on how to report.
  7. 6 modules

    Modules

    • Field Research & Baseline

      Contextual inquiry and interviews with first-time smartphone users in three wards, observation at a ward office and a baseline usability test of the existing app that records task success, time, errors and SUS.

    • Heuristic Evaluation

      A structured review of the existing app against Nielsen's ten heuristics by the designer and two peers, with each issue rated for severity and linked to evidence from the baseline test.

    • Synthesis: Personas & Journeys

      Affinity mapping of observations in FigJam, three personas such as a vegetable vendor, a retired teacher and a domestic worker, current-state journey maps and a set of design principles with measurable targets.

    • Interaction Design & Prototyping

      Information architecture, paper sketches and three rounds of Figma prototypes for reporting, tracking and confirming complaints, with each round changed in response to the previous test findings.

    • Usability Testing & Metrics

      Moderated think-aloud tests with six to eight participants per round on four core tasks, recording task success, time on task, errors and SUS, and comparing each round with the baseline.

    • Design System & Accessibility

      A bilingual Figma design system with Kannada and English type scales, colour tokens meeting contrast requirements, 48 dp touch targets, icons drawn in Illustrator and components documented against WCAG 2.2 and GIGW.

  8. Locked

    Presentation

    12 slides with speaker notes. The outline below is free; the bullets, notes and the generated .pptx unlock with the project.

    1. Redesigning a Civic-Grievance App
    2. The problem
    3. Brief & objectives
    4. Research
    5. Baseline & heuristic evaluation
    6. Personas & journeys
    7. Design principles
    8. Iterations
    9. Testing results
    10. Design system & accessibility
    11. Final prototype demo
    12. Reflection & future scope

    Bullets, speaker notes and the .pptx download unlock with the project.

    Presentation is locked: 12 slides, Speaker notes, .pptx download.

  9. Locked

    How to run

    A research, analysis or design project, so there's no code bundle: 9 steps to carry it out with Figma (wireframes, components, prototypes), FigJam (affinity mapping, journey maps) and Adobe Illustrator (icons, illustrations).

    The good part is behind this lock. Like every good viva answer.

    How to run is locked: 9 steps.

  10. 1 min

    Future scope

    • Design the staff-side dashboard so ward engineers see photo evidence and location clearly.
    • Add more languages and test Urdu and Telugu layouts used in parts of the city.
    • Explore a WhatsApp-based reporting channel for residents who never install new apps.
    • Test with screen-reader users and people with low vision for a fuller accessibility audit.
    • Partner with a civic body to pilot the redesign and measure real complaint volumes.
  11. 7 sources

    References

    1. Nielsen, J. — 10 Usability Heuristics for User Interface Design (Nielsen Norman Group)
    2. Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
    3. Guidelines for Indian Government Websites and Apps (GIGW 3.0) — Government of India
    4. Brooke, J. — SUS: A 'Quick and Dirty' Usability Scale (1996)
    5. Krug, S. — Don't Make Me Think, Revisited
    6. Figma Help Center
    7. Design Council — The Double Diamond design process

    Cite this bundle

    OnlyProjects. (2026). Redesigning a City Corporation's Civic-Grievance App for First-Time Smartphone Users (Kannada/English, Figma): B.Des UX / UI Design project bundle [Educational resource]. https://onlyprojects.online/projects/bdes-ux-civic-grievance-app-redesign-first-time-smartphone-users

Slides, diagrams & files

12 slides. Titles are free; bullets, speaker notes and the .pptx unlock with the project.

  1. SLIDE 1

    Redesigning a Civic-Grievance App

  2. SLIDE 2

    The problem

  3. SLIDE 3

    Brief & objectives

  4. SLIDE 4

    Research

  5. SLIDE 5

    Baseline & heuristic evaluation

  6. SLIDE 6

    Personas & journeys

  7. SLIDE 7

    Design principles

  8. SLIDE 8

    Iterations

  9. SLIDE 9

    Testing results

  10. SLIDE 10

    Design system & accessibility

  11. SLIDE 11

    Final prototype demo

  12. SLIDE 12

    Reflection & future scope

Architecture diagram

1
flowchart TD
  A[Desk research + guidelines] --> C[Contextual inquiry in 3 wards]
  B[Baseline test of existing app] --> D[Heuristic evaluation]
  C --> E[Affinity map]
  D --> E
  E --> F[Personas + journey maps]
  F --> G[Design principles + success metrics]
  G --> H[IA + sketches]
  H --> I[Prototype v1]
  I --> J{Usability test round}
  J -->|issues| K[Prototype v2 / v3]
  K --> J
  J -->|targets met| L[Design system + accessibility check]
  L --> M[Final prototype, process document, portfolio]
  M --> N[Jury]

Files

Viva questions & answers

3 of 15 questions free. Explain each answer in your own words before you move on.

  1. Concept

    Why did you use contextual inquiry instead of only surveys?

    First-time users often cannot describe interface problems in a survey, and they overstate their confidence. Watching them try to report a real problem in their own setting showed the actual breakdowns, such as not knowing the ward number, which a survey would never have revealed.

  2. Concept

    What is SUS and how do you calculate it?

    The System Usability Scale is a ten-item questionnaire with five-point responses. For odd items you subtract one from the response, for even items you subtract the response from five, add the ten values and multiply by 2.5 to get a score out of one hundred. It is reliable with small samples and lets me compare rounds.

  3. Concept

    Which of Nielsen's heuristics did the existing app violate most seriously?

    Match between system and the real world was the most serious, because categories were named after departments rather than problems people see. Recognition rather than recall was next, because users had to recall their ward number, and error prevention, because location could be entered wrongly.

+12 more questions

They and the answers unlock with the project. Try answering the ones above yourself first. Your examiner will.

For educational purposes only. Use this bundle to understand how the project works, then build and write your own. Submitting it verbatim is between you, your conscience and your external examiner.