A house listing app displayed on a smartphone with a house photo, price, address, and features. The background shows a scenic outdoor landscape with green grass, trees, and a bright blue sky with clouds.

Eaves is a web app designed for Career Foundry’s UI Specialization Course that helps users navigate the noisy real estate market with clarity and confidence. Recognizing that the search for a home happens everywhere, from the morning commute to the living room couch, Eaves was built as a fully responsive experience. The interface provides a simple and intuitive experience across mobile, tablet, and desktop, guiding users with curated tools, maps, and recommendations that are personalized to fit their needs. The design emphasizes a combination of warmth and hospitality with a sense of depth and focus to build trust with users in what may be considered a vulnerable process.

Two smartphones displaying a real estate app with house listings, images, and details.

The Challenge

While real estate investment is a path to security, first-time buyers frequently struggle with information overload and a lack of professional guidance. To solve this, Eaves was designed as a responsive web application built on the principle of grounded expertise. The challenge was to transform a complicated search into a seamless journey, allowing users to define their own criteria and explore properties through an easy-to-use interface that values their time and builds their confidence.

The Approach

To build a foundation of trust for Eaves, I focused on the specific goals and pain points of the user persona. I designed with a philosophy of approachable expertise, tackling the most complex user journeys, like personal needs and deep-dive property views, first. Through iterative wireframing, I smoothed the transition into high-fidelity design, resulting in a secure, user-friendly experience across all devices

ROLE

UI Designer (student)

TOOLS

Figma | FigJam | Miro |

Mockuuups Studio | Angle Mockups | Pen & Paper

TIMELINE

November 2025 - February 2026

User Persona (details were provided by Career Foundry)

A smiling woman with curly hair outdoors in black and white.

RASHIDA

“I want to provide my family with financial security. I’ve been considering buying property for a while, and am looking for a tool that can help me find what I’m looking for, quickly!”

ABOUT:

Rashida is a busy IT consultant who wants to invest in property to support her family’s financial security. As a first-time buyer, she needs a simple, intuitive tool that helps her quickly search, filter, and save relevant listings without wasting time. She’s very tech-savvy and values simple and functional tools to allow her to make quick decisions.

GOALS:

Invest in property outside of the city to build financial security for her family

Wants to find accurate information for quick decisions

Wants a tool that shows properties that fit her best so she doesn’t waste her time

PAIN POINTS:

As a first-time investor, she lacks clear guidance on what to look for

She often wastes time reviewing listings that don’t match her criteria

Gathering enough information to make a confident decision takes too long

User Flows

To create a sense of digital shelter for Rashida, I carefully plotted the essential actions within her home-buying journey to minimize market noise. This flow demonstrates how Eaves simplifies the path from sign-up to agent contact, ensuring that filtering and exploring never feel like a chore. Whether navigating via the interactive map or diving into curated lists, the user is guided by an interface that prioritizes clarity, calm confidence, and a direct route to expert help

Flowchart diagram illustrating processes for setting up a property profile, filtering and searching properties, viewing details, contacting agents, saving properties, and comparing homes, with various tasks and decision points.

Wireframes

Once the path was set, I focused on bringing a sense of calm to the screen. I began with pen-and-paper sketches to explore different ways to present local insights, then transitioned to mid-fidelity wireframes to solidify the core experience. The final high-fidelity screens, infused with our warm terracotta and sage palette, show a clear evolution from a basic idea to a polished, inviting digital environment. This progression demonstrates a commitment to making every interaction feel steady and secure.

Landing Page

A collage of four images showing a handwritten note, a mobile app interface for a real estate platform called Eaves, and screenshots of a mobile app showing property listings and navigation options.

Create Account

Comparison of three user interface designs for a sign-up or registration form, including a handwritten paper sketch, a wireframe, and a prototype. The forms include fields for name, email, password, and confirmation password, with navigation buttons labeled "next: preferences" and "skip."

Initial Filters

Comparison of four property search interface designs, including a handwritten sketch on lined paper and three digital app mockups with filters for property type, location, price range, and amenities.

Home Information

Split image showing a hand-drawn webpage layout on the left and two screenshots of a real estate app on the right. The handwritten page includes sketches of a mobile app design for comparing homes, with labels for address, contact agent, request tour, and a heart icon. The app screens display home listings, including a house for sale priced at $500,000 and another listing for a home priced at $3,500,000 in Chicago, IL, with details like beds, baths, square footage, and contact options.
Series of mobile screens displaying a real estate app interface. The app shows property listings, maps, and scheduling tools for home tours, with features for saving properties, contacting agents, and requesting tours.

High-Fidelity Mobile Mockups

