Housing Hawk: University housing
Housing Hawk:
University housing
Helping students find housing near campus.
Helping students find housing near campus.
I am currently working @ Housing Hawk
Product designer
I am currently working @ Housing Hawk
Product designer
Introduction
Introduction
Org.
Housing Hawk (Plazio)
Field
Product Design
Year
2025
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, and an easy to use, exclusive short-term leasing platform for students.
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, and an easy to use, exclusive short-term leasing platform for students.
Org.
Housing Hawk (Plazio)
Field
Product Design
Year
2025
1st problem: Differentiating the Sign-up
1st problem:
Differentiating the Sign-up
Underneath are the 3 different sign-up processes in production for HH.
Underneath are the 3 different sign-up processes in production for HH.
For the platform to function, it needed to work for 3 main groups, students looking for a place, students looking for roommates, and the landlords.
The 4th group would be developed as a version for the brokers, which would be managed by the company.
For the platform to function, it needed to work for 3 main groups, students looking for a place, students looking for roommates, and the landlords.
The 4th group would be developed as a version for the brokers, which would be managed by the company.
The Challenge
The Challenge
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.
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.
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
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;
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;
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.
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!
