Pre-let Application

Context

Cityscape Digital had an existing pre-let application designed to showcase properties to potential buyers before construction. However, the application was underperforming, and feedback indicated it was difficult to use and lacked engagement.

*Problem Statement / Brief

Cityscape needed to improve the application to create a more user-friendly and effective tool for real estate agents and prospective buyers, and to make it adaptable for multiple clients.

The challenge was to transform a difficult-to-use product into an engaging, intuitive, and visually compelling experience that fully leveraged Cityscape Digital’s advanced technology and catered to the specific needs of its users.

1. Discover Phase

Stakeholder Interviews

Objective: Clarify business objectives, identify frustrations with the current product, and define expectations for the redesign.

Stakeholder Interviews

Objective: Clarify business objectives, identify frustrations with the current product, and define expectations for the redesign.

User Research & Proto Personas

Objective: Define user needs and pain points by creating proto-personas based on target users.

User Research & Proto Personas

Objective: Define user needs and pain points by creating proto-personas based on target users.

Competitive Analysis (Desk Research)

Objective: Understand industry best practices and UI/UX trends in property marketing applications.

Researched competitors in the real estate technology sector.
Identified common UX patterns for immersive property showcases.
Evaluated user engagement strategies from leading property platforms.

Competitive Analysis (Desk Research)

Objective: Understand industry best practices and UI/UX trends in property marketing applications.

Researched competitors in the real estate technology sector.
Identified common UX patterns for immersive property showcases.
Evaluated user engagement strategies from leading property platforms.

2. Define Phase

User Stories

Objective: Translate user needs into actionable user stories that guide design decisions.

For Sam, the Real Estate Agent:

"As a real estate agent, I want to quickly access property details so that I can present them seamlessly to potential buyers."
"As a real estate agent, I want an easy-to-navigate app so that I can avoid technical issues during client meetings."
"As a real estate agent, I want the ability to personalize my presentations so that I can tailor them to individual client needs."

For Alex, the Prospective Buyer:

"As a prospective buyer, I want to explore a property interactively so that I can visualize the space before making a decision."
"As a buyer, I want real-time updates on property availability so that I can act quickly on opportunities."
"As a buyer, I want to easily compare different properties so that I can make an informed decision."

These user stories were used to define features, content hierarchy, and interaction flows in the application.

User Stories

Objective: Translate user needs into actionable user stories that guide design decisions.

For Sam, the Real Estate Agent:

"As a real estate agent, I want to quickly access property details so that I can present them seamlessly to potential buyers."
"As a real estate agent, I want an easy-to-navigate app so that I can avoid technical issues during client meetings."
"As a real estate agent, I want the ability to personalize my presentations so that I can tailor them to individual client needs."

For Alex, the Prospective Buyer:

"As a prospective buyer, I want to explore a property interactively so that I can visualize the space before making a decision."
"As a buyer, I want real-time updates on property availability so that I can act quickly on opportunities."
"As a buyer, I want to easily compare different properties so that I can make an informed decision."

These user stories were used to define features, content hierarchy, and interaction flows in the application.

Content Hierarchy & Information Architecture

Objective: Establish a structured and logical navigation flow.

Organized property information into structured sections: Overview, Specification, Location, Gallery, Contact, Interactive.
Ensured quick access to high-priority content.

Content Hierarchy & Information Architecture

Objective: Establish a structured and logical navigation flow.

Organized property information into structured sections: Overview, Specification, Location, Gallery, Contact, Interactive.
Ensured quick access to high-priority content.

Design Principles

User-Centric Experience: Minimal learning curve, intuitive navigation.
Visual & Immersive Appeal: 3D interactions, high-quality visuals.
Scalability & Personalization: Adaptable for multiple clients.
Performance & Accessibility: Fast loading, touch & mouse-friendly.

Design Principles

User-Centric Experience: Minimal learning curve, intuitive navigation.
Visual & Immersive Appeal: 3D interactions, high-quality visuals.
Scalability & Personalization: Adaptable for multiple clients.
Performance & Accessibility: Fast loading, touch & mouse-friendly.

*Refined Problem Statement

Based on insights from the Research, the core problem and brief was refined as follows:

User Experience Issues: The existing application was unintuitive, requiring extensive explanation for both real estate agents and prospective buyers.
Limited Engagement: Users struggled to visualize properties interactively, making the sales process less effective.
Navigation Complexity: Poor information architecture led to difficulty in finding property details and interacting with features.
Scalability Challenges: The application lacked a flexible framework to accommodate multiple clients and branding requirements.

To solve these issues, the problem was clearly defined as:

How might we redesign the application to create an immersive, intuitive, and scalable user experience that enhances property visualization, improves navigation, and meets the needs of both real estate agents and prospective buyers?

Based on insights from the Research, the core problem and brief was refined as follows:

