PropertyFind
PropertyFind is a mobile-first, responsive website built to help families buy their first home. This project made up my UI Immersion course at CareerFoundry, and as the sole designer I was tasked with completing the UI Design process as a final high-fidelity prototype.
Mobile app, demonstrated on the iOS system
Creating user flows
The foundation of any good navigation for a site is a solid understanding of how users will be moving through your site. Although this was primarily a UI based case study, I wanted to make sure there was a foundation of information architecture to ensure my product was also viable from a UX perspective and not just from a UI perspective.
Generating a distinct user flow
Moodboarding
To feel out the mood of the site, I developed two, distinct mood boards, to help portray how users would experience the site. The first mood board provides a more professional setting, with a monochromatic colour scheme as well as more greys and blacks to demonstrate a cleaner and more modern feel that would be useful if the user was from a more professional setting. The second mood board features a similar layout, however there is more friendly and accessible font faces, a more vibrant colour palette and a more family oriented image inspiration base.
Comparing the two mood boards
Developing a design language
The final step in the project was to create a full styling guide and design language to ensure full consistency for the future of the site, as well as to provide clear instructions and teaching to any engineers or developers working on the project. I built upon my previous understanding of styling guides with my own graphical flare to bring a more interesting take on a styling guide.
Some examples from the final design language
The final product
After nearly 2 months of work, I had finished developing a mobile-first, responsive website utilising my newfound understanding of UI design. Below is a gallery of the finished UI products, as well as Mockups demonstrating their functionality and responsiveness across multiple platforms.
Homepage user flow on mobile
Demonstrating responsiveness on desktop
Sign up user flow on mobile
Menu and share overlay on mobile
A Retrospective
Throughout the project, I improved not only in my understanding of UI, design principles and interaction design, but I also began to understand more about the balance of UX and UI, and how it’s not enough to simply focus on one over the other. I also improved in my cooperative skills, by collaborating with real developers to create my styling guide, as well as understanding what can and can’t be done from a developer standpoint as well as that of a designer standpoint.