Audit
Screen and flow review
← All work
MOBILE / WEBVIEW / AUTOMOTIVE
D2C WebView Redesign
Audit and redesign of native mobile screens into design-system aligned WebView experiences for a multi-brand automotive app.
Overview
System
Theme-ready components
Handoff
Developer-ready specs
Problem / Challenge
The existing experience needed to be adapted into a WebView environment while preserving brand consistency, improving structure and supporting multi-brand theming.
Constraints / Context
- WebView limitations inside native app shells
- Multi-brand consistency under one design system
- Need to balance demo priorities with functional readiness
- Unclear source-screen behavior in some flows
Process
01
Discover
Research users, jobs and context.
02
Define
Prioritize opportunities and success criteria.
03
Design
Prototype flows, states and screens.
04
Validate
Review through demos, UAT and feedback.
05
Deliver
Prepare specs, patterns and handoff.
Key Design Decisions
Mobile-first layouts
Screens were rebuilt for WebView structure and constraints.
Theme alignment
Typography, color and components were aligned to tokenized systems.
Flow cleanup
Navigation and content hierarchy were simplified.
Handoff clarity
Designs included practical notes for dev and QA review.
Design in Action
How can I help you?
Navigation
Media
Phone
Listening state
Calm, clear indicator with suggested entry points.
Active / running state
System feedback is visible without becoming distracting.
Confirm action
Before proceeding
Before proceeding
Cancel
Confirm
Permission & confirmation
Critical actions are confirmed before execution.
Outcome
- Produced redesigned flows aligned to product and brand direction.
- Improved UI consistency across mobile screens.
- Supported demo, UAT and handoff requirements.
Learnings
- Complex UX needs clear states, constraints and prioritization.
- Scannable structure matters as much as visual polish.
- Reusable patterns improve handoff and future iteration.