Exceptional enquiry-to-booking experience

Role
  • UX research
  • Prototyping
  • Design strategy
  • UI Design
  • Design coding
Year

2018 – present

What is RealPage Consumer Solution?

RealPage Consumer App is a highly configurable and intuitive operational management system that delivers a self-service online leasing process via a customer app for an exceptional enquiry-to-booking experience.

The story

RealPage delivers a range of web based software solutions to landlords and property managers working in the professional PRS (private rental sector), student, affordable, key worker, serviced and short let markets. With customers and operations in the UK, Germany, Spain and Australia the team are continuously challenging to redefine and improve the design and development of property and tenancy management software.

Our front-end team was challenged to reimagine the customer booking journey and tenant portal

Learn more about what RealPage does

Collaborations
  • Frontend developers
  • Business team
Target groups
  • Residential and student property owners
  • Design agencies
  • Tenants

Understanding the problem

We gathered a feedback from our existing clients and conducted a brainstorming workshop. We narrowed down two target audiences: the professionals (design agencies, property managers, property owners) and their customers (tenants, students). We wanted to give them a simple yet flexible solution to use in any framework or marketing website to embed the widget and connect with our main product – RealPage Staff Console (see the case study).

User problems and pain points

  • booking journey set-up was too complex
  • limited customization options
  • no CMS or e-commerce support
  • difficult to configure without a programming knowledge

“Early prototypes designed to show functionality rather than visual design”

Different customers required a different booking journeys, so we decided to create a fully modular “widgets”. Widgets that can be dropped into any webpage for either displaying data from RealPage or to feed information into RealPage. These plugins use JavaScript, React and the RealPage JSON API. Only a basic understanding of HTML is necessary to implement these plugins – because it is a simple process of inserting a very small piece of code, there is no requirement to understand any of the JavaScript frameworks or API.

40

Prototypes created

30

Widgets designed

99

Widget customization options

User journey

Our software is highly customizable, made with elements (modules, applets, components etc.) that can be mixed and matched, depending on the client specific needs.

They will mostly be JavaScript files compiled in webpack that create views in the browser and can communicate with the server via restful APIs. The style required can be loaded from an alternative location so radical style changes are an option. All elements are multi-lingual. Configurations can depend on context.

Because of that, I had to create many detailed clickable prototypes and set-up our internal “default” style-guide.

#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 prototypes and mockups

Search & register

Also know as availability listing. This has a dynamic search form with search options that automatically refine as options are selected, reducing the possibility of getting no results on search.

Search applet

This form can be pre-filled with options using url parameters. When the form is submitted for the first time we will see search results based on the selected values.

Search filter

The dynamic search form will still be available and on changing any search parameter the form and the search results will refresh immediately. Optionally, some ‘showcased’ properties will be displayed automatically when the page containing this widget is landed on - preventing a ‘blank space’ experience, and also allowing clients to promote certain properties.

User interactions

Upon ‘search’ invocation, details about the units and details of booking periods and pricing will be rendered. Here there will be calls to action to: book, arrange a viewing, enquire about a unit, tell a friend, add to shortlist.

Simple registration

If the end user has filled out a contact form, the system can send the user an email with setup password link.

Early prototypes and mockups

Booking journey

The booking journey can start from the availability module or from a booking created by agency or back office staff via a link in an email. It is driven by the workflow and configurable web forms to manage the collection of data from the end user.

Frequency and pricing

Depending on booking tenures there will be the option to choose what the frequency of payment will be. Referral or discount codes can influence the pricing.

Pre-Arrival

In case there is additional data that needs to be collected before moving in but is not required to enable booking confirmation, there is a Pre-arrival journey. This journey can allow for the uploading of required documents, registration of recurring payment method including direct debit, confirmation of payment schedule and signing of agreements.

E-Sign and payments

Agreements can be signed using Adobe Sign dependency. Payments are made though several payment gateways, depending on the client needs.

Screening (Credit Checks and Referencing)

Van Mildert Landlord and Tenant Protection Limited is integrated and we are able to collect and display the screening data. Showing a referencing process will help tenants and improve their experience during the booking process

Early prototypes and mockups

User Dashboard

This dashboard should show the history of the interaction between the system and the end user. Features of this dashboard would change as the customer has interactions with the system. Any calls to action would be displayed on the home page interactive panels. The dashboard can also register any end user activity before and after login and function as a user activity monitor.

Report a fault

This widget will provide the option to report a fault. End users will see the progress of their current requests/call-outs,and the history of any previous ones. Calls to action or important notifications will also show on the dashboard.

Shopping basket

Shopping / extras
The end user will be able to order services. This may include recurring services that will be paid for as part of their booking (like cleaning or internet services) or one off items like spring clean or additional guest parking for a day. One off services may be paid for electronically at time of purchase, or added to the tenant’s account.

Payments & Direct Debits

Tenants can manage any aspect of their Direct Debits and payment documents without leaving the Dashboard

Many more…

Booking steps, inspection and inventory check, Documents management, Personal info, Arrival time, Bulletin board - Tenant Dashboard is a very complex application with many advanced features, helping tenants to make the most of their tenancy

Developing the designs

After several months of internal testing, reviews and user feedback, I created my high fidelity mockups in Adobe XD. To keep the highest standards and pixel-perfect UIs, I hand-coded the HTML, CSS and selected JS plugins. I worked very closely with the Front End devs during the critical phase of writing the React code to make sure that all the interactions are implemented with pixel-perfect precision. I conducted a UX reviews, internal workshops and I created the internal style-guide.

“Pawel substantially augmented our demonstration & documentation capabilities through building new, sample & 'self-help' resources. This allowed for significant cost saves, due to lower training overhead, and showcases our products to the wider community in a much more professional manner than previously”

Tom OsborneFront End Dev Manager

User Dashboard prototype

“Customer satisfaction of the usability of the product has significantly improved as a direct result of Pawel's redesign & revised implementation approach.”

Impact & Outcomes

100

Percent more consistent and predictable UI

1

Version of the app that works everyone!

100

Automated test coverage means no bugs are possible

After finding the initial problems: fragmented user journey; different modules with different and messy UI; inconsistent navigation and form feedback; hardcoded customization for some clients – we managed to find the solution.

Consistency and careful app testing, using the modern frameworks, reducing the reload (each of our module is a one-page app) we managed to create a highly customizable but very flexible solution. All parts of RealPage UK software looks like they were made recently, when in fact some parts of the code wasn’t changed since many years.

Consistency is important. When things always behave the same, users don’t have to worry about what will happen

Some key takeaways from this project are: always plan a few steps ahead; listen to the programmers and try to understand their point of view; detailed prototypes and mockups can dramatically improve the code quality.

Clients using our solution