Simplifying: Property search and booking in 5 steps.
Background and context:
Since 1991, Auckland Property Management (APM) has specialised in property management across Auckland.
APM’s reputation for quality management is hindered by the lack of efficient search features on its website, causing users to scroll through irrelevant listings. Our mission was to design user-friendly solutions which resulted in more precise property searches matching their criteria, reducing unnecessary steps.
The video below shows our final product, delivered in two weeks.
Click here to see the APM website before, and after redesign.
My role:
Create and update jobs to be done
Existing user flow
Problem statement
Proto-persona and user story
Information architecture
Sketches and low-fidelity wireframes
Usability testing
High-fidelity prototype and style guide
My team:
Vasuda Mistry
Karly Cheung
Frederick Hy
Divakar Yadav
Stakeholders:
The following have a vested interest in the product:
APM management and digital team
Users: People interested in, or seeking rental properties
Design process:
My team and I were involved in all stages of the Design thinking process, because we had to deliver a design solution at the end of our two-week time limit.
Project scope:
My team and I had to deliver a high-fidelity prototype that included a precise property search and booking function. We needed to carry out the following tasks, to ensure we designed a product that met business requirements and user needs, in addition to my role above:
Define:
i) Create and list jobs to be done
ii) Conduct a brief competitive analysis of similar websites
iii) Create a user journey map
Ideate:
i) Have regular brainstorming sessions with developers
ii) Decide on low-fidelity wireframes for the MVP
iii) Create revised user flows
Prototype: Hand-off final designs to developers
Jobs to be done:
For maximum efficiency and organisation, it was essential we listed all jobs to be completed. I listed all jobs into our ‘backlog’ in our Kanban board, confirmed these with my team, then we set about completing and assigning tasks.
Existing user flow:
To get a structured view of steps to search for and book a property on APM the website, I created an existing user flow. This was done to get the perspective of a user searching for a new rental property, familiarise myself with the website and also to help begin generating ideas on how we might address user needs.
Click here to see the existing user flow.
Tenants and rental property seekers have difficulty finding relevant search results, leading to frustration and time wasted scrolling through irrelevant property listings. The inefficient search function prevents them from efficiently accessing specific listings, causing information overload and failure to find properties and book viewings.
Problem statement:
Proto-persona:
I had limited stakeholder information in the project brief and time was scarce, so I created a proto-persona to represent our target users. Assumptions about user behaviour were made, but would be tested through the MVP on real users.
User story:
Creating a user story guided functional requirements for our designs, aiding understanding of rental property seekers’ needs and maintaining focus throughout the project.
“As a working professional who is looking for a rental property on the APM website, I want an efficient way to search for properties and book viewings, so that I can find properties that fit my needs”
Information architecture:
I focussed on efficiency and simplicity when working on the information architecture, by referring to the navigation headings and user flow of the existing website, then reducing the steps to complete a property search. It was important to do this, in case users took a different path to search and book a property viewing.
Click here to take a closer look at the image below.
Sketches and low-fidelity wireframes:
My partner and I used Crazy 8s sketches to generate wireframe ideas quickly
Favoured aspects of our sketches were then turned into our own low-fidelity wireframes
After discussing our separate designs and deciding on elements to keep or discard, my partner put together a high-fidelity MVP for usability testing
Click here to view my sketches and low-fidelity wireframes.
Usability testing:
To validate our designs, we carried out just one round of testing with four participants, due to time constraints. Also, testing was done remotely, due to Covid-19 restrictions.
Using Jakob Nielson’s Severity Scale, each pain point was given a rating of 1-4 and led to iterations of our MVP. Analysing our findings this way led to targeted design improvements based on the impact they had on usability.
A few key findings from our testing:
Usability catastrophe: 3 of 4 participants didn’t know what to click first in the search bar
Usability catastrophe: 2 of 4 participants expected a price range for rent
Major problem: 2 of 4 participants didn’t know what to enter in the ‘search’ field of the search bar
Click here to see further details of our usability testing plan and report.
Click here to see a few iterations made, after testing.
High-fidelity prototype and style guide:
Using our MVP, our test findings, and many iterations later, I produced a high-fidelity prototype, which maintained consistency with the APM brand.
Click here to view the final high-fidelity prototype.
Click here to view the style guide.
Project outcome:
At the end of two weeks, we addressed all items in the project scope, and produced a high-fidelity prototype, which:
Had a precise property search and booking function
Was efficient: users could search and book a viewing in 5 steps
Retrospective:
Challenges
This was my favourite and most challenging project. It involved exploring Figma tools, learning shortcuts and improving wireframe efficiency with an intense time pressure. To overcome initial difficulties with prototyping tools, I sought guidance from other designers and practiced with tutorials to successfully achieve my goals.
Future opportunities for growth
My goal was to design an efficient property viewing booking experience that distinguishes APM from competitors like Trade Me and Harcourts. I aimed for a personalised approach, addressing users by name and reducing steps for a seamless journey. I plan to engage users earlier in future projects for stronger brand connection.