UrbanHaven
UrbanHaven is designed to make your home search seamless and enjoyable. Whether you're looking for a cozy apartment or a spacious house, UrbanHaven provides personalized listings tailored to your preferences. Explore vibrant neighborhoods, take immersive virtual tours, and discover new places—all from one intuitive platform. With UrbanHaven, finding your ideal living space has never been easier.
Background
Real estate investment is a growing avenue for individuals seeking financial stability. While the process can be exciting and rewarding, it can also be overwhelming and complex. Many new buyers, despite the abundance of online resources, often find it difficult to get started and end up wasting time on properties that don't meet their needs. This app is designed to provide the guidance and expertise necessary to streamline the process, helping users make informed decisions from the start.
Role
UI Designer
Duration
7 weeks
Tools
Figma, Procreate
User Stories and Flows
User Story 1: As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me
User Story 2: As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.
User Story 3: As a user, I want to be able to save or mark properties I am interested in, so that I caneasily revisit them.
Sketches
Mid-Fi
Moodboards
Option 1: Approachable, Vibrant, Reliable
"Vibrant listings that make every search feel personal and engaging."
- Varela Round (font)
Option 2: Modern, Effortless, Sophisticated
“Simplicity meets sophistication—finding your perfect home is just a few clicks away."
- Playfair Display (font)
I chose option 2, because it meets users’ needs for a smooth and efficient home-search experience. A clean, minimalist interface keeps the focus on property listings, reducing clutter and helping users browse faster. The use of white space, sleek typography, and a simple layout makes navigation easy, building a professional and trustworthy platform that users can explore with confidence.
Style Guide
Hi Fi Mockups
Designing for Different Breakpoints
Tablet:
Desktop:
Comparison:
On desktop, I added the real estate listing directly to the screen to reduce clicks, allowing users to view listings while chatting with the agent.
When adapting the mobile screens to tablet and desktop breakpoints, I combined the chat and contact list to take advantage of the increased white space and create a more streamlined experience.
The tablet layout places the map on top and list below with horizontal scrolling, leveraging the touchscreen’s ease of use. On desktop, the list is on the right with vertical scrolling, as it’s more intuitive for non-touch devices.
On mobile, the results page has two separate screens: list view and map view. For tablet and desktop, I combined them due to the increased white space.
