Leo Fu

Work

Resume

About

Art

Leo Fu

Work

Resume

About

Art

Housing Hawk: University housing

Housing Hawk:

University Housing

How I helped students onboard a brand new platform to find housing near campuses & building an intuitive user flow.

OVERVIEW

Company

Housing Hawk (aka Plazio)

Role

Product designer

Timeline

Feb. 2025 - Sept. 2025

Toolkit

Figma, Tailwind, JS, Google Workspace

Company

Housing Hawk

Role

Product designer

CONTEXT

What is Housing Hawk?

Housing Hawk (HH) is a web based platform aiming to help students find housing near their future or current campuses. As of March 2025, HH is currently partnered with 4 universities on the island of Montreal.


HH is offering a highly functional dashboard for landlords, an easy to use short-term leasing platform for students, and a swipe to match feature for students looking for potential roommates.


As the sole designer in a lean startup environment, I was tasked with building the entire style guide for HH while optimizing the information architecture and user flows.

Find the perfect

Find the perfect

Appartment

Appartment

Discover spaces you'll truly connect with, in locations that fit your lifestyle.

Discover spaces you'll truly connect with, in locations that fit your lifestyle.

Find the perfect

Appartment

Discover spaces you'll truly connect with, in locations that fit your lifestyle.

Find awesome

Find awesome

Roommates

Roommates

Discover individuals you'll genuinely enjoy sharing your space with.

Discover individuals you'll genuinely enjoy sharing your space with.

Find awesome

Roommates

Discover individuals you'll genuinely enjoy sharing your space with.

Landlord?

Landlord?

List your property

List your property

Connect with qualified renters who will appreciate and care for your property as their own.

Connect with qualified renters who will appreciate and care for your property as their own.

Landlord?

List your property

Connect with qualified renters who will appreciate and care for your property as their own.

The 3 main feature cards we offered on the homepage. (Essentially all that we offer)

INTRODUCTION

1st problem: Differentiating the
sign-up flow between 3 types of users

For the platform to function, it needed to work for 3 main groups:


  1. students looking for a place

  2. Students looking for roommates

  3. Landlords renting out their properties


The 4th group would be developed as a version for the brokers, which would be managed by the company.

Upon clicking any sign up button (fig. 1),

users are presented with these 3 options (fig. 2)

fig. 1

fig. 2

  1. ->

  1. ->

  1. ->

Challenge #1

Designing for students and landlords comes with the challenge to create a sign up process that makes it easy to differentiate which version the user will eventually see.


It was imperative to ensure that users could get the functionality they desired, as fast as possible.

Challenge #2

Designing for students and landlords comes with the challenge to create a sign up process that makes it easy to differentiate which version the user will eventually see.


It was imperative to ensure that users could get the functionality they desired, as fast as possible.

PROCESS

My solution for the sign-up flow

My solution for the

sign-up flow

To address these issues and improve time spent, I implemented 2 key design choices when designing the sign-up flow:

To address these issues and improve time spent, I implemented 2 key design choices when designing the sign-up flow:

Differentiation process (1)


I made a step by step sign up process, and on the first step, I made sure to differentiate all 3 options, right after linking a phone number, email or account.

Highlighting the landlord CTA made it stand apart from both the tenant flows, the use of yellow on the first step for property owners establishes an early association between the color and the landlord view of the HH platform.

Differentiation process (1)


I made a step by step sign up process, and on the first step, I made sure to differentiate all 3 options, right after linking a phone number, email or account.

Highlighting the landlord CTA made it stand apart from both the tenant flows, the use of yellow on the first step for property owners establishes an early association between the color and the landlord view of the HH platform.

Finishing with relevant CTAs (2)


After the final step (5) of the sign-up process, users would be shown 1 of 4 options. Potential tenants share a "set up your profile" CTA, we decided to not bury the user with too many questions and forms to fill on the first sign-up. The result being a gamified reminder for users to finish setting up their account.


For instance, some listings require their potential tenants to have completed at least 90% of their account setup, this gave landlord options for how selective they wanted to be as far as information goes.


  • If you were aiming to become a future tenant, you'd have a "browse listings" CTA.


  • For people looking for roommates, they'd have a "start swiping" CTA.


  • And for landlords/property owners, they'd be shown a "manage listings" or "list property" CTA

Finishing with relevant CTAs (2)


After the final step (5) of the sign-up process, users would be shown 1 of 4 options. Potential tenants share a "set up your profile" CTA, we decided to not bury the user with too many questions and forms to fill on the first sign-up. The result being a gamified reminder for users to finish setting up their account.


For instance, some listings require their potential tenants to have completed at least 90% of their account setup, this gave landlord options for how selective they wanted to be as far as information goes.


  • If you were aiming to become a future tenant, you'd have a "browse listings" CTA.


  • For people looking for roommates, they'd have a "start swiping" CTA.


  • And for landlords/property owners, they'd be shown a "manage listings" or "list property" CTA

#070707

#070707

#4B64FF

#4B64FF

#070707

#070707

Main CTA button colors.

2nd problem: Shipping components to code

2nd problem:

Shipping components to code

The Challenge

The Challenge

The current components were too complex. After review, the dev team deemed that they were too constrained by time.


It was ideal to make the coding part of the project as fast as possible, while maintaining a clean and functional UI.


