Challenge
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.
Solution
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. 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.
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. Lessons We increased our knowledge of Gatsby and learned a bit more how to deal with the structure of files and image handling. This was not the first project we used Gatsby, but it allowed us to extend our understanding of its complexity and be better prepared for future projects and to gather suggestions and comments to Gatsby improvement. We've started working on a boilerplate for future projects using Gatsby with Netlify CMS. This will make future similar projects simpler, it will also reduce implementation effort and thus the cost to future partners. We were able to have the partner fully involved in the website information architecture after the delivery of a simple and clean first version of the website. We delivered a series of content types in line with the project's requirements and once the Lab's staff started to input content we were able to adapt and evolve both the website and the back-office to align with their expectations.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.