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.

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

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?“

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.

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.

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

Direction B

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

Direction B

Side-By-Side Comparison

Our client opted for Direction B. Here is a side-by-side comparison of the home page template and the final website.

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.

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

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.

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.