UX/UI, Brand Dev • 7 mo. of 2017

Automated Real Estate Agency

The main goal was clear - to transform the processes of a Real Estate Agency into a digital solution (Web Application based on Angular 4.0) with as much automation as possible. This project was a new experience as I have co-worked directly with 1 back-end and 2 front-end developers in a small agile team.

*The project is now in pre-alpha version.

The job began with defining User Flows

Respecting client's specification one of my first tasks was to define personas and than start drawing user flows for them – from drawings on whiteboard to Hi-Fi prototypes.

User Testing of prototypes via CanvasFlip

For testing user flows we created clickable prototypes in CanvasFlip. It was a valuable time saver as it has provided us with data as avg. time spent, task completion rate, conversion funnels and even heatmaps.

Hi-Fi Prototypes

During the project, we have created a lot of Hi-Fi prototypes for each module. To make this approach possible and still time effective we at first defined brand style guide full of reusable components following principles of atomic design – in Sketch and in code (see part below).

From top left → 1. Screens of calendar module, 2. Management of user's properties with properties, 3. With no properties

Content zones for layout architecture → from the most important (red) to the last (blue) – that part is minimised on smaller screens

Transforming sketches into live sites became fast and with no ping-ponging between designer and developer thanks to InVision Inspect feature.


Samples of Style guide

Elements of atomic design → 1. atoms (left), 2. molecules and organisms, 3. template, 4. template filled with a real data.

Sample of style guide in code

An animation for card hover → try it here

Custom Icons and Illustrations

Part of the project was to bring human-touch and define brand communication via icons, illustrations and copy.

Design of illustration in 3D

*Some visual content has been tweaked due to NDA.