The user persona was provided in the project brief.

MoodBoard 1

After developing two distinct moodboards, I ultimately chose to move forward with moodboard 2 for the design direction.

This choice was influenced by the project brief, which emphasizes SPACES as a web app that simplifies the process of investing in properties for financial growth, rather than assisting users in finding a place to call home.

Moodboard 2, featuring vibrant colors and a sans-serif font, conveys a clean, energetic, and user-friendly environment where individuals can swiftly locate and assess the right investment properties. This design direction aligns well with the app's primary goal of facilitating property investment decisions.

In contrast, moodboard 1 centers around pastel, warm tones that create an atmosphere of comfort and family, reminiscent of a cozy home. While this aesthetic may be appealing, it does not align with the core purpose of the SPACES web app, which is to support users in their property investment journey.

By selecting moodboard 2, the design will better resonate with the target audience and their investment-oriented objectives.

User Flow

Based on the user needs, here are three user flow diagrams that outline: how to create a profile, search and filter properties, and how to contact an agent.

Low-Fidelity Wireframes

In the initial stage of the design process, I developed a first iteration of low-fidelity wireframes to establish the basic layout and structure.

Mid-Fidelity Wireframes

I developed the mid-fidelity wireframes to show more visual details on the layout before adding any styling.

High Fidelity Wireframes

In the final stage, I developed high-fidelity wireframes that incorporated color, styling, and UI elements, guided by the chosen moodboard and three essential keywords: EASY, RELIABLE, and EXCITING.

These keywords guided the design process, ensuring that the app's interface remained user-friendly, trustworthy, and engaging. By focusing on these core principles, I aimed to create an intuitive and efficient user experience that would resonate with the target audience, ultimately making the process of property investment more approachable and enjoyable. The high-fidelity wireframes bring together the visual elements and interactive components in a cohesive manner, reflecting the app's commitment to simplifying property investment and delivering a standout user experience.

Screen Details

Different Break Point

While designing the web app, I paid close attention to various breakpoints to ensure a seamless and responsive user experience across different devices and screen sizes. By carefully considering these breakpoints, I was able to optimize the layout, UI elements, and overall design, adapting them to provide a consistent experience for users on smartphones, tablets, and desktop computers.
This responsive design approach ensures that the app caters to a diverse audience and delivers a high-quality user experience, no matter the device being used.

Click here to test the high fidelity prototype.

Key Learnings

I found working on this project, an engaging experience. Initially, I was inclined to use warm and earthy tones, associating the app with a welcoming home atmosphere. However, after carefully analyzing the project brief - which targets primarily new, small-scale property investors seeking additional income or financial security - I opted for blue and green. Blue symbolizes calmness, stability, and reliability, while green represents abundance, money, and luck.