Switch Laboratory

Institutional website redesign - from Drupal to the Jamstack

2020

Switch is a biomedical research laboratory interested is mapping aggregation-specific interactions in human disease, and part of their efforts is producing scientific software. The Laboratory had an institutional website built in Drupal 6 and it was looking for a partner to modernise its online presence.

Marzee Labs proposed to redesign and rebuild the Lab's website by updating the technology stack and making it more visually appealing and modern by creating a new visual identity. The main requirements were:

  • Allow the Lab's staff to easily add and edit content;
  • A database for publications;
  • A page listing all the Software developed in-house;
  • A listing of all the Lab's current and former researches and staff.

Having in mind the requirements for this new website, our proposal was to use the Jamstack approach instead of going for a bulky and maintenance-heavy CMS like WordPress and Drupal.

Using the Jamstack approach is a beneficial option for institutional websites. First of all, 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. You can see the result here.

Switch Laboratory
  • Gatsby
  • Netlify
  • Netlify CMS
  • UI/UX
  • Jamstack
  • Web Design
  • Front End
  • Back End

Project development

  • Identity and Web design

    Having in mind that the Laboratory did not have a dedicated visual identity and it was following the brand guidelines of their host institution, KU Leuven, we also worked on 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. In terms of colour scheme, we used a dark blue from the KU Leuven University identity as a starting point and also as 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 for using a salmon colour.

    Birthed 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. This document was shared with the Lab's staff for validation before the start of the work on the website.

  • Static Site Generator (SSG)

    After carefully considering different options of SSG, we decided to use GatsbyJS for being a solid and well-supported option based in ReactJS. Not only Gatsby has an easy to use content page building model, it 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've created markdown files, which are picked up by the model we built in Gatsby.

  • Content Management System (CMS)

    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. The client did not need any complex editorial flow neither 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 that we have used previously, partly because using it would not mean any extra cost to Switch Laboratory, a partly also because we find it easily extendable for each content type and very simple and intuitive to use.

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

  • 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 in 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.

  • 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 the website ever going offline. Netlify has a Content Delivery System to store your project and serve it fast and secure to your user browser. On top of that, their free tier is very generous.