← ALL ISSUES
Product & interface design · design + code

UI/UX Design

How I design digital products: understand the people using them, map the flows, design and prototype in Figma, test, then build the interface myself. Every case below is real, shipped work.

UI/UX Designer4 case studies

HOW I WORK

  1. 01ResearchUser research, personas, competitive analysis and a heuristic evaluation of what exists today.
  2. 02DefineUser flows, journey maps and information architecture, so every screen has one clear job.
  3. 03DesignWireframes to high fidelity in Figma with Auto Layout, components and variants, grown into a design system.
  4. 04Prototype & testInteractive prototypes, usability testing and accessibility checks (WCAG), then iterate.
  5. 05BuildI code the final UI myself: React, Next.js, Astro and Tailwind, with Framer Motion for interaction.
DESIGN ⇄ CODE

Seen some of these in the Tech World? It's the same work, seen from the other side. I designed these products in Figma first and then built them in code, on my own or with my team, so both UI/UX design and development went into each one. This issue tells the design story; the Tech World tells the engineering one.

Case 01May – Jun 2026designed here · coded in the Tech World

Swecha Activity Tracker

UI/UX lead & frontend · Swecha.ai internship

THE CHALLENGE:A production dashboard that interns and mentors use every day for stand-ups and progress tracking, where daily logging, verification and finding information all had friction.

HOW I DESIGNED IT

  • 1Ran design evaluations of the existing flows to find the friction points in daily stand-up logging
  • 2Reworked navigation and information architecture so the right content is easy to discover
  • 3Simplified the verification workflows and analytics views for mentors
  • 4Designed a glassmorphism-inspired, dual-theme design system of reusable components
  • 5Planned multilingual, responsive layouts that work on mobile

‹/› THEN I BUILT IT

Built the reusable UI components and the frontend myself in React, Astro and TypeScript with i18next, iterating with the developers and stakeholders.

FigmaReactAstroTypeScripti18nextDaisyUIshadcn/uiVISIT LIVE ↗
Case 02May – Jun 2026designed here · coded in the Tech World

Swecha.org Website Redesign

UI/UX lead & frontend · Swecha.ai internship

THE CHALLENGE:Redesign Swecha's official website so it is accessible, responsive and engaging, while staying true to the brand.

HOW I DESIGNED IT

  • 1Rebuilt the visual hierarchy so pages read and navigate clearly
  • 2Accessibility-first, responsive layouts for every screen size
  • 3Dark and light themes from one set of design tokens
  • 4Simplified user journeys to make content easier to discover

‹/› THEN I BUILT IT

Built with the team as a fast, static-first Astro site: I led the UI/UX and worked on the reusable component library, offline support and English / Hindi / Telugu localisation.

FigmaAstroTypeScriptTailwind CSSStorybooki18nextVISIT LIVE ↗
Case 032026designed here · coded in the Tech World

DigAlert

UI/UX design & full-stack development

THE CHALLENGE:One civic platform for three very different users: citizens reporting hazards, utility agencies planning digs, and city admins resolving clashes.

HOW I DESIGNED IT

  • 1Role-based dashboards, so each group only sees what it needs
  • 2Permit workflows, complaint tracking and notification interfaces
  • 3Interactive map experiences and analytics dashboards
  • 4Intuitive navigation and responsive layouts, glassmorphism dark/light system, WCAG AA

‹/› THEN I BUILT IT

A group project: I led the UI/UX and built the interface in React, Tailwind CSS and Framer Motion, working with the team on the FastAPI + PostgreSQL backend, Recharts and Leaflet.

FigmaReactTailwind CSSFramer MotionFastAPIPostgreSQLLeafletVISIT LIVE ↗
Case 042025 – 26designed here · coded in the Tech World

Portfolio Platforms

UI/UX design & frontend

THE CHALLENGE:Tell a story with work: a personal portfolio and a collaborative team portfolio that are easy to explore and pleasant to use.

HOW I DESIGNED IT

  • 1Storytelling-led structure with intuitive navigation
  • 2Interaction design and smooth animations that guide attention
  • 3Structured information architecture and reusable UI components for the team site
  • 4Accessibility-focused, responsive layouts for better discoverability

‹/› THEN I BUILT IT

Coded both with React, TypeScript, Tailwind CSS and Framer Motion, deployed on Vercel and GitHub Pages.

FigmaReactTypeScriptTailwind CSSFramer MotionVISIT LIVE ↗