The current components were too complex. After review, the dev team deemed that they were too constrained by time.


It was ideal to make the coding part of the project as fast as possible, while maintaining a clean and functional UI.


My solution for faster design to code

My solution for faster

design to code

To address the challenge in an efficient manner, I implemented a streamlined process to convert my designs to code:

To address the challenge in an efficient manner, I implemented a streamlined process to convert my designs to code:

Radix by WorkOS: design system building blocks


Instead of converting every component to code and then figuring out the animations, our team decided to use Radix's components to build HH. What makes this so much easier is the styling, the animations are already done, the dev team only have to change the styling via Tailwind CSS.


Radix has a detailed guide on their website the developers can use to streamline the design -> code process.

Finishing with relevant CTAs (2)


After the final step (5) of the sign-up process, users would be shown 1 of 4 options. Potential tenants share a "set up your profile" CTA, we decided to not bury the user with too many questions and forms to fill on the first sign-up. The result being a gamified reminder for users to finish setting up their account.


For instance, some listings require their users to have completed at least 90% of their account setup, this gave landlord options for how selective they wanted to be as far as information goes.


  • If you were aiming to become a future tenant, you'd have a "browse listings" CTA.


  • For people looking for roommates, they'd have a "start swiping" CTA.


  • And for landlords/property owners, they'd be shown a "manage listings" or "list property" CTA

index.jsx

tailwind.config.js

Expand code

import * as React from "react";

import { Label } from "radix-ui";

const LabelDemo = () => (

<div className="flex flex-wrap items-center gap-[15px] px-5">

<Label.Root

className="text-[15px] font-medium leading-[35px] text-white"

htmlFor="firstName"

>

First name

</Label.Root>

<input

className="inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded bg-blackA2 px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] shadow-blackA6 outline-none selection:bg-blackA6 selection:text-white focus:shadow-[0_0_0_2px_black]"

type="text"

id="firstName"

defaultValue="Pedro Duarte"

/>

</div>

);

export default LabelDemo;


index.jsx

tailwind.config.js

Expand code

import * as React from "react";

import { Label } from "radix-ui";

const LabelDemo = () => (

<div className="flex flex-wrap items-center gap-[15px] px-5">

<Label.Root

className="text-[15px] font-medium leading-[35px] text-white"

htmlFor="firstName"

>

First name

</Label.Root>

<input

className="inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded bg-blackA2 px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] shadow-blackA6 outline-none selection:bg-blackA6 selection:text-white focus:shadow-[0_0_0_2px_black]"

type="text"

id="firstName"

defaultValue="Pedro Duarte"

/>

</div>

);

export default LabelDemo;


index.jsx

tailwind.config.js

Expand code

import * as React from "react";

import { Label } from "radix-ui";

const LabelDemo = () => (

<div className="flex flex-wrap items-center gap-[15px] px-5">

<Label.Root

className="text-[15px] font-medium leading-[35px] text-white"

htmlFor="firstName"

>

First name

</Label.Root>

<input

className="inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded bg-blackA2 px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] shadow-blackA6 outline-none selection:bg-blackA6 selection:text-white focus:shadow-[0_0_0_2px_black]"

type="text"

id="firstName"

defaultValue="Pedro Duarte"

/>

</div>

);

export default LabelDemo;


An example of the tailwind CSS provided by Radix for the label component.

https://www.radix-ui.com/primitives/docs/components/label

1.

1.

Complete designs in Figma

Complete designs in Figma

2.

2.

Ship approved models to Swift CSS

Ship approved models to Swift CSS

3.

3.

Tweak styling via Radix's component library

Style via Radix's component library

New workflow.

New workflow.

Current result

Current result

By addressing some key issues that halted our progress, Housing Hawk's web experience evolved from a bare-bones functionality based platform to an easy to use and engaging experience, while retaining the functionality and improving the the accessibility to our essential features.


Iterating on old designs and having user testing helped shaping the final product, the main goal was to make it work for the people after all.

By addressing some key issues that halted our progress, Housing Hawk's web experience evolved from a bare-bones functionality based platform to an easy to use and engaging experience, while retaining the functionality and improving the the accessibility to our essential features.


Iterating on old designs and having user testing helped shaping the final product, the main goal was to make it work for the people after all.

3rd problem: probably coming soon

3rd problem:

probably coming soon

As I am still employed, there are bound to me more problems for me to solve via design, I hope this case was insightful and I hope that I can help more people by making more usable and wonderful products!

As I am still employed, there are bound to me more problems for me to solve via design, I hope this case was insightful and I hope that I can help more people by making more usable and wonderful products!

Back to top

Back to top

Back to top

Contact

Resume

Email

LinkedIn

I want to make wonderful things, for wonderful people.


Leo Fu

Made with love

© 2024 Leo-Yilu Fu. All Rights Reserved.

Contact

Resume

Email

LinkedIn

I want to make wonderful things, for wonderful people.


Leo Fu

Made with love

© 2024 Leo-Yilu Fu. All Rights Reserved.

Contact

Resume

Email

LinkedIn

I want to make wonderful things, for wonderful people.


Leo Fu

Made with love

© 2024 Leo-Yilu Fu. All Rights Reserved.

Leo Fu

Leo Fu