BruinPlace — Campus Housing Platform

BruinPlace is a digital housing platform built to help UCLA students find off-campus housing. I explored user flows and designed UI/UX aimed at increasing transparency and reducing friction in a high-stakes search process.

Timeline
Jan–Mar 2026
Scope
Map search, filters, split-screen browsing
Team
2 leads, 4 designers, 6 engineers
Role
Product Designer
BruinPlace on a MacBook — listings, map, and search for student housing near UCLA

Context

After 30+ user interviews and 100+ survey responses, UCLA students had three main issues with the off-campus housing search:

  1. 1

    Listing information doesn’t account for student needs

  2. 2

    Need to navigate dozens of platforms to see all options

  3. 3

    Lack of trustworthiness for listings and posters

This is how students find housing today.

Student is interested in findinga place off campusFB Marketplace / RedditApartments.com / ZillowInstagram / SnapchatFriends / FamilyPiece together scatteredinformation to find best listingMake sure listing is trustworthyConfirm student reviews,distance from campus, etc.Reach out and negotiate terms= high risk= consequence

Final design

A local housing marketplace that is centralized, personalized, and trustworthy.

Listings acrossdozens of platformsStudent-specificlisting informationBuilt-in trust withUCLA verificationStudent is interestedin finding a place offcampusSearch, filter, and identifylistings on one consolidatedmarketplaceReach out andnegotiate terms
Final screens, rebuilt in HTML from the Figma file. Scroll inside the window and click through them like the prototype, or open the original Figma prototype.
BruinPlace home, map search, listing detail and profile screens
Reviews section and the add review formReviews
  • Review categories like management and cleanliness
  • Add photos and corresponding date
User profile with favorited buildings and reviewsUser Profiles

Users can access their favorited listings, including both favorited buildings and units

Reviews left by the user are also displayed here, to help inform others’ searches

Key Decisions

01 Split screen instead of a map toggle

We benchmarked the platforms students already used. Each was strong at one thing, and none was built around a student’s search.

CompanyBest forCore strengthsMain drawbackUX takeaway
ZillowBroad home search and market researchLarge inventory; powerful filters; maps and neighborhood dataBroad audience can make the experience feel busyBest benchmark for search depth and market information
Apartments.comRental discovery and comparisonRental filters; amenities; commute insights; 3D toursReviews and listing details can be inconsistentBest benchmark for detailed rental evaluation
realtor.comHome buying with agent supportBuyer-focused tools; new listings; mortgage and agent featuresDense information and slower map experienceBest benchmark for guided home buying
RedfinBuying or selling with brokerage supportFast listing updates; pricing history; agent integrationLess focused on rentals and student housingBest benchmark for transaction flow and transparency
Browse FlowHome Page• Listing grid• MapListing grids• New listings• RecommendedlistingsMapSpecific listing(Overlay preview,then new tabwhen clicked)FilteringOptionsMap info• Zoom in/out• Layers• FilterListing• Images of unit• Price• Size• Bed & Bath• Amenities• Distance from campus• ReviewsSee MoreSame filtering optionsFilters• Sort by rating• Monthly rent range• Availability (for sale/for rent/sold)• Distance to campus (miles/walking time)• Room type (apartment/house)• Room capacity (bed bath count)

What we chose. A split screen that keeps listings and the map side by side, so students compare places and see where they are at the same time, without switching views.

What testing changed. Students couldn’t find split-screen, so it moved into the header.

Browse screens: sort menu, split screen listings and map, and filter panelsBrowseUsers can navigate the site easily and specify exactly what they are looking for
  • Split screen navigation
  • Filtering options

02 Sorting in students’ words

What testing changed. “Highest to lowest” read as price, not rating, so it was renamed “Top rated.”

03 Buildings and units as separate listings

We split listings into two types, buildings and units, mapped how each one gets posted, and gave both a sticky contact card so reaching a lister is one click away.

Post ListingFlowListing PageEditListingAdd alisting /“+” buttonRemoveListingListing form• Photos• Price• Address• DetailsYes/NoPreview listing(How it would lookfor the viewer)• Photos• Price• Address• DetailsPublishListingListing displayedon marketplace
Account neededto make a reviewor post a listingCreateAccountFlowHome PageSign-inButtonSign-in screen that shows:• Empty fields + “Log-in”button• “Don’t have an account?”+ Create account button• “Forgot password?”buttonClick“forgotpassword”Sendrecoveryemail screenClick “don’thave anaccount”Sign-in withUCLA screenSign-in with UCLAonly duringaccount creationCreateaccountscreenAfter logging in with UCLA log on,autofills some infoEnter in log-indetails + Click“log-in”Takes userto homepage

What testing changed. Buildings and units still blurred together, so a toggle now separates them.

Building and unit listing pages with the contact cardBuilding & Unit Listings
  • Separate listing types for buildings and units
  • Sticky contact card in order to easily reach out to listers

04 A design system on top of shadcn/ui

I explored multiple layouts for listing cards and detail pages, each one reducing clutter and improving hierarchy and scanability.

Four early listing card wireframes and the finalized listing cardEarly listing card iterationsFinalized listing card

What we chose. Our developers asked us to build on the shadcn/ui kit. We customized its components to fit our branding and stay consistent across screens, and I fleshed out the button elements of the design system.

BruinPlace design system components

Impact

User interviews
30+
Survey responses
100+
Fixes from usability testing
3

Research shaped the structure of the product, and usability testing changed it three times before handoff: split-screen moved into the header, sorting was relabelled “Top rated,” and a toggle now separates buildings from units.