Responses by Rich Heend, senior copywriter, Atomicdust

Background: The website for City Foundry STL is the cornerstone of a larger promotional campaign for the new retail and office development in the Midtown St. Louis neighborhood. City Foundry’s site needed to excite residents and visitors about the coming attraction—as well as attract prospective tenants. Our client used on-site signage and billboards in the real world along with an active digital promotional campaign to drive targeted traffic to the site.

Design core: As we designed the site, we took the City Foundry STL brand in unexpected directions, applying textures and language that simultaneously express the site’s historical significance and the can-do, forward thinking that drive Midtown St. Louis’s renaissance. We’re proud of the infections energy we infused on every page. The site captures the spirit of the brand—and the city—perfectly. In our initial meetings, the client expressed a desire to have the site become a “cheerleader” for the region, and we’re proud of how, through the site, this energy extends both to the city and City Foundry itself. Of course, the nature of any construction project is that the details are always shifting. We built the site so the client can easily add new tenants, and preview event invitations, construction photos and other details to generate interest.

Challenges: “Time constraints” took on a whole new meaning with this site as we built it to go live nearly a year before City Foundry STL’s opening date. The most challenging aspect of the site is going to be to maintain the energy as development moves from the early construction to preopening and then to postopening. We were careful to include elements that could help our client incrementally build interest without exhausting users or making them feel strung along.

Navigation design: We designed the navigation to mirror the gridded, quiltlike feel that had been established in the rest of the site design—with a twist. There are two slightly different iterations of the site: the preopening site and the postopening. So there are actually two separate navigational structures. The preopening site focuses more on generating interest and attracting leasing clients. The postopening site aims to intrigue and inform visitors. So for the prelaunch site, the navigation is contained in a hamburger menu with animated grid sections so that the branding takes center stage. The second is a more traditional bar that guides visitors quickly to relevant information.

Technology: This was one of the first sites we created using WordPress’s new Gutenberg block system. To power the animation in the site’s navigation elements, we used TweenMax. As we continued with development, we looked for ways even the smallest details would help add energy and excitement to the site. On the homepage, we used Tilt.js for the hover effect. Even the buttons throughout the rest of the site have their own surprising hover states.