KBC Advisors

Building a fully composable site for the future of commercial real estate

KBC Advisors Image

Our tech stack for this project:

Background

KBC Advisors is an industrial real estate group based in Seattle, WA. They embarked on a rebrand project and reached out to Autotelic to design and build a new website that would be performant and flexible, reflecting their data-backed approach to real estate.

KBC’s platform was running on Webflow. Users had called out the lack of usability, outdated look and feel, mobile display issues and poor performance of the site.

Internally they were challenged to update the site content without external developer help because of the lack of flexibility in their site design; any changes resulted in display issues that caused further downtime to fix. KBC used Buildout for property and listing management on their site. A new solution would replace Buildout as a standalone API serving KBC’s property listings and could be easily updated by non-technical employees.

KBC Wireframes

A New Design

We conducted user experience (UX) research and drafted initial site designs, honing in on an image and photography driven design that used colour scheme and typography to showcase KBC’s culture and build awareness toward their service offerings. Throughout the design process UI components were identified and built with Storybook. This component library would be arranged to form the required layouts for the site. Page templates were built using these components and connected to Contentful, a headless CMS (Content Management System). This provided a comprehensive content creation interface with editorial controls to KBC staff, and the ability to reuse content across multiple delivery channels.

Contentful Integration

We used Contentful to build a structured content model to allow non-technical employees to be able to create pages and control styling. We optimized this setup for a highly performant statically generated Next.js app utilizing on-demand ISR (incremental static regeneration).

In order to realize this within a complex property content model, we created several Contentful apps to control publishing and improve the site’s UX flow for data entry.

KBC buildout replacement

Replacing Buildout

We built a proprietary property listings API (codified in an OpenAPI v3 specification document) to enable full control of listings data. This enabled us to store the data model and API structure as code and generate the API scaffolding, tests and documentation from a single source, ensuring they remain up to date and in sync. To ensure listings data remains up to date in the API, the build process subscribes to a Contentful web-hook to automatically trigger a rebuild whenever listings are added or updated.

Impact

With the newly designed Next.js site linked to our content model, we had a highly performant site that was as dynamic as KBC’s business. Combined with a lighting fast property search engine powered by Typesense, we were ready to launch. Since then KBC has seen almost 300% increase in traffic YoY and now that they can self-serve all their site content, they’re able to publish new properties faster, becoming quicker to market.

Every project starts with a conversation

You talk, we listen. We learn about what you're trying to do, where your barriers are, and we figure out a solution. It's a refreshingly collaborative approach to digital projects and it all starts with a conversation.