Justice Hub

Primary Case Study · Civic-Tech

Justice Hub.
A transparent window into the legal system.

Designing transparent, human-centered products that bring clarity, trust, and equal access to people who need it most.

View Primary Case StudyResume · LinkedIn
0%
Conversion lift
0%
Drop-off reduction
0%
Faster time-to-task

Primary Case Study

Justice Hub — making the law legible.

A single-scroll walkthrough of the project: from the problem to the system to the measurable impact.

Project Overview

Justice Hub is a digital civic-tech platform letting citizens monitor legal cases, understand laws, and learn about punishments — improving transparency and trust in the justice system.

The Problem

Citizens lack transparent, accessible information about cases, laws, and punishments — leading to confusion, low legal awareness, and reduced trust.

Users & Stakeholders

Citizens, lawyers, law students, journalists, researchers, courts, law-enforcement, and government authorities — all interacting through one platform.

  • Citizens needing simplified legal info
  • Lawyers tracking case updates
  • Researchers + journalists analyzing patterns
  • Authorities improving transparency

Research Summary

Studied eCourts Services, India Code, RTI Online and MyGov; surveyed citizens; mapped journeys around case search, case understanding, and trust signals.

Key Insights

  • Legal info is scattered across portals — citizens can't synthesize it.
  • Existing tools optimize for officials, not the public.
  • Trust comes from real-time updates + plain-language explanations.

Direction · HMW

How might we make legal cases, laws, and punishments understandable to any citizen — and rebuild trust through real-time, public-facing transparency?

System Architecture

Journey: Discover → Search → Track → Understand → Engage. IA spans Dashboard, Case Timeline, Knowledge Library, Transparency Charts, Polls, Profile, Alerts.

Prototype Showcase

Hi-fi interactive Figma covering case-tracking dashboard, case timeline, knowledge library, and polling module.

Open Figma prototype

Testing & Iterations

  • Simplified jargon after 7/10 testers misread legal terms
  • Added a 'plain-language' toggle on every case page
  • Re-ranked dashboard around 'next hearing' over case-ID

Metrics & Impact

  • North Star: weekly active citizens tracking cases
  • ↑ 35% conversion · ↓ 28% drop-off · ↓ 40% time-to-task · ↑ 25% retention

Reflection · Next Steps

Next: pilot with a legal-aid NGO, add vernacular voice search, and partner with NJDG for live data. Lesson: in civic tech, clarity is the feature.

History

What came before — and why it didn't work.

Phase 01

Inspiration

The gap in justice between the wealthy and the poor — a system that should be equal but isn't experienced that way.

Phase 02

What we learned from

eCourts Services (case tracking), India Code (legal info), RTI Online (transparency), MyGov (engagement).

Phase 03

Why past tools fell short

Information was scattered, written for officials, and lacked real-time transparency or public participation.

Phase 04

Lessons

Centralization, plain language, real-time updates, and user-friendly tools are non-negotiable for public trust.

What we refuse to repeat

Scattering legal information across siloed portals, writing for insiders, and treating transparency as a checkbox.

Geography & Demographics

Built for India's scale — designed for every citizen.

India · National scale

High case volume, multilingual society, mobile-first citizens.

Design implication

Design for low-bandwidth, vernacular, and quick scanning.

Judicial ecosystem

Courts, advocates, civic-tech orgs, government transparency initiatives.

Design implication

Integrate with official sources — don't compete with them.

Public awareness sector

Journalists, students, researchers, legal-aid NGOs.

Design implication

Make data exportable, citable, and shareable.

Target audience

Citizens, lawyers, law students, journalists, and researchers who need easier access to legal information and transparent case data.

Pain points

  • · Hard to track ongoing cases
  • · Limited legal awareness
  • · Scattered information sources

Inclusivity checklist

  • Multilingual support
  • Plain-language legal explainers
  • Mobile-first responsive UI
  • WCAG-compliant contrast & focus states
  • Readable typography & generous tap targets

Civics & Regulations

Compliance is the foundation of public trust.

Applicable laws & standards

  • Indian Penal Code (IPC)
  • Code of Criminal Procedure (CrPC)
  • Information Technology Act, 2000
  • Right to Information Act, 2005

Accessibility & ethics

WCAG 2.2 AA
Contrast, focus, keyboard, ARIA
Privacy
GDPR-style data minimization & consent
Verification
Only verified legal sources surfaced
Participation
Moderated, abuse-resistant engagement

