We Built It: V6 by Vantage Data Centers Web Experience

We Built It: V6 by Vantage Data Centers Web Experience

We’re human. We like to occasionally brag about ourselves–especially when we build something cool. Today, we’re introducing a new regular feature in the Hall of Awesome called “We Built It.” In this and future posts, we’ll examine some of our favorite projects. Today, we’re giving you a glimpse at a recent launch we created for our client, Vantage Data Centers. Vantage was in the process of building a new, state-of-the-art data center facility (called V6) on their campus. They asked Mighty & True to help with the pending launch through the creation of a variety of digital content that would show off just how cool this data center was going to be. Easy peasy.

Our User-Centric Strategy

We knew a unique web experience had to be part of our strategy, but we didn’t want it to be stale. These buyers would require information that would explain the value of the center, but we wanted to get V6 noticed in a new and creative way. Our core idea was to give this new facility its own identity. Having V6 look different in a commoditized space was a tall task, but something that we felt strongly about. To make this happen, we started by looking for inspiration in places you wouldn’t exactly associate with data centers: high-end hotels, spas, condos and modern furniture.

V6 site inspiration
Some sites that inspired our design direction for the new page for Vantage

We looked there simply because we wanted to provide, well, a distinctive brand around the V6 center and its value. This site needed to stand out with its own personality–something that Vantage’s prospective tenants would take notice of. We had an idea for the kind of experience we wanted to build, but before we could even think of design, we had to answer some basic questions:

  • What is the main purpose of the page?
  • How should we organize the content?
  • What are the goals of each individual section, and what messages do we want them to convey?

After talks with the client, we found that one of the page’s main jobs would be to entice prospective tenants to set up a tour of a facility upon completion. Everything that we created around the customer journey would have to support that goal.

We first developed a “content map” to help us get an idea of how each part of the page would do that. This content map isn’t a wireframe. It’s a framework meant to establish a basic structure for the customer journey as well as the different sections’ goals and specific messaging for each. It also helped us wrap our heads around what kind of digital content we had and what new content we needed to create. While there were some tweaks along the way, the basic structure we established for the page in the content map remained constant.

This document was indispensable in helping us organize content and messaging throughout the build.

Thinking About Design

We began this project with a kernel of an idea. Once the structure of the site was, for the most part, locked, we could actually start to think about how this particular site would look and work. We began with simple style tiles to identify the colors and typography that would carry this distinctive V6 feel.

Blue Style Tile with sans-serif font
An example of one the style tiles we developed to guide design. We used a few different color palette and font combinations.

After we settled on the right design approach, we investigated possible interactions that would help tell the story and drive users to want to know more. These included interesting parallax effects, a virtual tour, some sort of map function and a way to display the status of the building’s construction. We created an InVision board to organize some of our favorites.

InVision Board with interactions
We gathered interaction examples from other sites into an InVision mood board.

Once we had a firmer idea of the interactions we planned for the page, we moved to wireframes and design. One of the earliest design decisions we made had to do with the hero image. We wanted a sleek, modern tech feel to the video–something that wouldn’t be out of place in a high-end car ad or a smartphone release. Another neat element we decided on in our initial design discovery phase is the background of the page. If you look, you’ll see that it’s a black background, with a light outline of the actual building blueprint, and it has a slight parallax scroll movement as well. It’s the little touches.

The opening of the final hero video
blueprint background
You can see the very subtle blueprint in the page’s background

Development

If you read our recent post on the all-importance of the design-to-dev hand-off, you know that it’s vital to have all your ducks in a row. When we start development, we like to have wireframes locked down. If you’re at all in a creative field, you know that there are always the inevitable 11th-hour tweaks, but with some preparation, it’s easy to roll with the punches. We had already decided what kind of interactions we wanted on this page, but it was time to finally build them.

It was important to get the specs of V6 very high on the page. The page’s main audience (i.e. people looking for data center space) are typically very technology savvy but want to know some basics quickly. So we wanted one of the first interactions on the page to display the primary differentiators of the center. Getting users to read a lot of information in a way that isn’t obtrusive or deleterious to user experience is a delicate balance. To solve this problem, we decided on a parallax scroll of different “cards” displaying V6’s different features. Here’s one of the sites that inspired us:

This is darn fine use of parallax scrolling

And here’s the V6 scroll:

We found a way to display all of V6’s features in an unobtrusive and interesting way

We also wanted to show users the progress of the build, but we wanted an interaction that was as eye-catching as it was informative, without interrupting the flow of the page. We added a slider that displays the 3D render of the site against a live camera view we used to show the actual status of construction:

Users can slide between the 3D render and the current state of construction

Other Awesome Features

As excited as we were to make something that looks great, we also knew that the site had a job to do: get people to request tours of the facility. To that end, we added virtual content that helped a prospective buyer to actually experience the center before it was even open. If you’ve ever cruised the Hall of Awesome, you know that we’re big fans of VR. We’re always pumped when we get to add VR functionality to a project. For this build, it was a perfect application to pique the interest of prospective tenants. Other additions to the page include a CTA for an informational video on V6, a content offer and, of course, a form to request a tour.

VR Tour of Vantage’s V6

Putting the Cherry on Top

This particular project was one of our favorite recent builds. It gave us a chance to do what we love best: use good user-centric design as an essential demand generation tool. It’s pretty much what we live to do. This build also challenged us to think through how to best balance disruptive design, displaying all the pertinent information and providing a positive user experience. If you’re thinking through similar challenges or want to find out how we can make you look good, drop us a line. We’d love to chat.

Comments are closed.