User Experience Issues: The existing application was unintuitive, requiring extensive explanation for both real estate agents and prospective buyers.
Limited Engagement: Users struggled to visualize properties interactively, making the sales process less effective.
Navigation Complexity: Poor information architecture led to difficulty in finding property details and interacting with features.
Scalability Challenges: The application lacked a flexible framework to accommodate multiple clients and branding requirements.

To solve these issues, the problem was clearly defined as:

How might we redesign the application to create an immersive, intuitive, and scalable user experience that enhances property visualization, improves navigation, and meets the needs of both real estate agents and prospective buyers?

3. Develop Phase

Wireframing

Objective: Explore different layout approaches to optimize usability and engagement.

Three design variations were created:

V1: Browser-Focused Design - Dual-row top navigation (familiar but cluttered).

V2: Hybrid Browser-TV Interface - Single-row navigation (cleaner, but required adaptation).

V3: TV OS Centric Layout - Bottom navigation (immersive but unconventional).

Wireframing

Objective: Explore different layout approaches to optimize usability and engagement.

Three design variations were created:

V1: Browser-Focused Design - Dual-row top navigation (familiar but cluttered).

V2: Hybrid Browser-TV Interface - Single-row navigation (cleaner, but required adaptation).

V3: TV OS Centric Layout - Bottom navigation (immersive but unconventional).

Stakeholder Decision: V1 was selected for further refinement and testing.

Interactive Prototype

After selecting the preferred wireframe based on stakeholder feedback, I translated the design into a fully interactive, clickable prototype.

This prototype encompasses every screen and key interaction of the application, simulating the complete user journey.

Stakeholder Decision: V1 was selected for further refinement and testing.

Interactive Prototype

After selecting the preferred wireframe based on stakeholder feedback, I translated the design into a fully interactive, clickable prototype.

This prototype encompasses every screen and key interaction of the application, simulating the complete user journey.

4. Deliver Phase

Usability Testing

I conducted task-based usability testing with 4 participants who matched the characteristics of a prospective buyer and a real estate agent.

Key Tasks:

Finding property contact details in the Overview.
Navigating the Gallery (switching between Captures and Marketing albums, full-screen viewing, hiding UI).
Using interactive features (Hotspots, Stacker, and Configurator).
Managing project versions on the 'Your Project' page.

Usability Testing

I conducted task-based usability testing with 4 participants who matched the characteristics of a prospective buyer and a real estate agent.

Key Tasks:

Finding property contact details in the Overview.
Navigating the Gallery (switching between Captures and Marketing albums, full-screen viewing, hiding UI).
Using interactive features (Hotspots, Stacker, and Configurator).
Managing project versions on the 'Your Project' page.

Key Insights & Iterations

Users often clicked the three-dot icon to locate contact details, suggesting ambiguity in the Overview.
Exiting interactive tools was confusing—participants clicked the tool tab instead of using a back button.
Navigation between floors needed clearer visual indicators, and the Configurator required more descriptive labels.
On the 'Your Project' page, users struggled to find delete options for project versions; a three-dot menu was recommended.

Solutions Implemented:

Improved iconography and labeling for clearer navigation.
Introduced persistent breadcrumbs and dedicated back buttons in interactive tools.
Enhanced labeling in the Configurator and added a three-dot menu for project version management.

Key Insights & Iterations

Users often clicked the three-dot icon to locate contact details, suggesting ambiguity in the Overview.
Exiting interactive tools was confusing—participants clicked the tool tab instead of using a back button.
Navigation between floors needed clearer visual indicators, and the Configurator required more descriptive labels.
On the 'Your Project' page, users struggled to find delete options for project versions; a three-dot menu was recommended.

Solutions Implemented:

Improved iconography and labeling for clearer navigation.
Introduced persistent breadcrumbs and dedicated back buttons in interactive tools.
Enhanced labeling in the Configurator and added a three-dot menu for project version management.

Visual Design Implementation

Implemented a flexible UI framework with adaptable branding elements.
Ensured a high-fidelity, immersive design optimized for both real estate agents and buyers.
Completed final prototype in Figma.
Conducted an internal review session for refinements before handoff.

Visual Design Implementation

Implemented a flexible UI framework with adaptable branding elements.
Ensured a high-fidelity, immersive design optimized for both real estate agents and buyers.
Completed final prototype in Figma.
Conducted an internal review session for refinements before handoff.

*Solution

Final Outcome & Impact

The redesigned Pre-let Application successfully transformed the property showcasing experience.

🚀 Engagement Increased → The new immersive interface made property exploration more intuitive and interactive.
⚡ Efficiency Improved → Real estate agents could present properties seamlessly, reducing technical friction.
🔄 Scalability Achieved → The adaptable framework allowed Cityscape Digital to onboard multiple new clients.
✅ Stakeholder Satisfaction → Both agents and buyers provided positive feedback on the improved functionality and usability.

Final Outcome & Impact

The redesigned Pre-let Application successfully transformed the property showcasing experience.