Skip to main content

Source: Codex planning agent (2026-06-27), originally realtor-system-design/ui-ux-design-directions.md. Target-state design directions. Several surfaces (RE Pro Website, listing detail, QR scan, content editor, Listing Studio, leads inbox) ALREADY EXIST — read do-not-reinvent.md and design as extensions, not from zero.

WiseAI Realtor System - UI/UX Design Directions

Design Goal​

Build a product that feels like a premium real estate operating system, not a generic website builder with AI bolted on.

The front end should be designed first, with backend/API wiring added later. Every screen should answer:

  • What is the REALTOR trying to accomplish?
  • What does the lead/client need to trust?
  • What information does the AI need to capture?
  • What should happen next?

Product Surfaces​

There are two major surfaces:

  1. Public REALTOR Website
  2. WiseAI Realtor Backend

They should share brand logic and data, but they should feel different. The public website should feel polished, local, human, and trustworthy. The backend should feel focused, fast, and operational.

Public Website UX​

Primary Public Website Navigation​

Recommended default navigation:

  • Home
  • Buy
  • Sell
  • Listings
  • Neighbourhoods
  • Guides
  • About
  • Contact

Optional brokerage/team navigation:

  • Agents
  • Communities
  • Careers
  • Resources

Persistent Conversion Elements​

Use conversion moments that feel helpful, not annoying:

  • Sticky mobile call/chat bar.
  • "Ask the AI assistant" button.
  • "Book a showing" on listing pages.
  • "Find out what your home could sell for" on seller pages.
  • "Get listings like this" on listing pages.
  • "Scan sign / request details" QR landing pages.
  • Language selector when multilingual mode is enabled.

Avoid instant generic email popups. Use contextual capture after value is shown.

Public Website Template Families​

The system should launch with visually distinct families so clients do not look copied.

1. Signature Agent​

Best for solo agents who want a premium personal brand.

Visual direction:

  • Large portrait or lifestyle photography.
  • Strong name/brand presence.
  • Calm, high-trust layout.
  • Featured listings and seller/buyer CTAs.

Key pages:

  • Home.
  • About.
  • Listings.
  • Sell.
  • Buy.
  • Testimonials.
  • Contact.

2. Modern Team​

Best for teams with multiple agents and lead routing.

Visual direction:

  • Team-first home page.
  • Clear agent cards.
  • Performance metrics.
  • Strong lead routing and language preference capture.

Key pages:

  • Team home.
  • Agents.
  • Listings.
  • Communities.
  • Buyer/seller hubs.
  • Contact/routing.

3. Local Authority​

Best for agents farming a specific city or region.

Visual direction:

  • Community pages dominate.
  • Search by neighbourhood.
  • Market guides and hyperlocal content.
  • AI chat trained on area FAQs.

Key pages:

  • City landing page.
  • Neighbourhood pages.
  • Schools/parks/amenities content.
  • Market updates.
  • Buyer/seller resources.

4. Multilingual Community​

Best for agents serving Punjabi, Urdu, Mandarin, French, Spanish, or other language communities.

Visual direction:

  • Language selector in top bar.
  • Content cards by language.
  • Voice/chat language CTAs.
  • Cultural trust markers without stereotypes.

Key pages:

  • Multilingual home.
  • Buyer guide by language.
  • Seller guide by language.
  • Newcomer buyer page.
  • Language-specific lead pages.

5. Brokerage Pro​

Best for boutique brokerages.

Visual direction:

  • Brokerage brand first.
  • Agent directory.
  • Lead routing.
  • Recruiting credibility.
  • Office/community coverage.

Key pages:

  • Brokerage home.
  • Agents.
  • Listings.
  • Communities.
  • Join us.
  • Contact office.

6. Luxury / Editorial​

Best for high-end agents.

Visual direction:

  • Larger imagery.
  • Minimal chrome.
  • Magazine-like property storytelling.
  • Fewer, better CTAs.

Key pages:

  • Featured properties.
  • Collection pages.
  • Seller service page.
  • Neighbourhood prestige pages.
  • Private consultation.

Public Page Types​

