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

Automated Real Estate Agency

The main goal was clear: a transformation of processes of a real estate agency into a digital solution (Web Application build on Angular 4.0) with as much task automation as possible. I was part of an agile team co-working with one Backend, two Frontend developers and one Product Manager a.k.a. SCRUM master.

*The project is in pre-alpha version now.

Defining User Flows

Respecting client's specification and results of his research one of the first tasks were to define personas. Inspired by their insights we started designing – from user flows on a whiteboard to Hi-Fi prototypes.

Hi-Fi Prototypes

To effectively built and then iterate Hi-Fi prototypes of complex features we decided at first to create a library with reusable components following principles of atomic design – in Sketch (styles, symbols) and in code (design tokens).

Screens of the Hi-Fi prototype – for mobile & desktop

Library of components in Sketch based on Bootstrap 4

User Testing of Prototypes

For testing user flows we used the clickable Hi-Fi prototypes via CanvasFlip. The testing provided us with data as average time spent, task completion rate, conversion funnels, and heatmaps, that we could analyse and prepare iterations.

Design Hand-Over

Transforming sketches into online components became fast and with no ping-ponging between designer and developer thanks to InVision Inspect, style guide in zeroheight and layout + components library prepared in HTML, Sass.

Inspecting layout in InVision

Layout for the project was build with CSS grid → demo in codepen


More Samples of Style Guide

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

Sample of style guide in code

Animation for card hover → try it here

Custom Icons and Illustrations

Part of the project was to bring an emotional dimension and to define brand communication via icons, illustrations, and copy.

Illustrations in 3D were exported into .svg format

*Some visual content has been tweaked due to NDA.