Premium Real Estate Website for Haven Homes
Ubon Udonkang
Like this project
Posted Oct 7, 2025
Designed and developed a premium website for Haven Homes using Figma and Framer.
Likes
0
Views
2
Timeline
Sep 9, 2025 - Oct 24, 2025
Haven Homes, a premium real estate agency, needed a digital presence that matched their high-touch client experience. Their existing website was generic and failed to communicate their brand's sophistication.
The Brief & My Role
As the lead Product Designer and Framer Developer, I was responsible for the entire project lifecycle; from initial designs in Figma to the final, pixel-perfect launch in Framer. My task was to create a website that would build trust, reflect their premium brand, and convert discerning visitors into qualified leads.
The Design Strategy: Guided Elegance: My core strategy was "Guided Elegance." Every element on the page had to serve two purposes:
Guide: Effortlessly direct the user toward their goal.
Elegance: Maintain a clean, sophisticated aesthetic that inspires confidenc
The Hero Section: "Your Next Chapter Starts Here"
The Challenge: Capture user attention and communicate both the service and the emotional benefit of a new beginning.
My Process (Figma to Framer):
In Figma, I designed and prototyped the hero section, testing different layouts for the search functionality to ensure it was intuitive.
In Framer, I developed this as a fully responsive component, adding a subtle load-in animation to the headline for a premium feel and ensuring the search filters worked flawlessly on all devices.
Property Listings: "Fresh on the Market"
The Challenge: Display listings in a clean, scannable way, avoiding the clutter of typical real estate sites.
My Process (Figma to Framer):
The card layout was perfected in Figma, using auto-layout to create a robust and scalable component.
In Framer, I rebuilt the card as a dynamic component and connected it to a CMS. This empowers the Haven Homes team to add, edit, and remove listings without touching the design. The scrolling text ticker was also implemented here for a modern, dynamic touch.