Home Page​

Core sections:

  • Hero with clear agent/team/brokerage identity.
  • Primary CTA: search homes, sell my home, ask AI, or book consult.
  • Featured listings.
  • Buyer/seller entry points.
  • AI assistant/voice availability block.
  • Local authority/community links.
  • Testimonials.
  • Recent content.
  • Contact/lead capture.

Listing Search Page​

Core UI:

  • Search bar.
  • Filters.
  • Map/list toggle.
  • Saved search CTA.
  • Listing cards.
  • Lead capture after repeated use.
  • Language-aware chat helper.

Listing Detail Page​

Core UI:

  • Photo gallery.
  • Key facts.
  • Property description.
  • Map/community context.
  • Showing request.
  • Ask about this listing.
  • Similar listings.
  • QR/source hidden tracking.
  • Compliance-required display fields.

QR Sign Landing Page​

This should be a major differentiator.

Core UI:

  • Property/listing identity.
  • "You scanned the sign for..." confirmation.
  • Fast CTAs: price/details, book showing, ask question, similar homes.
  • AI chat opens with listing context.
  • Voice callback option.
  • Lead form with language preference.
  • Source attribution locked to sign/listing/campaign.

Seller Page​

Core UI:

  • "What is my home worth?" CTA.
  • Seller process.
  • AI valuation intake assistant.
  • Local market content.
  • Marketing system explanation.
  • Proof/testimonials.
  • Contact.

Buyer Page​

Core UI:

  • Search homes.
  • Buyer path.
  • Mortgage/referral disclaimer.
  • Saved search.
  • New listing alerts.
  • Chat assistant.
  • Guides by language.

Neighbourhood Page​

Core UI:

  • Area overview.
  • Listings in area.
  • Market stats where available.
  • Amenities.
  • FAQ.
  • Blog/guides.
  • Language versions.
  • AI assistant trained on area.

Blog/Guide Page​

Core UI:

  • Clean article layout.
  • Author/agent attribution.
  • CTA blocks.
  • Related listings/communities.
  • Language switcher.
  • Newsletter/signup with clear consent.

Backend UX​

Backend Navigation​

Recommended left navigation:

  • Dashboard
  • Leads
  • Conversations
  • Voice Agent
  • Chat Agent
  • Listings
  • QR Campaigns
  • Content Studio
  • Website
  • Automations
  • Integrations
  • Analytics
  • Settings

For brokerage accounts:

  • Agents
  • Teams
  • Routing
  • Offices
  • Recruiting

Backend Dashboard​

Top-level dashboard should answer:

  • How many leads came in?
  • Where did they come from?
  • Which are warm?
  • Which need follow-up?
  • What did AI handle?
  • Which language did they prefer?
  • Which listings/signs/content produced leads?

Suggested widgets:

  • New leads.
  • Warm leads.
  • Missed/handoff-required conversations.
  • QR scans.
  • Voice calls.
  • Chat conversations.
  • Top listings.
  • Top content.
  • Language breakdown.
  • Follow-up due.

Leads Screen​

Core features:

  • Pipeline view and table view.
  • Filters by source, status, language, listing, campaign, agent, date.
  • Lead profile drawer.
  • Timeline: forms, chat, voice, QR, email, notes.
  • AI summary.
  • Next best action.
  • Consent status.
  • Assign/reassign.

Lead statuses:

  • New.
  • Needs follow-up.
  • Warm.
  • Showing requested.
  • Valuation requested.
  • Nurture.
  • Client.
  • Closed/lost.

Conversation Center​

Unifies chat and voice conversations.

Core UI:

  • Inbox-style list.
  • Lead intent label.
  • Language label.
  • Transcript.
  • AI summary.
  • Confidence/quality warning for broader-language voice lines.
  • Handoff action.
  • Follow-up draft.
  • Convert to lead/task.

Voice Agent Screen​

Core tabs:

  • Overview.
  • Voice lines.
  • Scripts.
  • Voices.
  • Routing.
  • Transcripts.
  • Analytics.

