REAL ESTATE WEBSITE REDESING

Commision Work

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.

Web Redesign // UX Structure // Brand Presence

SERVICES 2025

  • Web Design & Development

  • UX Sitemap Planning

  • Mobile Optimization

  • Graphic Design Integration

  • Visual Hierarchy and Navigation

Tools Used

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

  • Adobe Photoshop – for image editing and preparing visual assets

Web Redesign

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

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

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.

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.

Next

Kiosk Design