HouseBrain
Simplifying the overwhelming home-buying process for first-time buyers
Overview
In 2017 my partner and I bought our first home and made a low fidelity app under our business 'Superwatermelon' to understand the costs involved in buying a home. We quickly realised that there were hidden costs and a lack of information for first-time buyers who may not have family support to explain the process. In 2024 I redesigned the product to suit and be more accessible to the target user.
Role: Product Design (UX & UI)
UX design, user research & testing, UI APP redesign, high-fidelity prototyping, logo design, design system
Team
Natalie Waites (solo project)
Design Toolkit
Figma, FigJam, Useberry, Google Forms, Survey Swap, Sketch, Adobe Photoshop and Illustrator
Success Metrics
Onboard 200 users
Increase properties added by users 3:1
5% Conversion rate of users who proceed to purchase a property with our recommended lenders
The Brief
HouseBrain is a mobile app that simplifies the complex journey of first-time home buying by providing clear, comprehensive cost information and property comparison capabilities. The app will serve aspiring homeowners who feel overwhelmed by the home buying process and need guidance on understanding the full financial picture of their purchase.
2017 UI designs (version 1.0)
The original designs are quite old and have UI design elements that relate to old iPhones where the 'home' button was in the centre. So this needs a dramatic update. Also the app is not very accessible in it's current state and will need looking at in the design system.
Starting With Research
The original app was designed with only two user's in mind. Therefore it was important to conduct both qualitative and quantitative research to gather a variety of information and data from target user's. The results will provide direction for features and the overall app design whilst addressing user problems.
Survey Results
Competitor Analysis
Understanding the User
I looked at how we could define the research we gathered to better understand the user. I made a couple of user persona's based on the people we had spoken to and created a user journey map to empathise with the user's thoughts and feelings. These helped to direct the design phase with more focus.
Persona one: Marcus
Persona two: Ava
Inspiration for Design
After looking at the research, the average age of a first-time buyer is 35, fitting into the millennial bracket. However, as the app ages gen-Z will filter into this range. Therefore I incorporated styles and themes that I thought would suit both generations and to appeal to the excitement around looking for a first home.
Initial Designs
I started working on some low fidelity wireframes using a template in Figma. I experimented with different layouts, and they evolved over time before ending up on the final designs. It was useful to use a template as it was easy to move elements around.
Low fidelity wireframes
The mortgage calculator screen changed quite a bit from this initial design as I felt it was far to convoluted and not enough interaction around entering numbers. Also, having multiple bars that need swiping makes it not very accessible.
User testing throughout the process
As this app is a somewhat new concept I was keen to make sure that user's new how to interact with the app and be able to achieve their goals. The heatmap analytics showed user's were able to navigate the app in the way that was expected.
Final Designs
I incorporated two prototypes; the first showing the user experience for someone who has an account and the second showing the onboarding process. The second is important as onboarding new user's is defined in the success metrics. Also shown below is the design for the other features user's can access on the app.
Final testing
An example of the questions asked in the final user testing. It was useful to validate the designs in the testing format.
Roadmap for project
Retrospective
✅ What went well
Incorporating the use of heatmap analytics and more detailed user testing was highly beneficial in this project.
From the survey work, I realised the importance of having a persona in this particular project as there were clearly different reasons and motivations for using the app.
Seeing this project improve dramatically from the original design was satisfying (even though I think more work could be done around colour choice).
🛠️ What could be improved
I would like to do more user testing for the brand guidelines, in particular the colours. They could be more sophisticated whilst still appealing to the target audience and could achieve an AAA rating.
If there was budget I would like to get the app live on the App Store to get further feedback in real world situations and work on the MVP.
