<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-smooz4hq-1"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><script>
      // Stamp html.js before anything paints. Every parse-time hide that a
      // script later reveals is gated on it (see the html:not(.js) rules in
      // the global styles and in PageHeader), so however scripts end up not
      // running — disabled, blocked, or failing to load — nothing stays
      // hidden. Client-side navigations copy the incoming <html> attributes
      // over the current ones, so the class is added to each new document.
      document.documentElement.classList.add("js");
      document.addEventListener("astro:before-swap", (event) => {
        event.newDocument.documentElement.classList.add("js");
      });
    </script><title>A home for 50 years of British advertising — Little Website co.</title><meta name="description" content="British Arrows has celebrated British advertising since 1976. It's a not-for-profit organisation, run by a small team, that brings the whole UK industry…"><link rel="canonical" href="https://littlewebsite.co/work/british-arrows"><meta property="og:site_name" content="Little Website co."><meta property="og:type" content="website"><meta property="og:title" content="A home for 50 years of British advertising"><meta property="og:description" content="British Arrows has celebrated British advertising since 1976. It's a not-for-profit organisation, run by a small team, that brings the whole UK industry…"><meta property="og:url" content="https://littlewebsite.co/work/british-arrows"><meta property="og:image" content="https://image.mux.com/quNhUzvhDa02gB1E7uNpn7202zY00pTl7uXfMk3utHr8vI/thumbnail.jpg?time=0&amp;width=1200&amp;height=630&amp;fit_mode=smartcrop"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Work","item":"https://littlewebsite.co/work"},{"@type":"ListItem","position":2,"name":"A home for 50 years of British advertising","item":"https://littlewebsite.co/work/british-arrows"}]}]}</script><meta name="theme-color" content="#111111"><link rel="preconnect" href="https://image.mux.com"><link rel="preconnect" href="https://stream.mux.com" crossorigin><link rel="preload" href="/fonts/SaansMedium.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/GeistVariable.woff2" as="font" type="font/woff2" crossorigin><link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"><link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%20fill%3D%22%23a929f3%22%2F%3E%3C%2Fsvg%3E" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><script defer src="https://cloud.umami.is/script.js" data-website-id="c12e5aef-7d1c-4853-b8d0-dded39f2d9f6"></script><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.BiFPjC_j.js"></script><style>.article-list[data-astro-cid-shu4jsu4]{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.article-list__item[data-astro-cid-shu4jsu4]{border-bottom:1px solid var(--line);opacity:0}.article-list__link[data-astro-cid-shu4jsu4]{display:block;padding:clamp(1.5rem,3vw,2.5rem) 0;color:inherit;text-decoration:none}@media(min-width:700px){.article-list__link[data-astro-cid-shu4jsu4]{display:flex}.article-list__date[data-astro-cid-shu4jsu4]{flex:0 0 50%}.article-list__text[data-astro-cid-shu4jsu4]{flex:1;min-width:0}}.article-list__date[data-astro-cid-shu4jsu4]{display:block;margin:0 0 .75rem;color:var(--text-muted)}.article-list__title[data-astro-cid-shu4jsu4]{margin:0;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.1;text-wrap:balance;transition:color .3s ease}.article-list__link[data-astro-cid-shu4jsu4]:hover .article-list__title[data-astro-cid-shu4jsu4]{color:var(--accent)}
