HoloSnap
An AI-powered web application that transforms 2D images into interactive 3D models, democratizing 3D content creation for designers, marketers, and e-commerce businesses.
Collaboration & Stakeholders
Collaborated cross-functionally with designers, engineers, and product managers to build relationships with stakeholders and deliver a complex AI-powered product.
Partnered with ML engineers to translate complex AI capabilities into intuitive user controls. Conducted weekly sync meetings to align on model limitations and possibilities.
- • Participated in model training feedback sessions
- • Designed error handling for edge cases
- • Created visualization strategies for 3D previews
Aligned design decisions with business objectives and user needs. Facilitated design critiques and sprint planning sessions to prioritize features.
- • Weekly design reviews and sprint planning
- • Feature prioritization workshops
- • User feedback synthesis and roadmap planning
Worked closely with frontend team to ensure pixel-perfect implementation of 3D viewer and real-time preview features using WebGL and Three.js.
- • Daily standups and pair programming sessions
- • Design handoff with detailed specifications
- • Performance optimization feedback loops
Collaborated with QA team to develop test cases and coordinate usability testing sessions. Supported user research and usability testing throughout the design process.
- • Coordinated 5 rounds of usability testing
- • Bug triage and UX issue prioritization
- • Cross-browser and device compatibility testing
Research & Empathize
Understanding user needs, pain points, and expectations through comprehensive research and empathy mapping.
Research Goal
Understand how users create and share 3D models from 2D product photos, and identify friction points across user types.
Context
HoloSnap.ai is an AI-powered 2D → 3D model conversion tool serving:
- • Freelance 3D artists
- • Product/furniture studios
- • E-commerce sellers and agencies
Research Methods
15 in-depth interviews with designers, marketers, and e-commerce professionals
Analyzed 8 existing 2D-to-3D tools and traditional modeling software
186 responses from potential users across various industries
Shadowed 6 users during their typical workflow for creating 3D content
Secondary Insights
- Existing tools demand technical expertise or heavy software installs.
- Main pain points: long render times, inaccurate models, limited free functionality.
- Competitive gap: few offer short-term free previews or transparent storage periods.
Opportunity
Simplify the 2D → 3D process with instant AI previews and clear upgrade tiers tied to tangible value (editability, storage, support).
Interview Insights (Synthesized)
| Participant Type | Key Insight |
|---|---|
| Freelance 3D Artist | Wants fast model previews without needing CAD tools. |
| Furniture Seller | Needs multiple uploads + shareable links for website display. |
| Game Developer | Prefers editable layers and lighting controls for refinement. |
| E-commerce Merchant | Concerned about file expiry and wants proactive reminders. |
| User Mindset | "I want to…" | Feels when… | Needs from system |
|---|---|---|---|
| Curious Guest | Test HoloSnap without commitment | File upload fails | Gentle feedback and retry option |
| New Creator | Verify output quality | Preview lacks detail | Clear upgrade call-to-action |
| Advanced User | Manage model edits efficiently | Storage expires suddenly | Predictable renewal reminders |
| Enterprise Lead | Ensure reliability for team | Retouch delayed | Transparent SLA + progress visibility |
Define
Synthesizing research insights into actionable user personas, journey maps, and clear problem statements.
Grouped recurring patterns from interviews and product observations:
Speed & Ease
Quick previews, minimal inputs.
Control & Ownership
Editable models, transparent storage.
Trust & Support
Consistent communication, visible plan benefits.
Scalability
Collaboration tools, enterprise dashboards.
Arif
Freelance 3D Artist
Goal
Generate quick 3D previews for client mock-ups.
Needs
- • Fast conversion
- • Editable output
- • Affordable upgrades
Pain
Limited free usage and non-editable exports.
Meera
Furniture Merchant
Goal
Display interactive 3D product renders online.
Needs
- • Reminders
- • Easy renewal
- • Share/embed links
Pain
Unclear storage expiry and renewal process.
Ravi
Enterprise Manager
Goal
Manage bulk uploads with guaranteed turnaround.
Needs
- • Dedicated support
- • Integrated monthly reporting
Pain
Manual retouch tracking, SLA confusion.
| Stage | Action | Experience | Pain Point | Opportunity |
|---|---|---|---|---|
| Awareness | Clicks "Try Free" | Curious but uncertain | Unsure of quality | Add live demo preview |
| Consideration | Uploads images | Gets preview | File-type errors (.heic) | Smarter file validation |
| Conversion | Attempts download | Blocked by signup | Frustration | Soft signup with progress save |
| Adoption | Registers & uploads | Engaged | Hits asset limit | Dynamic upgrade prompts |
| Retention | Upgrades plan | Continues work | Retouch confusion | Clear ticket status tracking |
| Renewal | Near expiry | Needs reminder | Forgets deadline | Auto-renew toggle |
Problem Statement 1
Guests drop off at download due to unclear conversion flow.
Problem Statement 2
Registered users reach hidden limits without understanding benefits of paid tiers.
Problem Statement 3
Paid users face friction during retouch and expiry cycles.
Problem Statement 4
Enterprise clients lack visibility into SLA adherence and monthly analytics.
Design Goal
Build a friction-less, AI-assisted 3D modeling experience where users can easily upload, preview, and manage 3D assets — progressing from free testing to professional use through transparent, supportive upgrade paths that establish trust and long-term value.
Ideate
Participated in brainstorming and ideation sessions to generate creative solutions for the 2D-to-3D conversion experience.
Evaluated feature ideas based on user impact and implementation effort to guide MVP development and roadmap planning.
Quick Wins
High Impact, Low Effort
- • Drag-and-drop upload
- • Real-time progress indicator
- • Basic 360° viewer
- • One-click export
Major Projects
High Impact, High Effort
- • AI model training optimization
- • Advanced mesh editing tools
- • AR preview functionality
- • Batch processing engine
Fill-ins
Low Impact, Low Effort
- • Custom background colors
- • Model rotation presets
- • Social media share buttons
- • Usage statistics dashboard
Avoid
Low Impact, High Effort
- • Custom shader editor
- • Multi-object scene builder
- • Real-time collaboration
- • Video-to-3D conversion
MVP Feature Set Decision
Based on the prioritization matrix, we decided to focus on Quick Wins for MVP and phase one Major Project (AI optimization) over 3 months:
Prototype
Created wireframes, journey maps, and prototypes to communicate design concepts and user flows to stakeholders.
Developed low-fidelity wireframes for key screens to establish information hierarchy and user flow before investing in high-fidelity designs.
Upload & Setup Flow
Focused on making image upload prominent and intuitive with clear CTAs and format requirements.
Processing & Preview
Designed progress indicators and preview states to manage user expectations during AI processing.
3D Viewer Interface
Structured controls around the viewer for rotation, lighting, and zoom without cluttering the viewport.
Export & Download
Simplified format selection with clear descriptions of each export type and use case.
Mapped detailed interaction flows to ensure smooth transitions and logical progression through the app.
Primary Flow: First-Time User
Secondary Flow: Returning User
Error Recovery Flow
Created both paper prototypes for rapid team feedback and Figma clickable prototypes for early usability testing.
Paper Prototyping Session
- 3 design sprint sessions with 8-10 team members
- Tested 5 different navigation patterns
- Identified optimal button placement through user simulation
- Cost-effective way to explore alternative layouts
Figma Clickable Prototype
- 15 interconnected screens simulating full flow
- Shared with 20+ stakeholders for early feedback
- Conducted 6 remote usability tests
- Iterated based on confusion points and drop-offs
Key Learnings from Prototyping
- Users expected instant preview, not a loading screen—led to instant low-res preview feature
- Upload button was initially too small—increased size by 40% based on testing
- 3D viewer controls needed labels, not just icons—improved accessibility and learnability
Established a comprehensive testing checklist to ensure consistent evaluation across all prototype iterations.
Usability Criteria
Performance Criteria
Design
Documented design decisions and maintained specifications for high-fidelity designs, design system components, and developer handoff.
Elevated low-fidelity wireframes to polished, production-ready designs with attention to visual hierarchy, color, typography, and micro-interactions.
Key Design Decisions
Dark Mode First
Designed with dark theme as primary to reduce eye strain during extended 3D viewing sessions and make models stand out with better contrast.
Gradient Accents
Used subtle blue-to-purple gradients for CTAs and progress bars to convey AI-powered innovation while maintaining professional appearance.
Generous Whitespace
Prioritized breathing room around 3D viewer to minimize visual clutter and keep focus on the model. 80/20 split: 80% viewer, 20% controls.
Depth & Elevation
Employed subtle shadows and border treatments to create visual hierarchy without heavy skeuomorphism. 3 elevation levels: background, surface, overlay.
Contributed to design system and accessibility best practices by creating reusable components with comprehensive documentation.
Core Components
- Upload Zone
Drag-drop component with file validation
- Progress Bar
Multi-stage indicator with time estimates
- 3D Viewer Canvas
WebGL wrapper with consistent controls
- Export Modal
Format selector with preview options
Utility Components
- Toast Notifications
Success, error, and info variants
- Empty States
Contextual illustrations and CTAs
- Loading Skeletons
Animated placeholders for async content
- Tooltips
Contextual help with smart positioning
Typography System
Primary font family for UI elements and body text
Color Palette
Accessibility Considerations
- All color combinations meet WCAG 2.1 AA standards (minimum 4.5:1 contrast ratio)
- Interactive elements have focus indicators with 3px outline for keyboard navigation
- Text scales responsively with rem units to respect user font size preferences
Defined motion principles to create fluid, purposeful animations that enhance usability without distraction.
Easing Functions
Duration Standards
Key Micro-Interactions
Button Hover
Scale 1.0 → 1.05 with subtle shadow increase
150ms ease-outUpload Zone Active
Border pulse animation when file dragged over
300ms cubic-bezier3D Model Load
Fade in + gentle rotation on first appearance
600ms ease-outSuccess Celebration
Confetti burst + scale animation on export
800ms bounceDocumented design decisions and maintained specifications to ensure pixel-perfect handoff and implementation.
Handoff Package Includes
Inspect-ready files with auto-generated code snippets
Detailed spacing, sizing, and state documentation
Annotated flows with animation timing and triggers
Optimized SVGs, icons at multiple resolutions
Mobile (320px), Tablet (768px), Desktop (1440px)
ARIA labels, keyboard nav, screen reader guidance
Collaboration Process
- • Weekly design-dev sync meetings to review implementation progress and address technical constraints
- • Slack channel for quick clarifications and design QA feedback
- • Storybook integration for component library documentation and testing
- • Final design QA pass before each release to ensure fidelity to specifications
Test
Supported user research and usability testing through multiple rounds of testing, measuring and analyzing feature performance.
Conducted 5 rounds of moderated usability testing with 30+ participants across target user segments.
Testing Methodology
- • Think-aloud protocol to capture real-time thoughts and frustrations
- • Task-based scenarios: upload image, adjust settings, export model
- • Post-test surveys including System Usability Scale (SUS) questionnaire
- • Remote testing via Zoom with screen recording for analysis
Key Findings & Iterations
Round 1: Initial Prototype
- Issue: 60% of users couldn't find export button
- Fix: Made export button persistent and more prominent
Round 3: Beta Release
- Issue: Users unsure if upload was successful
- Fix: Added confirmation toast with upload preview thumbnail
Round 5: Pre-Launch
- Success: 92% task completion rate achieved
- Success: SUS score improved from 68 to 82
Measured and analyzed feature performance through controlled A/B experiments with real users post-launch.
Test 1: Upload Button CTA Text
Result: Outcome-focused CTA increased conversion by 38%. Users responded better to value proposition than action description.
Test 2: Progress Indicator Style
Result: Progress bar with percentage made AI processing feel 52% faster. Determinate indicators reduced anxiety during wait time.
Measured and analyzed feature performance through analytics, error logs, user surveys, and continuous improvement.
Analytics Data (First 3 Months)
User Satisfaction Survey Results
Error Logs & Issues Identified
Resolution: Implemented client-side compression before upload
Resolution: Added WebGL fallback renderer for unsupported browsers
Resolution: Increased timeout threshold and added progress feedback
Improvement Recommendations
- Add Batch Processing: 42% of users requested ability to process multiple images simultaneously
- Improve Model Quality Controls: Users want more granular control over mesh density and texture quality
- Add Social Sharing: 28% of users attempted to share their 3D models on social media
- Expand Export Formats: Users requested support for additional formats like USD and STL for 3D printing
Outcome & Reflection
Project outcomes, key learnings, metrics, and design impact on users and business objectives.
Users created their first 3D model within 5 minutes
For the core 2D-to-3D conversion flow
After implementing progressive onboarding
Business Impact
- 12,437 3D models created in first 3 months post-launch
- 2,800+ active users with 68% monthly retention rate
- 4.6/5.0 average user rating on product review platforms
- 30% conversion to paid tier exceeding initial projections by 15%
User Experience Impact
- 90% reduction in time to create 3D content compared to traditional methods
- Zero learning curve for 87% of users—no tutorial needed
- SUS score of 82 (Grade A) indicating excellent usability
- 94% would recommend to colleagues and friends
What Worked Well
- Progressive Disclosure: Revealing advanced features gradually prevented overwhelm and maintained high task completion rates among novice users.
- Instant Preview: The low-res preview feature reduced perceived wait time by 60% and gave users confidence to proceed before committing credits.
- Collaborative Design Process: Daily standups with engineering enabled quick resolution of technical constraints and fostered mutual understanding.
- Early & Frequent Testing: Five rounds of usability testing caught major issues before launch and validated design decisions with real user data.
Challenges & How We Overcame Them
- Challenge: AI output quality varied significantly based on input image.
Solution: Added pre-upload quality check with suggestions for improving source images (lighting, angle, clarity). - Challenge: 3D viewer performance on older devices caused crashes.
Solution: Implemented adaptive quality settings that automatically adjust polygon count based on device capabilities. - Challenge: Users confused by file format options during export.
Solution: Created use-case-based export wizard ("For web embedding" vs "For editing in Blender") instead of technical format names.
Personal Learnings & Growth
- Deepened expertise in designing for AI/ML products—learned to balance user control with algorithm confidence, manage uncertainty, and set appropriate expectations.
- Improved skills in 3D interaction design and WebGL performance optimization, expanding beyond traditional 2D interface design.
- Strengthened ability to advocate for user needs when balancing technical constraints, business requirements, and user experience—successfully negotiated for instant preview feature despite engineering concerns.
- Developed data-driven decision-making mindset through A/B testing and analytics, moving beyond assumptions to validate design choices with quantitative evidence.
Future Opportunities
Based on user feedback and market trends, we identified several opportunities for future iterations:
- • Batch processing for teams and agencies handling multiple products
- • Advanced editing tools for fine-tuning AI-generated models
- • Collaborative features for team workflows and feedback loops
- • Mobile app for on-the-go 3D creation and AR preview
- • Integration with design tools like Figma, Adobe XD, and Blender
Key Professional Contributions
Skills and activities demonstrated throughout this project
Brainstorming & Ideation
Participated in brainstorming and ideation sessions with cross-functional teams to generate innovative solutions for AI-powered 3D generation.
Design Artifacts
Created wireframes, journey maps, and prototypes to communicate design concepts and user flows to stakeholders and development teams.
Documentation
Documented design decisions and maintained specifications throughout the project lifecycle, ensuring clear handoff to engineering teams.
User Research
Supported user research and usability testing through 15+ interviews, surveys, and iterative testing sessions with target users.
Cross-Functional Collaboration
Collaborated cross-functionally with designers, engineers, and product managers through daily standups, design critiques, and sprint planning.
Design System & Accessibility
Contributed to design system and accessibility best practices, ensuring WCAG 2.1 AA compliance and consistent component usage.