CATALYST roadmap for datacentres
As a proud member of GreenIT Amsterdam, Cobra would like to introduce the CATALYST Datacenter project which has introduced a revolutionary new assessment tool. Which Cobra happens to have designed and built 🙂
CATALYST stems from a EU funded project that aspires to turn data centres into flexible multi-energy hubs, which can sustain investments in renewable energy sources and energy efficiency. You can read about this in detail on the project website, which we also happened to build: https://project-catalyst.eu/
This very succesful project has spawned a framework that is too good not to use: the Green Data Centre Roadmap. This Roadmap, designed to be similar to a metro map, has 15 lines and over 130 stations, that can assist DC owners, operators, design companies and investors to consider the routes and destinations they may choose to create or retrofit their Data Centre to be as “green and sustainable” as possible. In this context “green and sustainable” means using renewable energy solutions, reusing waste heat, certified to appropriate standards and training staff.
Sounds complex? Not really. We designed an online roadmap tool which incorporates the complete system in an easy to use tool.
How dit we work together with CATALYST on designing and building the roadmap tool? We’ll explain!
The design challenge
While discussing the first requirements, the ‘Metro Map’ was already there and the idea was to make an online version with some limited interaction. Building a website is never easy but this brought some challenges in terms of UX, future proofness (is that even a word 🙂 and time to build / costs. We needed to have an interaction to do a lot of things: explain the map, bookmark stations, show progress and assess the situation. To sum things up:
- Sign-up, at what part of the site
- Roadmap visualisation, make responsive and being able to change
- Paid content, how to design so we can incorporate this when needed later
- Rating system, how to visualise
- A lot of functionality, how to make a user friendly flow
- Target market is data center professionals, technical terms
And last but not least, the underlying database architecture.
Interaction
The primary audience being Datacenter experts, there is no need to explain what a Datacenter does. There is already a main website with lot’s of additional information and details. This Roadmap website is meant for the interactive part. We have a couple of functions in one website and it is always a challenge to create a navigation system for that. In this case, the main functionalities are:
- Registration with details and options
- Directory Functionality with search
- Assessment tool
- Roadmap visualisation
- My Catalyst environment
- Handbook introduction and download
The Roadmap ‘Metro map’ visualisation is the centre of the CATALYST vision. However the tool should be easy or even fun to use. This is why we use a zoomable map with the ability to ‘bookmark’ every station on your custom path to success. You can add the stations to your journey, or mark them as complete.
As the Roadmap tool also has a Roadmap of its own (i.e. improvements and new functionality in the future) we built it as future-proof as possible. The ‘My Catalyst’ page is an example of this. The design is delivered in five main iterations between april – may 2020.
No frameworks
At Cobra, we like to use state-of-the-art techniques, such as modern frameworks like Vuejs, Nuxt or such. This project was the perfect opportunity to take us back to the roots of Javascript. EC2019 has come so far, that practically everything can be done without the use of frameworks. Even though it’s convenient to use modern frameworks, we wanted to put ourself to the test and see if we can do it with only Javascript as a front-end scripting language.
With the new features of Javascript, jQuery has been made redundant. As programmer, we’re used to the ease of jQuery, however, we must not forget that loading in another framework/dependancy is going to significantly reduce our loading time and it might not be needed after all!
EC2016 has brought us many features which made the use of jQuery redundant. Features that were within jQuery were simply included in the base version of Javascript already. Making it easier for us to code native Javascript code. Leading websites like Stackoverflow started to drop jQuery as a dependancy and it showed us that it’s not required to load in anymore. So we decided to drop it as well. Catalyst was the perfect use case to start showing off our Vanilla JS code. There were many occasions which would have been inviting to use jQuery, but after some research and digging, we found out that it would be easier to just use native Javascript code.
Happy to introduce you to our new client Catalyst. Ensuring you a faster, better performing codebase for our new client, up to the latest coding standards!
Check it out!
So we proudly present the CATALYST Roadmap tool here https://roadmap.project-catalyst.eu/ Please check it out and let us know what you think. Or rather, register and go make datacenters greener!
Want to build a site of your own or have questions, please contact us!
Over Cobra
Cobra Systems bedenkt samen met jou creatieve en innovatieve oplossingen voor digitale toepassingen. Effectieve websites, handige apps en supersnelle WiFi waarmee bedrijven succesvol zijn en waar klanten blij van worden.
Ook benieuwd wat we voor jouw organisatie kunnen betekenen? Laat van je horen!