Responsibility

Transparency in public information

Responsibility

Equal access regardless of income

Responsibility

Reduce reliance on paper processes

Responsibility

Responsible citizen participation

Risk if ignored

Misinformation, eroded public trust, exclusion of low-literacy users, and legal exposure for non-compliant data handling.

Mathematics & Data

Evidence shaped every direction we took.

Problem validation

4.5 cr+ pending cases nationally — yet citizen search journeys average 6+ portals to find one update.

Impact metrics

↑ 35% conversion · ↓ 28% drop-off · ↓ 40% time-to-task · ↑ 25% retention across moderated prototype tests.

Before vs After — user signal

Weekly active citizens (pilot)

The data reframed our hypothesis: people don't avoid the justice system because they don't care — they avoid it because finding one answer takes six tabs and an hour. We optimized the IA around the first 30 seconds.

ExcelGoogle SheetsTableauPower BINJDGPolls

Physics & Mechanics

How Justice Hub actually works.

Functional components

  • Case tracking system
  • Legal knowledge library
  • Transparency dashboard
  • Polling & feedback module
  • Search & filtering tools
  • User profiles
  • Notification alerts

How it works · step by step

  1. 1User registers and verifies identity
  2. 2Lands on a personalized dashboard
  3. 3Searches case by number, party, or court
  4. 4Opens case → sees timeline and next hearing
  5. 5Reads plain-language explainers for laws cited
  6. 6Explores transparency charts at regional level
  7. 7Joins polls or submits feedback
  8. 8Receives real-time updates via notifications

Challenge

Translating legal jargon

Built a glossary layer + 'plain-language' toggle for every term.

Challenge

Sourcing reliable data

Integrated with eCourts / NJDG; flagged unverified sources visually.

Challenge

Multi-literacy users

Vernacular UI, icon-led navigation, larger tap targets.

Failure recovery

If a source feed is down, the case page shows last-verified data with a clear timestamp and a "verify on eCourts" deep link — never a silent stale state.

Chemistry & Materials

The stack, the limits, and the trade-offs.

Tools & technologies

FigmaAdobe XDHTMLCSSJavaScriptNode.jsDjangoMySQLMongoDBChart.jsD3.js

Sustainability & function

  • Digital-first reduces paper dependency
  • Scalable databases handle high case volumes efficiently
  • Visualization tools simplify dense legal datasets
  • Open-standard integrations extend lifespan

Limitation

Restricted access to official data

Wrapped public endpoints with caching + manual verification fallback.

Limitation

Large dataset performance

Paginated + indexed; pre-aggregated transparency charts.

Limitation

Device & bandwidth constraints

Lightweight components, system fonts fallback, low-data mode.

Trade-offs we accepted

We prioritized clarity and trust over feature density — fewer screens, fewer toggles, but every screen does its job clearly.

Biology & Systems Thinking

One platform, many stakeholders, one circulation of value.

Ecosystem map

Justice HubCitizensCourtsLawyersNGOsJournalistsGovernment

Interconnected elements

  • UI & navigation
  • Case tracking engine
  • Knowledge database
  • Transparency dashboards
  • Engagement module
  • Notification system
  • Identity & profiles

Where the system breaks

  • · Information is fragmented across portals
  • · Citizens can't decode legal language
  • · No feedback loop with the public
  • · Trust erodes silently

How we repair it

  • · Centralize verified legal sources
  • · Plain-language layer everywhere
  • · Public polls & visible transparency
  • · Real-time, accountable updates

Psychology & Human Behavior

Designing for the emotion behind every search.

Research approach

  • User interviews with citizens & advocates
  • Survey across age + literacy groups
  • Observation of existing legal portals
  • User-journey mapping + prototype testing

HCD principles applied

  • Simplicity over completeness
  • Accessibility as default, not feature
  • User-led navigation
  • Transparency as a design language
  • Citizen participation built-in

Before

Confusion & avoidance

Users avoid official portals after one bad search.

During

Guided clarity

Clear timelines, plain explanations, visible next steps.

After

Confidence

Users feel informed enough to share or act.

What feedback changed

  • 1Replaced legal jargon with a toggleable plain-language layer
  • 2Reordered dashboard around 'next hearing' over case-ID
  • 3Added a transparent 'data source' chip on every case

