Pavani Surapaneni
Product Designer Crafting Thoughtful Design.
New to Contra
Pavani is building their profile!
Classless: An RPG for Career Discovery
Most career exploration tools begin with a question many people struggle to answer:
"What do you want to become?"
Classless takes a different approach.
Inspired by RPG progression systems, Classless transforms career exploration into an adventure of self-discovery.
Players begin as a Wanderer with no predefined career path. Instead of browsing job descriptions or completing personality tests, they undertake real-world quests based on curiosity and interests.
As players complete quests, submit reflections, and discover what genuinely energizes them, hidden traits emerge. Guilds gradually unlock, revealing broader domains such as Discovery, Creativity, Strategy, Justice, Healing, and Storytelling.
Only after meaningful exploration do specific career paths begin to reveal themselves.
The goal is not to tell people who they should become.
The goal is to help them discover it for themselves.
Built with:
• Figma Make
• Figma Design
• Figma Weave
• Figma Design Agent
Workflow:
• World-building and visual exploration in Weave
• Interface design and system thinking in Figma Design
• Rapid prototyping and interactions in Make
• Iteration and ideation using Design Agent
Core Features:
RPG-inspired progression
Real-world experiential quests
Guild discovery system
Career path revelations
Personal journey map
Reflection and self-discovery mechanics
Classless reframes career exploration from a decision-making exercise into a journey of exploration.
Project link - https://yellow-utter-84190256.figma.site
Figma working file links - https://www.figma.com/make/DW2JSG1SPW9NdMuRkvRKYB/Classless?t=z5m9E6KGowVl0QtU-1 https://www.figma.com/design/4hafAgQCnMmUxon5x2BXbW/Career-Quest---Config-Makeathon?node-id=0-1&t=AifApJeM6cI18hrM-1
Figma Community upload - https://www.figma.com/community/file/1649649617152335849
2
2
81
🚀 Revisited an old idea and brought it to life with Google Stitch.
A while ago, I worked on a concept called 'EatSmart,' a smart refrigerator experience designed to help households reduce food waste through inventory awareness, freshness tracking, shopping assistance, and sustainability insights.
The project never progressed beyond low-fidelity wireframes.
For the Google Stitch Challenge, I decided to revisit it and see how quickly I could transform those wireframes into a polished MVP.
My workflow:
🧊 Imported the original .fig wireframes into Stitch
🎨 Generated an initial design system and visual direction
✨ Used in-place edits to refine screens and flows
🔄 Explored multiple dashboard and splash screen variations
🎬 Experimented with animated variations and ambient motion
🔗 Generated an interactive prototype in a single click
♿ Ran accessibility audits to identify improvements
📱 Explored alternate device adaptations
What impressed me most wasn't just the screen generation.
It was how quickly I could move from an abandoned concept to a complete product vision, complete with a design system, prototype, branding assets, and supporting materials.
Instead of spending most of my time rebuilding screens, I spent my time evaluating ideas, refining experiences, and making product decisions.
EatSmart started as a collection of old wireframes and evolved into a much more complete product experience.
Prototype Link:
https://stitch.withgoogle.com/preview/4918386598560619188?node-id=382d3ade6f3f48c6a8bd960c8d1b6ca7
Prototype walkthrough:
https://www.loom.com/share/0270b767bfba49aa9a666d293297aa52
Process walkthrough:
2
1
61