HomeVisita

Elegant UI mockups for HomeVisita: A real estate app designed for seamless property browsing and direct agent communication.

Project Overview

Challenge

The real estate market is fraught with complexities, particularly for first-time homebuyers who often struggle to navigate the intricate processes involved. A significant challenge is the overwhelming amount of information that must be processed, from understanding market trends and financing options to evaluating property conditions and legal considerations. Many potential buyers lack access to a reliable and user-friendly platform that consolidates all these elements into a coherent and accessible format. The absence of such a resource leaves users feeling overwhelmed and uninformed, impeding their ability to make well-informed decisions. The development of UI mockups of key screens that display easy navigation and a smooth user experience will create a better image of how real-estate apps should be designed for users.

Objectives

To create a successful prototype for a website app that allows people to browse properties and contact estate agents.

Project Scope

This project will develop a comprehensive real estate app prototype for first-time homebuyers, featuring real-time market data, financing tools, detailed property evaluations, simplified legal guidance, and user support, to streamline the home buying process and empower informed decision-making.

Tools

Adobe Photoshop

Figma

Role

UI Designer

UX Researcher

Duration

2 Months

Getting Started

To begin, with the user persona and problem statement already clearly defined, alongside the established user flows, the subsequent phase involved the development of low-fidelity wireframes. This step was essential for outlining a preliminary design and mapping out the user's journey throughout the site.

With a significant portion of the UX design already finalized, the process advanced swiftly. Nevertheless, during the wireframe creation phase, it was crucial to concentrate on key elements, particularly ensuring that the design remained aligned with the defined user persona and maintained a strong focus on accessibility.

MoodBoard

Rationale for Selecting the “Bold & Modern” Mood:

The “Bold & Modern” approach is designed to captivate younger, emerging investors, whereas the “Elegant & Sophisticated” style resonates with more seasoned and mature investors.

The "Bold & Modern" moodboard is curated to prioritise a contemporary and dynamic visual identity that enhances, rather than diminishes, the classic "Elegant & Sophisticated" ambience. While elegance and sophistication are enduring attributes, embracing a bold and modern design philosophy allows us to expand our audience reach, appealing across generational divides and to both nascent and experienced investors.

Adding Life to the Project

After forming a clear sense of the direction I wanted to pursue, I began researching typefaces and developing a cohesive color palette that more effectively captured the desired mood for my app.

Clean and modern sans-serif font that complements the professional tone of a real estate site.
Multiple weight options allow for versatile text hierarchy, making it easier to differentiate headings, subheadings, and body text.
High readability even at smaller font sizes, ensuring clarity across various screen sizes and devices.
Well-balanced proportions between character height and width, contributing to a polished and organized layout.
Consistent paragraph width with optimal character count per line, enhancing the reading experience.
Clear representation of numerical and special characters like “€, $, £,” crucial for displaying property prices and financial information.
Aligns with the site's aesthetic and functional requirements, enhancing the overall user experience.

0065BE

0 101 190 100%

FFFFFF

255 255 255 100%

000000

0 0 0 100%

I chose vibrant blue as the primary color to convey trust and professionalism, white as the secondary color for a clean and modern look, and black as the tertiary color for contrast and sophistication. These colors create a balanced, visually appealing design that enhances the user experience.

Logo and Iconography

The logo, drawing inspiration from the contours of apartment buildings, is composed of straight lines that intersect repeatedly, forming a continuous pattern.

The icons are crafted for simplicity and easy recognition, featuring a consistent stroke with a deliberate break. This shared design element creates a cohesive and unified look.

Make it move

Incorporating animations into the project was undoubtedly the most enjoyable aspect. I designed two animations, including a sliding image animation, as well as a heart fill animation.

Designing for Breakpoints

HomeVisita was developed as a responsive web app, so the project's final stage focused on adapting the screens for multiple devices. This involved designing with a mobile-first approach and then scaling up to larger screens, ensuring that the design stayed responsive and functional across various breakpoints.

Takeaways

While designing for larger screens might appear simpler due to the extra space for arranging elements, it also brings the risk of overcrowding the UI. The key challenge was achieving the right balance between an overly sparse interface and one that feels cluttered.

As screen sizes increase, it's vital to keep the most important elements prominent and easily accessible. Larger screens can cause content to feel spread out, so maintaining a clear structure and effectively guiding the user's attention is essential to avoid an overwhelming or fragmented experience.

Final Mockups