Navan’s software automates, personalizes, and simplifies an otherwise tedious experience: booking transit and filing expense reports. By focusing on providing an excellent user experience, they’ve grown into a worldwide company with over a $9B valuation. In order to build that exceptional user experience at all stages of the buyer journey, Navan’s web team recently migrated to a Jamstack architecture built with Netlify and Next.js.
At Jamstack Conf 2022, the Navan web team spoke about all aspects of their migration, including:
- Why they made the decision to host their Next.js site on Netlify
- How they balanced finding tools that work for the dev team and marketing teams
- How they chose Contentful as their headless CMS
The Challenge: Free up engineering time to build better marketing sites
The web team behind Navan’s corporate site is lean. It’s composed of two developers– one fullstack and one frontend–as well as one designer and a web manager. Prior to their migration to Netlify, the team was frequently bogged down in work that they knew could be automated, and didn’t have as much time as they needed to build exceptional web experiences.
That’s why they needed a stack that would help them be nimble, and not have to fix server issues or make small copy edits to the site. As Kady Wood (Senior Director of Global Web Strategy and Experience) put it, the dev team needed “as little interruption as possible,” which is where Netlify helped them streamline their work.
Prior to the migration, Navan’s corporate site was built with Ruby on Rails, hosted on Heroku with a homegrown CMS behind it. It had many points of failure, and wasn’t as performant as they knew it could be.
We needed to be able to enable marketers to make updates to the website without the web team doing it… they can focus on meeting their KPIs and the web development team can focus on more complex issues that only they can work on. – Kady Wood, Senior Director of Global Web Strategy and Experience, Navan
The requirements for their new stack were as follows:
- Localization: The new site needed to make localization easier, as Navan increased their global scaleNeeded a localization aspect
- Performance: High uptime requirements, as well as site speed and reliabilitySpeed and reliability (uptime)
- Usability Across Teams: Easy for marketers to use and great for developers to use
Navan’s Corporate Site Stack: Netlify, Next.js, and Contentful
The developers on the team knew they wanted to build in Next,js, for its ability to scale through their needs in terms of statically generated pages and server-generated pages. Even on their corporate marketing site, as Aaron Emery, a full stack engineer on the team puts it, “We have certain parts of the website that are more “app”-like, and I knew Next could handle that.”
The next step was to find a place to deploy Next.js that was performant, met their usability requirements, and allowed them to deploy quickly.
Our frontend developers have more independence and can iterate more frequently when integrating Navan’s web user interfaces with backend services utilizing Amazon API Gateway and ECS. With Netlify and AWS together, we’ve greatly reduced the overhead for our front-end developers, giving our teams more time to optimize our codebase and develop new features.” – Bill Watson, Software Architect, Navan
With a homegrown solution it’s on the shoulders of your team. With Netlify, we have a partnership and a community we can go to and solve problems… the support team was a really big deal for me. - Kady Wood, Senior Director of Global Web Strategy and Experience, Navan
For their headless CMS, they shopped around a lot before landing on Contentful. On their decision to use Contentful, Kady says they chose it because “I wanted something that was developer friendly, but also really, really easy to use for our marketers,” and Contentful provided just that.
Easy incremental migrations with Netlify
It can be challenging to plan to move any website from one piece of hosting infrastructure to another.
One of the major wins with Netlify, Aaron says, was the ability to slowly migrate to a new solution. “There was no boiling the ocean,” he says. “We just started with the homepage and moved one URL at a time, and proxied what we needed to proxy.”
Netlify proxies and rewrites offer developers complete control.
Better support for content marketers and their localization campaigns
By using Contentful, Navan was able to empower marketers to make the changes they need to the site, without developer assistance.
Previously you would have to choose between being easy for a developer and hard for a marketer or hard for a marketer and easy for a developer. In this case, we were able to find something that suits both. – Kady Wood, Senior Director of Global Web Strategy and Experience, Navan
Additionally, this meant they could undertake localization efforts. Local teams in countries across the globe can now make country-specific edits to Contentful and know that they’ll be deployed exactly where they need to, without any involvement from the dev team.
It took us under five minutes to get localized. – Aaron Emery, Full Stack Engineer, Navan
Netlify ensures the dev team can use any framework they choose
By choosing to build and host their corporate website with Netlify, the Navan team doesn’t have to worry about forever chaining themselves to one framework. As Aaron mentioned in the fireside chat, different Javascript frameworks have different use cases, and there are new frameworks coming onto the market each year. Netlify supports many frameworks, and can even support using multiple frameworks at once to build different parts of a site or application.
One of the many benefits of Jamstack is that we’re not locked to Next.js. We have many other projects that we’ll spin up where … we have projects in mind where we want to use Astro. We’re not locked into that ecosystem 100%. We can introduce what we’re finding interesting. – Aaron Emery, Full Stack Engineer, Navan
Ready to get started? Connect a repo and deploy to Netlify today, for free.
