Real Estate Website
A responsive platform for an independent agent, enabling buyers to set up personalized search filters and real-time notifications.
UX Research | UI/UX Design | Usability Testing | Delivery
View the Current Design
UX Process
01: Project Overview
GOAL & VISION
The goal of this project is to create a user-centered, responsive website for a relatively new freelance real estate agent who recently transitioned from a large agency (RE/MAX) and is beginning to build their own client base. The site should establish the agent’s credibility, facilitate easy property browsing, and streamline communication between the agent and potential clients. It needs to position the agent as a knowledgeable, trustworthy, and accessible real estate professional while providing clients with a seamless, engaging browsing experience to successfully compete in this demanding market.
Target audience:
Homebuyers, Homeowners Looking to Sell, Real Estate Investors
client:
Self-Employed Real Estate Agent
Role:
Solo UX / UI Designer – Research, Design, Testing, Delivery
Tools:
Figma, FigJam, Otter.ai, Zoom, Microsoft Office (Excel, Word)
Timeline:
7 weeks
02: UX Research
Objectives
To understand user pain points in navigating real estate services and define expectations for digital tools that help a relatively new freelance agent build clientele in a highly competitive market.
Type of Research:
Competitor Analysis, User Interviews
Methodologies:
Affinity Mapping, "How Might We" Questions (HMWQ), User Personas, Customer Journey Map
Analyzing Competitors to Shape Our Strategy
In real estate, success relies heavily on building strong client relationships and a trusted personal brand. Competitor websites show that established agents can lean on their reputation—even if their sites lack features—by showcasing proven results like sold properties.
Our client, however, is a new freelance agent establishing their brand from the ground up. To stand out, the website must focus on offering a seamless, convenient experience that helps attract and retain potential clients early in their journey.
Click to enlarge
Synthesizing Interview Data with Affinity Mapping
Goal:
Conduct user interviews to listen to users’ needs and pain points, gather qualitative data, and synthesize the findings into key themes through affinity mapping to inform design decisions.
Type:
Qualitative user research conducted remotely via Zoom, with insights clustered and analyzed through affinity mapping.
Participants:
6
Click to enlarge
User research revealed several key challenges users face when interacting with freelance real estate websites. Many struggle with insufficient property information and low-quality visuals, making it hard to assess listings or understand nearby amenities like schools and transportation. Inefficient search and navigation features also lead to frustration, as users can't easily revisit past searches, save preferences, or apply detailed filters. Lastly, limited agent credentials, missing reviews, and unclear pricing reduce trust—especially when direct, responsive contact options are lacking.
From Problems to Possibilities: Framing ‘How Might We’ Questions
#1:
How might we provide clearer property details and higher-quality visuals to help users make more informed decisions?
#2:
How might we improve search and navigation to help users easily revisit searches, save preferences, and apply detailed filters?
#3:
How might we build trust and enable clear, responsive communication between users and freelance real estate agents?
Translating Insights into Personas: Homebuyer & Investor
From the user interviews, a clear user persona emerged—representing a distilled summary of the key patterns and behaviors observed across participants. I developed two persona variations: one reflecting a homebuyer and the other an investor seeking properties for financial return. This approach allowed us to capture the needs and goals of the two primary user segments within our target audience.
Building Empathy Through the Customer Journey
This exercise helped me empathize more deeply with users by capturing their thoughts, feelings, and pain points across each stage of interaction. Mapping their journey was a crucial step before solution brainstorming, ensuring that any design decisions would be rooted in genuine user needs and lived experiences.
Click to enlarge
03: Prioritization
Objectives
Define clear project goals and establish a prioritized feature set to focus development efforts on the most impactful solutions for users and business objectives.
Aligning User Needs, Business Goals, and Technical Feasibility
By clearly defining both user needs and business objectives, I was able to envision the essential functionalities required for our MVP. Understanding user pain points provided design focus, while considering market goals ensured the product’s value and viability. Incorporating technical constraints early on guaranteed that proposed solutions would be realistic and implementable.
Click to enlarge
Prioritizing MVP Features Through Goal Alignment
Grounded in a clear understanding of user and business goals, I defined a focused feature set for the MVP. Prioritizing these features ensured efficient development and positioned the product for both short-term success and long-term expansion.
Explore the Feature Set Aligned with User and Business Goals
View Feature Set
04: Information Architecture
Objectives
Define a clear and intuitive information architecture by mapping the overall structure (Sitemap) and key user interactions (User Flows), recognizing that navigation decisions directly impact the product’s overall usability and user experience.
Structuring Content with a Clear Sitemap
To visualize the website’s structure, I created a sitemap with a custom key to distinguish between main and subpages. This early step clarified the hierarchy and provided a clear overview of the architecture. It also served as a useful reference for collaboration, helping teammates quickly understand the layout. As I prioritized features, the sitemap guided decisions about content, making the transition to wireframes more efficient. As an initial structural map, it became a solid foundation for the design process that followed.
Click to enlarge
Designing Navigation with Targeted User Flows
Drawing from key user problems identified in research, I defined three core user tasks—each aligned with a specific ‘How Might We’ question. For every task, I mapped the ideal user navigation paths, including main, alternative, and error flows, to ensure a seamless and robust experience.
Click to enlarge
05: Mid-Fidelity Wireframes & Testing
Objectives
Translate core user flows into mid-fidelity wireframes to define layout, structure, content and navigation. Testing at this stage is crucial to validate design decisions and ensure usability before moving into branding and visual design.
Rapid Exploration Through Low-Fidelity Wireframes
After defining the information architecture, navigation, and key user flows, I began exploring initial wireframe concepts. Believing that great ideas start on paper, I sketched layouts with notes on content, structure, and navigation. I then transitioned to simple digital wireframes using placeholder text and basic shapes to brainstorm effective UI solutions. This phase was focused on supporting my own thinking—free from presentation pressure—allowing quick, uninhibited exploration of ideas.
Transitioning to Mid-Fidelity Wireframes
With a general layout already forming in my mind, I began translating ideas into more defined wireframes. Focusing on real content at this stage proved essential—articulating the text helped clarify structure, reinforce navigation logic, and ensure each element had purpose. Including key information early on shaped the overall user journey and strengthened the interface’s usability. These mid-fidelity wireframes were designed for initial presentation and ready to be tested with users for early validation.
Desktop
Task #1: Search for a Property, View Details, and Save to Your Collection
a) Search for properties currently for sale in the Williamsburg neighborhood of Brooklyn.
b) Browse the listings and view the details of a property that catches your interest.
c) Save the property to your "Saved Collections" for easy access later.
Test Mid-fidelity Wireframes
Mobile
Task #2: From the buy page, apply filters and save them.
Task #3: Open the email notification, check the property and contact the agent.
Test Mid-fidelity Wireframes
Validating Key Flows with Mid-Fidelity Usability Testing
Type:
Moderated remote usability testing conducted via Zoom, utilizing screen sharing and Figma prototype links for interactive user sessions.
Participants:
5
Key Findings
Mid-fidelity usability testing identified key issues in the filtering and search experience, notably confusion around the 'Save Filters' button when no filters were applied. Users recommended refining its logic and improving CTA labeling and visual hierarchy for better clarity.
The desktop property detail page also lacked the visual clarity of the mobile version, particularly in the placement of the title and price. Aligning layouts across devices would enhance consistency. Toast notifications styled with triangles were mistaken for tooltips, suggesting a shift to more conventional UI patterns. Testimonials were also contextually misplaced and should be relocated or removed to maintain focus.
Overall Impression
Despite the opportunities for improvement, users responded very positively to the overall experience, giving an average rating of 9 out of 10.
The website was described as intuitive, informative, and easy to navigate, with a familiar design that supported smooth interactions. Core features like navigation, saving properties, and contacting brokers were clear, and notification feedback was appreciated for reinforcing successful actions.
Want to dive deeper into the usability testing results and review the documented insights?
Explore Usability Insights
06: UI Design
Objectives
To reflect the agent’s personality in a clear and consistent way, I first translated her aesthetic into a moodboard-inspired style tile. This defined the visual tone and color palette. I then built a scalable UI kit to turn these design elements into reusable components—ensuring visual consistency, efficient updates, and a maintainable design system.
Defining the Visual Identity Through Personal Style
Since the website needed to reflect the agent’s personality—crucial in this type of business—I made sure the UI was directly inspired by her style. During our conversation, she shared objects from her surroundings that captured her aesthetic. I photographed them and extracted a color palette based on her favorite tones: red wine and khaki green. After running a few accessibility checks to fine-tune the hues, the visual direction was clear—professional, simple, and rooted in her personal taste. This formed the foundation for the UI’s overall look and feel.
UI Kit Development: Turning Visual Design into Usable Components
After finalizing the style tile and incorporating usability testing feedback, I began applying the visual design by creating test screens to evaluate the look and feel. This helped identify reusable components and those needing interactive states, shaping the structure of the UI kit.
I dedicated extra time to building a well-organized and scalable component system, knowing that this upfront investment streamlines future iterations. When updates are needed, modifying a single master component automatically applies changes across all instances—saving time and ensuring consistency. Creating the component library is one of my favorite stages of the UX process, as it demands a structured, methodical approach that aligns well with how I work.
Interested in what I consider one of the most fulfilling aspects of the UX process?
View Component Library
07: High-Fidelity Wireframes & Testing
Objectives
Building on user feedback, this stage brought the agent’s personality to life through high-fidelity wireframes that reflect a cohesive visual identity. A component-based approach was used to support consistency and enable efficient refinement, while usability testing focused on clarity, accessibility, and interaction design.
Bringing the Interface to Life: High-Fidelity Design
Alongside visual refinement, this stage focused on aligning user flows with usability testing feedback to improve clarity and overall experience. Key updates included enhancing the desktop property detail page by adopting the clearer visual hierarchy from the mobile version, redesigning notification styles for better recognition, and removing testimonials from the filtered results and contact page, where they felt out of context. While progress was made on refining the filtering and search experience, it remained a key area for continued improvement.
Second-Round Usability Testing to Refine the User Journey
Type:
Moderated remote usability testing conducted via Zoom, utilizing screen sharing and Figma prototype links for interactive user sessions.
Participants:
5
Key Findings
Usability testing highlighted several recurring pain points across participants. The placement and visibility of saved filters caused confusion, as users expected a dedicated section rather than its current location under the heart icon for saved properties.
The “Contact Agent” button on mobile was often overlooked, with strong recommendations for a sticky or always-visible version.
Participants also flagged toast notifications as too brief or too easy to miss, suggesting either longer display durations or the addition of a manual close option.
The search interaction flow proved unintuitive—users preferred adjusting all filters before triggering results manually, and questioned the need for “Search” button.
Overall Impression
Despite some room for improvement, users found the overall experience intuitive, familiar, and visually well-executed.
Key interactions like browsing and saving properties felt smooth and easy to navigate, while the clean design and strong visual hierarchy were consistently praised.
With an average rating of 8.6, the overall impression was highly positive, with only minor usability tweaks recommended.
Want to dive deeper into the usability testing results and review the documented insights?
Explore Usability Insights
08: Iteration
Objectives
Refine the design by addressing usability issues and aligning the experience more closely with user expectations prior to final hand-off.
Design Iteration: Responding to Real User Behavior
This phase focused on addressing key usability findings alongside visual refinement. Key updates included clarifying search and filter interactions by refining button labels and disabling auto-search, separating saved filters from saved properties, adjusting notification timing with manual dismissal, and implementing minor UI enhancements.
Test the Current Design Solution
Task #1: Search for a Property, View Details, and Save to Your Collection
a) Search for properties currently for sale in the Williamsburg neighborhood of Brooklyn.
b) Browse the listings and view the details of a property that catches your interest.
c) Save the property to your "Saved Collections" for easy access later.
Try Prototype
Task #2: From the buy page, apply filters and save them.
Try Prototype
Task #3: Open the email notification, check the property and contact the agent.
Try Prototype
09: Conclusion
This project strengthened my ability to listen deeply—to both the client and the users. Working with a newly independent real estate agent, I uncovered her goals, challenges, and the critical role of personal branding. Competitor analysis emphasized how reputation can compensate for limited features, reinforcing the need to design with business context in mind. User interviews revealed what home seekers value most, enabling me to create solutions that were both relevant and empathetic.
One key learning was during wireframing: starting with rough sketches helped me think freely, while mid-fidelity wireframes in realistic contexts led to more valuable feedback in usability testing. I discovered that too-minimalist design can confuse users, even if it looks clean. A good design should be clear and self-explanatory.
The biggest challenge was designing intuitive search and filter functionality. I iterated twice and came up with the best version for now, but I know it can still be improved. I continue to learn by observing how others solve similar problems.
What I enjoyed most was building the component library. I realized that creating systems comes naturally to me, and I enjoy working in a structured, methodical way. This project confirmed how much I love the mix of logic, empathy, and creativity in UX design.
Key Takeaways
👉
Balanced user and client needs by aligning usability goals with the client's personal brand and business strategy.
👉
Learned the value of understanding a client's business context to create more relevant, tailored design solutions.
👉
Discovered the power of realistic wireframes—mid-fidelity designs in context led to more actionable usability feedback.
👉
Learned that clarity beats minimalism—a clean UI must still be intuitive and self-explanatory to users.
👉
Faced a major challenge designing intuitive search & filter functionality, which required multiple iterations and remains an area of growth.
👉
Enjoyed building the component library, realizing that system thinking and structured design come naturally to me.
Add feature project
View case studye
End-to-end app
View case studye