Doing Property Differently

Role
  • Product Design
  • Design strategy
  • UX research
  • Prototyping
Year

2014 – present

What is RealPage Platform?

RealPage’s integrated platform helps you manage practically every aspect of your property portfolio—accounting, operations, maintenance, marketing—and delight your residents to continuously improve performance and maximise asset value.

The story

In 2014, I joined PEX Software newly created front-end team tasked to improve overall usability and make the UI more user-friendly. Our role was to design and deliver a fresh and modern interfaces and introduce the new modules for online bookings. PEX Enterprise design strategy is what I led from scratch to final implementation. The first major update was successfully delivered to our clients within 2 months with the biggest system overhaul 1,5 year after. I worked with our developer team, business consultants and QA.

Since the RealPage acquisition, I was focused on improving consistency and stability of our system. Working closely with Tech & Ops Director, senior developers and solution architect, we secured the company position as a Global Leader in Property Management Software in United Kingdom, Europe and Australia.

Learn more about what RealPage does

Collaborations
  • Frontend developers
  • Backend developers
  • QA Testers
  • Business team
Target group
  • Residential property owners
  • Student accommodation managers

Understanding stakeholders needs and habits

We narrowed down our initial target audience to property administrators as this allowed us to focus and fix the most critical issues. I performed multiple research sessions, including remote and in-person focus groups. Due to complexity of the system, I had to learn about their processes and workflows.

I found that property managers were using browser bookmarks and offline docs to follow the complicated processes. Many daily actions required a step-by-step critical moments during the journey (example: group bookings for students).

Our customer assistants struggled with the outdated GUI issues and they were unable to create one documentation for all the clients, because of the UI inconsistencies.

User problems

  • Inconsistent UI
  • Difficult navigation
  • Too many hidden options with a steep learning curve
  • Not responsive, no mobile support
  • Fragmented, disjoned ecosystem

“We wanted to eliminate the layout issues and bring the look and feel of our UI/UX into the 21st century”

200

Concepts and prototypes

30

Research activities

75

UX/UI issues found

Building a product

Our software is highly customizable, it looked differently for every bigger company. We didn’t want to force our existing customers to switch to one design system. Instead we went for a modern, almost “white label” look and feel and added different colour themes to match with their brand themes. We stick to one brand identity in prototypes and internal communication.

#7066F5

#E7E5F8

#42505D

#77838E

#f1564b

#f56639

Lato Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Lato Regular

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Varela Round

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Early version, 2014

Before

I started to test out the layout for each of the section in order to see which changes would affect the usability in the most positive way.

Navigation

Cluttered main menu with no groups or categories. It was difficult to navigate, even for the experienced users. Many links were repeated links or not working

White space

A lot of unused, white space and many issues with item alignement

Color coding

Overly light-on-light colour makes it more difficult to see the important data hierarchy. Difficult to read for people with color blindness, or color vision deficiency

No mobile support

Outdated layout, wasn't tested on smaller screens and mobiles. Many HTML and CSS issues was breaking the page on smaller screens.

Updated version, 2021

After

Working with senior team members, I was able to simplify the navigation and mobile support. It was one of our most requested features

Navigation

Main groups with icons are simple to understand. I worked with QA and devs, including the new users to improve the UX

Layout improvements

New DOM structure and the grid system, I added specialized, alternative layouts and dashboards to make the daily tasks quicker and more efficient.

Color coding

We created a theme selector tool. Users can pick from 26 different light/dark themes to improve the experience. Also works for people with color vision deficiency.

Fully responsive

All sections were re-done to fully support the "mobile-first" philosophy. Customers are very happy to use the system on iPads, without installing additional apps.

“We wanted a consistent and effective way to customize the system without sacrificing the integrity of our product”

Atomic Design

After doing the initial research and fixing the most critical errors, I started thinking about the more holistic approach. The system big and the Dev team was adding many functionalities every day. I build a system of components based on Atomic Design methodology

Read more about Atomic Design methodology

“Atomic Design give our programmers have much more freedom, they can add new functionalities without a costly, time-consuming design meetings. The team can focus more on the user experience and meaningful interactions”

“Throughout the iteration process, we created many prototypes to convey some of our ideas to stakeholders and customers to get feedback. Accepted prototypes are later part of the documentation and a valuable help for developers”

“Atomic Design give our programmers have much more freedom, they can add new functionalities without a costly, time-consuming design meetings. The team can focus more on the user experience and meaningful interactions”

Living style guide

“In 2018 I was also writing the styling guide for our Development team, making it much easier to keep the high level of consistency across all modules.”

“Living style guides are an important tool for web development today, especially in large, complex web applications. They help document styles and patterns, keep designers and developers in sync, and greatly help to organize and distill complex interfaces.”

Impact & Outcomes

95

Percent decrease in overall styling issues reported

33

Reduced training time (more consistent and predictable UI)

60

Less time needed to create complex bookings

Our innovative and unique consumer-facing solutions exceeded several traditional business and dev success metrics – our sales, market share, automated test coverage and cross-team communications has improved. Most importantly, users adapted to the changes very quickly and they praised the new, modern interface and feedback showed increased productivity.

The new UX philosophy helped us to prepare for the RealPage acquisition in 2017 and Thoma Bravo acquisition in 2021, the system proved to be scalable and flexible enough to integrate with other, more mature ecosystems.

Don't follow the trends, listen to user - and everything else will follow!

I realize that user may not really need the flashy UI and too many UX changes, when we did testing. I learned that consistent way of communication with the users and the team members is the key.