Six smartphone screens showing a real estate app interface with property listings, search filters, and navigation menus, primarily featuring homes for sale in Chicago.
Six smartphone screens displaying a real estate app with listings, maps, filters, and details for homes for sale in Chicago, IL, with prices, photos, and property information.

Mood Board

To guide the high-fidelity design, I curated a mood board inspired by the concept of "Shelter;" a space that feels intentional, grounded, and deeply reassuring. Recognizing that the property search can often feel chaotic, I leaned into a palette of organic sage and warm terracotta to foster an immediate sense of security and to set the app apart from competitors like Zillow and Trulia. The visual direction prioritizes calm through airy compositions and softened, rounded UI elements that feel approachable rather than clinical. By pairing concise, wise copy with friendly, intuitive iconography, the design ensures that users feel supported by a trusted guide rather than overwhelmed by an algorithm.

A digital webpage layout featuring a color palette, social media icons, logo, and various images including plants, a family by a fireplace, a house, and decorative pots, along with text emphasizing comfort, security, and earthiness.

Style Guide

This style guide provides the essential framework for the Eaves visual identity, covering everything from our signature terracotta tones to our supportive typography. It captures the calm, secure, and user-centered aesthetic that helps buyers cut through market noise. By following these standards, designers and leads ensure that the Eaves experience remains a seamless and trustworthy sanctuary for every user, on every device.

Logo

A grid of six colorful logos for Eaves, each featuring a mountain outline and the word EAVES below.

Color

Color palette with six squares in white, beige, light green, black, coral, red, and green.

Iconography

A user interface menu with icons for navigation, lighting, tools, exit, fog, and other functions.

Cards

House Info Page Card

Screenshot of a real estate mobile app interface showing property details including price, address, and icons for bedrooms, bathrooms, and size, with a gradient checkered background and navigation icons at the top.

List Page Card

A digital interface displaying icons for price, address, and property details such as bedrooms, bathrooms, and size, with a checkmark icon in the upper right corner.

Saved Search Overlay

Screen with a message saying 'search successfully saved!' and a green checkmark button.

Saved Property Overlay

Screen displaying a message that property is saved, with options to click 'ok' or 'compare similar homes'.

Components

Mobile Bottom Navigation

light/glass

Icons of a magnifying glass, heart, sailboat, and bell representing search, saved, discover, and alerts features.
Screenshot of navigation menu with icons and labels for Search, Saved, Discover, and Alerts.

dark mode

Icons for search, saved items, discover, and alerts on a dark background.
Icons of search, saved, discover, and alerts in app menu bar

Mobile Top Navigation

Screenshot of a mobile phone status bar showing the time 9:41, Wi-Fi signal, and battery indicator
Icon of a hamburger menu and a green circle with the letters 'SS' inside.

Buttons

Button with a peach-colored background and black text that says 'button'
Light green button with the word 'button' in black text.
A beige button with the word 'button' written on it

Buy/Rent Toggle

Comparison of options to buy or rent, with 'buy' highlighted in red.
A webpage with two options: 'buy' on the left and 'rent' on the right, with 'rent' highlighted in red.

Responsive Design

I optimized the Eaves layout across three key breakpoints to ensure our 'grounded wisdom' is accessible whenever and wherever it's needed. By adapting the core components for mobile, tablet, and desktop, I created a seamless transition for users like Rashida who balance their property search with a busy life. Whether she’s scouting a street corner on her phone or comparing data on her desktop, the design remains consistent, reliable, and easy to navigate.

Screenshots of a real estate website displayed on a laptop, tablet, and smartphone. The site features house listings, search bar, and promotional banners, set against a pink background.

Reflection

Designing Eaves was an exercise in balancing technical precision with emotional intelligence. I strengthened my ability to translate a user’s need for security into a series of calm, intuitive flows. This project deepened my mastery of responsive design, teaching me how to maintain a grounded feel even as layouts shift across breakpoints. Ultimately, I learned that the most intentional high-fidelity decisions are rooted in the freedom of early, low-fidelity exploration, allowing the brand’s wisdom to grow naturally from sketch to screen.

Improvements

My goal for future work is to further validate my design intuition with earlier rounds of moderated feedback. By bringing the user's voice into the process sooner, I can ensure a more polished final product. I also intend to sharpen my documentation style, turning design rationale into a strategic asset that helps stakeholders and developers align quickly and confidently with the project’s vision.

Scalability

The Eaves design system is engineered as a living blueprint, built to evolve alongside our users. Its modular components and rhythmic typography provide a stable foundation that can naturally extend into future features like neighborhood 'vibe-checks' or real-time agent consultations. As we expand the Eaves ecosystem, our responsive framework ensures that this growth never compromises the visual clarity and grounded sense of home our users rely on.