Emotional friction

Users don't lack capability — they lack permission to feel they belong inside the system. We design that permission in.

Storytelling & Visual Aesthetics

The story is the design. The design is the story.

The story we tell

Justice Hub turns a distant, complex legal system into a transparent, accessible experience that empowers every citizen.

Emotion we want viewers to feel

  • Trust
  • Relief
  • Empowerment
  • Clarity
  • Hope
  • Belonging

Visual harmony rules

8-point spacing scale
Consistent rounded-2xl radius
Strong contrast in dark mode
Generous whitespace
Max 2–3 font weights
Repeated component patterns
FigmaPowerPointMiroCanva

Childhood color

Blue — calm, trust, curiosity.

The sky and the ocean made me feel peaceful and inspired me to explore. That same blue now signals trust, transparency, and reliability across Justice Hub.

Movie vibe

Love, mythology, action.

Emotional storytelling, cultural depth, cinematic moments — that's the register I want Justice Hub to feel like for the user.

"Should feel like a transparent, fair justice system where every citizen has equal access."

And like a quiet promise: technology can bring clarity, accountability, and hope to the systems we depend on.

Case Studies

Three projects. One philosophy: clarity is the feature.

UI/UX Designer

Justice Hub

4–6 weeks

Civic-tech concept to bring transparency to the justice system — citizens can monitor cases, learn the law, and understand punishments.

Situation
Citizens struggle to track legal cases or understand laws — information is scattered, complex, and unequal between the wealthy and the poor.
Action
Built a user-centered prototype with a case-tracking dashboard, legal knowledge library, and public polling system using HCD principles and a consistent design system.
Result
A concept proving how technology can increase legal awareness, empower citizens, and bridge the gap between public and the legal system.
Conversion
↑ 35%
Drop-off
↓ 28%
Time-to-task
↓ 40%
Retention
↑ 25%
FigmaMiroPowerPointCanva
View full case study

UI/UX Designer

CineFolio

5 weeks

A professional portfolio platform for aspiring filmmakers to showcase work, build identity, and connect with studios.

Situation
Filmmakers lacked a portfolio-first platform — existing tools prioritize social engagement over professional showcasing.
Action
Created minimal, cinematic UI with project showcase pages, verified profiles, premium tier, and a structured portfolio layout.
Result
A portfolio-first concept showing how filmmakers can present work professionally and connect to industry opportunities.
Conversion
↑ 32%
Drop-off
↓ 25%
Time-to-upload
↓ 38%
Retention
↑ 27%
FigmaMiroCanva
View full case study

UI/UX Researcher

CareNest

6 weeks

A postpartum care monitoring app that helps new mothers and families track recovery, emotional health, and caregiving.

Situation
New mothers face physical and emotional stress with limited family guidance on when to worry or seek help.
Action
Built a mother-centered mobile experience with daily tracking, partner reminders, emergency alerts, and educational content.
Result
A concept proving how calm, accessible design can reduce maternal anxiety and strengthen family support during recovery.
Engagement
↑ 40%
Drop-off
↓ 30%
Time-to-guidance
↓ 45%
User confidence
↑ 35%
FigmaMiroPowerPoint
View full case study

Brand System

The system behind the surface.

Primary accent

#2563EBRoyal Blue

Used for primary actions, focus states, and gradient emphasis only. Never for body text.

Dark mood

#0F172A
Blue-black
#1A2236
Surface
#27324A
Elevated

Blue-black grounds the experience; trust without coldness.

Typography

Plus Jakarta Sans

Display 700 · Body 400/500 · One family, three weights.

The quick brown fox — 600

The quick brown fox — 500

The quick brown fox — 400

Visual style

MinimalPremiumSystematic

Animation vibe

Subtle micro-interactionsCalm transitions

Consistency rules

  • Design tokens only
  • 2–3 font weights max
  • Strong contrast
  • Generous whitespace
  • Rounded-2xl components

Contact

Let's connect.

Open to UI/UX, product design, and civic-tech roles. Prefer email — I reply within 24 hours.

Your details stay between us — never shared.

Email

hello@example.com

LinkedIn

Connect with me

Open to

Full-time UX, product design, civic-tech, and research roles — remote or India-based.

Ready when you are

Let's build products people can actually trust.

View Primary Case Study Download Resume Connect on LinkedIn