My second new site build for Greystar under contract from KForce was for Patrick’s Pointe, a luxury apartment complex in Southern Pines, NC. As the first step to any of our property builds, a single-page welcome website was designed in Figma in order to park the domain, collect visitor lead information via a simple Gravity Form, and served as a starting point for the coming design.
Landing Page Mockups:
With the landing page design approved, the dev cycle was kept to a single day. A basic Genesis child theme was established with a single page template using shortcode to embed the form. GTM containers were also established which would eventually roll into the full live website to preserve historic stats pre- and post-launch.
Once the landing page was live and tracking traffic, we could focus on building the more extensive permanent website. Multiple views were designed to show the various pages and state changes, such as with the top promo bar or nav menus open/closed, the page-specific popups, accordion or tab interaction, and lightbox photo galleries. Some of the highlighted mockups are shown in this post’s main gallery, but the mobile-specific mockups are featured below:
Mobile-first mockups:
The tech stack for new builds at Greystar has been to create an Understrap-based child theme, Gravity Forms, and ACF Pro. All page content and images would be controlled via the ACF metaboxes. WP Go Maps Pro powered the neighborhood page’s map and categories filters, handled with a combo of shortcode for embedding the map and custom jQuery to toggle an invisible filter checkbox for each category and pass that category’s ID to the map for live filtering. All CSS and JS were run through build scripts (CSS-compile, CSS-minify, Terser, Rollup, etc.) to make sure asset size and count were as low as possible. Other than some simple “window.onscroll” event listeners used to trigger basic header element shrinking as someone scrolls down the page, the rest of the JavaScript was kept to vanilla Bootstrap.
Initially, this website was going to use a custom in-house plugin based on previous Greystar website builds such as West 5th LA. Though the custom floor plan data plugin was basically ready, the Greystar organization made some decisions based on the large pool of more than 50 other WordPress websites we were already having to maintain. Over the lifespan of the department they had tried several different code bases for the custom plugin. Some sites were using plugins that didn’t use the same feed providers, data mapping, page templates, error logging, retention policies, and so forth with some websites even baking the data retrieval process into the theme or page template itself, which made separating or updating these sites a potentially large project. So, from this build forward we would gut the floor plans template and embed a third-party plugin leaving the maintenance and support to them. We also eventually went through our older websites and removed the custom plugins and data imports to replace those with the same third-party for consistency.
Eventually, the lead capture forms were embedded from Funnel Leasing who also provided a Dynamic Number Injection script that would allow the phone numbers on the website to update based upon the referral ID being passed to the site from one of its marketing partners so that each lead source could have a custom phone number assigned for analytics purposes. Some of the property’s lead sources would string together URL parameters, sometimes including custom strings of characters, so an “attribution helper” JavaScript was placed in a custom conditional GTM container to catch and preserve these across internal website links to make sure that visitors would be served consistent information during their session without having to implement a cookie policy.
