Leon Restaurants

Supporting a restaurant
During a global crisis

    Introduction

    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.

    The Status Quo

    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.

    • It gave us several months of first-hand insight into how Leon worked across departments, the creation of its menus, content, and how marketing material got approved within the company.
    • Beyond the architectural and maintenance challenges, we gained direct experience where the pain points lay from a content creation and management perspective.
    • And this information was invaluable when it came to planning and building a new robust platform that would stand up to their 5-year-plan and beyond.

    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.

    Setting the bar

    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.

    Choosing the tech

    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.

    Front end

    We’d been using React to build single page applications for a long time and it has become our front-end javascript framework of choice. The modular nature of the Leon build was well suited to Components in React and it was becoming apparent that there was suitable complexity in the UI’s initial designs that warranted some type of internal application state – something that React, and its elegant cousin, Redux, handled well.

    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:

    • Loading a page requires no database connection, so it’s really fast to respond, especially when the site is under heavy load. We’d learnt first-hand how spiky the Leon traffic could be: a Radio 2 appearance by Leon founder John Vincent sent the traffic up 10-fold for 2 subsequent hours.
    • Once the initial page load has happened, the React application takes over as a single-page app, giving users the snappiness they expect in page and state transitions.
    • The production site would have no runtime dependency on the CMS, so should the CMS fail for any reason the site would not go down, as the two were not connected. Given we were supporting the site after go live, adding this level of redundancy was really useful, and negated the need for Sanity’s enterprise support costs.

    The result

    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.

    Covid-19

    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.

    They Said

    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

    Technologies & Integrations

    Sign up to our newsletter?


    Trust us, it won't be that often, and only when we have something interesting to say.

    We'll never share your email with anyone else. By clicking 'subscribe' you agree to Spork Digital Ltd storing and using the information above as set out in their Privacy Policy.