#responsive #mobile_first #web_app #adobeXD #invision
Property buying can be a daunting experience particularly if you're doing it for the first time or buying abroad. Haystack is an app that streamlines the search so you only see properties within your budget.
As the UI designer for this mobile first web app I was responsible for creating wireframes in different fidelities, an interactive prototype and mockups for 3 different breakpoints. I also developed a logo, visual identity & style guide for the app.
I was provided with a user persona, Rashida, a professional married woman in her 40s. I used this persona to create empathy & help guide the User-centered design process.
I created a mood board to define the look & feel of the app. I wanted to balance clean, modern design with a textured warmth that's lacking in many real estate apps. A sense of home. Warm greens & neutrals provide a calming serene aesthetic. Principles of Wabi-Sabi are also explored with the use of raw natural materials like wood and stone.
I began designing by loosely sketching multiple ideas using rapid prototyping. I selected the best of these ideas by collaborating with my mentor & peers before moving onto mid fidelity wireframes.
I created an interactive prototype to test the flow and interactions of the app. I then selected typography, imagery and a colour scheme. I researched design patterns selecting the most useful ones & designed custom icons & a logo.
When I started developing this page I was picturing a punchy tag line with a search bar that allowed user to start searching straight away.
As I moved info medium fidelity I started thinking about adding more content to the page that showed users the value of the service as well as reviews from happy customers.
Finally I decided to provide information about the 3 main categories of users; People buying abroad, first time buyers and people buying as an investment.
For onboarding, I imagined a new customer being asked a series of questions that created a dashboard of properties that were relevant to them, starting with where they were looking.
Getting a mortgage as a local vs. as a foreigner or expat makes a big difference in many countries so I wanted to include this question as part of the onboarding sequence.
This question ended up being unclear in user tests so I clarified the language as well as giving a reason why this information was necessary.
I knew the important elements of this page were a gallery of photos, a way to save the properties and a way to contact the real estate agent.
Moving on to mid-fi I added more details such as a map and information about the previous sales.
For the final screens I simplified the design, removing unnecessary shapes and using icons & graphics to more elegantly convey the information.
I created a style guide to define the visual style of the UI for developers. It contains information about the colour palette, typography, imagery and other UI elements. See the link for the full version.
What I learned.
This project was my pixel perfect bootcamp. I learned how to make sharp, readable icons and also learned how terrible it looks when done badly.
It was also my first time exploring the world of gifs and animations. This is a powerful design tool and one I'd like to delve more deeply into in future projects.