Redesigning a Municipal Website: CMC Cuttack
Government websites are some of the most important digital products people use. People rely on them for taxes, certificates, complaints, licenses, public notices, and emergency information.
But many municipal portals across India still feel stuck in the early 2010s, with cluttered layouts, poor mobile usability, overwhelming menus, low accessibility, and information overload.
So I decided to redesign one.
The Existing Website
I picked the official Cuttack Municipal Corporation website: cmccuttack.odisha.gov.in
CMC already offers several important citizen services, including property tax, trade license, grievance redressal, water and sewerage, tenders and notices. The functionality exists. But the overall experience still feels information-heavy, visually dense, and inconsistent on mobile, especially for non-technical users.
And honestly, this is not just a Cuttack problem. Most government websites across India still prioritise listing information over designing usable digital experiences.
The Goal
The idea was simple:
What if a municipal website felt more like a civic operating system instead of a static government portal?
I wanted it to feel alive, responsive, transparent, and approachable, with modern layouts, a citizen-first hierarchy, and real-time data visibility. Instead of treating the site like a document archive, I wanted it to feel like a living platform.
You can explore the live demo here: codemedialabs.in/demo/cmc
Tech Stack
The concept is built with:
- Next.js — for the app framework and routing
- Tailwind CSS — for the utility-first styling system
- Lucide React — for the icon set throughout the UI
- Recharts — for all the data visualisation components
The goal was to keep the frontend lightweight, scalable, and production-ready, with a heavy focus on spacing systems, typography hierarchy, responsive behaviour, and accessibility-friendly layouts.
Design Direction
One thing I was careful about: not making this feel like a crypto dashboard, an admin panel template, or a startup SaaS clone. Government platforms need a different visual language. They should feel trustworthy, calm, readable, and authoritative.
So the direction became: Apple-inspired minimalism + smart city dashboards + civic accessibility.
The UI uses large typography, clean spacing, modular cards, muted gradients, and structured information blocks — without becoming visually overwhelming.
What I Built
Navbar
The navigation is sticky with a clean white backdrop and subtle blur. On desktop, it shows links for Services, Ward Info, Tenders, Dashboard, and About, alongside Sign In and Pay Online CTAs. On mobile, it collapses into a smooth CSS-animated drawer that locks scroll and closes on outside click.
Hero Section
The original CMC portal immediately overwhelms users with dense navigation and competing content. The redesigned hero focuses on three things:
A search bar — the primary action. Large, prominent, with a blue search button, and popular service tags below it (Property Tax, Trade License, Water Bill, Building Approval), so users don't have to think.
A Quick Actions card — a dark blue panel on the right with six instant-access buttons: Property Tax, Register Complaint, Water Bill, Trade License, Track Application, and Certificates. Each has an icon and lifts slightly on hover.
A stats strip — anchored below the hero fold, spanning four key numbers: 2.67L+ Citizens Served, 12,458 Complaints Resolved, 95% Water Coverage, and 312 MT Waste Collected Today. Small but impactful — it immediately communicates scale and activity.
Citizen Services
Four service cards arranged in a responsive grid:
- Property Tax — pay online quickly and securely
- Grievance Redressal — register and track civic complaints with real-time updates
- Water & Sewerage — apply for new connections and manage utility bills
- Building Approval — submit and track building plan approval requests
Each card has a colour-coded icon, a description, and an "Explore Service" link that animates on hover. Clean, scannable, no clutter.
Dashboard Preview
This section does two things in a split layout:
Civic Performance chart — a Recharts area chart showing service efficiency across six dimensions: Sanitation, Water, Transport, Emergency, Waste Management, and Citizen Services. It has a "LIVE" badge and a styled tooltip with a glossy card. The gradient fill under the line gives it a premium feel.
Notices & Updates panel — a dark blue card with the three most recent notices, each tagged by type (NOTICE, TENDER, NEWS) with colour-coded badges and dates. A "View All" link sits at the top.
Know Your Ward + City Highlight
A two-column section with two very different jobs:
Know Your Ward — a dark blue card with a search input for ward number or property ID. Below it are four quick-access buttons: Ward Councillor, Garbage Schedule, Water Supply, and Flood Alerts. This is the hyperlocal civic layer that most government sites completely miss — especially relevant for Cuttack during monsoon seasons and waterlogging situations.
Cuttack — The Silver City — an immersive photo panel with a gradient overlay, showcasing the city's identity. The copy leans into Cuttack's 1000-year heritage, silver filigree craftsmanship, and the Mahanadi river. Four identity tags: Millennium City, Silver Filigree, Mahanadi River, Smart City. Two CTAs: Explore Cuttack and City Dashboard.
Governance Intelligence
A full section built around making civic operations visible.
Four KPI cards at the top:
- Avg Response Time: 2.4 hrs (down 18%)
- Ward Satisfaction: 91% (up 6%)
- Digital Applications: 18.2K (up 22%)
- Infrastructure Health: 88% (up 9%)
Ward Analytics — a Recharts RadarChart comparing five wards (W-12, W-18, W-24, W-31, W-42) across three dimensions: Sanitation, Water supply, and Grievance resolution. It gives an immediate sense of which wards are performing and which need attention.
Infrastructure Monitoring — a dark card with five animated progress bars showing active status for Street Lights (94%), Water Pumps (88%), Drain Sensors (72%), Traffic Signals (91%), and CCTV Network (86%). Below that, three stat blocks: 128 Flood Sensors, 42 Air Quality Nodes, 67 Smart Signals.
Live City Monitoring
This was the most technically interesting part of the project.
A live SVG map of Cuttack with ten ward nodes plotted across a grid background with a stylised Mahanadi river path. Each ward is colour-coded by risk level — green for Normal, amber for Watch, red for Critical — with a halo effect around each node. Hovering a ward shows a tooltip with its drainage percentage, traffic load, and flood risk.
Above the map, five metric cards update every 2.2 seconds with randomised values simulating live telemetry: Drainage Health, Flood Risk, Field Teams, Traffic Load, and New Complaints. The numbers fluctuate in realistic ranges, so the dashboard feels genuinely alive.
Below the map, ten ward cards display the static data for each area — Buxi Bazaar, Choudhury Bazaar, Ranihat, College Square, Mangalabag, CDA Sector 6, Badambadi, Jobra, Cantonment, and Nimpur — each with a pulsing dot in its risk colour.
Smart Civic Analytics
Three charts that transform raw data into transparency:
Grievance Resolution — a Recharts BarChart comparing resolved vs. pending complaints from January to May. Dark blue bars for resolved, light blue for pending. The trend is obvious at a glance: resolve rates are climbing, backlogs are shrinking.
Budget Allocation — a doughnut PieChart showing FY 2025–26 sectoral spending: Roads (35%), Water (25%), Sanitation (20%), Parks (10%), Health (10%). Simple and honest.
Water Supply Stability — a full-width dark blue LineChart spanning the whole week (Monday to Sunday), showing daily uptime percentages across all wards. Weekly average: 95.6%, shown in a floating stat card above the chart.
Leadership
Two profile cards for the Mayor (Shri Subhash Chandra Singh) and the Commissioner (Ms Kirandeep Kaur Sahota, IAS). Each has a photo, role badge, a short bio, and two stat blocks — Active Projects and Civic Drives for the Mayor; Smart Projects and Digital Services for the Commissioner. The cards have a subtle glow that expands on hover.
Footer
A full dark footer (#07152d) with a top CTA bar, a four-column grid (brand + stats, Quick Links, Important Links, Contact), and a bottom bar with copyright and legal links. The contact section shows the CMC address on Link Road, Cuttack, the 1800 345 6767 helpline, and cmc@cuttack.gov.in.
Design Challenges
Designing for Trust
This was the most interesting constraint. Civic platforms cannot feel gimmicky, startup-ish, or trend-chasing. The UI needs to balance authority, simplicity, and professionalism while still feeling modern. That balance is much harder than designing a typical SaaS dashboard — and it shaped almost every decision, from the navy palette to the conservative use of animation.
Balancing Information Density
Government websites contain large amounts of information by nature. The challenge is not removing it — it's structuring it properly: prioritising actions, improving discoverability, reducing cognitive load through spacing, grouping, and visual rhythm.
What This Tells Us
Government websites are public infrastructure. Bad UX in civic systems creates confusion, accessibility barriers, lower digital adoption, and reduced trust. When millions of citizens interact with a system, even small usability improvements matter enormously.
This redesign is an exploration of what that future could look like, a municipal platform that feels transparent, fast, mobile-friendly, and genuinely citizen-first.
Especially as more public services move online across India, this kind of design thinking deserves to be part of the conversation.
If you're working on a government platform, civic tech product, or any digital experience that needs to go beyond the template, we'd love to help build it. At Code Media Labs, we design and develop production-ready systems that are fast, accessible, and actually enjoyable to use. Whether you're starting from scratch or modernising something long overdue for a rethink, reach out at codemedialabs.inand let's build something worth using.
And as always, happy coding.
Built by Code Media Labs. Live demo: codemedialabs.in/demo/cmc
Top comments (0)