Real Estate Web Responsive App

•

My roles: UI Designer, Interaction Designer

Time Length: 3 months

Tools used: Figma, Principle.

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

The Challenge

To design a web responsive app that would help its users locate and view listings of properties of interest in their selected area.

My first steps: Creating a user persona

I had been given a compilation of UX deliverables that helped me create a user persona and create user stories. Since the project wasn't complex, (this problem had been solved in many different ways before), I created one user persona for this project, Rashida, who would help me empathise with the user I was creating a product for.

User Flows

I was given user stories to be accomplished by our main user persona, Rashida. This would provide me with a visual layout of what users would do in order to accomplish a task providing a quick answer to the screens that I would be designing.

Low-fidelity Wireframes

I created my first wireframes simply using pen & paper. This helped me to generate ideas quickly quickly without having to focus on the details.

A moodboard

What visual direction was my product to take? I wanted a consistent, professional and elegant look. A neutral palette came to mind, mixed with some elements of Bauhaus, Modernism, Black & White design trends, all the while throwing in one or two fluorescent colours.

Style Guide

Once my moodboard was in place, the task of choosing the typography and colour palette, and designing the icons and logo became much more straightforward.

Designing for different breakpoints

Designing with a mobile-first design approach makes designing for different breakpoints much more manageable, as you only need to reorganize the content and spacing of UI elements.