Portfolio Project 1: Huttons

Background

Context

While employed as a UI UX Designer in one of my previous companies, a client commissioned my company for IT consulting services, i.e. UI UX Design and web development services. The company was Huttons, the largest private real estate agency in Singapore. The company wanted a customised Customer Relationship Management (CRM) SaaS platform to assist their internal staff, property agents, in performing their jobs. The CRM platform also needed to be a mobile app as their property agents were constantly on the go travelling around Singapore to meet potential & existing clients, and the full CRM functionality needed to be easily accessible from their mobile phones (e.g. doing financial calculations for property investment for potential clients).

I was the sole UI UX Designer and I worked closely with my tech lead and two other engineers on this project over a period of 7 months using Waterfall Methodology. Most of the IT consultations were done by my tech lead who also acted as the Product Manager (PM), who obtained all the necessary user requirements, and I then designed the hi-fidelity UI screens accordingly in Figma. The CRM was also later featured in 99.co's official blog as a game changer in the Real Estate industry in Singapore, which you can view [Here]

Defining the Problem

Users

The users of the CRM platform are Hutton's own property agent staff. These users are regularly involved in property-related transactions (sales, purchase, rent & investment) with their potential & existing clients. They need a handy mobile app to keep track of their overall schedule, sales targets and performance, view & access their clients' info, have access to financial calculator features that will assist in calculations for property transactions and the calculators must be customised to Singapore's local laws, and lastly, the CRM should also assist these property agents in managing marketing campaigns for upcoming properties and hence attract potential customers.

Interview Findings

No user interviews were conducted as the client wanted the project to be conducted using Waterfall Methodology.

Pain Points & Opportunities

❌ Pain Points:

Property Agents are physically constantly on the go meeting different clients, so it is troublesome for them to open up their laptop to check for details & do financial calculations for their clients

Although general financial calculator apps already exist, none of them are customised to Singapore's local property transaction laws

Huttons management have difficulty keeping track of their property agents' sales performance as a whole and individually

✅ Opportunities

The CRM can be designed as a mobile app so that it is readily accessible anytime and convenient to carry around in their mobile phone

The CRM can be customised to have string input fields that allows users to calculate for specific types of financial transactions, and all of it is updated and follows the local property transaction laws in Singapore

The CRM can have two different views - one for higher management to keep track of their subordinates' sales performances as a whole and individually, and as for the individual Property Agent users themselves, they will only be able to view their Team's and their own individual sales performances

Designing a Solution

Process

My tech lead headed discussions with the client about the user requirements. The clients requested for hi-fidelity UI only instead of sketches, which I designed for them. The design and development were completed together in iterative cycles - when one section's design was finalised, it was handed off to the developers to be coded out, and I would then moved on to design the next section as per the client's user requirements. This design and development iterative cycle continued for about 7 months before it was finally completed.

Visual Deliverables

Onboarding Process

When Huttons Property Agents register an account on the CRM for the first time, they would need to register with their mobile phone and validate it via a 2FA process using their OTP. Thereafter, they can log in again using their mobile phone and another 2FA code.

Home Page (Overview, To-do List, Calendar)

The first tab allows Property Agents an overview of their sales performance so far, their to-do list in relation to their job, and a calendar overview of their appointments with their clients. New appointments can be made on the calendar page as well.

CRM Page

The second tab shows a list of Property projects assigned to different Teams, and which Property Agent members are under which Teams. Each Property Agent can also view their own Property projects, and keep track of their clients.

CRM - List of all Projects Assigned to this Property Agent

CRM - List of all Customers with transactions with this Property Agent

Financial Calculators

The third tab shows a list of financial calculators for calculating transactions related to Properties (purchase/sale/rent/investment), in order to help clients make a more informed decision

Calculator - List of all Financial Calculators

Calculator - Sample UI of Property Portfolio Calculator

Campaigns

The fourth tab allows Property Agents quick access to previous and existing marketing campaigns to promote awareness of upcoming private properties to potential clients. These pages allows the Property Agents to create and manage marketing campaigns, and to check the success conversion rate of their marketing advertisement. The different types of marketing campaigns available are Facebook campaigns, Google Ads and Email Marketing.

Others

The last tab allows for additional features that are not as commonly used as the other tabs, hence they were moved to the last mobile navigation tab. Other than user setting and notification setting changes, this tab also has a list of the overall sales report under this Property Agent, as well as a list of all invoices generated due to commissions gained by this Property Agent, for confirmed property transactions.

Design System

The design system shows the typography and colour palette used for this mobile CRM project. I chose Open Sans as the font face as it is still readable even in small sizes, which would be suitable for mobile screens, and it has a neutral yet friendly appearance to it. In terms of colours, I reused the main blue (#073472) and orange (#E57200) colours which I obtained from the existing Huttons Logo, and experimented the UI project's colour scheme from there.

Reflection

This was my first major client project and I am very thankful for the opportunity presented by Huttons. I am glad to be able to work on a project like this with real applications and direct impact to its Property Agent users, who are now able to quickly access the mobile CRM and use its diverse functionalities (e.g. financial calculators) at a touch of their fingertips. This experience has truly led me to appreciate the fact that even such small convient features like this can go a long way in helping solve users' pain points.

I was also pleasantly surprised and pleased to hear that the developed project was also featured by another major Property Sales organisation's official blog (99.co). Such a highly-customised CRM had not existed in Singapore yet and it is truly one-of-a-kind, being designed with Singapore's local property transaction rules & regulations in mind.