<section class="Global-header">
<div class="Header">
<div class="Header__container constrain">
<a href="/" class="Header__logo focus" title="Home">
<svg role="img" aria-labelledby="clearleft-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 154 54">
<title id="clearleft-logo">Clearleft</title>
<style>
.Logo-streak {
mask-repeat: no-repeat;
stroke-dasharray: 150% 150%;
stroke-dashoffset: 150%;
}
.animateLogo-streak {
animation: swipe 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 0.8s forwards;
}
@keyframes swipe {
from {
stroke-dashoffset: 150%;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<path class="Logo-text" fill="currentColor" d="M152.5 27.5v5.4h-2.4c-5.5 0-8.6-3.3-8.6-9.3v-6.8h-7.4v16.1h-5.6V16.8h-3.1l-.1-4.6h3.1v-.6c0-6 3-9.3 8.6-9.3h2.4v5.4H137c-2 0-2.9 1.3-2.9 4v.6h7.4v-4l5.6-3.6v7.4h4v4.6h-4v6.8c0 2.7 1 4 2.9 4h2.5zM77 11.9h5.6v21H77v-2c-1.7 1.7-4 2.7-6.4 2.6-5.7 0-10.1-4.8-10.1-11s4.4-11 10.1-11c2.4-.1 4.7.8 6.4 2.5v-2.1zm0 10.5c0-3.5-2.4-6.1-5.6-6.1s-5.6 2.6-5.6 6.1 2.3 6.1 5.6 6.1S77 26 77 22.4zm12.9-8.7v-1.8h-5.4v21h5.6v-9.5c0-4.5.8-6.8 5-6.8h1.5v-5.4h-.2c-3 0-5.2.9-6.5 2.5zM98 32.8h5.6V2.4H98v30.4zM17 8.1c3.2 0 6.1 1.8 7.6 4.5l.1.2.2-.1 4.8-3.1.3-.1-.1-.2C27 5 22.2 2.4 17.1 2.4 8.6 2.3 1.6 9.1 1.5 17.5v.3c-.1 8.5 6.8 15.4 15.3 15.5h.3c5.1.1 9.9-2.5 12.8-6.7l.1-.2-5.2-3.4-.1.2c-1.6 2.7-4.5 4.4-7.6 4.5-5.2 0-9.2-4.3-9.2-9.8 0-4.8 3.4-9.8 9.1-9.8zm14.6 24.7h5.6V2.4h-5.6v30.4zm94-10.5c0 .6 0 1.1-.1 1.7v.5h-14.8c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1s4.3-11.1 10.6-11.1c5.7-.2 9.8 4.4 9.9 10.9zm-5.7-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2zm-60.7 2.2c0 .6 0 1.1-.1 1.7v.5H44.3c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1S43 11.2 49.2 11.2c5.9 0 10 4.6 10 11.1zm-5.6-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2z" />
<clippath id="headerMask">
<path d="M151.8 44c-.2-1-1.1-1.6-2-1.4h-.1c-1.1.4-2.2.4-3.3.2-1.4-.2-2.9-.3-4.3-.5-2.4-.3-4.8-.5-7.2-.7-2.6-.2-5.3-.3-7.9-.5-2.5-.2-4.9-.4-7.4-.5-5.2-.3-10.5-.5-15.7-.6-4.4-.2-19.6-.3-23.9-.3-3.1 0-6.1.1-9.2.2-4.1 0-18.9.3-23 .6-4.3.2-8.7.4-13 .7-4 .3-8 .5-11.9.7-.9 0-1.8.1-2.7.3-2.4 0-4.4.2-6.5.3-1.7.1-3.4.1-5 .4v0c-.7 0-1-.4-2.1-.3s-2.1.5-2.1 1.1c-.5.1 0 .4-.6.5v.5c.4.2.6.4 0 .7v.2c.3-.1.4 0 .6.1v.4c-.4.2-.2.4-.1.5s.5.4.4.7c-.1.5.1 1 .5 1.3v.2c.1.7 1.1 1.3 1.2 2 .1.5 1 1 2.3.9 1.1-.1 1.5-.5 2.5-.7.2 0 .8-.1 1-.1 4.2-.3 8.5-.6 12.7-1 1.2-.1 2.6-.1 3.7-.3 1.5-.3 3.1-.3 4.6-.5 2.9-.3 5.8-.5 8.6-.5 2.4 0 4.8-.3 7.2-.4 1.3-.1 2.7.1 4-.1.5-.1 1-.1 1.6-.1 1.4.1 13.7-.1 15.1-.1 2.8 0 5.6-.1 8.4-.2 3.3-.1 17.4-.2 20.7 0 1.1 0 2.3.2 3.4.2 3.1-.2 6.2.1 9.3.2 2.7.1 5.4.3 8.1.4s5.2.2 7.8.5c1 .1 2.1.2 3.1.3.8.1 1.4-.2 2.2-.1 2 .3 4.1.5 6.2.6 1.1 0 2.2.1 3.2.3 1.6.3 3.1.5 4.7.7l1 .4c.9.4 1.8.5 2.8.3.5-.3.8-1 .6-1.6v-.2c.1-.2.2-.3.1-.5.3-.1.3-.2.2-.4.2-.6.7-1.1.4-1.7-.1-.2-.4-.6.4-.8v-.5c-.4 0-.4-.2-.5-.3-.2-.5-.1-1-.1-1.5zM78.3 45.3h-.2.2" />
</clippath>
<path class="Logo-streak animateLogo-streak" clip-path="url(#headerMask)" fill-rule="evenodd" fill="none" stroke="#23D8A0" stroke-width="13" d="M-1.1 49.4s50.4-6.3 81.9-6 77.1 4.6 77.1 4.6" />
</svg> </a>
<div class="Header__desktop-nav">
<nav class="PrimaryNav" aria-label="Primary">
<ul class="PrimaryNav__list" role="list">
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Services
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Work
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Thinking
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
About
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div class="Header__mobile-nav">
<button class="Button focus Button--outline Header__toggle" data-a11y-dialog-show="mobile-nav"><span>Menu</span></button>
<!-- dialog markup -->
<div class="Dialog Header__mobile-nav-modal" id="mobile-nav" data-a11y-dialog="mobile-nav" aria-labelledby="mobile-nav-title" aria-hidden="true">
<div role="document" class="Dialog__content Header__mobile-nav-inner constrain">
<h2 class="vh" id="mobile-nav-title">
Primary Navigation
</h2>
<button type="button" data-a11y-dialog-hide aria-label="Close dialog" class="Header__mobile-nav-close">
<span class="vh">Close dialog</span>
</button>
<nav class="PrimaryNav PrimaryNav--mobile" aria-label="Primary">
<ul class="PrimaryNav__list" role="list">
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Services
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Work
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Thinking
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
About
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<nav class="constrain" aria-label="Breadcrumb">
<span class="eyebrow"> </span>
</nav>
<section class="Page-header">
<div class="constrain">
<div class="Page-header__content grid grid--v-gap-l grid--10/2">
<div class="flow--m">
<header class="flow">
<h1 class="Page-header__header h h-1">
A champion for design in your organisation
</h1>
</header>
<div class="flow--m">
<h2 class="Page-header__subtitle h h-4">
Now, more than ever, we all need great design.
</h2>
<div class="body wysiwyg--with-lead flow text-grey">
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<div class="flow--l">
<header class="flow--3xs">
<h3 class="eyebrow eyebrow--accent eyebrow--black">
We believe in
</h3>
</header>
<div class="grid grid--of-three grid--v-gap">
<article class="Nutshell flow--s Nutshell--border">
<div class="flow--2xs">
<header class="flow--2xs">
<h2 class="h h-4">
Bold curiosity
</h2>
</header>
</div>
</article>
<article class="Nutshell flow--s Nutshell--border">
<div class="flow--2xs">
<header class="flow--2xs">
<h2 class="h h-4">
Committed allies
</h2>
</header>
</div>
</article>
<article class="Nutshell flow--s Nutshell--border">
<div class="flow--2xs">
<header class="flow--2xs">
<h2 class="h h-4">
Exquisite craftship
</h2>
</header>
</div>
</article>
</div>
</div>
<div class="Image-grid">
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/splash1000w.jpg" loading="lazy" />
</div>
<div class="Image-grid__content theme--dark flow">
<h2 class="h h-3">
Our Studio
</h2>
<div class="body flow">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/jeremy-keith-2x.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/hero2.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/splash600w.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/hero4.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/case600w.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/hero1.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/hero3.jpg" loading="lazy" />
</div>
</div>
<div class="grid grid--of-three staggered-layout">
<article class="flow">
<span class="eyebrow eyebrow--black">
Jeremy is currently
</span>
<blockquote class="Is-currently flow--2xs">
<div class="h h-5">Creating a digital-first brand for a brilliant new educational activities platform</div>
<img src="/v6-assets/img/author-image.png" alt="" loading="lazy" />
</blockquote>
</article>
<article class="flow">
<span class="eyebrow eyebrow--black">
Jeremy is currently
</span>
<blockquote class="Is-currently flow--2xs">
<div class="h h-5">Sifting through 150 applications to find our new Business Relationship Manager</div>
<img src="/v6-assets/img/author-image.png" alt="" loading="lazy" />
</blockquote>
</article>
<article class="flow">
<span class="eyebrow eyebrow--black">
Jeremy is currently
</span>
<blockquote class="Is-currently flow--2xs">
<div class="h h-5">Sitting in on design sprint magic with a publishing client, looking comfortable with the process in their second sprint</div>
<img src="/v6-assets/img/author-image.png" alt="" loading="lazy" />
</blockquote>
</article>
</div>
<footer class="staggered-layout__footer">
<a class="combo-button focus" href="/about/team">
<span class="">Meet the team</span>
<div>
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Icon--s">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
</div>
</a>
</footer>
<div class="Timeline">
<div class="Timeline__window body small flow">
<h2>
How did we get here?
</h2>
<p>Andy, Rich and Jeremy founded Clearleft in 2005, one of the first dedicated user experience consultancies in the UK. Over the last 15 years we’ve been helping organisations of all shapes, sizes and sectors realise their digital potential. From renowned institutions to global brands, such as the BBC, Natural History Museum, Virgin, Penguin and J.P. Morgan.</p>
</div>
<footer class="Timeline__footer flow">
<h3 class="h h-5 text-white">
Take a trip down memory lane with us
</h3>
<a class="combo-button focus combo-button--dark-red" href="#">
<span class="">Stroll along our timeline</span>
<div>
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Icon--s">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
</div>
</a>
</footer>
<svg class="Timeline__stamp Timeline__stamp--1" xmlns="http://www.w3.org/2000/svg" width="131" height="131" fill="none" viewBox="0 0 131 131">
<g opacity=".6">
<path fill="#fff" d="M54.539 72.6l-.226-.654 1.584-3.673c.44-1.02.582-1.854.343-2.368-.342-.947-1.234-1.234-2.04-.88-.73.29-1.134.89-1.27 1.654l-.764-.136c.096-1.12.728-1.912 1.744-2.248.584-.233 1.15-.255 1.762.01.618.193 1.003.65 1.299 1.31.348.876.13 1.774-.398 2.998l-1.308 2.92 3.644-1.38.29.73-4.66 1.717zM63.504 69.206c-.876.349-1.716.277-2.45-.21-.734-.485-1.369-1.315-1.833-2.483-.464-1.169-.59-2.167-.372-3.065.218-.898.762-1.486 1.638-1.834.876-.349 1.716-.277 2.45.21.734.485 1.369 1.315 1.833 2.484.464 1.168.59 2.166.372 3.064-.218.898-.762 1.486-1.638 1.834zm-.22-.724c.654-.226 1.046-.686 1.176-1.38.13-.694.056-1.476-.35-2.498-.412-.953-.843-1.695-1.449-2.029-.53-.398-1.16-.452-1.814-.225-.654.226-1.046.686-1.176 1.38-.13.694-.056 1.476.35 2.498.413.952.843 1.695 1.443 2.099.536.328 1.16.451 1.82.155zM70.729 66.369c-.876.348-1.716.276-2.45-.21-.735-.486-1.369-1.316-1.833-2.484-.464-1.168-.59-2.166-.373-3.064.219-.899.763-1.487 1.639-1.835.876-.348 1.716-.276 2.45.21.734.486 1.368 1.316 1.833 2.484.464 1.168.59 2.166.372 3.064-.218.899-.762 1.487-1.638 1.835zm-.226-.654c.654-.226 1.046-.686 1.176-1.38.13-.695.056-1.477-.35-2.499-.413-.952-.843-1.694-1.449-2.028-.53-.398-1.16-.452-1.814-.226-.654.226-1.046.686-1.176 1.38-.13.695-.056 1.477.35 2.499.412.952.842 1.694 1.443 2.098.536.328 1.166.382 1.82.156zM75.711 59.25c.66-.297 1.366-.307 1.978-.043.619.194 1.073.656 1.363 1.386.29.73.236 1.36-.098 1.966-.334.606-.79.99-1.52 1.28-1.092.4-2.276.229-2.98-.607l.473-.594c.507.678 1.335.89 2.21.542 1.023-.407 1.515-1.21 1.109-2.233-.412-.952-1.305-1.24-2.327-.834l-1.968.749-1.159-3.767 3.943-1.567.296.66-3.282 1.271.718 2.318 1.244-.528z" />
<path stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" d="M107.811 29.295C87.985 5.758 52.833 2.75 29.295 22.575 5.758 42.4 2.75 77.554 22.575 101.09c19.826 23.537 54.978 26.546 78.516 6.72 23.537-19.826 26.546-54.978 6.72-78.516z" />
<path stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" d="M70.822 14.485C42.817 11.38 17.599 31.563 14.492 59.566c-3.105 28.004 17.078 53.223 45.081 56.329 28.004 3.105 53.223-17.078 56.329-45.082 3.105-28.003-17.078-53.222-45.082-56.328z" />
<path fill="#fff" d="M41.87 93.73c.046.287-.188.549-.469.525-.286.046-.554-.118-.53-.398-.046-.286.188-.548.468-.524.216-.052.478.182.53.398zM35.033 84.612c.38-.32.812-.424 1.296-.312.49.042.892.288 1.143.662l1.64 2.256-5.12 3.793-1.519-2.034c-.25-.374-.354-.806-.312-1.296.042-.49.282-.822.662-1.142.456-.384 1.022-.406 1.57-.218-.162-.578.038-1.267.64-1.709zm-.9 5.565l1.807-1.326-1.134-1.578c-.193-.228-.39-.386-.74-.416-.28-.024-.567.022-.795.214-.228.192-.392.46-.416.74-.024.28.022.566.214.794l1.065 1.572zm2.883-4.83c-.192-.229-.46-.393-.74-.417-.35-.03-.637.016-.865.208-.228.192-.392.46-.486.734-.024.28.022.567.209.865l1.262 1.73 1.882-1.39-1.262-1.73zM33.734 78.365l-1.622 2.471.779 1.618 2.284-1.144.302.59-5.743 2.823-1.144-2.284c-.244-.444-.272-.94-.084-1.488.182-.479.498-.875.942-1.119.368-.18.794-.214 1.214-.178.414.106.752.276 1.008.58l1.698-2.535.366.666zm-3.788 5.53l2.355-1.139-.843-1.694c-.186-.298-.378-.526-.722-.626-.344-.1-.7-.06-.992.056-.298.186-.526.378-.696.716-.1.345-.13.695.056.993l.842 1.694zM26.785 77.982l-.232-.584 6.09-1.947.233.584-6.09 1.947zM28.028 67.58l.356-.04c.788-.144 1.476.056 2.14.536.595.474 1.025 1.216 1.157 2.145.132.928-.086 1.826-.566 2.49a3.314 3.314 0 01-2.156 1.296 3.488 3.488 0 01-2.49-.565c-.729-.556-1.159-1.298-1.291-2.226-.092-.573-.044-1.133.214-1.675.188-.548.504-.944.96-1.328l.378.526c-.678.506-1.112 1.456-.91 2.39.144.788.446 1.378 1.046 1.782.6.404 1.219.599 2.007.454.718-.15 1.308-.452 1.782-1.046.474-.594.604-1.288.46-2.076a2.623 2.623 0 00-.778-1.619c-.39-.386-.939-.574-1.505-.551l.35 2.498-.572.092-.582-3.082zM24.945 60.758l.054-.63 6.383.405-.054.63-2.947-.182-.223 3.437 2.946.182-.054.63-6.383-.406.054-.63 2.807.17.223-3.437-2.806-.17zM26.614 52.79l.554.118-.448 1.936 5.587 1.466-.194.618-5.587-1.466-.517 1.93-.555-.117 1.16-4.485zM34.567 50.509c-.422.81-1.036 1.392-1.906 1.67-.87.279-1.716.277-2.527-.145-.81-.422-1.392-1.036-1.67-1.907-.278-.87-.276-1.716.146-2.526.422-.81 1.036-1.392 1.906-1.67.87-.279 1.716-.277 2.526.145.81.422 1.392 1.036 1.67 1.906.349.877.277 1.717-.145 2.527zm-.542-.258c.34-.676.4-1.377.104-2.036-.226-.655-.745-1.193-1.42-1.533-.677-.34-1.377-.4-2.037-.103-.724.22-1.186.674-1.526 1.35-.34.676-.33 1.382-.104 2.036a2.64 2.64 0 001.35 1.526c.677.34 1.377.4 2.037.104.794-.214 1.256-.668 1.596-1.344zM34.517 38.727l.398-.53 5.022 3.956-.322.466-6.313-.4 4.095 3.243-.398.53-5.022-3.956.322-.467 6.313.4-4.095-3.242zM40.98 37.376a.48.48 0 01-.448-.532.48.48 0 01.532-.448.48.48 0 01.449.532c-.018.21-.252.472-.533.448zM48.17 34.958l2.734-1.458.308.52-3.325 1.76-2.969-5.684 3.248-1.697.309.52-2.729 1.389 1.029 1.992 2.512-1.336.308.52-2.512 1.336 1.086 2.138zM57.169 31.99l-.725.221-2.504-2.048-.83 3.103-.724.22 1.03-3.791-2.831-2.358.654-.226L53.545 29l.742-2.899.654-.226-.935 3.517 3.163 2.598zM60.3 25.065c.572-.092 1.05.09 1.516.412.396.316.71.766.733 1.332.092.572-.09 1.05-.412 1.517-.316.396-.766.71-1.332.732l-1.64.212.292 2.352-.642.087-.797-6.345 2.282-.299zm.489 3.357c.356-.04.724-.22.888-.488a1.12 1.12 0 00.23-1.039 1.374 1.374 0 00-.483-.958c-.262-.234-.606-.334-1.032-.3l-1.64.213.326 2.778 1.71-.206zM69.004 31.311L67.68 28.66l-1.757-.08-.145 2.527-.63-.054.335-6.39 2.526.146c.56.048.969.224 1.289.604.32.38.494.818.516 1.385-.036.42-.142.834-.452 1.16-.24.332-.608.512-1.04.616L69.71 31.3l-.706.01zm-3.015-5.97l-.152 2.596 1.897.092c.35.03.642-.086.946-.342.234-.262.398-.53.428-.88.03-.35-.08-.712-.342-.947-.257-.304-.53-.398-.88-.427l-1.897-.092zM72.185 31.23l3.044.685-.117.554-3.663-.878 1.45-6.223 3.592.872-.118.554-2.975-.678-.541 2.21 2.764.66-.118.554-2.764-.66-.554 2.35zM77.156 31.656l.642-.086c-.072.84.294 1.507 1.18 1.864.886.358 1.535.202 1.875-.474.17-.338.118-.554-.069-.852-.192-.228-.442-.602-.902-.994-.524-.468-.85-.778-.972-1-.314-.45-.412-.952-.16-1.424.182-.478.562-.799 1-.973.438-.174.928-.132 1.47.126.886.358 1.374 1.246 1.372 2.092l-.642.087c-.004-.777-.312-1.297-.994-1.567-.746-.346-1.4-.12-1.664.493-.094.274-.118.554.004.776.122.222.378.526.774.842l.39.386c.064.076.198.158.326.31s.262.234.32.38c.128.152.309.52.36.736a1.2 1.2 0 01-.141.834c-.182.478-.562.798-1.07.966-.508.169-1.063.05-1.61-.137-1.02-.44-1.58-1.334-1.49-2.385zM82.723 34.178l.63.054c-.206.758.008 1.552.883 2.05.804.492 1.516.412 1.914-.118.164-.268.188-.548.142-.834-.116-.292-.366-.666-.75-1.122-.449-.532-.699-.906-.815-1.198-.238-.514-.196-1.005.056-1.477.322-.466.696-.716 1.192-.744.496-.028.98.084 1.453.336.798.562 1.146 1.438 1.004 2.272l-.63-.054c.136-.764-.096-1.348-.767-1.758-.67-.41-1.306-.394-1.71.206a1.017 1.017 0 00-.136.765c.122.222.302.59.623.97l.32.38c.064.076.192.228.25.374.128.152.186.298.25.374.122.222.232.584.214.794-.018.21-.048.56-.282.822-.322.466-.696.716-1.192.744a2.738 2.738 0 01-1.587-.418c-.95-.434-1.362-1.386-1.062-2.418zM90.807 38.608c.024-.28.252-.472.468-.524.28.024.472.252.524.468-.024.28-.252.472-.468.524-.286.046-.548-.188-.524-.468zM101.444 46.994l-5.499 3.267-.308-.52 4.68-2.773-4.37-.021-.064-.076 2.092-3.841-4.68 2.773-.309-.52 5.498-3.267.367.666-1.934 3.642 4.16.004.367.666zM98.172 56.376l1.292-1.088-.95-2.903-1.686-.073-.227-.654 6.816.3.226.655-5.309 4.341-.162-.578zm.966-3.867l.846 2.47 2.877-2.292-3.723-.178zM104.909 57.587l.087.643-6.305 1.153-.087-.643 6.305-1.153zM99.711 62.29l.174 2.907-.566.022-.19-3.542 6.379-.371.016.636-5.813.349zM101.854 69.386c.228-.192.573-.093.701.06.192.228.092.572-.06.7-.228.192-.572.092-.7-.06-.193-.228-.169-.508.059-.7z" />
<path stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" d="M86.1 47.584c-9.726-11.547-26.97-13.023-38.516-3.297-11.546 9.725-13.022 26.97-3.297 38.515 9.725 11.546 26.97 13.022 38.515 3.297 11.546-9.725 13.022-26.97 3.297-38.516z" />
</g>
</svg>
<svg class="Timeline__stamp Timeline__stamp--2" xmlns="http://www.w3.org/2000/svg" width="359" height="115" fill="none" viewBox="0 0 359 115">
<g stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" opacity=".5">
<path d="M1 58.036c35.811-5.804 39.746 18.475 75.557 12.671 35.812-5.803 31.877-30.082 67.689-35.886 35.811-5.803 39.746 18.476 75.557 12.672 35.811-5.804 31.877-30.082 67.688-35.886 35.812-5.803 39.746 18.475 75.558 12.672M5.525 85.956c35.811-5.803 39.746 18.475 75.557 12.672 35.812-5.804 31.877-30.083 67.689-35.886 35.811-5.804 39.745 18.475 75.557 12.671 35.811-5.803 31.877-30.082 67.688-35.885 35.812-5.804 39.746 18.475 75.557 12.671M10.05 113.877c35.811-5.804 39.745 18.475 75.557 12.671 35.811-5.803 31.877-30.082 67.688-35.885 35.812-5.804 39.746 18.475 75.558 12.671 35.811-5.803 31.876-30.082 67.688-35.886 35.811-5.803 39.746 18.476 75.557 12.672M14.575 141.797c35.81-5.803 39.746 18.475 75.557 12.672 35.811-5.804 31.877-30.082 67.688-35.886 35.811-5.804 39.746 18.475 75.557 12.672 35.812-5.804 31.877-30.083 67.689-35.886 35.811-5.804 39.746 18.475 75.557 12.671" />
</g>
</svg>
</div>
<footer class="Site-footer Footer theme--dark">
<div class="grid grid--of-two constrain">
<div class="Footer__content flow--gutter">
<div class="grid grid--of-two">
<ul class="Footer__nav flow" role="list">
</ul>
<nav>
<ul class="Footer__nav flow--xs" role="list">
<li class="body small">
<span class="block">68 Middle Street</span>
<span class="block">Brighton</span>
<span class="block">BN1 1AL</span>
<span class="block">United Kingdom</span>
</li>
<li>
<a class="focus" href="mailto:info@clearleft.com">
info@clearleft.com
</a>
</li>
</ul>
</nav>
</div>
<p class="Footer__copyright body small">
<span class="nowrap">Copyright © 2005-Now Clearleft Ltd.</span>
<span class="nowrap">All Rights Reserved.</span>
</p>
</div>
<div class="flow--gutter">
<nav class="Footer__social">
<ul class="Footer__icons" role="list">
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://twitter.com/clearleft" aria-label="Follow us on twitter">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--twitter Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#twitter"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://www.instagram.com/weareclearleft/" aria-label="Follow us on instagram">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--instagram Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#instagram"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://www.linkedin.com/company/clearleft/" aria-label="Follow us on linkedin">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--linkedin Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#linkedin"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://medium.com/clear-left-thinking" aria-label="Follow us on medium">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--medium Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#medium"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://www.flickr.com/photos/clearleft/" aria-label="Follow us on flickr">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--flickr Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#flickr"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://www.youtube.com/channel/UCnCDHgM8pT51sE7tlcgDsZg" aria-label="Follow us on youtube">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--youtube Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#youtube"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://vimeo.com/clearleft" aria-label="Follow us on vimeo">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--vimeo Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#vimeo"></use>
</svg>
</a>
</li>
</ul>
</nav>
<form class="Footer__form flow--xs" action="https://clearleft.us1.list-manage.com/subscribe?u=262832f6c05900ce22e8b14b6&id=02008ae435&email=value" method="post" target="popupwindow">
<legend class="h h-5">
Sign up to our newsletter
</legend>
<fieldset class="Footer__form-fieldset">
<input type="hidden" name="embed" value="1" />
<div class="Text-input flow--2xs Footer__form-input">
<label class="Text-input__title small vh" for="tle-email">
Email address
</label>
<input placeholder="Email address" class="Input " type="email" id="tle-email" name="MERGE0" value="" />
</div>
<button class="Button focus Button--outline-light" type="submit"><span>Sign up</span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Icon--s">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg></button>
</fieldset>
<p class="body small">
Every two weeks we send out a newsletter. It's a round-up of
handpicked hyperlinks covering design, technology, and culture.
</p>
</form>
</div>
</div>
</footer>
<section class="Global-header">
{% include '@header' with header %}
{% include '@breadcrumb' with breadcrumb %}
{% include '@page-header' with pageheader %}
</section>
{% include '@nutshells' with nutshells %}
{% include '@image-grid' with imageGrid %}
{% include '@activity' with activities %}
{% include '@timeline' with timeline %}
{% include '@footer' %}
{
"header": {
"match": "",
"links": [
{
"url": "#",
"title": "Services"
},
{
"url": "#",
"title": "Work"
},
{
"url": "#",
"title": "Thinking"
},
{
"url": "#",
"title": "About"
},
{
"url": "#",
"title": "Contact"
}
]
},
"pageheader": {
"title": {
"text": "A champion for design in your organisation"
},
"content": {
"subtitle": "Now, more than ever, we all need great design.",
"standfirst": "<p>We believe in advancing the practice of design to transform organisations and people’s lives for the better. Whether exploring an exciting future, creating new products & services, or growing digital capabilities; Clearleft are all about solving what matters. What better moment than now?</p>"
}
},
"nutshells": {
"eyebrow": "We believe in",
"shells": [
{
"title": "Bold curiosity",
"description": "We approach all our work with an honesty and enthusiasm to tackle tricky challenges and overcome thorny problems. We truly care and get deeply invested, willing to ask or answer the difficult questions others often avoid."
},
{
"title": "Committed allies",
"description": "We’ll be alongside you and your team every step of the way. By breaking down barriers, adapting to change and going that one step beyond, we’re there to support and enable you to lead, be heroic and achieve your ambitions."
},
{
"title": "Exquisite craftship",
"description": "We strive to make things greater, rather than just good enough. But we do so with a pragmatism that ensures we deliberately focus on precisely what’s needed for you to succeed within the constraints of your situation."
}
]
},
"quotes": [
{
"quote": "<p>UX London is special to me because the programme that the team puts together always tells a great story, and I learn so much when I come here.</p>",
"citation": "Josh Seiden",
"qualifier": "Seiden Consulting",
"image": "https://www.fillmurray.com/400/400"
},
{
"quote": "<p>Clearleft are one of only a few agencies in the world who consistently and predictably deliver successful projects. This shouldn’t be a rare skill amongst agencies, but in my experience it is.”</p>",
"citation": "Josh Seiden",
"qualifier": "Former VP of products at Adobe",
"image": "https://www.fillmurray.com/400/400"
}
],
"imageGrid": {
"title": "Our Studio",
"description": "<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
"images": [
{
"src": "/v6-assets/img/splash1000w.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/jeremy-keith-2x.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/hero2.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/splash600w.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/hero4.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/case600w.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/hero1.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/hero3.jpg",
"alt": ""
}
]
},
"activities": {
"activities": [
{
"name": "Jeremy",
"title": "Creating a digital-first brand for a brilliant new educational activities platform",
"url": "#",
"image": {
"src": "/v6-assets/img/author-image.png",
"alt": ""
}
},
{
"name": "Jeremy",
"title": "Sifting through 150 applications to find our new Business Relationship Manager",
"url": "#",
"image": {
"src": "/v6-assets/img/author-image.png",
"alt": ""
}
},
{
"name": "Jeremy",
"title": "Sitting in on design sprint magic with a publishing client, looking comfortable with the process in their second sprint",
"url": "#",
"image": {
"src": "/v6-assets/img/author-image.png",
"alt": ""
}
}
]
},
"timeline": {
"title": "How did we get here?",
"subtitle": "Take a trip down memory lane with us",
"description": "<p>Andy, Rich and Jeremy founded Clearleft in 2005, one of the first dedicated user experience consultancies in the UK. Over the last 15 years we’ve been helping organisations of all shapes, sizes and sectors realise their digital potential. From renowned institutions to global brands, such as the BBC, Natural History Museum, Virgin, Penguin and J.P. Morgan.</p>",
"link": "#",
"linkLabel": "Stroll along our timeline"
}
}
No notes defined.