Loading ...

Responses by Bonnie MacTavish, head of experience strategy; Ahmed Meer, head of design technology; and Christine Sultana, managing director, Nightjar.

Background: Fifth-generation Texan rancher Brandon Bownds is a property broker with a difference. From our first meeting with him and his partner Kim, we knew this was going to be a special project. They came to us with a clear brief: create an experience that surpasses their local competitors. We wanted to go one better and set the standard for a property site globally.

Our key target audience was sellers of premium ranches. It’s currently a tough market, and we had to showcase Bownds as going above and beyond for their clients. It was the hard work that was already going on behind the scenes that needed to be brought to the forefront.

Design core: We revamped Bownds’s powerful bull logomark and paired it with the iconic GT America typeface. With a focus on appealing to owners of premium ranches who may be looking to sell, we decided to treat every listing like a blockbuster movie: big type, interactive features and the dialing up of incredible property content with oversize image blocks and full-width video.

Favorite details: The site is lightning fast, and every transition is seamless. It’s the small details, such as the way the hero image loads on a slight rotation, that make all the difference.

The 404 page is pretty great, too. We created a 3-D version of the logo and rendered it in three.js, using a basic reflective material and a sunset HDRI to really capture that Texan ranch vibe!

Challenges: The torn paper effect used on the calls to action was tricky. We solved that with an SVG in CSS masks.

The split text animations that contained images also took a bit of finessing. The immersive design means the site is very layered, so making sure the z-indexes were all playing nicely and managing stacking contexts kept us awake for a few nights.

Navigation structure: We made the nav intentionally simple to keep the user focused. An interested buyer landing on the site will know exactly where to go—likewise with a keen seller. It also happened to be a perfectly visually pleasing symmetry! Call-to-action buttons guide users to the next step, and the property index page’s filters are pulled out, showing the breadth of property types that Bownds represents.

Special navigational features: Hovering calls to action encourage users to jump in and immerse themselves in the content. We also wanted to make sure it was easy for people to get in touch directly with Brandon, so the homepage and ranch pages feature several points for the user to contact him.

Technology: Next.js is our front-end framework, with Sanity as a headless CMS and Vercel for hosting. With our modularized approach, Bownds Ranches has the power to create an infinite number of unique pages to advertise its clients’ ranches and showcase them in their best light. Lenis scroll library improved performance and accessibility of the site and allowed us to utilize native APIs, such as CSS Sticky. We’re also using GSAP and Jotai for state management.

bowndsranches.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In