Voice line model:

  • Premium main line: English, Spanish, French.
  • Dedicated language lines: Punjabi, Urdu, Mandarin, Hindi, etc.

Settings:

  • Voice actor selection.
  • Greeting.
  • Business hours.
  • Escalation rules.
  • Questions to ask.
  • Capture fields.
  • Language routing.
  • Call summary format.

Chat Agent Screen​

Core tabs:

  • Overview.
  • Knowledge.
  • Conversation rules.
  • Website placement.
  • Listing context.
  • Lead capture.
  • Testing.
  • Analytics.

Knowledge sources:

  • Agent/team profile.
  • Listings.
  • Neighbourhood pages.
  • FAQs.
  • Buyer/seller guides.
  • Brokerage policies.
  • Language content.

Guardrails:

  • No legal/financial advice.
  • No guaranteed values.
  • Human handoff for high-intent or sensitive questions.
  • Compliance-friendly disclaimers.

QR Campaigns Screen​

Core UI:

  • Campaign list.
  • Create QR campaign.
  • Assign to listing/sign/open house/print piece.
  • Landing page preview.
  • QR code download.
  • Scan analytics.
  • Leads generated.

Campaign types:

  • Listing sign.
  • Open house.
  • Feature sheet.
  • Direct mail.
  • Seller guide.
  • Buyer guide.
  • Community guide.

Content Studio​

The WYSIWYG editor is a core product moat.

Primary content types:

  • Blog.
  • Newsletter.
  • MLS-style listing description.
  • Social post.
  • Landing page.
  • Buyer guide.
  • Seller guide.
  • Neighbourhood page.
  • Open house follow-up.
  • Market update.

Editor layout:

  • Left: document/content blocks.
  • Center: WYSIWYG canvas.
  • Right: AI assistant panel.

AI commands:

  • Generate from notes.
  • Rewrite in brand voice.
  • Create shorter/longer version.
  • Turn into blog/newsletter/social.
  • Create top 3 local language versions.
  • Improve SEO/GEO/AEO.
  • Add CTA.
  • Compliance check.
  • Pull listing data.
  • Create QR landing page copy.

Publishing options:

  • Save draft.
  • Schedule.
  • Publish to website.
  • Export.
  • Send newsletter.
  • Create social pack.

Website Builder​

This should avoid looking like a generic drag-and-drop builder.

Recommended model:

  • Template family.
  • Brand kit.
  • Page library.
  • Section library.
  • Content blocks.
  • AI-assisted copy.
  • Preview desktop/mobile.

Brand controls:

  • Logo.
  • Colours.
  • Fonts.
  • Button style.
  • Card style.
  • Header layout.
  • Hero layout.
  • Listing card style.
  • Chat/voice CTA style.

Analytics​

Core reporting:

  • Website traffic.
  • Listing views.
  • Lead conversion.
  • QR scans.
  • Voice calls.
  • Chat conversations.
  • Content performance.
  • Language performance.
  • Agent/team performance.
  • Source attribution.

Important reports:

  • "Which listings create leads?"
  • "Which signs create leads?"
  • "Which languages create leads?"
  • "Which content creates leads?"
  • "Which conversations need human follow-up?"

First Clickable Prototype Screens​

Build these first:

  1. Public website home page.
  2. Listing detail page.
  3. QR sign landing page.
  4. Backend dashboard.
  5. Lead profile drawer.
  6. Voice agent settings.
  7. Chat agent knowledge screen.
  8. Content Studio editor.
  9. QR campaign builder.
  10. Website template/brand kit screen.

Suggested MVP UI Priorities​

Highest Priority​

  • Public homepage template.
  • Listing detail page.
  • QR sign landing page.
  • Backend leads dashboard.
  • Chat conversation screen.
  • Voice line setup.
  • Content Studio basic editor.

Second Priority​

  • Neighbourhood pages.
  • Website template selector.
  • Brand kit.
  • AI automation settings.
  • Analytics dashboard.
  • Multilingual content workflow.

Later​

  • Brokerage routing.
  • Agent/team management.
  • Advanced integrations marketplace.
  • Recruiting pages.
  • Client portal.