case study

Godatacenters

A website for a data center search database

Overview

Godatacenters is a search directory for data centers all over the USA. It consists of data center information relevant to any data center present in the US that includes location, image, and other relevant data. Users will search for a location and send a custom quote to Andre, my client.

HIGHLIGHTS

  • Understanding the concept of the Search Directory and its purpose.
  • Understand the target audience.
  • Creation of a simple logo.
  • Website Branding.
  • Wireframe Creation.
  • Designs and Asset creation.
  • Data Import.
  • Coding with Webflow.
  • Seeing the site from start to finish.

SEE LIVE SITE

MY ROLE

Web Designer and Webflow Developer

THE CLIENT

Andre van Zijl

Head of Channel, Cologix Inc.

The Problem

  • The data that Andre shared was very huge and we had to import it into Webflow’s CMS.
  • A CMS structure needed to be created based on the data given.
  • Users should be able to search based on Provider, Datacenter name,  and Location-based on State and city.
  • Designing the wireframe in such a way that all the relevant info was presented in a simple and concise manner.
  • Creation of a custom quote form for a user to input info to be submitted to Andre.

The Goal

Andre and I agreed on the following main goals for the website.

  • The client would like to have data centers stored in a database such as Webflow CMS. So I would design a CMS based on the requirements for import.
  • Users can search for data centers based on a name, state, or city.
  • When info about the data center is displayed, the user would have the ability to request a quote from Andre.
  • Create a simple Type logo for Andre’s brand.
  • Choose a palette with reds and blues.
  • Create Wireframes using Figma and share them with Andre to get his feedback.
  • Creating designs using Figma.
  • Coding the site in Webflow.

My Process and Insight

This is how I approached solving the main issues on the website:

  • Gathered requirements from the client.
  • Created a proposal including all requirements and deadlines.
  • Agreed on the client’s desired look and feel of the site.
  • Asked the client for websites that he wanted to model after.

PAGES

We agreed on the following pages for the website:

  • Home
  • Search Directory
  • Data Center Template
  • Custom Quote
  • Contact Form
  • Brand Style Guide

WIREFRAMES

I first started by creating wireframes for each of the above pages. I needed to make sure Andre had a visual idea of how the content will be laid out on the site.

After creation, I shared the wireframes with Andre who came back with a few comments and changes that he wanted to see at this stage itself.

COLORS AND FONTS

Since Andre wanted to stick to blues and reds for his website, I researched a color palette with reds and blues. My inspiration for the colors came from a stock image  I used as the Hero Image reflecting a data center and I sampled the navy blue and teal color from it.

MIDNIGHT BLUE

#180D5B

DARK TURQUOISE

#4ABECB

FIREBRICK RED

#CF2020

Black

#000000

white

#ffffff

GAINSBORO

#DFD7D7

I used a simple, common font called Noto Sans for both the Headings and the body text.

Noto Sans

Designed by Google, Noto Sans is a visually harmonious font used across multiple languages, with compatible heights and stroke thicknesses.

The spectacle before us was indeed sublime.

STOCK PHOTOGRAPHY

I used the Stock Photograph of a datacenter to best bring the concept of the Search Database to life. This image was my inspiration for the color palette.

THE LOGO AND ASSETS

I created a simple type logo as per the request of the client.

DESIGNS

After deciding on the logo, colors, and fonts, I moved on to creating the design using Figma.

SETTING UP CMS

My next task was to set up a Content Management System inside of Webflow. For this, I modeled the data that was required to be imported into Webflow. Andre had a data analyst concise information on a google spreadsheet and shared it with me. I made sure the data was acceptable in Webflow. We did have to go back and modify the google spreadsheet to be able to transfer information to Webflow.These are the fields I created in Webflow:

  • Provider Name
  • URL for the Provider Logo
  • Location(City and State)
  • Name of the Site
  • Address
  • Total Space
  • Total Power
  • Certifications
  • Internet Exchange and Cloud Notes Switch
  • Solutions offered at the datacenter
  • A little writeup about the company
  • URL for the photo of Datacenter

BRAND STYLE GUIDE

I then created a Brand Style Guide for the Website which includes everything such as Visual Hierarchy, colors, fonts, and button components.

WEBFLOW IMPORT

After the creation of the CMS structure, I imported all the data into Webflow and made sure every single piece of data came in.

CREATION OF THE WEBSITE

After the import of data, I was now free to start working on the Webflow site and its creation. I started by adding the color swatches and setting up fonts inside of Webflow and then brought in all the necessary elements for the site.

Challenges & Solutions

Here are some of the challenges that I faced while designing and developing godatacenters.

CHallenge #1

The data was huge and not only that, the data had to be compatible with Webflow. I made sure I helped the client to set up the data on a spreadsheet as per Webflow’s recommendations.

CHallenge #2

The client was dealing with some personal issues at that time, but I made sure I was empathetic about his situation and regularly kept him updated about the progress of my work.

The Results

Andre’s new and updated website, godatacenters.com provides users a search functionality on the website which enables users to find relevant info regarding a particular data center.

An Idea Come True!

Andre had a concept in mind which I helped bring to fruition. Now there is a search database for searching data about datacenters.

Submit Quotes

Users are now able to raise quotes for a particular data center after searching the database.

Growing Traffic

Because of his new website, Andre is now contacted for details about a particular data center and his business grows because of his new website.