Prototype

I was responsible for the Property Listing page, and Bidding process pages.

PROPERTY LISTING & BIDDING PROTOTYPE (that i worked on)

full rental website prototype (worked on as a team)

Details

Duration: 4 weeks.
Team: Andrew Au, Caleb Leung, Jenn Chan, Rex Choi, and Sonia Wan.
Project role: UXUI Designers.
Tools: Figjam, Figma.
Skills: Research, UXUI Design, Project Management.
This project was part of Xccelerate’s UX Design bootcamp. Half-way, one team member withdrew from the project due to health reasons.
The client invited some students to continue this project beyond the course. Myself and Jenn, accepted the invitation.

Project Brief

Dropiti is a property/ real estate platform that aims to serve as a complete ecosystem for searching, transferring, managing and financing properties.
The founder had frustrating experiences with estate agents, so they want to give tenants and landlords more independence in the rental/ buying process.
Their USP is the property search pin, user passport (profile), bidding features, and use of blockchain technology in their tenancy contracts and online wallet.
For this project, our client tasked us with the renting web platform first as the buy/ sell features and the mobile app will come later.

page from dropiti project deck & our objectives

My Role

I was a proactive member and often took on project management roles.
I took the lead in creating and managing our research wall, design files, meeting notes and presentation.
I led the research planning, researched Dropiti’s competitors and interviewed 2 tenants, 2 landlords.
In the ideation phase, I was responsible for the visitor flow, and tenant flow. We worked on the sitemap as a team.
For the design and prototype, I chose the property listing page and bidding feature.

CLICK HERE FOR OUR PROJECT PLANNING FIGJAM

Challenges

PROJECT CHALLENGES

Key Learnings (Improvements)

PROJECT learnings

Research & Findings

I led the research plan and identified with the team; Dropiti’s background, target users, assumptions, discovery points, project limitations, research methods, research preparations, timeline and deliverables.

Secondary Research

Next we conducted secondary research. I analysed the reference websites the client shared and the competitor platforms. I also familiarised myself with some rental/ letting procedures, terms, and contracts.

key competitors analysis

style references

Primary Research

With our background knowledge, assumptions, and discovery points in mind, we planned interview questions, then interviewed 7 tenants and 5 landlords in total (I interviewed 2 tenants and 2 landlords personally). I was responsible for the Landlord Persona and User Journey Maps.

click for affinity map

click for landlord persona

Click here for Landlord User Journey Map

For reference, click to see the Tenant artefacts made by the team:

Tenant A Persona Tenant B Persona

Tenant A User Journey Map Tenant B User Journey Map

Defining the Problem

Please note the artefacts below are synthesised from our collective research.

Insights

These help us interpret the root cause of our findings, to guide our ideation and designs.

INSights

Problem Statements

These keep the focus on our user’s needs and solve their problems in a goal-oriented manner, through our ideation and designs.

problem statements

Jobs-To-Be-Done

These help us find the true needs of our users, by reframing the product’s function as a “job”. I was responsible for both Tenant & Landlord JTBDs.

click for Tenant JTBD

click for landlord jtbd

Ideation

We checked the deliverables against the insights, brainstormed the features, and planned the information architecture.

key features
‍

The user flow describes the main tasks of each user type - Visitor, Tenant, Landlord.

click for user flow

The sitemap shows what features are available to Visitors, and which require log-in.

click for sitemap

Design & Testing

The design sprint was 2 weeks. To kick-off, I assisted my teammate Jenn on the design system.
As I was the only one who has used online auction websites before (eBay), I chose the bidding feature. I also designed the property listing page.
After week 1, I conducted usability tests for the pages we had ready (My Listings & Bidding).
Also after week 1, one of our teammates had a health emergency so we re-prioritised the features and divided his workload between us.

Property Listing

PROPERTY LISTING DESIGN PROCESS

Bidding Process

BIDDING DESIGN PROCESS

Usability Tests

I conducted tests on several features mid-sprint, but the synthesis below is for my work only.
The users are slightly older than our target audience, but they have valuable expertise, from being both Tenant and Landlord for many years.
The key takeaways are: 1) All information and process needs to be simplified 2) Text needs to be bigger.

user feedback & observations for property listing & bidding process

Prototype

The final designs incorporate the user’s and client’s feedback:

The steps and procedures are simplified, for example…
The Property Listing page has large arrows so users know where to click, and the information aligns with the search filter options.
The Bidding process leads to new pages instead opening an overlay, allowing more space for each step.

PROPERTY LISTING & BIDDING PROTOTYPE (that i worked on)

full rental website prototype (worked on as a team)

Reflections & Recommendations

Recommendations

recommendations

Impact of your Work

Our client only had low-fidelity wireframes previously, therefore we provided high fidelity wireframes and prototypes for their rental website.
Our sitemap provided clear information architecture, and can be replicated easily for the future buying/ letting website.
I delivered user flow and designs for the bidding on rent feature, which is not found in other property websites therefore difficult to find references for.
I kept our files and documents in order, which aided our team’s organisation.

Learnings

How to re-focus under time limitations, when our team was short on manpower and capacity.
How to communicate clearly with team members when the team is under pressure.
How to incorporate team member’s components for a consistent design system.
The importance of wireframing - we could not explore more layouts in this project but I believe it would’ve improved our designs.
Usability tests provide invaluable feedback - I only tested on 2 features as the other pages were not ready. Our designs would have benefited from more user insights.