Supporting a restaurant
During a global crisis
When the chance to work on Leon’s new digital platform came up, we were only too happy to grab the opportunity. After all, for Giles and Phil it was a trip down memory lane; one of our earliest clients had offices in Soho, and the not infrequent post-meeting-Leon lunch in Carnaby Street was a welcome way to debrief.
In an unusual twist, Leon asked us to take on the support and management of their incumbent site whilst working on their new one.
That site was a WordPress build conceived, we suspected, when it was a much smaller restaurant chain at fewer locations. Over time, it had grown to do gallant service, catering (pun intended) for over 40 sites in 6 international territories. But in the code, the growing pains were plain to see.
But why take this on whilst concurrently working on the replacement? Well, we gained valuable knowledge and saw immediate benefits.
So, whilst partnering creative agency 48.1 conducted their branding, strategy and UI/UX work, we set about planning how we’d make the lives of Leon’s marketing team considerably easier.
There were 5 things we felt were absolutely critical.
1. Data gets entered once
And not just once in the CMS, once in the whole of Leon. If data was maintained elsewhere, then we would integrate it. If content was authored elsewhere, we would import it. And if our content was needed elsewhere, access we would grant it.
2. Architecture is as future proofed as possible
Leon was expanding in many directions. More restaurants, new territories, innovative food items, books, homewares, groceries, and now storytelling. Simply put, what was required for launch would need to adapt quickly and continue to do so for a company likely to be looking different in 5 years’ time.
3. UI is data-driven
With so many stakeholders rooting for an ever-nearing deadline, all parties had to be clear on how site data was interrelated. For example, if a slideshow of vegan rice boxes were to appear on a page, how would it be generated? Would it update automatically or manually? Could it be overridden and, if so, how? What information about each rice box would need to be shown? To achieve this, we insisted that the data structure be agreed before the UI was started. As a result, designers understood what needed to be included, developers knew what had to be built, and everyone understood the implications of quickly adding something to the UI design.
4. Don’t back Leon into a corner.
Websites date as the technology behind them dates. We wanted to make it easy to swap out the CMS for another, or to deploy the infrastructure to another device or platform without a complete rebuild of the site. We wanted to be able to add services as they came on board. We wanted a distributed and component-based platform, an ecosystem for Leon that would match the diversity of their growing brand and evolve with them.
5. Empower Leon with flexible content management
We really didn’t want Leon to have to come to us every time they needed a new page. With the knowledge of the data structure and a UI ‘style guide’ we pushed from the outset that we’d be taking a modular approach to the build. So, if they had a new campaign with new content, aimed to attract different traffic, then the page could be built in a way which was comprised of a subset of modules and published without any input from us. For us, this is what a content management system is for.
With an understanding of what Leon needed, and a growing sense of what the user interface might look like, we started looking at how the application would be built. During the proposal stage we had made a lot of (legitimate) assumptions, many of which would hold true. But we’d been supporting their old site for 6 months, and lots had changed in terms of everyone’s expectation. We thought it prudent to check ourselves given that we would be supporting their site long term and we wanted, naturally, to make the best possible decision we could.
Content Management System
We knew the initial build would quickly need augmentation from other systems so early on we decided on the flexibility of a headless architecture so that we would not be locked in by a templating engine or language. At the project outset, we had in mind Contentful as a CMS, as it was very much the market leader. But the headless scene had some interesting new options, so we conducted an audit to assess them. This meant installing each CMS in turn and building a basic site on it. Not an insignificant amount of work but very much worth it. Against weighted parameters (that we’d previously blogged about) we went about scoring each CMS and, after a lot of deliberation, settled on the excellent Sanity.io to give Leon the scalability and flexibility their growing platform would require.
At this point, 48.1 began using Leon’s strap line, “Naturally fast food”, to frame discussions around how the brand might be disseminated through the application. “Content had to be naturally fast. Navigation had to be naturally fast. Changes had to be naturally fast.”
For us, this cemented React as our choice, as we knew it could help us honour their vision of a blisteringly fast UI. It was one of those moments that illustrates the importance of having creative and tech agencies working together from the outset. When the brand message is helping inform tech decisions, you know your teams are working in harmony.
When the brand message is helping inform tech decisions, you know your teams are working in harmony.
React is great for one-page applications. One-page applications are, however, terrible for SEO, so we needed to work around that by rendering the React on the server first. We did a quick audit of server side React frameworks and settled on Next.js. To make things snappier still, we also opted to use Next.js to statically generate the production site; that is to write the whole site to static html pages, as if the site had been manually written out by hand.
Beyond those SEO advantages, that decision brought 3 additional benefits:
One hefty CMS implementation later, we had built a data import tool for all Leon’s menu items, integrated opening times direct from the till system, used TFL and Google Maps APIs to deliver integrated location services, and delivered a service that pushed data to their CRM and pulled from their podcast platform. Oh, and we built 44 modules for them to arrange their content.
And then a poorly pangolin appeared and hit the restaurant industry devastatingly hard.
Pragmatically, Leon decided to pivot its business model, leading the way towards new ways of operating and thinking. All just days before all that work was due to release.
Our application was well placed to help. The change of messaging and content hierarchy was achieved using the CMS alone. Code changes to the templates were kept to a minimum, thanks to a tight data structure which allowed new views to be constructed quickly, and in ways that could be reused post-pandemic.
The team at Spork have been much valued and needed partners to us, to both transition us to a new and much evolved site and adapt our LEON business through Covid. They are pragmatic as well as forward thinking, which was needed as we had a reasonable range of objectives to start with and that only broadened. Spork have really worked to understand our particular work culture and set up some micro wins (as we tend to talk about) as we manage the legacy site and an entirely new site.
They helped us improve what had become something of a Frankenstein site to manage, while also adopting an entirely new site which was quite different for us and for customers very adeptly. Spork did all of this in a way that helped support us strategically and through tactical changes. We’re so pleased with the results and the good working relationship we now have.
— Kirsty Saddler, Values & Sustainability Director