Stack Upgrade: Newfront Case Study

Previously, we discussed the need for rebuilding our website and the potential negative impact of our old website on our business. While this was not the case for Newfront's site, our workflow was somewhat difficult due to the stack we were using.

On this marketing site, a complex template system was originally used, requiring team collaboration whenever something needed to be published. Additionally, the team had set up elaborate webhooks for automatic rebuilding and deployment, resulting in a significant amount of time to complete. Ultimately, this affected engineering speed, website performance, and user experience.

The stack used was not wrong. Rather, it means that its ability was not fully utilized.

1. New Front Story

The insurance industry is said to be lagging behind in technology adoption due to its outdated and rigid nature. Newfront is one of the few companies in the industry that has decided to incorporate a modern approach in their work and utilize technology to simplify the experience for customers and brokers.

In particularly vast and complex industries such as insurance, advocating for change is never easy. By having a clear vision and mission from day one, Newfront has not only been able to propose innovative and effective solutions, but also transform the industry.

2. Overview

Working with companies that share similar ways of thinking and work culture makes communication and collaboration smoother. From the first day, we were able to clearly understand their needs and they were able to understand how our proposed changes would be beneficial.

The website's display speed and responsiveness were slow, far from the level of craftsmanship that we are concerned about.

 

Anthony Short
Newfront Insurance Company's Engineering Manager

Their website was built as one giant app using Next.js. This means that the website, client dashboard, and internal apps were all part of one large Next.js app. As a result, it took a lot of time to build and had poor usability. Additionally, it was not designed with performance or SEO in mind, so this also needed to be changed.

Another issue was that this app was running on an older version of Next.js. Not only was it performing poorly, but it also did not have any new features that could improve their lives.

In the end, we decided to prioritize solutions that allow the marketing team to freely experiment, rather than having the web development team publish updates to the production environment.

3. Used Stack

The company's base stack was already well-equipped with Next.js as the React framework for the app, Prismic for content management, and Vercel for CI/CD solutions. As a result, by maintaining the stack and making some changes such as upgrading Next.js to the latest version, we were able to fully utilize the strengths of the stack.

4. Biggest Challenge in This Project

The biggest challenge was creating a website where CMS users could add and edit pages and immediately see those changes in production. There was an issue with slow builds due to the website being packed with internal apps. It was necessary to treat this site as a separate project and move it, which allowed for more control and faster builds.

In addition, we also considered preparing components that support both themes. While this brand uses dark colors, we wanted to support a light theme for certain pages. In other words, in order to support both themes, we needed to pay more attention to reusable components. As a result, we decided to use "Theme UI" for easily creating themed user interfaces and "Emotion" for using CSS-in-JS. This allowed us to create dynamic and reusable components.

By using animations on specific elements such as navigation menus and certain page titles, we have achieved a modern design. By adopting framer-motion, we were able to add animations without sacrificing performance.

5. Results

The biggest achievement for Newfront Insurance Company was being able to separate the marketing team from the product team. According to Anthony, the marketing team was able to use their own CMS, make changes, and immediately reflect them on the website.

I wanted to work with a team that values craftsmanship and quality. I also wanted to reduce the number of technologies used internally by building the site with Next.js.

 

Anthony Short
Newfront Insurance Company's Engineering Manager

With our new website, the workflow has been simplified and allows for faster work, allowing our engineering team to focus on their main task of product development.