DREAMLOT
Designing the Interface of a Real Estate App
Overview
My task was to design the user interface of a native app as well as tablet and desktop versions that would run on the web.
When was this?
Sep 1-19 2021
My role
Persona creation, User Flow, Wireframes, Mood Board, Style Guide, Visual Design, Mockups.
The Challenge
Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience, but often complicated. While there are plenty of blogs and agencies providing information, often, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range. This web app will provide them with the expertise needed to get started efficiently.
The initial UX phase
Before I could start working on pixel perfect interface designs, it was important that I conduct some user research in order to better understand Dreamlot’s target users. Although, a lot of research had been done prior to me getting on the project as the UI designer, I decided that creating a user persona, a user flow, as well as low-fidelity wireframes would make the visual and interaction design process a lot smother.
User persona
User Stories
Main User Flow
Low-Fidelity Wireframes
The UI Design process
Mood Board
Although I designed two mood boards, I chose the following because it better represents the minimalistic and earthy tone I wanted Dreamlot to have. This tone is very warm, natural and welcoming. Hence, it will be aesthetically pleasing for users. Furthermore, It emulates the serenity that people often want their dream home to have.
Layout Grid
The next step was choosing a responsive layout grid that would allow for and easy implementation of my designs across multiple screen sizes. The columns in the grid are determined by the breakpoint range at which the layout would adjust to suit the screen size.
Style Guide
I created a style guide for a consistent brand experience. A style guide ensures that users experience the same underlying traits no matter the device they are using the app on.
High-Fidelity Wireframes
Prototyping interactions & Gestures
Gestures allow users to interact with the interface in a more natural and intuitive manner. Incorporating gestures that users are already familiar with helps free up space that would have otherwise been used for additional buttons.
Table & Desktop Breakpoints
The final step was converting my mobile designs into desktop and tablet breakpoints. I began this phase by sketching low-fidelity wireframes that I later enhanced into high-fidelity wireframes.
Results and Impact
Designing the Dreamlot app resulted in a sophisticated user interface that delivered a seamless and visually appealing experience across mobile, tablet, and desktop platforms. By carefully integrating user research and feedback, I ensured the app met user needs and expectations, significantly enhancing overall satisfaction.
The warm, minimalistic design created a welcoming and intuitive user experience. A responsive layout grid and consistent style guide ensured a cohesive experience across all devices. Users reported easier navigation, and more effective use of advanced search features.
