cover photo of real deal app with mobile mockups presented diagonally
Overview of the real estate project describing RealDeal as capstone project for CareerFoundry. It's an app that aims to provide expertise and resources to first time house buyers.
Explains the process, starting with Understand, Define, Ideate, and Design
Explains the process, starting with Understand, Define, Ideate, and Design
Describes understanding the project brief, the who, what, when, where, and why.
A user flow of the entire app
second step of ideate, which is to create the low and mid fidelity wireframes
Four wireframes for the Landing Page, Sign Up, Profile Creation, and Preference form
Low fidelity wireframes of the Homepage, Menu, Search, and Search Results screens
Low to Mid fidelity wireframes for the Filter screen, property listing page, and property photos gallery
Low to mid fidelity wireframes of the expanded property photo page, 3D view of property, contact form, and request a tour form
Two mood boards with mood board 1 focusing on a friendly, reliable, and uncomplicated style; and mood board 2 focusing on secure, clean, and professional. Mood board 1 wins.
The RealDeal logo and icon style guide
introduces the slider for the high fidelity wireframes
high fidelity wireframes for the landing page, sign up and error field, and create profile
High fidelity wireframes for the search preference form, homepage, expanded menu, and search input field
High fidelity wireframes for search results, filter form, property listing page, and property listing photo gallery.
High fidelity wireframes for the expanded photo screen, 3D view, and map view.
High fidelity wireframes for the contact seller form and request a tour form
Images displaying mockups of the three different breakpoints for the app

Key Takeaways

I initially faced challenges with applying colors to my screens, the initial iteration had a mess of colors that subtracted from the “reliability” of this app. I also, truthfully, dreaded the day when I had to design breakpoints. At the time, I felt semi-competent about utilizing grids, but worried about being able to expand the content to a bigger screen. Of course it seemed daunting! All I had were placeholders and “lorem ipsum...” littering the screens. It was hard for me to imagine a bigger screen when I didn’t have the full picture, down to the last details.

Going into this project, I felt deeply unconfident with my visual design skills. I could tell when a UI was visually appealing, but not how to apply it in practice. Do I still have some improvements to strive for? Absolutely! Nonetheless, I look back at my first project all the way to now and I can confidently say I’m at a better place than I was then.