Skip to main content

Case Study

Magnusson Klemencic Associates

Magnusson Klemenicic Associates (MKA), a leading structural and civil engineering firm, approached us with an outdated website that failed to adequately showcase their impressive projects and talented people.

photographyvideoweb designweb development
Photo icon
0
buildings
Video Icon
0
drone flights
Code Icon
0
lines of code

In collaboration with Middle of Six, we performed a comprehensive evaluation and implemented a complete redesign and rebuild of the website, including high-quality photography and video that better represent MKA’s work. We also developed custom integrations with their third-party data providers to address previous technical shortcomings. Our overarching goal was to create a modern, user-friendly, and sustainable online platform that matches the magnitude of MKA’s structural landmarks while highlighting their team’s expertise.

Sales Force Tower with Moon by Hero Creative
Chicago Building shot by Hero Creative
default
Rainier Square Tower by Hero Creative
150N Riverside Chicago Riverfront
Amazon Spheres by Hero Creative
Sales Force Tower by Hero Creative
150N Riverside Chicago by Hero Creative
Presidio by Hero Creative
St Regis Chicago by Hero Creative
Chase Center by Hero Creative
Seattle Summit Center by Hero Creative
River Point Chicago by Hero Creative
River Point Skyline by Hero Creative
SF MOMA Exterior by Hero Creative
SF MOMA Arial by Hero Creative
SF MOMA Closeup by Hero Creative
Mira by Hero Creative
Nema by Hero Creative
Mira from street looking up
Aqua building exterior showing glass
default

Visual journey

This project was a wonderful challenge for our production team, one that led us to travel to three major cities and drew on a combination of our strengths in conducting interviews, working with talent, and our long history of shooting architecture and commercial real estate. The goal was two-fold: 1) Develop a large library of photography and video assets (25 buildings & b-roll!) for MKA’s portfolio that could be used across the website and other visual platforms. 2) Create a visually stunning and engaging recruitment video to generate quality leads for prospective new hires to MKA.

By conducting the interviews for the recruitment video first, we were able to use those conversations as a roadmap for our b-roll. From Seattle to Chicago to San Francisco, we shot from sunup to sundown for 4-5 days in each city. We were consistently lucky with weather and light and we captured some of our most incredible, iconic photo and video footage to date. The recruitment video went live with 3.5 rounds of feedback, and we’re absolutely thrilled with how it all turned out.

Seattle Summit Center by Hero Creative

MKA Recruitment Video

Design

MKA’s vision, goals, and preferences were crucial elements that needed to be understood and incorporated into the design process. When they approached us to redesign their website, the main goal we agreed upon was to bring the projects to the forefront and showcase the amazing civil and structural engineering projects that otherwise had been under emphasized on the previous site. Regular feedback and open dialogue throughout the design process lead to a more satisfying and impactful final product, creating a website that resonates with both the client and its intended audience.

MKA Website showing the project header
MKA Website project grid
MKA Website showing project details and diagrams
MKA Website showing the about us slider
MKA website showing the open menu
MKA Website homepage with video header
MKA Website showing the home and various sections
MKA Website in design application showing all of the pages spread out

Development

Our development team brought the web vision to life with exceptional care and attention to detail. We started by building a robust, custom WordPress theme focused on showcasing projects aligned with the company’s rich history. Complex interactive components like the parallax-scrolling timeline were built to perform flawlessly across devices.

Throughout the process, we meticulously translated approved designs into pixel-perfect web experiences and used subtle animations create immersion without distraction from core content. The final product melds MKA’s brand identity with a streamlined editing workflow. This allows easy publishing while engaging site visitors in the firm’s structural engineering capabilities and long legacy.

MKA Site Development showing code and a preview of the site

Seamless data integration

Magnusson Klemencic Associates needed to integrate hundreds of projects consisting of custom posts and media files from multiple structural engineering software platforms into their WordPress website. We worked closely with their team to thoroughly understand the complexities of synchronizing this data from third-party APIs.

Leveraging our deep WordPress integration expertise, we built a custom automation solution to import, normalize, and consolidate the data into their site, elegantly bridging the gap between Magnusson’s best-in-class engineering tools and their client-facing website. This provided immense time-savings over custom development and a unified view of project data. The result was a tailored solution allowing Magnusson to focus on what matters most — providing innovative structural designs efficiently to clients around the world.

data flow diagram

Dreaming of something exciting?

Let’s talk