HomeInvest Case Study
Project. Home Invest UI Case Study
Role. UI Designer
Home Invest is a responsive web app, with a mobile fist approach to design. This is a student project with Career Foundry. I used Figma to complete the design.
Project Overview
The objective is to provide a web app for investors with property information on homes of interest.
Real estate investing is a great way for people to achieve financial independence. Investing in real estate can be appealing, but can also be complicated.
Yes, there are plenty of resources out there providing information, but buyers can suffer from decision fatigue and information overload.
This app provides buyers with the property information they need to get started with ease.
Proto-Persona
To better understand who I was serving and designing for, I created a proto-persona based off of the project brief.
Low-Fidelity Wireframes
I created low-fidelity wireframes using 5 user stories. As a user, I want to:
- Create a profile containing all of my property criteria, so that I am recommended results relevant to me.
- Be able to search and filter properties, so that I can find good matches based on my needs.
- Be able to save or mark properties I am interested in, so that I can easily revisit them.
- Access as much written and visual information as possible about properties I am interested in, so that I can make an informed decision.
- Be able to contact the right people, if I am interested in viewing a property, so that I can schedule a viewing.
I created user flows to show what the user sees and does. Then, I created low-fidelity wireframes, along with a low-fidelity prototype for user testing. Take a look.
Grids and Layout
Next, I considered the grids and layout for HomeInvest. Once the grids were defined, I laid out each screen, being careful to keep elements ad wording aligned and text out of the gutters.
Mid-Fidelity Wireframes
Moving on, I improved on my wireframes. It was important to start maintaining file organization. After I updated my wireframes, I went through and labeled the elements and made sure everything was in the correct frames.
Continuing on with my mid-fidelity screens, I made changes based off of user testing. I changed the size of the fonts and icons, moved the navigation to the bottom of the page and increased the size of the listings.
Visual Style Guide
User research revealed people resonated with the mood board that focused on freedom, planning and ease. However, I loved the striking blue color in mood board #2 and knew, Rashida, the personal was more electric and energized, which didn’t fit into the easy going colors. So I used a combination of the two combining the deep wine color in one mood board and the energizing blue from the other mood board to come up with the color palette.
Style Guide
From there, I became clear on the images I wanted to use. I created many of the icons. Decided on the typography, appropriate pictures, vectors and created a style guide. Below are a couple of pages from the style guide.
The Outcome
Lastly, I added interactions, an animation and created two screens that demonstrates responsive design from mobile, tablet to desktop.
Conclusion
I learned a valuable lesson doing this project. I learned how much forethought goes into creating fresh and useful products. I’m happy with the outcome and overall feel for the app.
My next steps, would be to add an animation and pages for the load more button and add more details for the items on the hamburger menu.
I would also like to do more user testing to see what additional changes are needed.
Thank you for your time!
Here’s a joke for making it to the end.
Q: What do dentists call their x-rays?
A: Tooth Pics. 🙂