An elegant real estate web application for buyers new to the market.
focused on helping buyers new to the market make informed decisions. It features an elegant black-and-white design with warm accents and provides an intuitive, comprehensive property search experience across mobile, tablet, and desktop platforms.
Platform: Native App, Tablet, Desktop
Deliverables
Visual design and UI concepting
Tools
Figma
Team
Solo
Time Line
2 Days
Hey there!
Ready for a fresh start in real estate? That’s where Dwell comes in. New buyers often feel lost swimming through heaps of property info, unsure where to begin. This project set out to craft a sleek, friendly web app that not only organizes all that data but does it with style. With a crisp black-and-white palette warmed by inviting accents, Dwell turns the chaos of house hunting into a smooth, enjoyable journey whether you’re scrolling on your phone or browsing from home. It’s all about making those first steps into real estate feel simple, smart, and maybe even a little fun.
Problem Statement:
Buyers new to the real estate market need access to organized information regarding potential property investments to help them make informed decisions.
Solution:
Utilizing a black & white color scheme with warm accents, Dwell thoughtfully presents comprehensive real estate information while providing a simple yet attractive method for conducting property searches whether users are on the go or at home.
Map
Property Details Page
Filter
How might we help first-time homebuyers easily navigate and understand complex real estate information to make confident decisions?
How might we design an intuitive property search experience that works seamlessly across mobile, tablet, and desktop devices?
How might we present comprehensive real estate data in a visually appealing way without overwhelming users?
How might we create warm, inviting design elements that emotionally connect users with their property search journey?
How might we simplify the comparison of multiple property options to empower buyers to choose the best fit quickly?
How might we build a real estate app that adapts to varying levels of buyer expertise, from novice to experienced?
How might we streamline the onboarding process to quickly familiarize new users with the app’s features and benefits?
How might we incorporate real-time updates and alerts to keep users informed about new listings and market changes?
How might we provide insights that guide agents towards better decision-making?
It's important to set some assumptions to avoid unnecessary complexities and keep the process focused on solving the right problems efficiently.
The user starts at the Landing Page with options to either Sign In or Sign Up.
After signing in or signing up, the user creates a Property Preferences profile by specifying key property criteria such as Location, Price Range, Property Type, Square Footage, and Acres.
The web app uses this profile to display Filtered Results recommended property listings matching the user’s criteria.
Alternatively, users can manually apply detailed Filters to search for properties based on needs such as Acres, Year Built, Parking, Features, Location, Square Footage, Number of Bathrooms, Number of Bedrooms, Price Range, and Property Type.
AI assistance analyzes call conversations and tags lead status based on keywords.
The filtered or searched results are presented as Search Properties, leading users to choose an Individual Property to view more details.
For any individual property, users have options to Book a Tour or Contact the appropriate parties to schedule viewings or ask questions.
Users can also Favorite Listings to save or mark properties of interest for future reference.
Since I never experienced this job firsthand, I had to research and map out every touchpoint, especially the pain points, to really get how they work. Since I didn’t get to talk to a real sales agent, this step was super important before jumping into designing solutions.
Using Figma, I placed a 4-column grid onto the mobile screens to help organize the content. This helped propel the wireframes from low to mid-fidelity.
Mood Board
Dwell is designed for buyers looking to invest in property potentially for the first time. This mood board evokes a sense of calm, an essential cornerstone of the design, with its warm colors and rounded button edges.
Style Guide
The Style Guide became an essential document to house all visual design components and UI elements. I referred back to it as I moved forward with the high-fidelity prototype and responsive designs.
Responsive Design
Using design tokens to ensure consistency and scalability, I created responsive layouts for the Individual Property screen and the Landing Page leveraging an 8-column grid for tablet and a 12-column grid for desktop. Every other screen in the project was also refined and enhanced, always keeping the end user's goals at the forefront.
Designing Dwell was both an enjoyable and enriching experience that truly helped expand and polish UI skills. A big takeaway was the creative exploration of color palette, iconography, and typography, all of which played a pivotal role in shaping the application's visual identity. The journey was filled with curiosity and discovery, leaving an eagerness to carry these new skills, along with a renewed sense of creativity, into future projects.
