Housify

A responsive web app that provides property buyers with information on
properties of interest.

My roles: UI Designer, Interaction Designer.

Project duration: 8 weeks.

Tools: Figma, Principle, Pen & Paper.

Team: Individual with the supervision of a Senior UI Designer.

The challenge: To design a real estate web app for small investors.

From the project brief, I crafted four pragmatic UX deliverables, the user persona, the user flows, and the low and mid-fidelity wireframes. The project brief served as a requirements gathering document so I could develop a solid and cohesive UI strategy for Housify. This strategy would include the application of common principles of visual design, composition, advanced UI, and developer hand-off.

Personas

Having being given flows and personas from a UX designer, I created a main persona according to the data collated from the interviews with the purpose of better empathising with the user I was building a product for.

User flow

What was Rashida to accomplish once she opened the app? There were three main features that were to be implemented, hence I created three user flows, like the one in the example, that signified the search for a property.

Low fidelity wireframing

I started ideating solutions with low-fidelity wireframes using pen and paper. This would help me gather up ideas, without getting distracted by the details.

Mid fidelity wireframing

I used common principles of spacing, with a six-column layout for mobile devices to design mid-fidelity wireframing. My approach was mobile-first, meaning that I would be designing the mobile wireframes first before venturing into the desktop wireframes.

A moodboard

How was I to set the visual direction for my app? I created a moodboard that would help me gain a clear vision as how the colours, imagery, styling of elements, and typography could work together as to give a clear and cohesive look to the product I was designing.