Role
Product Designer
UX/UI, product strategy, IA, visual system
UX/UI Case Study
AutoVision AI
AI Vehicle Customization SaaS Dashboard
A premium AI-powered SaaS platform that helps car owners and automotive shops visualize realistic customization concepts before committing to wraps, paint, rims, body kits, decals, lights, and carbon fiber upgrades.
Timeline
8 weeks
Discovery, flows, interface design, prototype
Team
Solo concept
End-to-end product design case study
Tools
Figma, FigJam, AI tools
Wireframes, dashboard UI, design system
AI previews
Real vehicle
Shop mode
B2B workflow
Credits
SaaS model
Project overview
A vehicle customization platform built for imagination, confidence, and conversion.
AutoVision AI connects consumer creativity with professional automotive workflows. Users can move from inspiration to realistic preview, while shops can turn those previews into clearer client conversations and faster service decisions.
Consumer experience
Car owners can upload their actual vehicle, describe a desired build, and generate realistic previews before committing to expensive modifications.
Business workflow
Wrap shops, paint studios, detailers, and custom garages can use AI previews to guide consultations, present concepts, and move clients toward quotes faster.
SaaS opportunity
A credit-based platform supports individual enthusiasts while scaling into shop seats, client libraries, branded galleries, and quote-ready project workflows.
Problem
Customization decisions are visual, expensive, and difficult to trust without seeing the result first.
The core design challenge was reducing uncertainty. The product needed to help users explore ambitious ideas while giving shops a practical way to turn those ideas into credible presentations.
1
Customers struggle to imagine paint, wraps, rims, lighting, decals, or body kits on their exact vehicle.
2
Shops lose time explaining ideas with reference images, basic mockups, or verbal descriptions that do not build enough confidence.
3
Traditional configurators are limited to generic models and rarely match real vehicle angles, lighting, paint condition, or aftermarket combinations.
4
The path from inspiration to purchase has too much friction: users browse ideas, hesitate, ask for opinions, and delay service decisions.
5
High-value modifications require trust before payment, especially when the final result is visual, personal, and hard to reverse.
Goals and objectives
Design goals focused on confidence, guidance, and business usefulness.
The experience needed to feel advanced without becoming intimidating. Every major flow was designed to make the next step obvious and keep the user's vehicle at the center of the decision.
Improve confidence before purchase by showing realistic concepts on the user's own vehicle.
Reduce friction with a guided customization workflow that makes AI generation feel approachable.
Help shops present concepts faster during consultations and follow-up conversations.
Support both creative exploration and controlled business workflows inside one SaaS product.
Make a technically advanced AI tool feel premium, simple, and reliable.
Use saved projects and galleries to encourage iteration, comparison, and conversion.
Research and insights
Discovery showed that the biggest UX issue was not generation. It was decision confidence.
I compared automotive configurators, design tools, aftermarket shopping flows, and AI image workflows. The strongest opportunity was a guided experience that preserved realism while making exploration fast.
Realism creates trust
Users are more likely to act when the preview preserves vehicle identity, angle, shadows, and context instead of producing a generic fantasy render.
Customization can cause decision paralysis
Paint finish, rim style, wrap color, decals, lighting, and body kits create many combinations. The interface needs to sequence choices without reducing creative control.
Shops need speed and record keeping
Business users need saved client builds, project notes, quote context, and reusable inspiration to reduce repeated consultation work.
Prompting needs product design
AI image tools are powerful but inconsistent for non-experts. Structured controls and examples help users write better prompts without learning prompt engineering.
Information architecture
A product ecosystem for discovery, generation, organization, and shop conversion.
The architecture separates consumer exploration from business operations while keeping both inside the same SaaS platform.
Landing page
Dashboard
New build flow
My Garage
AI Gallery
Billing
Shop Mode
Before/After results
User flow
The core journey moves from inspiration to generated concept to saved decision artifact.
The flow is linear where users need guidance and flexible where users need comparison, saving, sharing, or shop support.
01
Discover product
02
Sign in
03
Open dashboard
04
Start new build
05
Upload vehicle image
06
Add vehicle details
07
Choose customization types
08
Build AI prompt
09
Review and generate
10
Compare before/after
11
Save to garage or share
12
Use shop features
Key screens
Product walkthrough
The screens below form the main case study story: dashboard orientation, guided generation, visual result comparison, project organization, inspiration, and business workflows.
B
New Build Wizard
A step-by-step flow that turns complex AI setup into guided decisions.
Step 1
Upload vehicle
The first step anchors the workflow around the user's real vehicle, making the output personal and trustworthy from the start.
Step 2
Vehicle details
Make, model, year, angle, and current condition add context for more believable generation and cleaner project records.
Step 3
Choose customizations
Structured modification categories reduce ambiguity while still allowing broad creative exploration.
Step 4
Prompt builder
Freeform description works with guided controls, examples, and realism cues to reduce blank-state friction.
Step 5
Review and generate
The final checkpoint helps users confirm inputs, understand credit usage, and generate with confidence.
A
Dashboard Home
The dashboard gives users a clear operating center for new builds, credits, saved designs, and recent projects. The primary CTA stays visible because the most important action is starting a new vehicle concept.
Build overviewGeneration creditsSaved design accessRecent project history
C
Before / After Result
The result view is the flagship moment. Users can compare the original vehicle with the generated concept, review project details, and understand which prompt created the output.
Original vs generated previewPrompt transparencyProject metadataDecision-ready comparison
D
My Garage
My Garage organizes saved concepts into a browsable library. It supports iteration, history, and retrieval for users who want to compare builds over time.
Saved buildsProject browsingFilteringIteration history
E
AI Gallery
The gallery turns inspiration into a product loop. Users can browse generated styles, discover trends, and use visual references to shape their own prompt decisions.
Style discoveryTemplate inspirationTrend browsingCommunity-ready structure
F
Shop Mode / Admin View
Shop Mode extends the product into a B2B workflow for client projects, quote conversations, business profiles, and service conversion.
Client project managementQuote workflow supportShop profileBusiness value layer
UX strategy
Design decisions that made the product feel powerful without making users feel lost.
The experience is built around progressive disclosure. Users start with familiar inputs, then move into more advanced controls only when they have enough context.
1
A guided wizard replaces a large freeform setup screen so users can focus on one decision at a time.
2
Vehicle imagery is treated as the core interface object because the product value depends on visual confidence.
3
Cards, tags, filters, and status chips make dense SaaS information easy to scan.
4
Side navigation gives the product a familiar dashboard structure for both individual and business users.
5
The visual language balances creative aspiration with operational clarity.
6
Image-heavy layouts use consistent framing so the product feels premium without becoming noisy.
Prompt-builder UX
The prompt builder turns AI generation into a usable design tool.
The goal was to help non-expert users get realistic outputs without needing advanced prompting skills. Structured controls provide reliability, while freeform text preserves creative direction.
Structured inputs define color, finish, style, angle, realism level, background, and customization categories.
Freeform description gives enthusiasts room to describe a specific build without forcing them into rigid templates.
Prompt examples help users start faster and understand what a useful request looks like.
Vehicle-preservation guidance keeps the AI focused on the user's actual car, not a different model or fantasy render.
Review states make the prompt visible before generation so users can understand and improve their results.
Visual design system
A dark luxury interface system for AI, performance, and professional SaaS use.
The system uses black and charcoal surfaces, electric blue accents, restrained glow, compact typography, and reusable modules to match premium automotive expectations while keeping the product operational.
#05070B
Carbon
#111827
Charcoal
#22D3EE
Electric blue
#3B82F6
Signal blue
#E2E8F0
Mist
#64748B
Slate
Dark premium theme
Black and charcoal surfaces
Electric blue accents
Subtle glow and contrast
Modern typography
Reusable cards
Stepper components
Dashboard side nav
Tags and status chips
Comparison modules
Form controls
Strong spacing and alignment
Accessibility and usability
The interface reduces cognitive load while handling a feature-rich product.
Because the product combines AI, automotive terminology, image generation, galleries, credits, and business tools, usability depends on clear hierarchy and predictable patterns.
1
Clear hierarchy supports quick scanning across dashboards, forms, and gallery layouts.
2
Readable typography and strong contrast keep dense information usable in a dark interface.
3
Guided steps reduce cognitive load by separating upload, vehicle details, customization, prompt, and review.
4
Labels, chips, filters, and navigation states clarify what is selectable, active, or complete.
5
Touch-friendly controls support future mobile and tablet use in garages, shops, and consultation environments.
Business model
A SaaS strategy with B2C adoption and B2B expansion.
The product can start with enthusiasts generating personal previews, then expand into professional shop workflows where saved projects, client reviews, and quote conversion create deeper value.
Free
Limited credits, personal projects, gallery browsing, and a low-risk way to test vehicle previews.
Pro
More generations, higher-quality outputs, saved build libraries, advanced prompt controls, and sharing.
Business
Shop seats, client builds, quote context, branded project galleries, usage tracking, and consultation tools.
Outcome and impact
A complete product direction that connects visual aspiration with practical workflow value.
AutoVision AI is designed to help users make clearer customization decisions and help shops communicate concepts with less manual effort. From a product design perspective, the strongest opportunity is turning AI output into a trusted decision-making experience.
Clearer customization decisions through realistic before/after previews.
Better consultation workflow for shops that need fast visual concepting.
Higher engagement potential through saved garages, galleries, and iteration history.
A more scalable workflow than manual mockups or one-off design requests.
A product direction that blends utility, aspiration, and premium SaaS UX.
Reflection: the project reinforced that AI product design is not only about powerful generation. The design work is in shaping inputs, building trust in outputs, and giving users a clear next action after the image is created.
Next steps
Future opportunities for deeper realism, collaboration, and business intelligence.
The next phase would extend AutoVision AI from a generation dashboard into a collaborative sales and customization workspace for shops and clients.
AI video previews for rolling shots, lighting changes, and walkaround concepts.
Mobile-first flow for users capturing vehicle photos from a garage or parking lot.
Quote request integration for wrap, paint, tint, wheel, and body kit services.
Collaborative shop/client feedback with comments, approvals, and selected versions.
Personalized style recommendations based on vehicle type, budget, and saved inspiration.
Business analytics for quote conversion, popular styles, and credit usage.
Advanced preset templates for track builds, luxury wraps, overland kits, and show-car concepts.