Ian J. Smith
Back to All Projects

Elevating Luxury Real Estate: Immersive Interactions & Custom Animation

Telling a story and adding life to a public-facing Bay Area real estate company website

Project Overview

While working for High Seas Consulting, one of our primary clients was Paragon Real Estate Group, a prominent luxury real estate company based in the Bay Area. We developed a visually stunning public-facing website for them that not only showcased high-end properties but also provided an immersive and engaging user experience.

My Role

As a frontend developer, my responsibilities included implementing the redesigned user interface, deciding on frontend technologies and architecture, developing custom animations, and collaborating closely with our design team to bring their vision to life.

Objectives

  • Striking Visual Design: Deliver a redesigned website to reflect the sophistication and elegance associated with luxury real estate.

  • Welcoming User Experience: Develop intuitive navigation and interactive animations to engage and captivate users.

  • Intuitive Search Features: Allow for an easy search experience and implement animations to showcase neighborhood details and amenities in an elegant and compelling manner.

Challenges

  1. 1

    Outdated Interface: The existing website lacked the visual appeal and modern design expected in the luxury real estate market.

  2. 2

    Limited User Engagement: Users were not staying on the website long enough to explore the unique features of each property.

  3. 3

    Competition in the Bay Area: With fierce competition in the real estate market, the website needed to stand out as a premier destination for luxury property seekers.

Solution

Key Contributions

Custom Typographic Animations

I implemented custom animations and transitions on one of the marketing pages to demonstrate the sleekness and cutting-edge emotions that Paragon wanted to evoke.

Working closely with our design team, I ensured that the assets on the page rendered and transitioned as intended.

Paragon animation screenshots

Translated Animations

Based on the reception and success of the initial animated marketing pages, I also implemented special pages that presented the same animations in Simplified and Traditional Mandarin Chinese to expand Paragon's reach in the Bay Area market.

Working closely with a translator, I ensured that the animations of each stroke were implemented in the proper order and direction based on how each Chinese character is written by hand.

Paragon Chinese animation screenshots

Interactive Regional Maps

I added interactivity when I worked on a section of the site that let users explore the various regions and neighborhoods that Paragon operated out of.

Using SVG assets and simple CSS rules, I was able to implement impactful interactions that aided in the search and discovery and education about the different Bay Area neighborhoods.

Paragon map screenshots

Intuitive Search & Discovery

I implemented a clean search interface with simplified initial parameters that led users to a more detailed results page, allowing for further refinement and discovery.

All user interface components were consistent with the Paragon brand and further exemplified the elevated visual aesthetic they desired.

Paragon search screenshots

Technology Highlights

React logo

Reusable Components

The entirety of the Paragon website was built using the React framework, useful for its reusable components and widespread adoption

CSS logo

Clean Styles & Animation

All basic typographic animations and regional map interactions were achieved with simple CSS rules, reducing bundle size and the need for unnecessary JavaScript

SVG logo

Useful Vector Assets

Graphic assets were rendered using SVG files because of their easy integration with React and the ability to render directly to the DOM

Results & Impact

Metrics

  • Competitive Edge: The redesigned website contributed to the company's differentiation in the competitive Bay Area real estate market.

  • User Engagement: The launch of the redesigned Paragon site saw a large increase in user engagement, leading to a higher likelihood of users exploring multiple property listings.

Impact

The revamped frontend and animations elevated Paragon's online presence, positioning it as a premier destination for high-end property seekers in the Bay Area.

Our team's work also contributed to the eventual acquisition of Paragon Real Estate Group by Compass in 2018, forming what is still San Francisco's largest real estate brokerage.

Reflection

The redesign of the frontend and animations for Paragon was a collaborative effort that successfully transformed the digital presence of the luxury real estate company. As a frontend developer, this project allowed me to showcase my skills in creating visually appealing and engaging user interfaces, contributing to the company's success in a competitive market.

It was also a great experience collaborating with our design team to add interactivity to a site and have back and forth conversations on what was and wasn't possible to implement given the project timeline and requirements.

Lessons Learned

  • JavaScript Isn't Always the Answer: As powerful as JavaScript is, oftentimes there are more lightweight solutions that allow you to achieve the same functionality

  • Respect Goes A Long Way: Chinese users of the site were delighted with the attention to detail with the animations, showing the power of paying attention to the small things

Future Recommendations

Now that more time has passed since product launch, I recommend exploring emerging technologies such as VR or AR to further enhance the immersive nature of the luxury real estate browsing experience.

PREVIOUS PROJECT:

WA Department of Health

Vaccine Locator

NEXT PROJECT:

Astarte Biologics

Biotech Inventory Management