Looking for properties can sure be a clutter of information when entering real estate pages, especially when you’re new.
So what if there was an app that just did what it was intended to do without all the extra? An app that would make new buyers such as Rashida or old ones encouraged to find properties without the overwhelming feeling of a complicated process.
A web responsive real estate app for especially first-time buyers to find and invest in suitable properties based on their profile.
I started this project with a brief where I was provided with the objective, context, 5 why's, and a user persona. Design criteria had also been made with user stories and feature requirements.
I started with a quick competitor analysis to find strengths, weaknesses, opportunities, and threats with similar sites. But also to get a good sense of familiar design patterns.
I took the already known user stories and outlined the key functionality. From these, I created user flows to make sure all task flows were covered.
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.
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.
3. As a user, I want to be able to save or mark properties I am interested in so that I can easily revisit them.
4. As a user, I want to be able to contact the right people if I am interested in scheduling a viewing.
I started with ideating quick sketches on pen and paper and moved on to digitize these with prototyping to test the form and functionality of my user flows. I made alterations after conducting guerilla testing.
Some of the improvements after testing:
I created two distinct mood boards from the above keywords to determine better which aligned with the project brief and knowledge of the user best.
Why? - The colors were more vivid. Additionally, it communicated Stability, Growth, and Availability better than the other.
Rather, the brief aligned more with #1 and Rashida, a first-time buyer with family and kids who likes to be out in nature while investing in safety for her youngsters.
The muted analog colors used in #1 conveyed growth, nature, relaxation, and reliability. Additionally, the rounded corners made it easier on the eyes. They include icons, buttons, and illustrations
This is one of the parts I love the most. I get a good chance to make sure all elements align and speak the same visual language throughout the app.
I wanted to create an atmosphere of inviting calmness, and trust mixed with growth and stability. How could I find a balance between contrast and harmony with the analogous hues of green and blue while designing for color blind and staying with my mood board?
I played around with different palletes and decided on the following which was the best fit with the mood board, atmosphere, and contrast in mind. I also tested it with the most common types of color blindness to ensure contrast.
Fjalla One is a sans-serif which works good for larger semibold headings that breathes. I’ve chosen Noto sans for smaller headings and body text since it’s a good readable text that harmonises well with Fjalla One.
I'm passionate about illustrations and created these vector images. It was important to align these to the brand colors and make them consistent. I wanted them to be clean and in the spirit of diversity and inclusion.
Familiar gesture patterns used within the app, mimicin the real world.
I took a mobile-first design approach to then scale up to both tablet and desktop, deciding on where the design will adapt for different sizes. Bottom bar navigation will adapt to top bar navigation on desktop for example.