The Project
Dwellora is a property app providing users with the ultimate toolset to help them find properties outside of the city so that users can make informed and sensible decisions regarding purchasing a property.
The aim for this design is to create a smart, easy-to-use web app that helps new property buyers find the right investments beyond the city. The app offers clear, reliable information and personalized recommendations so users can make confident choices—anytime, anywhere.
This page explores the process through which the design was created. The design brief and research were performed before the start of this design project and were utilised to help form the early design decisions.
Who we're Designing for
To ensure our design stayed on the right track and was as user-centred as possible, a persona needed to be created as a reference point for an average type of user that we are designing for. By creating this persona, it was possible to tell when a design was not adequate for the user.
Meet Rashida, a tech-savvy professional with a demanding job, family life and constant travel. She’s been thinking about investing in a property outside the city to build long-term security for her family, but she finds the process often feels overwhelming and time-consuming. Rashida wants a simple, trustworthy tool that helps her quickly find properties that match her needs, without sorting through endless listings or wasting time on unsuitable options.
Our Design Principles
01
Easy
02
Clean
03
Intuitive
User Flows and Low-Fidelity Wireframes
Now that we knew what had to be built, it was time to focus on the how. The first step was to map out the user’s process which could be mapped in its entirety using a flow diagram:
A look in closer detail...
These wireframes, drawn on paper, allowed for quick and easy idea generation that helped to bring the product to life. Visualising the layout allowed us to refine the design and improve on any initial ideas.
Mid-Fidelity Wireframes
Having mapped out a rough idea of the user journey, it was now possible to start to map out the look and feel of the app, as well as the elemental structure using mid-fidelity wireframes. The previous 3 flows have been mapped out below in mid-fidelity
Now that real geometries and grids were applied to the design, we could see how elements would fit together, and interact with each other allowing us to further refine the design and make improvements where necessary.
Moodboarding
Before adding colour, images and icons to the design, we wanted to work out what kind of style the . Focussing on properties in nature, the design should feel natural and comfortable for the user. Mood boarding allowed me to play around with different colour schemes, icon designs and element structure. The following mood board was chosen as the guide of the design of the app.
This mood board served as a good starting point for bringing life tot he design, however it was important to remember to keep the design flexible and be open to changes in the design.
Animation
Animation can be used to make the user feel as though the process they're following is natural and smooth. For example, the hamburger menu (shown below) opens a side panel- using animation, we can make the panel slide out from the side it’s own, giving the impression that it was always there, just a button away, rather than just suddenly appearing.
The animation not only made the product feel more natural to use, but also allowed for beter visualisation of how different features fit together.
Style Guide
In order to communicate all the design information to developers and other stakeholders, the style guide and design system places all important information in one place. As a designer this also helps to make quick changes such as switching colour and see how it would look on all elements at once.
This design system also allowed me to keep consistency between elements, ensuring that all the elements in the design felt in place.
Final Touches
Having applied all animations and ensuring edge cases are addressed, the [current] final touches could be added to the app. In order to avoid the similar branding to another popular property app and to lean into the more natural feeling, the primary colour was applied throughout more of the app, with secondary and accent colours now applied in a consistent manner, providing the user with a greater feeling of cohesiveness within the app
Designing for different Breakpoints
Using the strategy of mobile-first design allowed me to easily map the design onto larger screen sizes. By designing on mobile first, it informs me of the key information that should be displayed on each screen. Below are a few of the screens within the app displayed on both tablet and desktop (respectively) aspect ratios.
Home Page
Tablet
Desktop
Search Results Page
Tablet
Desktop
Search Results Page
Tablet
Property Page
Tablet
Desktop
Desktop
Mockups
Try Dwellora in action
Learnings
Personal
Having previously designed another functional app, my key focus for myself with this project was to make the aspect of UI feel more naturally implementable within my workflow. Having gained a greater understanding of how UI impacts the UX, I found there were a few key things that I learnt or became more conscious of and implemented during my design process:
-
Becoming more comfortable with the design tools and using previous experience, I was better able to plan and prioritise my tasks as well as designing from the ground up rather that trying to make my own preferences drive the design.
-
Being able to make quick changes and open to suggestions of new changes, helped to refine the app and reinforced some best practices which were not as natural to me before starting this project.
-
Colour, iconography and grouping are all aspects which I feel I have significantly improved upon from previous projects. The implementation of these now feels a lot more natural and the best practices now make much more sense to me.
Whilst I have learnt a lot from this project, I still have a lot to learn and am only just at the start of my design journey.
Dwellora
Working on a project like Dwellora has also taught me more product specific lessons, which in turn will drive my knowledge and experience for future similar projects. Some of the key learnings include:
-
A greater understanding of how a colour palette can be used to convey the feelings the app is trying to evoke.
-
How to implement different UX features in designs and the best practices when designing them (the frequency distribution chart for price and distance).
-
How to focus more on the user and really design with a user-first mentality.
Next Steps
Completing the first version of the design is not the end for Dwellora and represents a good starting point to further develop and refine the design as well as providing a basis for any additional features or functionality that may be added to Dwellora. Some of these future improvements may include:
Adding a search area feature, allowing the user to create a custom zone within which they wish to search for a property
Adding a greater level of content to the property page- as it stands now, the layout of information about the property lacks some character and could do with some sprucing up.
Further improvements to property card to try to maximise the number of properties available to see on one screen.
Thank you for Reading!