</style><link rel="stylesheet" href="/_astro/Section.Bu_tEn2Y.css"><style>.text-with-heading[data-astro-cid-3c6a7m4u]{--heading-size: 1.2em;@media(min-width:700px){display:flex}}.text-with-heading__heading[data-astro-cid-3c6a7m4u]{margin:0 0 2em;@media(min-width:700px){flex:0 0 50%;box-sizing:border-box;padding-right:var(--content-padding);margin:0}}.text-with-heading__heading[data-astro-cid-3c6a7m4u] h2[data-astro-cid-3c6a7m4u]{font-size:var(--heading-size);margin:0;max-width:20ch;text-wrap:balance;opacity:0;-webkit-font-smoothing:antialiased}.text-with-heading--large[data-astro-cid-3c6a7m4u] .text-with-heading__heading[data-astro-cid-3c6a7m4u] h2[data-astro-cid-3c6a7m4u]{font-size:1.5em}.text-with-heading__body[data-astro-cid-3c6a7m4u]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--column-outdent: 0px;opacity:.9;@media(min-width:700px){flex:1;--column-outdent: 100%}}.text-with-heading--no-heading[data-astro-cid-3c6a7m4u] .text-with-heading__body[data-astro-cid-3c6a7m4u]{@media(min-width:700px){margin-left:50%}}.text-with-heading__body[data-astro-cid-3c6a7m4u]>*,.text-with-heading__body[data-astro-cid-3c6a7m4u]>:is(ul,ol)>li{opacity:0}.text-with-heading__body[data-astro-cid-3c6a7m4u]>:is(.pt-media,ul,ol){opacity:1}.text-with-heading__body[data-astro-cid-3c6a7m4u] li::marker{color:color-mix(in srgb,currentColor calc(var(--marker-opacity, 1) * 100%),transparent)}.text-with-heading__body[data-astro-cid-3c6a7m4u]>h2{font-size:var(--heading-size);margin:3em 0 1em;text-wrap:balance;color:#fff}.text-with-heading__body[data-astro-cid-3c6a7m4u]>:first-child{margin-top:0}.text-with-heading__body[data-astro-cid-3c6a7m4u]>:last-child{margin-bottom:0}
</style><link rel="stylesheet" href="/_astro/PageLayout.BWfiaA9R.css"><style>.case-study-card[data-astro-cid-o4tn2z2v]{position:relative;isolation:isolate;overflow:hidden;border-radius:.75rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;aspect-ratio:3 / 4;padding:clamp(1.2rem,2vw,2rem);box-sizing:border-box;background:var(--surface);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.case-study-card--has-image[data-astro-cid-o4tn2z2v]{color:#f3f3f3}.case-study-card--has-image[data-astro-cid-o4tn2z2v]:before{content:"";position:absolute;inset:0;z-index:-1;background:#0009;transition:background-color .3s ease}.case-study-card--has-image[data-astro-cid-o4tn2z2v]:hover:before{background-color:#000c}.case-study-card[data-astro-cid-o4tn2z2v]:after{content:"";position:absolute;inset:0;border:1px solid var(--accent);border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .3s ease}.case-study-card[data-astro-cid-o4tn2z2v]:hover:after{opacity:1}.case-study-card__image[data-astro-cid-o4tn2z2v]{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1),filter .3s ease}.case-study-card[data-astro-cid-o4tn2z2v]:hover .case-study-card__image[data-astro-cid-o4tn2z2v]{transform:scale(1.04);filter:grayscale(1)}@media(prefers-reduced-motion:reduce){.case-study-card__image[data-astro-cid-o4tn2z2v]{transition:none}.case-study-card[data-astro-cid-o4tn2z2v]:hover .case-study-card__image[data-astro-cid-o4tn2z2v]{transform:none}}.case-study-card__title[data-astro-cid-o4tn2z2v]{margin:0;font-size:clamp(1.8rem,3vw,1.8rem);line-height:1.1;text-wrap:balance}.case-study-card__client[data-astro-cid-o4tn2z2v]{margin:0}.case-study-card__title[data-astro-cid-o4tn2z2v],.case-study-card__client[data-astro-cid-o4tn2z2v]{transition:color .3s ease}.case-study-card[data-astro-cid-o4tn2z2v]:hover [data-astro-cid-o4tn2z2v]:is(.case-study-card__title,.case-study-card__client){color:var(--accent)}
</style><style>[data-astro-transition-scope="astro-smooz4hq-1"] { view-transition-name: astro-smooz4hq-1; }@layer astro { ::view-transition-old(astro-smooz4hq-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-smooz4hq-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-smooz4hq-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-smooz4hq-1"],
			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-smooz4hq-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-smooz4hq-1"],
			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-smooz4hq-1"] { animation: none; mix-blend-mode: normal; }</style></head> <body style="--accent-srgb: #a929f3; --accent-p3: color(display-p3 0.6099 0.2048 0.9185)"> <a href="#main-content" class="skip-to-content">Skip to content</a> <header class="site-header" id="site-header" data-astro-cid-ctg3m53h data-astro-transition-persist="astro-exhj5wib-2"> <div class="site-header__inner" data-astro-cid-ctg3m53h> <a href="/" class="brand" data-astro-cid-ctg3m53h>Little Website Co.</a>  <button type="button" class="site-header__menu-trigger" popovertarget="site-nav-dialog" aria-haspopup="dialog" data-astro-cid-ctg3m53h> <span class="site-header__label site-header__label--open" data-astro-cid-ctg3m53h>Menu</span> <span class="site-header__label site-header__label--close" data-astro-cid-ctg3m53h>Close</span> </button> </div>  <div class="page-wipe" aria-hidden="true" data-astro-cid-ctg3m53h></div> <div popover id="site-nav-dialog" class="site-nav-dialog" role="dialog" aria-modal="true" aria-label="Site navigation" data-astro-cid-ctg3m53h> <nav aria-label="Primary" class="site-nav-dialog__nav" data-astro-cid-ctg3m53h> <ul data-astro-cid-ctg3m53h> <li data-astro-cid-ctg3m53h> <a href="/" data-astro-cid-ctg3m53h>Home</a> </li><li data-astro-cid-ctg3m53h> <a href="/about" data-astro-cid-ctg3m53h>About</a> </li><li data-astro-cid-ctg3m53h> <a href="/work" data-astro-cid-ctg3m53h>Work</a> </li><li data-astro-cid-ctg3m53h> <a href="/contact" data-astro-cid-ctg3m53h>Contact</a> </li> </ul> </nav> </div> </header> <script type="module" src="/_astro/SiteHeader.astro_astro_type_script_index_0_lang.DAbuppEi.js"></script> <main id="main-content" tabindex="-1"> <div class="page-header page-header--fullscreen" data-astro-cid-wu5dj4rx> <div class="page-header__fixed" data-astro-cid-wu5dj4rx> <div class="page-header__stage" data-astro-cid-wu5dj4rx> <div class="page-header__content" data-astro-cid-wu5dj4rx> <nav class="page-header__crumbs" aria-label="Breadcrumb" data-astro-cid-wu5dj4rx> <ol data-astro-cid-wu5dj4rx> <li data-astro-cid-wu5dj4rx> <a href="/work" data-astro-cid-wu5dj4rx>Work</a> </li> </ol> </nav> <h1 data-astro-cid-wu5dj4rx>  A home for 50 years of British advertising  </h1> </div> <div class="page-header__media page-header__media--default" aria-hidden="true" inert data-astro-cid-wu5dj4rx> <img class="page-header__poster" src="https://image.mux.com/quNhUzvhDa02gB1E7uNpn7202zY00pTl7uXfMk3utHr8vI/thumbnail.webp?time=0&amp;width=1920" alt="" fetchpriority="high" decoding="async" data-astro-cid-wu5dj4rx> <mux-player class="page-header__asset" preload="metadata" muted="true" loop="true" playsinline="true" playback-id="quNhUzvhDa02gB1E7uNpn7202zY00pTl7uXfMk3utHr8vI" poster="https://image.mux.com/quNhUzvhDa02gB1E7uNpn7202zY00pTl7uXfMk3utHr8vI/thumbnail.webp?time=0&amp;width=1920" disable-cookies="true" data-astro-cid-wu5dj4rx="true"></mux-player> <script type="module" src="/_astro/Halftone.astro_astro_type_script_index_0_lang.B654ZzTc.js"></script> </div> <button type="button" class="play-pause page-header__playpause" data-play-pause aria-label="Pause video" data-astro-cid-wu5dj4rx="true" data-astro-cid-audhsa2f> <svg class="play-pause__icon play-pause__icon--pause" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-audhsa2f> <rect x="6" y="5" width="4" height="14" data-astro-cid-audhsa2f></rect> <rect x="14" y="5" width="4" height="14" data-astro-cid-audhsa2f></rect> </svg> <svg class="play-pause__icon play-pause__icon--play" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-audhsa2f> <path d="M8 5v14l11-7z" data-astro-cid-audhsa2f></path> </svg> </button> </div> </div> </div> <script type="module" src="/_astro/PageHeader.astro_astro_type_script_index_0_lang.DWY5m928.js"></script> <div class="page-main">   <section class="section section--default" data-astro-cid-sh445jdo>  <div class="container" data-astro-cid-3c6a7m4u> <div class="text-with-heading" data-astro-cid-3c6a7m4u> <div class="text-with-heading__heading" data-astro-cid-3c6a7m4u> <h2 data-astro-cid-3c6a7m4u>Overview</h2> </div> <div class="text-with-heading__body" data-astro-cid-3c6a7m4u> <p>British Arrows has celebrated British advertising since 1976. It&#39;s a not-for-profit organisation, run by a small team, that brings the whole UK industry together once a year to champion and reward the best in the business.</p><p>Having already worked with the team on the previous iteration of their website, and with the 50th anniversary celebrations coming up, British Arrows once again recruited us to redesign and build a new site.</p> </div> </div> </div> <script type="module" src="/_astro/TextWithHeading.astro_astro_type_script_index_0_lang.Cc9TTFjd.js"></script> </section> <script type="module" src="/_astro/Section.astro_astro_type_script_index_0_lang.B_J_wK6f.js"></script><section class="section section--default" data-astro-cid-sh445jdo>  <div class="container" data-astro-cid-3c6a7m4u> <div class="text-with-heading" data-astro-cid-3c6a7m4u> <div class="text-with-heading__heading" data-astro-cid-3c6a7m4u> <h2 data-astro-cid-3c6a7m4u>Discovery</h2> </div> <div class="text-with-heading__body" data-astro-cid-3c6a7m4u> <p>We audited the old site, identified the strengths and weaknesses of each section and compiled a list of goals for each page. This resulted in comprehensive wireframes that we used to map out, test and improve on every feature.</p><div class="pt-media pt-media--full" data-astro-cid-fuzwuv66> <div class="media media--block" data-astro-cid-vh5pro65><ul class="media__list" data-astro-cid-vh5pro65><li class="media__item" data-astro-cid-vh5pro65><figure class="media-figure" data-astro-cid-s5hwpzig> <div class="media-figure__frame" data-astro-cid-s5hwpzig> <img class="media-figure__asset" src="https://cdn.sanity.io/images/m1781ee3/production/33185bbcd8e76d518b75cc69d6625b5585bbe4cc-2400x1700.png?w=1200&amp;fit=max&amp;auto=format&amp;q=75" srcset="https://cdn.sanity.io/images/m1781ee3/production/33185bbcd8e76d518b75cc69d6625b5585bbe4cc-2400x1700.png?w=480&amp;fit=max&amp;auto=format&amp;q=75 480w, https://cdn.sanity.io/images/m1781ee3/production/33185bbcd8e76d518b75cc69d6625b5585bbe4cc-2400x1700.png?w=800&amp;fit=max&amp;auto=format&amp;q=75 800w, https://cdn.sanity.io/images/m1781ee3/production/33185bbcd8e76d518b75cc69d6625b5585bbe4cc-2400x1700.png?w=1200&amp;fit=max&amp;auto=format&amp;q=75 1200w, https://cdn.sanity.io/images/m1781ee3/production/33185bbcd8e76d518b75cc69d6625b5585bbe4cc-2400x1700.png?w=1600&amp;fit=max&amp;auto=format&amp;q=75 1600w, https://cdn.sanity.io/images/m1781ee3/production/33185bbcd8e76d518b75cc69d6625b5585bbe4cc-2400x1700.png?w=2400&amp;fit=max&amp;auto=format&amp;q=75 2400w" sizes="auto, (min-width: 1200px) 1200px, 100vw" alt="A mosaic of wireframes for the British Arrows site" width="2400" height="1700" loading="lazy" decoding="async" data-astro-cid-s5hwpzig> </div>  </figure> <script type="module" src="/_astro/MediaFigure.astro_astro_type_script_index_0_lang.BL_Mqgdi.js"></script></li></ul></div><script type="module" src="/_astro/Media.astro_astro_type_script_index_0_lang.BABXiG7H.js"></script> </div> </div> </div> </div>  </section> <section class="section section--default" data-astro-cid-sh445jdo>  <div class="container" data-astro-cid-3c6a7m4u> <div class="text-with-heading" data-astro-cid-3c6a7m4u> <div class="text-with-heading__heading" data-astro-cid-3c6a7m4u> <h2 data-astro-cid-3c6a7m4u>Re-engineered homepage</h2> </div> <div class="text-with-heading__body" data-astro-cid-3c6a7m4u> <p>One of the major issues with the old homepage is that it would go stale very quickly, with no way of promoting content to the heading. Using Craft CMS, we re-built the homepage to give British Arrows more control over updating the editorial content. The team can now pin news articles and features to the top of the site, keeping everything fresh in the lead-up to each event.</p><div class="pt-media pt-media--full" data-astro-cid-fuzwuv66> <div class="media media--block media--padded" data-astro-cid-vh5pro65><ul class="media__list" data-astro-cid-vh5pro65><li class="media__item" data-astro-cid-vh5pro65><figure class="media-figure" data-astro-cid-s5hwpzig> <div class="media-figure__frame" data-astro-cid-s5hwpzig> <img class="media-figure__asset" src="https://cdn.sanity.io/images/m1781ee3/production/83e9045e8dca5ce9bfad951df80abdcd72d1fc06-3578x4293.png?w=1200&amp;fit=max&amp;auto=format&amp;q=75" srcset="https://cdn.sanity.io/images/m1781ee3/production/83e9045e8dca5ce9bfad951df80abdcd72d1fc06-3578x4293.png?w=480&amp;fit=max&amp;auto=format&amp;q=75 480w, https://cdn.sanity.io/images/m1781ee3/production/83e9045e8dca5ce9bfad951df80abdcd72d1fc06-3578x4293.png?w=800&amp;fit=max&amp;auto=format&amp;q=75 800w, https://cdn.sanity.io/images/m1781ee3/production/83e9045e8dca5ce9bfad951df80abdcd72d1fc06-3578x4293.png?w=1200&amp;fit=max&amp;auto=format&amp;q=75 1200w, https://cdn.sanity.io/images/m1781ee3/production/83e9045e8dca5ce9bfad951df80abdcd72d1fc06-3578x4293.png?w=1600&amp;fit=max&amp;auto=format&amp;q=75 1600w, https://cdn.sanity.io/images/m1781ee3/production/83e9045e8dca5ce9bfad951df80abdcd72d1fc06-3578x4293.png?w=2400&amp;fit=max&amp;auto=format&amp;q=75 2400w" sizes="auto, (min-width: 1200px) 1200px, 100vw" alt="A screenshot showing the redesigned British Arrows home page" width="3578" height="4293" loading="lazy" decoding="async" data-astro-cid-s5hwpzig> </div> <figcaption class="media-figure__caption" data-astro-cid-s5hwpzig>The redesigned home page</figcaption> </figure> </li></ul></div> </div> </div> </div> </div>  </section> <section class="section section--default" data-astro-cid-sh445jdo>  <div class="container" data-astro-cid-3c6a7m4u> <div class="text-with-heading" data-astro-cid-3c6a7m4u> <div class="text-with-heading__heading" data-astro-cid-3c6a7m4u> <h2 data-astro-cid-3c6a7m4u>Event pages that evolve</h2> </div> <div class="text-with-heading__body" data-astro-cid-3c6a7m4u> <p>Instead of several disjointed pages, each event now lives on one dynamic page, built from blocks that can be set to show before the event, after it, or always. The page grows and changes as the event approaches, then again once it’s passed.</p><div class="pt-media pt-media--full" data-astro-cid-fuzwuv66> <div class="media media--block media--padded" data-astro-cid-vh5pro65><ul class="media__list" data-astro-cid-vh5pro65><li class="media__item" data-astro-cid-vh5pro65><figure class="media-figure" data-astro-cid-s5hwpzig> <div class="media-figure__frame" data-astro-cid-s5hwpzig>  <mux-player class="media-figure__asset" style="aspect-ratio: 48 / 29" data-playback-id="73rLkkKI8xsKUX7RSTJkG02d7d100QP6PM5inp4hiIBVg" data-poster="https://image.mux.com/73rLkkKI8xsKUX7RSTJkG02d7d100QP6PM5inp4hiIBVg/thumbnail.webp?time=0&amp;width=1920" preload="auto" playsinline="true" autoplay="muted" muted="true" loop="true" disable-cookies="true" aria-label="A video showing an event page on the new British Arrows website" data-astro-cid-s5hwpzig="true"></mux-player> <button type="button" class="play-pause play-pause--small media-figure__play-pause" data-play-pause aria-label="Pause video" data-astro-cid-s5hwpzig="true" data-astro-cid-audhsa2f> <svg class="play-pause__icon play-pause__icon--pause" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-audhsa2f> <rect x="6" y="5" width="4" height="14" data-astro-cid-audhsa2f></rect> <rect x="14" y="5" width="4" height="14" data-astro-cid-audhsa2f></rect> </svg> <svg class="play-pause__icon play-pause__icon--play" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-audhsa2f> <path d="M8 5v14l11-7z" data-astro-cid-audhsa2f></path> </svg> </button>  </div> <figcaption class="media-figure__caption" data-astro-cid-s5hwpzig>The new event page</figcaption> </figure> </li></ul></div> </div> </div> </div> </div>  </section> <section class="section section--default" data-astro-cid-sh445jdo>  <div class="container" data-astro-cid-3c6a7m4u> <div class="text-with-heading" data-astro-cid-3c6a7m4u> <div class="text-with-heading__heading" data-astro-cid-3c6a7m4u> <h2 data-astro-cid-3c6a7m4u>Enriching the archive</h2> </div> <div class="text-with-heading__body" data-astro-cid-3c6a7m4u> <p>The original archive was only built to handle events from the last 5 years or so. However, the 50th anniversary rebuild gave us the opportunity to create a site that could accommodate all 50 years of winners, which is the equivalent of 4,008 awards across 3,568 films. This called for better filtering, search and performance.</p><div class="pt-media pt-media--full" data-astro-cid-fuzwuv66> <div class="media media--block media--padded" data-astro-cid-vh5pro65><ul class="media__list" data-astro-cid-vh5pro65><li class="media__item" data-astro-cid-vh5pro65><figure class="media-figure" data-astro-cid-s5hwpzig> <div class="media-figure__frame" data-astro-cid-s5hwpzig> <img class="media-figure__asset" src="https://cdn.sanity.io/images/m1781ee3/production/db0fa6c1a970128bcfba222464b3d4f173a07380-3610x2464.png?w=1200&amp;fit=max&amp;auto=format&amp;q=75" srcset="https://cdn.sanity.io/images/m1781ee3/production/db0fa6c1a970128bcfba222464b3d4f173a07380-3610x2464.png?w=480&amp;fit=max&amp;auto=format&amp;q=75 480w, https://cdn.sanity.io/images/m1781ee3/production/db0fa6c1a970128bcfba222464b3d4f173a07380-3610x2464.png?w=800&amp;fit=max&amp;auto=format&amp;q=75 800w, https://cdn.sanity.io/images/m1781ee3/production/db0fa6c1a970128bcfba222464b3d4f173a07380-3610x2464.png?w=1200&amp;fit=max&amp;auto=format&amp;q=75 1200w, https://cdn.sanity.io/images/m1781ee3/production/db0fa6c1a970128bcfba222464b3d4f173a07380-3610x2464.png?w=1600&amp;fit=max&amp;auto=format&amp;q=75 1600w, https://cdn.sanity.io/images/m1781ee3/production/db0fa6c1a970128bcfba222464b3d4f173a07380-3610x2464.png?w=2400&amp;fit=max&amp;auto=format&amp;q=75 2400w" sizes="auto, (min-width: 1200px) 1200px, 100vw" alt="Screenshot of the British Arrows archive page showing a pop-over modal" width="3610" height="2464" loading="lazy" decoding="async" data-astro-cid-s5hwpzig> </div> <figcaption class="media-figure__caption" data-astro-cid-s5hwpzig>The redesigned archive</figcaption> </figure> </li><li class="media__item" data-astro-cid-vh5pro65><figure class="media-figure" data-astro-cid-s5hwpzig> <div class="media-figure__frame" data-astro-cid-s5hwpzig> <img class="media-figure__asset" src="https://cdn.sanity.io/images/m1781ee3/production/0bb5aaf1215805e84f3e10ad313e5e860246decd-3610x2448.png?w=1200&amp;fit=max&amp;auto=format&amp;q=75" srcset="https://cdn.sanity.io/images/m1781ee3/production/0bb5aaf1215805e84f3e10ad313e5e860246decd-3610x2448.png?w=480&amp;fit=max&amp;auto=format&amp;q=75 480w, https://cdn.sanity.io/images/m1781ee3/production/0bb5aaf1215805e84f3e10ad313e5e860246decd-3610x2448.png?w=800&amp;fit=max&amp;auto=format&amp;q=75 800w, https://cdn.sanity.io/images/m1781ee3/production/0bb5aaf1215805e84f3e10ad313e5e860246decd-3610x2448.png?w=1200&amp;fit=max&amp;auto=format&amp;q=75 1200w, https://cdn.sanity.io/images/m1781ee3/production/0bb5aaf1215805e84f3e10ad313e5e860246decd-3610x2448.png?w=1600&amp;fit=max&amp;auto=format&amp;q=75 1600w, https://cdn.sanity.io/images/m1781ee3/production/0bb5aaf1215805e84f3e10ad313e5e860246decd-3610x2448.png?w=2400&amp;fit=max&amp;auto=format&amp;q=75 2400w" sizes="auto, (min-width: 1200px) 1200px, 100vw" alt="A screenshot of an individual film's page showing the title, video, credits and awards." width="3610" height="2448" loading="lazy" decoding="async" data-astro-cid-s5hwpzig> </div> <figcaption class="media-figure__caption" data-astro-cid-s5hwpzig>We redesigned the winning films’ detail pages to give the work maximum visibility.</figcaption> </figure> </li></ul></div> </div> </div> </div> </div>  </section> <section class="section section--default" data-astro-cid-sh445jdo>  <div class="container" data-astro-cid-3c6a7m4u> <div class="text-with-heading" data-astro-cid-3c6a7m4u> <div class="text-with-heading__heading" data-astro-cid-3c6a7m4u> <h2 data-astro-cid-3c6a7m4u>Deep Airtable integration</h2> </div> <div class="text-with-heading__body" data-astro-cid-3c6a7m4u> <p>The British Arrows team manages all the winners, films, credits and related companies from an Airtable database. This acts as one definitive source that any member of the team can easily navigate and update. We achieved this by building a custom Craft CMS integration that syncs the data into the site.</p><div class="pt-media" data-astro-cid-fuzwuv66> <div class="media media--block" data-astro-cid-vh5pro65><ul class="media__list" data-astro-cid-vh5pro65><li class="media__item" data-astro-cid-vh5pro65><figure class="media-figure" data-astro-cid-s5hwpzig> <div class="media-figure__frame" data-astro-cid-s5hwpzig>  <mux-player class="media-figure__asset" style="aspect-ratio: 1024 / 643" data-playback-id="0000A6XmVYvB45XXOTA8MV9lI900PMdkz6SEsNcPREmXWY" data-poster="https://image.mux.com/0000A6XmVYvB45XXOTA8MV9lI900PMdkz6SEsNcPREmXWY/thumbnail.webp?time=0&amp;width=1920" preload="auto" playsinline="true" autoplay="muted" muted="true" loop="true" disable-cookies="true" aria-label="Scrolling through the winners on airtable" data-astro-cid-s5hwpzig="true"></mux-player> <button type="button" class="play-pause play-pause--small media-figure__play-pause" data-play-pause aria-label="Pause video" data-astro-cid-s5hwpzig="true" data-astro-cid-audhsa2f> <svg class="play-pause__icon play-pause__icon--pause" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-audhsa2f> <rect x="6" y="5" width="4" height="14" data-astro-cid-audhsa2f></rect> <rect x="14" y="5" width="4" height="14" data-astro-cid-audhsa2f></rect> </svg> <svg class="play-pause__icon play-pause__icon--play" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-audhsa2f> <path d="M8 5v14l11-7z" data-astro-cid-audhsa2f></path> </svg> </button>  </div>  </figure> </li></ul></div> </div> </div> </div> </div>  </section>    </div> </main> <script type="module">document.addEventListener("astro:page-load",()=>{const e=document.querySelector('link[rel="icon"][type="image/svg+xml"]');e?.replaceWith(e.cloneNode())});</script> </body> </html>