Laby Website: Redesign and development

Context

My first mission at Laby was to work on the company's website. The focus was to migrate to another type of hosting/system, considering that the site had many limitations in terms of performance.

Another problem noted was customization, as the site was created with the free Elementor. This left the design limited, with slow updates and difficulty in managing pages and translations (the site was in English and French).

1) Technologies analysis

This Having in mind that it was necessary to make an important modification, with only 3 people in charge, we analyzed the available options.

One of them was to use a “no-code” service such as Webflow or Wix, but we would not have the desired freedom/full control of the data. Also, we would need to pay a monthly fee to use the platforms.

Then, our CTO found the development framework called Nuxt, free and based on Vue. This way, we would have full control of all processes, thus guaranteeing complete customization and data security.

For the design part, the company already had the Tailwind CSS framework, with all CSS classes already pre-defined. This type of framework it's huge time saver, since I would be the only responsible for the front-end

2) Design and collaboration

For the design, we used Figma with Tailwind templates. This allowed us to work in just one place. Obtaining feedback from other colleagues and making the iteration process much faster.

Also, we defined a color palette consistent with the brand, as before there was no standard or hierarchical organization.

For the texts, we adapted the typographic scale following tailwind standards. The font used was Poppins, after an internal vote.

The accessibility part was also highlighted. In several places, there was not enough contrast. Another point was the lack of alternative texts and some inconsistencies with navigation using the tab button.

3) Development

After validating the design internally, the next step was to develop the code and turn the Figma mockups into reality. To recap, we used Tailwind CSS as a base, but with several modifications that had to be coded. With also some pages that did not have a template suited to our needs.

In total, there were around 20 coded pages. To save more time, we created a folder called components. Where we could reuse the same structure on different pages, only changing the content.

For translations, we used functions to be able to transition between French and English; no plugins were used. This step took a little longer as it was necessary to manage content in English and French.

It was also possible to install the Clarity plugin to get heat maps and screen recordings from users. Besides other classic services such as Google Analytics.

4) Results

Here are the results and comparisons between the old and current design. And then, a comparison table about performance made on different speedtesting sites is displayed. Also the link is available here: https://laby.io/

Bonus

With the Clarity plugin installed, it was possible to analyze user behavior on the new website. In fact, thanks to this analysis, we identified some problems, including some redirection errors from users arriving from older links.