How Evri Cut their Time to Ship
Summary
- Evri is the UK’s largest dedicated parcel delivery company, leading the way in responsible delivery.
- A rebranding initiative provided Evri with an opportunity to unify website and product components through Prismic—a long-sought goal. Leadership felt it was crucial to empower the content team to expedite page releases and minimize developer maintenance time. Prismic slices were the key to making it possible.
- The content team at Evri can quickly update and test new pages using a large set of ready-to-use slices. Plus, developers have the ability to make a single change that automatically updates the whole website, making it easier to maintain.
The challenge: a legacy system leading to unnecessary complexity for development and content teams
Evri experienced a significant issue: their website operated on a traditional CMS, while their product platform was built on a modern, Vue-based single-page application. The challenge? The two didn’t integrate efficiently, spawning issues for both the development and content teams.
Ciaran Green, the Technical Architect at Evri, breaks it down: “Our website used a traditional CMS. We really weren't happy with it because we also had single-page applications for many of our flows. We couldn't integrate the Vue components into our old CMS.”
This disconnect meant duplicating efforts, creating the same component twice, which doubled the work and created unnecessary complexity.
Identifying the root of issues became a complex task. Ciaran shares, “Every time there's a bug, the first thing we're asking is, 'Is this a Vue app issue or a CMS thing?' It's such a pain.”
Resolving an issue in one area did not ensure a comprehensive solution. "And then you fix something, and someone asks, 'Why is it still broken over here?'" Too frequently, the answer was a disconnected version hidden elsewhere.
Evri’s developers had one goal in mind: reduce the time from when a request was received to when it went live on the site. As Ciaran explains:
We want to make updates, have those updates propagated everywhere, and ensure customers see them live in the shortest amount of time possible.
While Evri’s developers were dreaming of a faster workflow, their content team faced struggles of their own, grappling with the unnecessary complexity of their system, including dealing with HTML that they don’t understand. Ciaran outlines the issue:
In a traditional CMS, there's just markup and content creators often don’t understand HTML; it's practically useless to them. You’re asking non-technical people to do something slightly technical, adding unnecessary complexity.
The content team needed a system that provided quick feedback without perpetually requiring assistance from developers—something that allowed them more autonomy.
Evri’s developers had a clear vision: a headless solution that would allow them to use the technology of their choice, centralize everything, and maintain a single set of components across their product and website.
Yet, they needed something more, something that will give their content team the shortest feedback loop while reducing technical complexities.
Although Evri had desired this change for some time, making a compelling business case proved challenging. However, an opportune moment eventually presented itself:
The rebranding project presented an opportunity to make this change. We had to rebuild all of our flows again. So, why not use that opportunity to also make this change that we wanted?
The solution: Evri’s transition to Prismic for enhanced team efficiency
To simplify their workflow and improve team efficiency, Evri turned to Prismic.
Prismic’s slices — customizable website sections that appear as reusable components in both code and the editing interface — gave Evri what they needed to enable both marketing and development teams to work more rapidly.
By creating a rich library of slices, Evri equipped their content team with a versatile toolkit.
Transitioning to a new solution and rebuilding the flows meant investing some resources upfront. “At the beginning of the project, we had probably up to 20 people working just on CMS components. That was when we had an empty repository and needed to build all of our components out,” Ciaran explains.
Now, Evri’s content team has everything they need, and the initial investment is paying off.
We have around 40 slices now, and a lot of them have variants. That covers almost everything. It's quite infrequent that we get a design and the content creators say that they don’t have what they need.
This extensive toolkit enables the content team to autonomously modify the website, a critical function for their day-to-day tasks. “We have a team of three or four people whose full-time job is to work inside of Prismic on the content side of things,” Ciaran says.
We have such a tiny feedback loop there, where they make the changes and preview them. If everything's good, they push the changes.
Now, when the design or content team requires something new, the focus has shifted toward small-scale iterations instead of major template changes. "Developers, who are part of teams working with Prismic, don’t dedicate 40 hours a week to creating Prismic slices. However, they do own a part of the website. If their sprint work requires a Prismic update, it's on them and their squad to do that work.”
This ownership and accountability in updating Prismic have fostered a lively, reactive loop among developers, designers, and the content team.
It’s like a loop where our designers want a page to look a certain way. We say, 'Okay, that's a website page - the content team should be able to create that.' The content team can look at it and say, 'We have almost all of that now because it's all in slices, but we just need this change to this slice or we need this variant on this slice.’
This helps the developers know which slices need creating or updating, continually refining and expanding the utility of the editing experience for their team.
On top of that, the way slices work, combined with Prismic's interface, leads to reduced complexity for the content team. In the words of Ciaran:
There’s no need to ask a content creator to engage with styles or markup. Prismic eliminates a lot of the noise around everything else and lets the content team focus on what they should actually be focusing on.
Onboarding new team members has been streamlined, thanks to the enhanced ability to name and link slices on the webpage directly with those in the editing experience.
When a new content creator joins, they can examine an existing page and each element, thinking, 'Okay, that page uses a table, so it uses this table slice.' Then they apply that understanding to the new document they're creating, making everything more transparent.
Additionally, Evri’s development team benefited from a more structured and expedient approach in managing and identifying bugs and issues. Ciaran says:
It's very easy to go from someone sending you webpage with an issue on it to identifying the file with the corresponding bug in it. We open that document in Prismic, identify the exact slice that has the bug, then locate the file that corresponds to that slice. And we know the bug is somewhere in that file.
Finally, Prismic’s developer tool allows Evri’s developers to work alongside their code and use all the advantages of the VS Code to help them troubleshoot issues when these arise. “Instead of dealing with files in a traditional CMS browser interface, we can directly address issues within a slice in VS Code, maximizing the IDE's capabilities.”
Incorporating Prismic has redefined efficiency for Evri. Whether it's the speed of iteration, convenience of global changes, or the optimized debugging process, Prismic has transformed how Evri's teams operate.
The results: rapid content releases, optimized developer workflow, and one set of components
- Evri's content team can quickly release pages and adapt to new requests, thanks to the substantial pre-built slices and intuitive interface. This ensures efficient and accurate content creation.
- Evri’s developers benefit from faster troubleshooting and the ability to work locally alongside their code. They can now prioritize code enhancement over file navigation, optimizing their development cycles.
- Evri is now capable of implementing universal changes with ease. A single update now reflects across the entire site, ensuring both time-saving and a unified user experience.
Bonus tip from Evri: ensuring a clean editing and superior user experience
Striving for a neat and high-functioning editing experience, the team at Evri conducts regular evaluations of their Prismic slices.
We do a review of our Prismic slices: Which ones are not good? Are any of poor quality? Are any not being used? If they're not, then we get rid of them.
Identifying and flagging suboptimal slices is crucial. The team communicates actively with content creators, cautioning them against using outdated slices for new pages.
When we identify a bad-quality slice, we flag it for the content creators and say, 'Don't create any new pages with this slice; we'll phase it out.' After creating a superior version to replace it, we phase out the old ones. This strategy allows us to minimize clutter and maintain a clean list.
As older slices are gradually retired, new, superior slices are brought in to ensure the sustained efficiency and efficacy of both the work and user experience.
This agile approach ensures that both the editing and user interfaces consistently stay optimized and are a true reflection of ongoing improvements.