![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/740bd437-c958-46fc-8382-cb19d44eb80b_rw_1920.png?h=5acc1695df533757f34096d992a31a51)
Project Brief:
Creation of a responsive web app that provides property buyers with information on properties of interest to buy or rent and schedule viewing visits.
Design thinking:
Problem Statement: First time buyers and subsequent buyers require a trustworthy app that provides all the relevant property information for investing their money. Having this in my own life situation, makes this topic close to me.
Hypothesis: Providing relevant information to the buyers will make it easier for them to use the app. I will know this to be true when I see high user sign up.
Design elements:
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
Individual design elements:
1. User flow diagram
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/bf2087b8-39ac-459b-87d4-cd7454350b95_rw_1200.png?h=4f03ff25c228974253fa3b1b3d6c913a)
Individual design elements:
2. Low fidelity wireframes
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
Low fidelity prototype link
![First screen](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/1ba1c46a-f877-4507-8663-38a13ce5f82a_rw_1200.png?h=6c69bbf76e5f39c90630c0ed08755072)
First screen
![Login/Sign up](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/7bc98666-bd71-4b80-968d-c88a73e1fb01_rw_1200.png?h=357f777abbf3162845cfc4026c449d6c)
Login/Sign up
![UI Feedback](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/ebbb05e1-be70-4c00-938f-f0bb7dc9ad25_rw_1200.png?h=dc46b015d8bfdb56ba1bae577232b5a4)
UI Feedback
![Search page](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/c7b60dc8-6c91-478d-89ff-c648944b585f_rw_1200.png?h=9b8136127766575fcbd14a25a12e59df)
Search page
![List of search results](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/624e8cdf-5db5-4593-9552-e1e3d4be8396_rw_1200.png?h=2bc9957af2129613baffe92c86da0149)
List of search results
![Map view](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/16d9c73e-b796-439b-9230-d775a59218f7_rw_1200.png?h=f9e41c77563bd3cdc129b1bde9025298)
Map view
![List view](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/ee67a114-0833-441a-afa8-b04bcf81dff4_rw_1200.png?h=26bc8805ab8c5f623a0759cd3a6b66f4)
List view
Individual design elements:
3. Responsive layouts and grids
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
Individual design elements:
4. UI elements and file organization
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/a0eb90b1-1272-4352-96b3-86a23546cf6b_rw_1200.png?h=5f8790ea70fcca5912b92bffbb0f6163)
Individual design elements:
5. Design patterns
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
Individual design elements:
6. Mood boards
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
Individual design elements:
7. Typography
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/e5b550f4-6bd2-46bb-b086-6bd9e612aba5_rw_1200.png?h=d1ad599bdeba7fa6b7ba4d3d73804372)
Individual design elements:
8. Colors
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/29d7f538-324f-440d-85f1-ce0233d9dc6a_rw_1200.png?h=32a662a9e8cebbaf29d49cb1d0cd3f81)
Individual design elements:
9. Imagery
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/212edb82-8c3c-4ca1-863f-a2c1e483de5d_rw_1200.png?h=72289aaee062a9e57cb5cf9091f0e105)
Individual design elements:
10. Iconography
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/5f42b843-ea51-4412-ac4b-79b2347142ea_rw_1200.png?h=52cef6fd1828b5aa8452e0c1e5985f33)
Individual design elements:
11. Gestures
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
Individual design elements:
12. Mid fidelity prototypes
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
Individual design elements:
13. Final mock ups
________________________________________________________
1. User flow diagram - 2. Low fidelity wireframes - 3. Responsive layouts and grids - 4. UI elements and file organization - 5. Design patterns - 6. Mood boards - 7. Typography - 8. Colors - 9. Imagery - 10. Iconography - 11. Gestures - 12. Mid fidelity prototypes - 13. Final mock ups
![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/6bcbb3c9-239a-4acb-8ee7-cca7d0aa5195_rw_1920.png?h=dc59a164c2071193e68aaf103231c61f)
![](https://cdn.myportfolio.com/cf604989-57ab-4e05-a11d-065ec8b3df39/69eb24d6-96c8-45cd-a6e4-d106bfc1dab2_rw_3840.png?h=92836cea86fec164da6c9796e60727e8)