Experience highlight
Homepage + page-aware entryImage / interaction preview
Media placeholderRecommendation
Media placeholderComparison
Media placeholderSelected work / Product experience
In progress · 2026LiveLarge AI
Hero visual
Homepage + AI entryImage or motion
Media placeholder
Overview
A more guided way
to explore an ADU.
Helping visitors explore LiveLarge’s ADU models, clarify their needs and move toward a more informed next step — within the existing website.
The current deliverable is an interactive prototype. This case study is being developed alongside the design.
- Client
- LiveLarge
- Company
- VortexNet
- Designer
- Harry Wu
- Contribution
- Conversation flows, UI, interaction prototyping and motion
- Status
- Design in progress
Highlights
The experience,
at a glance.
Context
A website to browse.
A decision to make.
The design sits within LiveLarge’s existing website. Visitors can browse ADU models, ask about differences and use the existing Check My Lot route. The assistant connects those steps while preserving the website’s navigation.
Current experience
Existing website / journey
Evidence placeholderOpportunity
What would help someone
take the next step?
The design question: how can an assistant use the current page and a visitor’s stated needs to make the next step clearer?
Understand the context
Start from the page or model the visitor is viewing.
Make needs editable
Show the conditions behind a recommendation and let visitors adjust them.
Connect the next step
Bring comparison and the existing Check My Lot route into one journey.
Designing the conversation
Start with the question.
Clarify what matters.
Conversation study
Progressive clarificationSequence / interaction
Media placeholderConnect recommendations to the visitor’s stated needs. Keep those needs visible and editable, retain the conversation when the panel closes, and reserve New chat for an explicit fresh start. Loading, missing context and errors belong within the conversation.
Designing for context
Guidance that starts
where you are.
Interface + page context
Page-aware assistantDesktop / mobile
Media placeholderFrom answer to decision
More room to compare.
Same conversation.
Interaction detail
Expanded comparisonStandard / expanded state
Media placeholderGive comparison more room within the same conversation. Keep the header and composer fixed while the messages scroll. The desktop panel can be moved when it covers website content; on mobile, comparison content can scroll sideways.
When AI is not enough
Keep the context.
Request a follow-up.
Human follow-up
Request / consent / contact
Media placeholderVisual system
One system.
Across every state.
Components + hierarchy
Media placeholderResponsive states
Media placeholderIteration & validation
What changed,
and why.
Before
Earlier version
Evidence placeholderAfter
Revised version
Evidence placeholderRecent iterations clarify recommendation hierarchy, use exterior images for recommendations and floor plans for comparison, and group sources with answer feedback. Next, document these decisions with focused recordings and validate whether viewers can explain the recommendation and change their needs.
Final experience & reflection
The experience,
brought together.
Prototype / product film
End-to-end walkthroughVideo or prototype preview
Media placeholderExplore the current interaction, then follow three key moments: understanding the page, adjusting a recommendation and moving from comparison to Check My Lot.