Plazio: 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

Plazio (aka Housing Hawk)

TIMELINE

Feb. - Sept. 2025

ROLE

Product + ux/ui designer

TOOLKIT

Figma, Tailwind CSS, JS, Google workspace

CONTEXT

WHAT IS PLAZIO?

Plazio is a web platform that helps students find housing near their campuses. It features a streamlined leasing experience, a roommate matching tool, and a landlord dashboard.

HOW DID I ADD VALUE?

HOW DID I ADD
VALUE?

As the sole designer in a lean startup, I created the full style guide and implemented new streamlined workflow to accelerate delivery.

DISCOVERY

INTERNAL
FINDINGS

INTERNAL FINDINGS

Our internal review with the development team revealed that several components in the product were too complex to implement within the project timeline.


We grouped these challenges into two categories:

Technical complexity

"We don't have enough time in the day to ship these components."

"Could you possibly make the drop-downs a bit simpler?"

Design vision

"Why is there red on the search button?"

"Let's change the font-family used here so they match the designs."

PROBLEM 1

SHIPPING COMPONENTS
TO CODE

SHIPPING COMPONENTS TO CODE

In the lean startup environment, completing sprints every week was necessary.


Despite being the only designer in the team, I was still out-pacing the developers in our development pipeline.

THE CHALLENGE

The components were too complex/ambitious. After review, the dev team concluded that there would be too many time constraints to effectively develop each one.


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

MY SOLUTION

To address these issues and improve efficiency, we decided to change our development pipeline with help from external tools.

PROCESS

NEW
DESIGN-TO-CODE
PROCESS

NEW DESIGN
TO CODE PROCESS

Radix by WorkOS :
design system building blocks

Radix by WorkOS :
design system building blocks

We skipped coding components from scratch by using Radix.


Animations came pre-built, so I only had to style them with Tailwind CSS, cutting complexity and speeding up design-to-code.

We skipped coding components from scratch by using Radix.


Animations came pre-built, so I only had to style them with Tailwind CSS, cutting complexity and speeding up design-to-code.

Before

Raw dropdown components from Radix.

Raw segmented options components from Radix.

After

Edited version of the dropdown menus.

Edited version of the segmented options.

COMPLEX
COMPONENTS

COMPLEX COMPONENTS

COMPLEX
COMPONENTS

By nesting the new components into bigger systems, I could build larger components with more complexity without pushing back on time constraints.

By nesting the new components into bigger systems, I could build larger components with more complexity without pushing back on time constraints.

RESULTS

HAPPY DESIGNER
HAPPY DEV
HAPPY LIFE <3

HAPPY DESIGNER
HAPPY DEV
HAPPY LIFE

Our updated workflow let developers focus on engineering while resolving design vision gaps.


Instead of handing off raw Figma files, I shipped styled code blocks alongside the designs.


This cut down the time devs spent on styling and gave me more control over the final product’s look and feel.

FIXES

~50%

Fewer visual QA fixes needed before release

PRODUCT SHIPPING

2X

Faster design-to-code handoff.

TIME ON TASK

40%

Reduction in dev time spent on styling.

REFLECTIONS

MY FIRST INTERNSHIP

I'd like to thank everyone for taking a chance with me. My awesome mentors, coworkers, and bosses are all very hardworking and amazing people.


I'm glad I got to work in such an agile environment, I learned so much working so many hats.


Thank you for reading through this!

We can't solve problems by using the same kind of thinking we used when we created them.


  • Albert E.

Made with whatever my mom cooks.

© 2025 Leo-Yilu Fu. All Rights Reserved.

We can't solve problems by using the same kind of thinking we used when we created them.


  • Albert E.

Made with whatever my mom cooks.

© 2025 Leo-Yilu Fu. All Rights Reserved.

We can't solve problems by using the same kind of thinking we used when we created them.


  • Albert E.

Made with whatever my mom cooks.

© 2025 Leo-Yilu Fu. All Rights Reserved.