DRR Digital Transformation project - UX UI Design

DRR
DIGITAL TRANSFORMATION TO INTEGRATE MULTI-PLATFORM DIGITAL WORKSPACE

INTEGRATING ALL BUSINESS NEEDS INTO ONE HIGHLY SOPHISTICATED PLATFORM

DRR want to offer property management automation tool that integrates property agency’s existing systems and applications with real-time analytics capabilities, incorporates customer relationship management (CRM) elements and streamlines the process with digital document management tool eliminating data entry.

THE PROBLEM

Property Managers perform manual data entry and double handling of documents as the result of the multiple log-ins across multiple portals in current system when managing properties, e.g. Core Logic, Inspection Express, Zendesk, Xero, Pexa, Calendly, etc

THE CHALLENGE

Massive and complex system with myself as the sole UX UI Designer/Product Designer in the team, a Front-End Developer, a Lead Developer and five Back-End Developers.

The team has already started building the Web App before I joined the team, however, there is no documentation or artefact or design system found. As the result, to redesign the system workflow a thorough research and analysis are required to fully understand the current system workflow to ensure that there will not be any conflict and issue when the new system is going live.

We found that the live online payment module is very challenging due to complexity of the payment type (Pay Anyone, BPAY, Transfer fund, Walk-in payment, Centrelink payment, Split payment, Credit Note) and the limitation of the payment gateway to cater all the business requirements accordingly.

Another challenge is the complexity of the maintenance - requests and work orders. Due to this complexity in the workflow, a flexible system workflow is critical which allows for reverse-flow under “special” circumstance, e.g., when quote is rejected which results to a need to request new quotes.

It is crucial to minimise user error - especially in the tenancy application, maintenance request and Centrelink payment workflows- therefore it is necessary to design a user-friendly system guiding the users throughout the entire full-cycle process to ensure all the mandatory steps required are completed in particular order.

Despite the fact that this app/web is a massive and complex system that built for client to manage properties owned by over 400 landlords and handle approximately over 500 urgent maintenance requests - we have very limited resources, time and budget as its constraints.

On the other hand, the technical challenges that I face are some interaction designs in my prototypes are not able to be reflected by Figma software.

MY ROLE

I am the sole UX UI Designer in the team who have been leading the entire product and system design since joined the team from March 2022 and collaborate with key stakeholders throughout the entire UX UI cycle in agile, scrum and lean environment.

These include conduct user research, competitor analysis, visual research, interprets data and qualitative feedback to create user stories, user personas, storyboards and sitemaps with structured Information Architecture; develop wireframing and prototyping; optimise the system, user interface and user experience based on user feedback and usability testing.

I also raise DevOps tickets and lead front-end developer to build UX UI according to design specifications and standard. And recently (September 2022), I am given more responsibilities by Director to take ownership of Centrelink payment sub-module, which part of the payment module.

THE APPROACH

FOCUSING ON MAIN PRIMARY OBJECTIVES

Research, strategise and design end-to-end Web App and Mobile App experience to help Property Managers manage properties –leasing, transaction payment and maintenance, with focus on reducing time spent on administration up to 50% on current system. This main portal module includes payment module, maintenance module and compliance sub-module, main dashboard, report modules, property modules and tenancy modules.

The next objectives to achieve are Web App (and then Mobile App) for Landlord to communicate with their Property Managers live and smoothly especially in maintenance work approval and to access their statement/report seamlessly.

Next in the line after the Landlord portal Web App are the Tradesman Web App (and then Mobile App) which allows live two-sided communication happen between Tradesmen and Property Managers.

The fourth objective to achieve are the Tenant Web App (and then Mobile App) connecting Tenants with their Property Managers – live.

Due to limited time and resources, our priority will be on payment and maintenance modules first where users (Property Managers) use these modules extensively. And as the result of research and analysis conducted, we found that most of the time these users work from office and using desktop to perform their daily tasks, which lead us to prioritise desktop payment and maintenance modules.

Team collaboration with Scrum Agile and Lean UX approach
Throughout the project, I work in Scrum Agile environment - rapid wireframing, rapid prototyping based on user feedbacks and design mock-ups while delivering requirements iteratively and incrementally.

Build and deploy it cross platform
We build our MVP using ASP.NET Zero and Angular framework- Windows desktop, Mac and mobile platforms.

Continuous connected and collaborate
Regular meetings (virtual online and face to face) and WhatsApp team-collaboration with key stakeholders throughout the design and development of MVP. We also collaborate through Azure DevOps weekly sprint and staging environment.

$img\DRR\DevOps Sprint.PNG$

