INFORMATION ARCHITECTURE
0→1 PROJECT
DESIGN SYSTEM
✦ Designing a scalable housing marketplace for students, by students.
Built the marketplace's core browsing experience, including split-screen map exploration, listing detail pages, and a scalable design system.
Jump to solution
ROLE
Product designer
TOOLS
Figma
Adobe Illustrator
TIMELINE
Jan - Mar 2026
(8 weeks)
TEAM
1 project manager
2 project leads
4 product designers
6 developers
Overview
Finding off-campus housing is one of the biggest challenges students face. Instead of searching one trusted platform, students need to scan through Facebook groups, apartment websites, word of mouth—often comparing inconsistent or outdated information.
BruinPlace was created to bring that fragmented experience into one centralized marketplace, built specifically for UCLA students.
SNEAK PEEK
Off-campus housing, made easier
As a product designer working with 3 other designers, I owned the design system—including cards, interactive components, and branding—as well as the lease detail pages.
RESEARCH
We discovered the real problem wasn't finding housing—it was comparing it
Through 30+ interviews and 100+ survey responses, we found that students weren't overwhelmed by the number of listings—they were overwhelmed by the search process itself.
Existing platforms prioritized volume over clarity, forcing students to compare scattered information across multiple sites.
Housing information rarely highlighted what students actually cared about.
Students relied on multiple websites just to explore their options.
It was difficult to know which listings and posters were legitimate.
PROBLEM
How might we make off-campus housing easier to compare for UCLA students?
Rather than redesigning another listing website, we focused on reducing the mental effort required to compare housing. Every design decision centered around making information easier to scan, understand, and trust.
USER FLOW
Defining the browsing experience
I mapped the browsing flow, which served as the core component of BruinPlace: a listing/map split-screen navigation.
Then, I connected my flow with the other designers' flows. This allows us to address inconsistencies across our flows, contributing toward a cohesive user experience.
Browse page flow (map/listings split-screen).
CHALLENGE
One question shaped the entire experience: should listing details open as a pop-up, or on a dedicated page?
One challenge we ran into was how to display an individual listing's information. We explored different options for listings.
A pop-up…
User flow: Listing card → pop-up showing key info
Pro: Kept users on the browsing page, avoiding multiple tabs
Con: With more details and information, it can become crowded
…or a new tab?
User flow: Listing card → new tab
Pro: Gives students breathing room to explore and compare multiple listings
Con: Too many tabs, which can create a messier experience
Ultimately, we chose a full-page view—its larger space accommodates the dense amount of information included in listings, while providing better flexibility to compare choices.
LOW-FI IDEATION
Simplifying before polishing
With the user flow established, I explored multiple layouts for listing cards and detail pages. Each iteration focused on reducing visual clutter while improving hierarchy and scanability.
Sublet card iterations.
Listing card iterations.
For the listing page, I collaborated with another designer before combining our strongest ideas into a cleaner, more streamlined solution.
My main focus was highlighting only essential information to the user, presented in a way that wouldn't overwhelm them.
DESIGN SYSTEM
Refining the interface
With multiple designers working simultaneously, consistency became just as important as usability.
Building on shadcn/ui, I customized reusable components that aligned with our visual direction while making implementation easier for developers.
Project components.
USER TESTING
Watching students use the prototype changed our priorities
I conducted usability tests with six participants to evaluate navigation and discoverability. While most tasks were completed successfully, several recurring friction points emerged.
Moved the toggle into the header.
Added clearer affordances.
Added supporting visuals and clearer labels.
FINAL SOLUTION
✦ Browse with confidence
Students can quickly distinguish between buildings and individual units using simplified cards that surface only the most important information.
FINAL SOLUTION
✦ Compare housing naturally
Interactive maps and split-screen browsing make it easy to explore neighborhoods while comparing listings side by side.
FINAL SOLUTION
✦ Build trust through community
Student-generated listings and reviews create a marketplace that's more transparent than traditional rental platforms.
IMPACT
The results of an 8-week project
Gathered insights from 30+ interviews and 100+ survey responses
Developed a scalable design system with 20+ reusable components
Conducted one-on-one usability tests with 6 users
Contributed to a shippable design in less than 8 weeks
REFLECTION
What I'd improve next…
Designing BruinPlace reinforced that good UX isn't about showing more information—it's about helping people make decisions with less effort.
If I continued the project, I'd expand the experience for realtors and refine user flows.
