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.
Web Designer and Webflow Developer
Andre van Zijl
Head of Channel, Cologix Inc.
Andre and I agreed on the following main goals for the website.
This is how I approached solving the main issues on the website:
We agreed on the following pages for the website:
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.
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.
I used a simple, common font called Noto Sans for both the Headings and the body text.
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.
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.
I created a simple type logo as per the request of the client.
After deciding on the logo, colors, and fonts, I moved on to creating the design using Figma.
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:
I then created a Brand Style Guide for the Website which includes everything such as Visual Hierarchy, colors, fonts, and button components.
After the creation of the CMS structure, I imported all the data into Webflow and made sure every single piece of data came in.
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.
Here are some of the challenges that I faced while designing and developing godatacenters.
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.
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.
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.
Andre had a concept in mind which I helped bring to fruition. Now there is a search database for searching data about datacenters.
Users are now able to raise quotes for a particular data center after searching the database.
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.