Azure DevOps - Weekly Sprint

KICKOFF

PLANNING AND ANALYSIS

EMPATHISE TO CONCEPTUALISE

This is where the empathise and conceptualise are taking place, before the design phase starts. It is all about gathering as many data as possible to meet both business and user requirements.

Empathise

First – I have to define what the users wants, needs, frustrations, pain points and expectations? Then dived into an intensive research, user interviews, desktop research, main competitors’ investigation and competitor Analysis.

After competitor identification, I carried out investigation and analysis of PropertyMe, PropertyTree, Chalet, MariDesk, NowRenting, Rentler, TellUs.

Conceptualise

Overwhelmed with insights, I needed to start prioritising to form a strategy by understanding key pain points, touch points, wants and needs. Then all insights gathered is classified before presenting my synthesis to stakeholders.

To present all the insights to the stakeholders, further secondary research is required to form product strategy and experience- affinity maps, user journeys, flowcharts are created. And user pain points, touch points, wants and needs are prioritised.

User Personas

Our users are categorised into six major groups based on their needs and challenges (pain points) and possible solutions to their pain points

System Admin who has full access rights to the system
Property manager
Licensee
Property Landlord
Tenant
Tradesman who offers the service, for example: electrician, plumber

System flowcharts

The following are the flowcharts that I redesigned:

Main portal - Property manager workflow
Landlord portal workflow
Tradesman portal workflow
Tenant portal workflow

User Persona and Their Relationships in Payment Module

Maintenance Flow Charts and the Flow Chart Mappings From Property Manager to Landlord and to Tradie

Visual Research and Style Guide

With references to Figma Material Baseline Design Kits and https://material.io, a Design System is created, which is customised accordingly to ensure its consistency and coherent with DRR theme and existing UI - including colour, typography, graphic styling, web and device design, and style guide references.

Visual Research - Colour Themes and DRR 3D logo on top of header section

I also created a beautiful DRR 3D interactive modelling below, click the house model to start interacting:

DESIGN

PROTOTYPING

WIREFRAMING

From paper sketches and flowcharts, I then started wireframing by applying User-centric design method that involves rapid testing and iteration of designs to translate user needs, business objectives and technology capabilities into best-in-class user experiences.

To turn conceptual ideas into realistic UI mock-ups/prototypes that address strategic and tactical goals and deliver production-ready specifications, cross-functional collaboration and relationship establishments with key stakeholders across the company are crucial.

Main portal (for Property Managers and Licensee), Trades portal, Landlord portal and Tenant portal desktop wireframes are successfully completed and have moved to prototyping phase.

Wireframes

PROTOTYPING PROCESS

My prototyping main goal here is to create working prototypes which deliver experiences that are personalised and optimised for each audience, by creating high-quality front-end UI components that function beautifully and defining interactions as well as collaborate with the team.

These high-fidelity prototypes are tested in order to validate designs and bring to life the intended experience for stakeholders. All prototypes are crafted from wireframes which have been designed and tested under multiple scenarios - positive and negative, with critical thinking in place.

DESKTOP INTERACTIVE PROTOTYPES

HOW WE GOT THERE

THE PROCESS

CHALLENGES

The biggest challenge that I had to overcome is redesigning a system that is not only compatible with the current system but also intuitive and user-friendly system that would solve the user problems/pain points where current system is failed.

And also, as mentioned earlier, the complexity of the maintenance – job requests and work orders are another challenge. Due to this complexity in the workflow, (1) users are required to complete the workflow in particular orders while a (2) flexible system workflow which allows for reverse-flow under “special” circumstance is also crucial, e.g., when quote is rejected then Property Manager to request new quote, or when the approved maintenance cap is lower than the job cost then the Property Manager is to obtain job approval from Landlord.

Existing Desktop Design (Left) & New Desktop Design (Right) – (1) New system requires step to step in particular orders

(2) Reverse-flow in Maintenance module

ADJUSTMENTS

Since it is in scrum agile environment, iterative adjustments are constantly made throughout the entire design and development stages based on user needs and feedback to ensure that their pain points are solved, making positive impact, and to balance out between business and user requirements with modern beautiful high-quality UI.

Existing Desktop Design (Left) & New Desktop Design (Right) – Modern beautiful High Quality UI

Existing Desktop Design (Left) & New Desktop Design (Right) – Modern beautiful Report UI

Existing Desktop Design (Left) & New Desktop Design (Right) – Redesign Workflow to optimise performance and enhance UX UI

New Desktop Design – Live Landlord Approval

REDESIGNING DIGITAL INTEGRATION