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.
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.
Visual design and composition
Having a moodboard in place, I could then define the colour palette, typography, and iconography.













Gestures, interactions, and animations



Interested in seeing more?
Download the developer hand-off document >>
Let's share ideas & discuss ways to collaborate!