Senior Product Designer on
Spirit Design System
Inspirit Design System
Design Note
A versatile component library that can be implemented across Web, Mobile, VR, & XR experiences to ensure a fluid cross-platform experience. It enabled designers & developers alike to lead & manage features without having to build from scratch.  It taught our team to think in systems, not screens.
Design System
Visual Design
UI Design
Industry
Education Technology
Primary Responsibilities đź’…
1. Auditing all product flows across web, VR, and AR to identify key design patterns & components needed.
2. Prioritizing components into P0, P1, and P2 categories based on frequency of use, functional importance, & alignment with pending feature rollouts.
3. Defining a color system that fits the brand (surface, on-surface, primary, secondary, success, error, alert, etc.).
4. Setting up a type system with weights and styles mapped to clear use cases (display, heading, subheading, label, body, annotation, etc.)
‍5. Adopting Material Icons to save time & cost, ensuring scalability with a small team.
6. Designing components with versatility in mind—ensuring each atom, molecule, and organism worked seamlessly across all our different platforms (web, VR, and AR).
7. Championing user-friendliness at every layer of the system—prioritizing clarity, accessibility, and delight without compromising scalability.
Team👷🏻
• 1 Designer
• 1 Manager
• 1 Dev Architect
• 2 Platform Devs
• 2 Unity Devs
Project Impact
🚀40%
Reduction in design & dev cycle time
🎨50+
reusable components across 3 platforms
đź’¬
Clearer collaboration with a shared language across brand, product & dev teams
đź§Ş
Improved accessibility & friendliness across all touchpoints
The Process
Trying to sum up a year of work & the steps!
Project timeline and process
01 — Setting the tone
I began by exploring how successful design systems in education, technology, & related domains are structured. I looked at systems like Google's Material, IBM's Carbon, & Duolingo's playful design voice. My analysis focused on how these systems maintain balance, which is crucial for our audience of both learners and educators.
Visual Language
Tone and Visual feel for Spirit Design System
Since our users are primarily students and instructors, I established a friendly & inviting visual language—clean without being clinical, and playful without being distracting. Every element was designed to feel intuitive and warm, not intimidating.
Product Website
Landing Page design for InspiritVR
Inspirit App
Dashboard Design for InspiritVR
Admin Portal
Admin Portal for InspiritVR
Augmented Reality Class
Mobile Screens for Spirit Design System
02 — Component Architecture
I structured the system around the atomic design methodology, but with a unique twist. Since it's called the 'SPIRIT' Design System, we affectionately named our foundation and components accordingly.

Souls, Echoes & Realms.
Souls
Souls is what we called the Atoms of this design system, the purported essence of it – Colors, Typography, Icons, Spacing, & Padding and more.
Colors
Color system for Spirit Design
Typography
Type usage and system for Spirit Design System
Icons
Spirit Design System Icons
Spacing & Padding
Spacing and Padding guidelines for Spirit Design System
Echoes
Echoes are Molecules of the design system made using Souls– Buttons, Tags, Filters, Indicators, Input fields etc.
Buttons
Button Design for Spirit Design System
Tags, Filters & Indicators
Tags, Filters & Markers for Spirit Design System
Input Fields
Input fields showcase for Spirit Design System
Realms
Realms are Organisms made out of the Echoes – Category Cards, Navigation bars, Modals, Lesson & Session module blocks.
Category Cards for Web
Web version for Content Modules
Category Cards for Mobile
Mobile version for Content Modules
Header & Footer
Header and Footer Design
Navbar & Content Filter
Navbar Designs
Challenges
• No unified design source - Before Spirit, screens were built ad hoc, and designers spent a significant amount of time recreating basic components, which would need to be manually updated in every file.

• High Dev Time - Developers coded UI from scratch with little reusability. The lack of cohesion slowed us down and compromised user experience because of the lack of consistency.

• Styling Inconsistencies - Inspirit is an immersive ed-tech platform that builds experiential tools for STEM & Careers with products spanning VR simulations, AR tools, and web-based dashboards, design debt was piling up and inconsistencies crept in.

• Multi-Platform Product Identity - “Building Spirit wasn’t just about making buttons—it was about creating the soul of our product.”
Check out — Live Site & Storybook
InspiritVR Website Redesign
Customer-facing website redesign focused on surfacing Inspirit’s VR/AR content to enhance content discoverability & improve sales conversions.
Next Project
InspiritVR Website Design Cover