Case study

Redesign of Jekyll website

Marc approached us to re-design and rebuild his current site https://4armed.com. A hybrid black/white design was decided on and the challenge of illustrating the tech stack that they use was taken up.

4Armed redesigned website's screenshot

Problem

Marc felt that his website needed a redesign as well as restructuring the information and resources he offered. Working out how to display the stack they use was a particular design challenge we needed a solution to. the information and resources he offered. Improving the Core web vitals of his site was also required as it currently suffered from low scores. This is mainly due to having to call third party library scripts like JQuery and Bootstrap. Working out how to display the stack they use was a particular design challenge we needed a solution to.

icon

Solution

Ihsan, our UX/UI designer came up with a great modern template for the new 4armed website, that brought 4armed’s resources to the fore and implemented a design system for the site. The Site was implemented using Hugo and we made use of its SASS pipelines to produce a monolithic style document and functionality was provided by vanilla JS, rather than relying on third party libraries. You can find the demo at https://4armed.netlify.app.

Core web vitals

Although there is not currently enough field data to determine Core Web Vitals, Lab data from Google Lighthouse shows that the redesigned website scores 100% on mobile. This is a marked improvement over the old website which scores 31%

Core Web Vital results

Learnings

Although we produced a website that we are proud of the development of the custom stack illustration took a bit longer than desired. We would probably use a story JS framework rather than vanilla JS in this particular instance as ther is no point in reinventing the wheel.

4Armed website's screenshots