REAL ESTATE WEBSITE REDESIGN

Web Redesign // UX Structure // Brand Presence

Commision Work

SERVICES provided

  • Web Design & Development

  • UX Sitemap Planning

  • Mobile Optimization

  • Graphic Design Integration

  • Visual Hierarchy and Navigation

Developed a professional, responsive website for Susan Chen Real Estate, showcasing company branding, services, and contact information. Focused on user experience, mobile compatibility, and elegant design aligned with the company’s identity.

Tools Used

  • Figma – for wireframing, prototyping, and high-fidelity mockups

  • Adobe Photoshop – for image editing and preparing visual assets

  • Square Space - Platform utilized

Challenges with the Original Website

The old website needed a complete redesign due to its lack of functionality, poor search visibility, and outdated design. It failed to engage visitors or generate leads, ultimately hurting the brand’s credibility in a competitive digital market.

Key Issues:

  • Not properly indexed, resulting in poor search engine visibility

  • Outdated, unengaging design that made the brand feel less trustworthy

  • Minimal to no conversion of visitors into leads

  • High bounce rate, with most visitors exiting within 20 seconds

  • No clear calls-to-action to guide visitors toward conversions

  • Confusing navigation that hindered user experience

  • Weak and unconvincing content that failed to capture interest

View The Site

Site Map

This site map was created to establish a clear, logical foundation before moving into the wireframe stage. It organizes the main navigation and subpages to ensure content is purposeful, easy to find, and optimized for lead generation.

Key Objectives:

  • Define clear navigation structure for intuitive browsing

  • Break content into focused subpages (About, Seller, Buyers, Mortgage Calculator, Contact Susan)

  • Minimize clutter and improve user focus on key actions

  • Guide visitors toward high-value goals: requesting consultations, viewing properties, signing up for updates

  • Provide a blueprint that balances aesthetics, usability, and strategic conversion goals

Wireframe

With the site map as a guide, the wireframe was developed to visualize the layout, hierarchy, and user flow before adding visual design elements. It focuses on clear navigation, strategic placement of calls-to-action, and content organization that drives engagement and conversions.

Key Goals:

  • Translate the site map into a functional page structure

  • Prioritize calls-to-action in high-visibility areas

  • Ensure mobile-first responsiveness and accessibility

  • Maintain a clean, uncluttered layout for easy scanning

  • Support lead generation through intuitive user flow

Color Palette

The selected color palette embodies sophistication, trust, and timeless elegance—qualities essential to the real estate luxury market. The white represents clarity, openness, and modern minimalism, reflecting a clean and professional foundation. The gold tone conveys prestige, success, and exclusivity, echoing the refined experience clients expect in high-end property dealings. The black adds depth and contrast, grounding the palette with a sense of confidence and authority. Together, these colors create a visual language that communicates luxury, stability, and high-value service.

Typography

The typography was chosen to balance elegance and modern readability, aligning with the sophisticated tone of a luxury real estate brand. Times New Roman, a classic serif typeface, brings a sense of tradition, professionalism, and trust—qualities that reflect stability and refinement. Almaria, used for body text, offers a clean and contemporary contrast that enhances legibility across digital platforms while maintaining a polished look. Together, these typefaces create a harmonious blend of heritage and modernity, reinforcing the brand’s premium identity.

First Iteration – High Fidelity

This stage introduces brand colors, typography, and real imagery to the structural framework established in the wireframes. While not final, it serves as a visual prototype to explore layout, hierarchy, and user interaction in a more realistic context. Feedback from this stage will guide refinements before the final version is produced.

Key Focus Areas:

  • Apply preliminary brand colors, imagery, and type styles for visual context

  • Test navigation flow and placement of interactive elements

  • Evaluate visual hierarchy and content balance across pages

  • Explore layout variations to improve clarity and engagement

  • Gather feedback for design, content, and user experience improvements

  • Identify adjustments needed before moving into the final polished stage

Key Screens

Final Design

The final design brings together strategy, structure, and brand identity into a cohesive, high-fidelity website. Each page was refined with real content, polished visuals, and a consistent style system to ensure both usability and professionalism. This stage resolves earlier iterations and focuses on clarity, trust, and conversion-driven interactions

Key Highlights:

  • Home Page – A welcoming hero section with search functionality, service overviews, and recent sales to establish trust and encourage exploration

  • About Page – Professional imagery and clear storytelling to showcase Susan Chen’s expertise and build credibility

  • Seller Page – Organized benefit-driven sections (Marketing, Transaction Management, Post-Sale Support) with strong CTAs to drive lead capture.

  • Buyer Page – Buyer-focused messaging, strategies, and a “Find Your Dream Home” form to streamline lead generation

  • Mortgage Calculator – An interactive tool to add value for users, improving engagement while supporting informed decision-making

  • Contact Page – Simple, direct form paired with a location map to make reaching out easy and intuitive

Results & Performance Metrics

After redesigning the client’s website, the analytics revealed a noticeable improvement in overall engagement and user interaction. Visitors were spending more time exploring the site, viewing additional pages, and contributing to an increase in total traffic. These results reflect how thoughtful design decisions directly impacted usability, retention, and brand perception.

Key Points To Explore:

  • Increased overall traffic and visibility

  • Improved user engagement and time spent on page

  • Stronger navigation flow and lower exit rates

  • Enhanced brand experience and audience retention

User Engagement Insights

The redesigned website led to stronger engagement and clearer navigation patterns. Visitors are spending more time on pages and exploring deeper into the site — signs of improved usability and content flow.

Key Results:

  • Average Time on Page: 111 seconds — visitors remain engaged nearly 2 minutes per page.

  • Bounce Rate: 75.6% — typical for informational sites, showing users quickly find what they need.

  • Exit Rate: 53.1% — over half of users visit multiple pages before leaving.

Takeaway: The redesign successfully increased engagement and improved the browsing experience.

Traffic Growth & Visibility

After the website redesign, analytics showed a significant improvement in overall traffic and engagement. Pageviews increased substantially, reflecting stronger visibility, improved content hierarchy, and clearer navigation that encouraged visitors to explore more.

Key Results:

  • +137% Increase in Pageviews — from 423 (2024) to 1,002 (2025).

  • Improved Search Visibility — optimized layout and structure led to higher organic reach.

  • Better Navigation Flow — users accessed more pages per session, reducing early exits.

Takeaway: The redesign successfully elevated both the site’s performance and user experience, transforming it into a more engaging and discoverable platform.

Try the Prototype

You can experience the interactive prototype directly on this page, or follow the link below to view it in Figma. This gives you the opportunity to click through the design, test navigation, and see how the final website will function in a real-world flow.

Figma Prototype

Final Design Link

Next
Next

Bob Web Design