Upgrading the Stack: Newfront Case Study

Recently we talked about the need for a website re-do and how an outdated website can potentially harm your business. This wasn’t the case with the Newfront website, but the stack they used made their workflow somewhat hard.

The marketing site originally used a complex templating system and required back and forth communication between teams when they wanted to publish something. On top of that, the team had set some elaborate webhooks to auto-rebuild and deploy, which would take too much time to finish. In the end, this influenced their engineering velocity, website performance, and, ultimately, user experience.

It’s not that the stack they used was wrong. It’s more that it wasn’t used to its fullest potential.

The Newfront Story

Insurance is an industry with a reputation for being old-school, rigid, and slow to adopt the technology. Newfront Insurance is one of the few companies in the industry that decided to take a modern approach in their work and leverage technology to simplify the experience for clients and brokers.

Advocating for change is never easy, especially in vast and complex industries such as insurance. Having a clear vision and mission from day one helped Newfront not only propose innovative and effective solutions but also transform the industry.

The Overview

Working alongside a company with a similar mindset and work culture makes communication and collaboration that much easier. From day one, we were able to understand their needs clearly, just as they were able to see how the proposed changes from our side would help.

Their website was built with Next.js as one giant app. That means that the website, the client dashboard, and the internal apps were all in one big Next.js app. This made the build slow and hard to navigate. And it wasn’t built with performance or SEO in mind, so that too had to be changed.

Another problem was that the app was running an older version of Next.js. Besides poor performance, it missed some of the new features that could have made their lives much more comfortable.

Finally, they wanted a solution that would give their marketing team the freedom to experiment without relying on the web dev team to publish updates to production.

The Stack We Used

The company’s base stack was already good, i.e., Next.js as a React framework for their app, Prismic for content management, and Vercel as CI/CD solution. So we keep the stack. We made a couple of changes like upgrading Next.js to the latest version available, which brought out the best of the stack.

The Biggest Challenges We’ve Had On This Project

Overall, the biggest challenge was to create a website that would allow CMS users to add/edit pages and instantly see these changes in production. They had a problem with slow builds because the site was packed together with their internal app. We needed to treat and move the site as a separate project, which gave them more control and faster builds.

Also, we wanted the possibility to have components that are supported in both themes. The brand uses a darker color scheme, but we wanted to support a light theme for specific pages. That meant we needed to pay more attention to reusable components to look good in both themes. For this, we decided to use Theme UI to easily create themeable user interfaces and Emotion that allows us to use CSS-in-JS. As a result, we could create dynamic and reusable components.

The modern design feel comes from the animations in specific elements such as navigation menu and some page titles. We chose to use framer-motion, which helped us add animation without losing performance.

The Results

The biggest gain for Newfront was that they were able to decouple the marketing and product teams. As Anthony explained, their marketing team was finally able to use the CMS on their own, make changes, and have them instantly show up on the site.

The new website simplified their workflow and made it faster, allowing the engineering team to focus on what they do best and build a product.

Need help with your website or an app? Let’s get in touch!

CLICK HERE to schedule a 1-on-1 talk and learn more about what we can do for you and your business.