Whether you're dreaming of a lakeside retreat, a beach house, or a cozy cabin in the woods, Abode turns your hideaway investment goals into reality.
About
Abode is a responsive web application designed for new, small-scale property buyers who are looking to invest in real-estate for additional income or financial security.
The app offers the necessary information and guidance to embark on the thrilling, emotionally charged, and complex journey of investing in real-estate.
Prototype
Demo
Background
Having personally gone through the process of purchasing a property, I understand the emotional stress and complexity that can come with such a significant investment.
Abode is here to help alleviate the stress and anxiety that first-time, small-scale real estate investors often experience. With our user-friendly web app, we provide the necessary information and guidance to make informed investment decisions. From evaluating the potential of a property to understanding climate risks and historical values in the area, Abode equips prospective buyers with comprehensive and simplified valuable insights for a smoother investment process.
My role
Timeline
Visual Design
Branding and Identity
UX Strategy
Product Design
UX / UI Design
May - July 2024
Tools
Figma
Photoshop
Illustrator
Client
Context
UI case study. Abode is a responsive web app created with a mobile first approach
CareerFoundry project
01. Understand
Problem
Unseasoned real-estate investors need access to reliable, comprehensive, and uncomplicated information about the properties and their neighborhood before spending time on-site.
Solution
Provide small-scale property buyers who are looking to invest in real-estate with a user-friendly, responsive web app containing the necessary information and guidance in the process.
How Abode is different
Abode caters specifically to small-scale property buyers who are looking to invest in real estate.
While there are many comprehensive real estate apps, none focus specifically on the investment potential of properties. Typically, property information is presented in long, single screens, making it difficult for investors to quickly identify issues that could affect a home's future value.
Abode listings have tabs, highlighting the "investment potential" of properties, providing details such as average rental prices for similar homes, recent local news articles, or events that could impact the property's future value. Additionally, there is a tab for "possible risks", such as flood zones or other known factors that could pose potential challenges for investors.
Design process
I utilized the user-centered design approach in my design, putting the users’ needs front and center, and follow an iterative design process that focused on her needs every step of the way.
02. Empathize
Persona
I was provided with the user a persona, Reshida, in the design brief. Reshida enabled me better understand my user’s needs, motivations and pain points.
Who: Reshida is a busy mother and tech consultant who is always on the go with a passion for for the outdoors, hiking and playing basketball.
What: Reshida wants to invest in property beyond the city for increased financial security for her family.
Why: Reshida is new to real estate and wants a tool that is easy to use and that will help her find the property she’s looking for.
How: Reshida wants to be able to search for properties which match her criteria, easily view and return to listings she’s interested in and receive relevant and comprehensive information about properties.
03. Ideate
Based on the user stories in the project brief, I built mind mapping diagrams to understand and visualize what pages needed to be included in the app for my user to achieve their goals.
04. Design
Paper wireframes & prototypes
Based on my persona and my user flow diagram, I started sketching wireframes for the main functionalities of the app with pen and paper.
Create a profile
Search & filter properties / Save properties
Schedule a property tour
Moving on to mid-fidelity prototypes
Create a profile
Search & filter properties / Save properties
Property details / Schedule a tour
Homepage - mid-fidelity responsive breakpoints
Phone
Tablet
Desktop
The process of creating high-fidelity wireframes and prototypes
I added details, such as basic UI elements, illustrations and text, to better convey the form and function of the app, transforming it into a mid-fidelity prototype.
Moodboard
In this step, I created a mood board to help gather ideas and set the tone for the Abode brand.
For the app's overall design and mood, I considered not only Rashida’s needs and requirements but also her emotional journey through the high-stakes process of purchasing and committing to an investment property. I reflected on the stress she might experience as someone balancing a young family, a demanding job, and the financial weight of a property investment. I also explored her deeper goals beyond the prospect of additional rental income or profit.
I focused on the concept of a peaceful escape from a busy lifestyle—what Rashida might be seeking when evaluating properties to invest in and enjoy beyond the city’s limits. The words that guided my design choices were: nature, simplicity, clean, calm, and airy.
Visual Style Guide
High fidelity wireframes
Create a profile
Search & filter properties / Save properties
Property details / Schedule a tour
Responsive design
05. Prototype
Prototype
Demo
06. Conclusion
This project was the perfect opportunity for me to dig deep into visual and UI principles. Designing the UI for Abode from scratch was an enjoyable creative journey to design a product and brand from the bottom up.
Though most of the UX research was given to me, I would have enjoyed and benefitted from participating in the initial research, such as user interviews and competitive analysis, to better frame the problem and analyze existing solutions. It would have allowed me to better produce a product that can satisfy our user needs in terms of functionality, usability, aesthetics and interactions.
Next steps
Conduct the first round of usability testing to validate design decisions
Iterate on the product based on user feedback
Expand the functionalities for Desktop and Tablet
