Lori Mae Watt – Product Designer
Sydney, NSW
Doorknock
.png)
Project Overview
New Zealand’s property market is broken. Home ownership reached a record low of 64% in 2018, and unsurprisingly: we have one of the highest house-price to income ratios in the world. Doorknock cofounders Tim and Luke experienced this frustration first-hand when they started house-hunting a couple of years ago. The lack of affordability was loud and clear, but other problems also came to light when they found themselves squeezing their way through the hallway of a packed open home. For those able to afford a house, there was too high demand and too little supply. Competition was fierce. Developers sat in the pockets of real estate agents and seemed to get first dibs. There was just no hope for young first-home buyers like themselves. They found themselves in a classic ‘there must be a better way’ moment. Which, as often occurs, birthed an idea. Doorknock is a revolutionary early-stage startup that will soon transform how the housing market works (or doesn't work). Maybe you drive past your dream house everyday, patiently waiting for it to go on the market. Soon you won't have to wait, you'll simply be able to go online, type in the address and Doorknock it. You could do the same with entire neighbourhoods if you wish, and the best thing is that all the work will be done by a real estate agent who will out on your behalf to knock on the door and ask the owner if they're thinking about selling.I connected with the Doorknock founders while looking for startups to gain some real-world experience with, pro-bono, straight after I completed my Postgrad in Design. Little did I know I would go on magical a three-month journey working closely with the founders from the foundations of strategy and branding right through to high-fidelity design of their web app. It made the perfect end-to-end project for a junior designer craving some on-the-tools experience.
Responsibilities
Strategy
Foundational user research
Personas
User journeys
Sketches & wireframes
Interactive prototypes
User testing
High-fidelity design
Foundational user research
Personas
User journeys
Sketches & wireframes
Interactive prototypes
User testing
High-fidelity design
Timeline
3 months each, 2022 & 2024
Deliverables
High fidelity designs for two native mobile apps, each with own design system
Step 1
User research
I spoke with 4 real buyers, investors and homeowners in the team’s extended circles. These were people that hadn’t heard of the idea - friends and friends of friends who hadn’t previously been sounding boards for Tim or Luke and were therefore more objective. This was an extremely valuable step which revealed their current pain-points when it came to buying and selling, their initial impressions of the product, their immediate concerns or questions, and their desired functions. It refined our elevator pitch and revealed how we could improve upon the current MVP.
Step 2
User definition
I identified Doorknock’s three main users: buyers, investors and homeowners. Personas, empathy maps, user stories and user journeys brought these groups to life. The work gave the team greater empathy for and clarity about their intended audience, triggered important conversations around what we were doing, why and who for.
Step 3
The competition
Next, I undertook a mini competitive analysis. As you can imagine, current real estate websites do the job but often lack the personality and thinking that underpins those businesses that everybody knows and loves. We wanted to make Doorknock a household name, a badge of honour. So this analysis identified ways we could differentiate ourselves from the competition through imagery, colour, branding, function and style.
Mapping the user's path
Mapped out the user flows of the entire app, before presenting these to stakeholders. The response was hugely positive, but as always it still sparked important discussions that led to tweaks here and there until we landed on a complete and final flow.
Step 4
Branding
Doorknock’s previous logo was built in Canva and desperately needed a refresh. Using the information gathered during the research phase, I created a new type-logo that better conveyed Doorknock’s values and positioning in the market, and stood out from the crowd.Using colour psychology and harmony, I identified a balanced colour palette that bravely distinguished the brand from others in the real estate market.Typography choice was key. I identified a type that played well with the logo, was simple and easy to read, and further shaped Doorknock’s character.I presented the new brand identity to the team, using mockups of billboards and posters to illustrate the new look and feel.
Step 5
User flows
Because Doorknock is a completely new concept, thinking through the information architecture of the website would prove crucial. “Keep it simple, stupid” was my mantra here. We already knew that we could differentiate ourselves from other property sites by following a minimalistic approach, since other sites are often overwhelming and overstimulating. Identifying key user flows helped shape the sitemap. I endeavoured to keep the click count down. We also worked together to decide which features would be included in the first phase of the business and which would be added on later as it grew.
Step 6
Sketches etc
I then got to work ideating how each screen could look. I looked to other successful and beautifully-designed websites for inspiration, including those the team had identified as matching the look and feel they were going for.I quickly mocked up my ideas into basic sketches, to get my thoughts down on paper.These sketches were then transformed into wireframes which I bounced off the team. Motivation levels were high as the product began to be pieced together!I then created a low-fidelity clickable prototype using Invision. The prototype was split into user flows for greater clarity.
Mapping the user's path
Mapped out the user flows of the entire app, before presenting these to stakeholders. The response was hugely positive, but as always it still sparked important discussions that led to tweaks here and there until we landed on a complete and final flow.
Step 7
Feedback loop
Testing the wireframes using interview guides proved invaluable. Using think-aloud, first-impression and single-task testing methods I was able to identify problem areas as well as receive feedback on the information architecture of the marketing pages. In general, the users flowed quite intuitively through the design and I was pleased with the result.
Step 2
Identifying pain points
Researched apps that performed similar functions (plant identification) to understand common design patterns.
Step 3
Mapping the user's path
Mapped out the user flows of the entire app, before presenting these to stakeholders. The response was hugely positive, but as always it still sparked important discussions that led to tweaks here and there until we landed on a complete and final flow.
Mapping the user's path
Mapped out the user flows of the entire app, before presenting these to stakeholders. The response was hugely positive, but as always it still sparked important discussions that led to tweaks here and there until we landed on a complete and final flow.
Identifying pain points
In the perfect world, I would have loved to begin this journey with 1-1 interviews with frontline police users. However, this wasn't as simple as it sounds, with our police people hot in demand on the ground. So I did my best to utilise a recent user survey and discussions with stakeholders to formulate personas, empathy maps and user stories while ESR discussed the possibility of user interviews with their connection in the NZ Police's Service Design Team.
Identifying pain points
Researched apps that performed similar functions (plant identification) to understand common design patterns.
Mapping the user's path
Mapped out the user flows of the entire app, before presenting these to stakeholders. The response was hugely positive, but as always it still sparked important discussions that led to tweaks here and there until we landed on a complete and final flow.
Mapping the user's path
Mapped out the user flows of the entire app, before presenting these to stakeholders. The response was hugely positive, but as always it still sparked important discussions that led to tweaks here and there until we landed on a complete and final flow.
More Projects
.png)
Lumi Analysis
A native mobile app used by the New Zealand Police to identify illegal substances on the go, supported by a calibration app.
Betterway
Founding designs for a peer-to-peer postal service that connects people who need to send stuff with others driving that way.
.png)
Serato
A native mobile app helping renters visualise their rent payments and manage maintenance requests for a US customer base.