Back to Case Studies
Institutional Website Redesign - from Drupal to Gatsby

Case Study

Institutional Website Redesign - from Drupal to Gatsby

Challenge

Switch Laboratory was seeking to modernize its online presence with an easy-to-use content management platform and a direct connection with their publication database.

Client

The Switch Laboratory

Skills

Branding

Design

Development

Year

2020

About

The Switch is a biomedical research laboratory interested in mapping aggregation-specific interactions in human disease, and part of its efforts is producing scientific software.

The Laboratory had an institutional website built in Drupal 6 and was looking for a partner that could guide them through the update of their online presence.

Marzee team was responsible for redesigning and rebuilding the Lab's website by updating the technology stack and making it more visually appealing and modern by creating a new visual identity.

Discovery Phase

The main requirements for the new website were quite simple and straightforward:

  • Modern and appealing design;
  • Easily add and edit content;
  • Connect with their publications database;
  • List all the Software developed in-house;
  • Present the Lab's current and former researchers and staff.

Tech Stack

Simple content structure, easy-to-use editorial experience, simple Tech Stack.

Having in mind the requirements for this new website, it was clear to us that they did not need a bulky and maintenance-heavy CMS like WordPress and Drupal.

We proposed instead to use a Static Site Generator, Gatsby, with a simple Content Management System and a Content Deliver Network (CDN), Netlify to serve the website's content in a truly dynamic way.

Tech

GatsbyJS

Tech

Netlify

Tech

Decap CMS

Project Highlights

From Brand to Design and Development, these are the steps we took in the project:

  1. Assessment and Design

    The Laboratory did not have a dedicated visual identity and it was following the brand guidelines of its host institution, KU Leuven. So our design team decided to use this opportunity to create a new logo with a new symbol, wordmark and colour scheme, as part of our proposal for web design.

    As references for the new logo, we used proteins that are directly related to Laboratory's research. 

    Logo

    For the colour scheme, we used a dark blue from the KU Leuven University identity as a starting point and a point of liaison with their identity. To create contrast with that blue, and considering the actual lab activity we wanted the symbol to evoke energy and transformation, so we opted to use a salmon colour.

    From the new logo and colour scheme, we developed a design style guide document including a series of components like buttons, cards and forms which were in tune with the aesthetic of the visual brand. Also, the selected typography for the website was chosen accordingly and in harmony with the brand.

    Layouts
  2. Static Site Generator

    After carefully considering different options for Static Site Generators, we decided to use GatsbyJS for being a solid and well-supported option based on ReactJS.

    Not only does Gatsby have an easy-to-use content page-building model, but it also has an impressive list of plugins and integration support with a big list of Headless Content Management Systems (CMS).

    More than that, using Gatsby made it easier to migrate part of the content from Drupal to the new website. We used Nodejs to scrape the content we wanted to migrate and then we created markdown files, which are picked up by the model we built in Gatsby.

  3. Editing content

    One of the requirements from the Laboratory was to have a back office so their staff could easily edit and add content to the website. They did not need any complex editorial flow or a high number of editors, so our best option was to choose an open-source Headless CMS to connect with the SSG we chose.

    We selected Netlify CMS (Today known as Decamp CMS) since using it would not mean any extra cost to Switch Laboratory, and also because it is easily extendable for different content architectures and very simple and intuitive to use.

    Just like in any other CMS, the Laboratory is able to edit the content of the website, create new pages, edit the header menu and the footer, edit meta tag images, key-words and descriptions and input ALT attributes to all of the images in the website.

  4. Theme and Style

    For styling the website, we started by laying the foundation of the design system, creating SCSS mixins, variables and other groundwork necessary in order to have a proper and easily updatable style guide.

    We then moved into the atomic procedure, from simple to more complex components, always with scalability in mind. Our preferable approach for styling our projects is to use HTML and SCSS.

  5. Hosting

    Last but not least, we are using Netlify to host the website not just to make sure speed is not a problem, but also to avoid any website ever going offline.

    Netlify has a Content Delivery System to store your project and serve it fast and securely to your user browser. On top of that, their free tier is very generous. In the case of the Switch Laboratory, there are no costs incurred.

Results

The website proved to be faster compared with other server built-websites and to have better performance results, providing a better base for Search Engine Optimization (SEO) results.

The website is now more reliable and secure, it has a fresh new look and feel, it requires less maintenance and the Laboratory cut down the cost with the website's hosting.


Descriptive drawing of the increase in SEO, Performance, acessibility and best practices