Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting but often complex process. Buyers new to the market may struggle to get started without professional guidance. They need access to reliable, uncomplicated information about their potential property before investing time in the next step.

Zlata is a web app that helps new, small-scale property buyers in their quest to find the perfect investment.

My role

This 2-month project took place between April and May 2020 and has been a part of CareerFoundry’s UI Specialization course. The objective of the design brief was to develop a responsive and fully rounded UI to ease the complexity of finding the right property while providing an enjoyable experience. Tools used included Sketch, InVision, Mapbox, and Flinto.

Goal

Buyers need access to reliable and uncomplicated property details to support their investment decisions

Finding a home is a long time-consuming process. The goal was to develop a user-friendly tool that eliminates unnecessary distractions and builds trust relationships with customers by providing transparent and comprehensive information with each new step.

Challenge

Starting point

Based on the feature requirements provided within the brief, I created user flows and built a site map to define the core structure. In my designs, I cater to novice buyers, individuals who are venturing into the property market for the first time.

Focusing on the primary tasks

When building designs, I focused on the primary tasks the home seekers would need to complete at the beginning of the process.

Search profile

Users can create a search profile with all property criteria to see relevant recommended results. They can add numerous searches and save the search directly when applying filters on the search page.

Focused and dynamic property filtering

I aimed to minimize the initial number of filters, enabling users to focus on their input step by step. Since some users might not have a precise location, they can explore locations globally. Additionally, I implemented a dynamic search feature that remembers previous searches and provides suggestions as users type.

Property description & visit scheduling

I wanted to bring more understanding to the local area as the neighborhood often plays a vital role when selecting a property. Incorporating a virtual tour feature provides users with a visual experience that can bridge additional gaps and help them make informed decisions. The scheduling process for visits should be streamlined and accessible to both registered and non-registered users.

Mood board

The mood board served as an efficient tool to convey a specific style and visual direction. It features a light theme with a combination of deep blue and pastel colors, adding a touch of traditional style.

We don't merely sell properties; we help our customers find unique homes that reflect who they are.

As a next step, I developed a color palette to convey a feeling of trust and stability. The harmonious pairing of blues creates a visually cohesive and calming environment, ensuring users feel safe and confident while navigating the web app.

Style guide

When creating a style guide, I designed custom icons. Custom icons can help establish a unique visual identity and contribute to a cohesive design system by providing a consistent visual language that aligns with the overall style and aesthetics.

Main screens and interactions

LANDING PAGE

FILTERING SEARCH RESULTS

PROPERTY SEARCH

PROPERTY DETAILS & VISIT SCHEDULING

ADDING A NEW SEARCH PROFILE

Responsive design

I initially prioritized designing with a mobile-first approach. Once the majority of the style work was completed, I proceeded to adapt the design for tablet and desktop breakpoints.

Conclusion

As the project focused on UI design, it gave me valuable insight into understanding how to improve the quality of UX deliverables through visuals. I learned to incorporate personality into the web app by applying principles of composition, visual hierarchy, typography, and color usage. Here are a few key takeaways:

Consider responsive design earlier in the process

Not taking everything into account for responsive design slowed down my process of adapting screens to different breakpoints. Instead of focusing solely on one device, I should consider the various breakpoints early in the design process by paper-sketching responsive changes.

Take notes on your workflow

Documenting key design decisions helps track important information, rationale, and considerations throughout the design process. This would allow me to create a record that can be referred back to later, which can be valuable for future iterations, collaboration with team members, or communicating the design rationale to stakeholders.

More projects