Project Summary
Prospective home buyers have countless options in the form of agencies, blogs, and videos to aid their purchase decisions, but with all the information out there it can become a little too complicated to find the right information. Prime Property (a responsive web application) aims to provide an educational filter for users who want to learn industry secrets and best practices while also having a safe and secure platform to search and purchase homes or property in their area.
My Role: UI Design
Client: Career Foundry UI Specialization Course Project
Tools: Figma
Duration: 1 Month
User Flows
In order to build the right screens and provide an effective, efficient flow through the application I began working on users flows. I used three user stories to provide context to the flows and give them direction.
- “As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.”
- “As a user, I want to be able to contact the right people if I am interested in viewing a property, so that I can schedule a viewing”
- “As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them.”
Each flow can be seen below in addition to a legend key to explain each component.
Low Fidelity Wireframes
After creating users flows I then began the process by making low fidelity wireframes in Figma. The low fidelity wireframes allowed me to quickly flesh out ideas and began thinking about the overall structure of each individual page and the web app as a whole without getting caught up in the more granular details. Below you can see some of my low fidelity wireframes.
Mid Fidelity Wireframes
I then took my low fidelity wireframes and began adding more detail and refinement to each screen. I continued to keep the wireframes in grayscale to avoid getting caught up in the fine details. In an effort to enhance the structure of each screen I added a 4 column grid with 24px margins and 20px gutters to create a more consistent and refined look. I also added in images and various UI elements like buttons, form fields, and cards. You can use the slider below to see the progression of the low fidelity wireframes to mid fidelity (slide from left to right).
Mood Board
After creating low and mid fidelity wireframes I then began the process of creating a mood board. The mood board would be used to help establish the overall feeling of the application in addition to giving some visual inspiration/ideas. I started off by finding keywords that would be used to define future design decisions and the overall direction of the web app. I choose three words reliable, exciting, and secure. These words would be used as my north star for all future design decisions. I also built a color palette using blue as the foundation color. Blue is associated with trust and professionalism which were perfect attributes to supported my keywords. In addition I also found some images and icon inspiration to give a more complete picture of the design direction.
Style Guide
After establishing a design direction through the use my mood board I then created a style guide to solidify that direction and create a consistent look and feel throughout the web app. My style guide touched on various topics like the logo, colors, typography, iconography, UI elements, imagery, and grid systems. I made sure that any designer could pick up my style guide and easily be able to continue in the right design direction through the use of detailed annotations and illustrated examples. You can see my style guide below.
High Fidelity Wireframes
After establishing a design direction and solidifying it through my style guide I then went back to my mid fidelity wireframes to begin the process of adding the more granular details as laid out in the style guide. I applied color, logos, icons, compounents, etc. This process was very fulfilling as I was able to see the progression of the design from an idea to a fully fleshed out prototype. You can use the slider below to see the progression of mid fidelity to high fidelity (slide from left to right).
Animations & Interactions
In an effort to provide the best experience for users I incorporated various animations and interactions throughout the web application. You can see some of the interactions and animations by viewing the video on the right hand side.
Responsive Breakpoints
I built Prime Property using the mobile first approach but needed breakpoints for the design to translate well on the countless different kinds of devices users might be viewing it on. In order to create a seamless experience for users I choose three breakpoints (mobile, tablet, and desktop). With the breakpoints established I then began the process of choosing responsive layouts and navigation patterns. Putting time and thought into this process allowed me to create a seamless design that translated to any device it was being used on. You can see some of my break points for the landing page and property search page below.
Takeaways
Working on the Prime Property web application was a very fulfilling and exciting journey. I got the opportunity to see how important mobile first design was when working on various breakpoints. Focusing first on the mobile breakpoint allowed me to create a beautiful effective design on the most difficult platform (mobile, due to the lack of screen real estate). After the mobile breakpoint was created it was easy to translate the design over to tablet and desktop.
Another valuable lesson I learned was the value of creating a system for keeping all my design files clean and organized. It might seem simple but it's easy to loose track of important files and systems if you don't keep everything organized. This can have a very negative impact on productivity and deadlines.
Overall this project was fun and very enlightening!