45 Fremont

Optimizing the commercial real-estate leasing experience and creating a new interactive building module experience.

Part 1: Sitemap

Part 2: Interactive Building Module

Salesforce Title Image
Image Overview

Project Details

My Role:

UX Designer


Figma, Google Meet, Monday


3 Months


Savage Bureau


45 Fremont is a newly developed building in San Francisco, California, looking to build their website to promote to audiences that they are available for leasing.

My role on this project was creating the site map, which was intended to become a guide for future Shorenstein property websites to follow.

Additionally, I created the UX Design behind the interactive building module- a key component that helps audiences visualize the possibilities of leasing at 45 Fremont.

Part 1: Sitemap


To better understand the real estate industry, I conducted a competitive analysis, annotating the pros and cons of similar property websites.

desktop iterations


After looking at 7 different property websites and meeting internally, we concluded that the biggest pain point when navigating through real-estate property websites was the differences between content on the Building and Availability pages.

It was often confusing trying to navigate through these two sections as we often wondered where content regarding floor plans or interactive building modules was located.

This led us to ask the question,

“How might we create a stress-free experience when navigating real estate websites?“

Design Thinking

With the information we found from our research, we created two different site maps.

Direction A

Follows more of a traditional route of navigation where the Building and Availability pages are separate from one another.

desktop iterations

Direction B

Reduces the confusion of searching between the Building and Availability pages to find floor plans or the interactive building module. This would create a straightforward experience for users that would reduce stress and unnecessary scrolling.

desktop iterations

These would then be produced into individual wireframes that included the section name and type of content to be included on the page. I then presented to our internal team where we narrowed down which sitemap directions would be best to show to our client.

Direction A

desktop iterations

Direction B

desktop iterations


After the second round of internal reviews, we created higher-fidelity wireframes for both directions, adding potential design layouts with image placement boxes, filler body text, and call to action buttons.

Direction A

Sitemap V2 A Wires V2 A

Direction B

Sitemap V2 B Wires V2 B

Part 2: Interactive Building Module


The most complicated part of the website was creating the interactive building module that allows users to view various floor plans of the different available floors to lease from.

Interactive Building Module References

Low Fidelity


Once we received approval on the branding design, we updated the low-fidelity prototype.

Interactive Building Module Wireframes

Mobile Challenges

The biggest challenge of creating the structure for this module was thinking about how it would work on mobile devices. Ultimately, the solution we thought worked best was to hide the building element and only showcase the chart of available floors to lease from.

Interactive Building Module Mobile


A huge takeaway for me was how wide the spectrum can be for real-estate development websites. When first working on this project, I thought it would be less complex than it actually was. However, I learned a lot about how to design based on content and context.