<div class="EvoProject EvoProject--stage">

    <header class="SiteHeader" role="banner">

        <a href="" class="Logo Logo--inverted" title="Home">
            <svg width="152" height="50" viewBox="1 2 152 50">
        <g fill="none" fill-rule="evenodd">
            <path class="Logo-text" fill="#25333A" fill-rule="nonzero" d="M152.5 27.54v5.36h-2.36c-5.52 0-8.55-3.31-8.55-9.31v-6.78h-7.36V32.9h-5.61V16.81h-3.09l-.06-4.65h3.15v-.57c0-6 3-9.31 8.55-9.31h2.36v5.36h-2.36c-2 0-2.95 1.29-2.95 4v.57h7.36v-3.9l5.61-3.55v7.4h4v4.65h-4v6.78c0 2.66 1 4 2.95 4l2.36-.05zM77 11.85h5.61v21H77v-2c-1.677 1.74-4.015 2.686-6.43 2.6-5.66 0-10.09-4.84-10.09-11s4.43-11 10.09-11c2.396-.12 4.73.777 6.43 2.47v-2.07zm0 10.5c0-3.54-2.36-6.11-5.61-6.11-3.25 0-5.56 2.57-5.56 6.11 0 3.54 2.34 6.11 5.56 6.11 3.22 0 5.61-2.51 5.61-6.11zm12.88-8.67v-1.83h-5.37v21h5.6v-9.46c0-4.5.77-6.78 5-6.78h1.5v-5.4h-.23c-2.95 0-5.22.87-6.54 2.47h.04zM98 32.83h5.59V2.44H98v30.39zM17 8.1c3.178.02 6.098 1.75 7.64 4.53l.12.21.2-.13 4.83-3.07.2-.13-.13-.2c-2.834-4.3-7.642-6.88-12.79-6.87-4.122-.062-8.095 1.538-11.025 4.44-2.93 2.9-4.567 6.858-4.545 10.98-.027 4.137 1.612 8.112 4.55 11.026 2.936 2.914 6.923 4.523 11.06 4.464 5.11.06 9.91-2.455 12.77-6.69l.13-.19-5.2-3.47-.13.2c-1.56 2.736-4.46 4.432-7.61 4.45-5.16 0-9.2-4.32-9.2-9.84 0-4.75 3.43-9.71 9.13-9.71zm14.57 24.73h5.59V2.44h-5.59v30.39zm94-10.51c0 .58 0 1.15-.09 1.69v.47h-14.8c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.34-11.12 10.55-11.12 5.88-.09 10.01 4.48 10.03 11.01h.02zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22zm-60.73 2.22c0 .58 0 1.15-.09 1.69v.47H44.34c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.37-11.21 10.54-11.21 5.89 0 10.02 4.57 10.04 11.1zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22z"></path>
            <path class="Logo-streak" fill="#23D8A0" d="M151.8 44c-.083-.487-.365-.918-.78-1.187-.413-.27-.92-.354-1.4-.233-1.067.35-2.204.433-3.31.24-1.39-.18-2.86-.31-4.29-.46-2.39-.26-4.79-.47-7.2-.66-2.63-.2-5.27-.34-7.9-.52-2.48-.17-4.95-.39-7.43-.51-5.24-.253-10.483-.45-15.73-.59-4.37-.15-19.57-.32-23.95-.26-3.07 0-6.13.14-9.19.18-4.06 0-18.94.34-23 .58-4.33.23-8.68.38-13 .68-4 .27-8 .45-11.94.74-.906.02-1.81.115-2.7.28-2.35 0-4.43.22-6.52.33-1.66.09-3.36.13-5 .38v0c-.69 0-1-.4-2.07-.26-1.07.14-2.07.46-2.12 1.06-.55.12 0 .41-.62.52v.47c.43.2.56.41 0 .66v.19c.34-.14.39 0 .56.07v.39c-.4.19-.16.37-.09.54.07.17.5.44.42.71-.086.49.11.984.51 1.28v.23c.11.7 1.05 1.28 1.18 2 .1.55 1 1 2.31.89 1.12-.06 1.51-.53 2.53-.68.19 0 .81-.09 1-.1 4.23-.28 8.46-.59 12.66-1 1.24-.11 2.58-.08 3.72-.3 1.5-.29 3.07-.29 4.59-.5 2.867-.348 5.752-.515 8.64-.5 2.41 0 4.77-.26 7.16-.36 1.33-.06 2.66.06 4-.08.518-.097 1.043-.144 1.57-.14 1.43.09 13.66-.12 15.1-.11 2.79 0 5.58-.14 8.36-.17 3.3-.06 17.36-.17 20.68 0 1.13 0 2.31.21 3.37.15 3.11-.17 6.19.1 9.28.17 2.71.06 5.39.31 8.11.39 2.72.08 5.22.23 7.8.51 1 .11 2.08.25 3.15.35.84.08 1.41-.21 2.21-.11 2 .27 4.11.46 6.21.61 1.088.028 2.173.122 3.25.28 1.56.326 3.14.547 4.73.66l1 .36c.856.423 1.835.526 2.76.29.523-.344.77-.984.61-1.59v-.18c.1-.15.19-.31.09-.48.26-.1.28-.22.21-.37.25-.57.71-1.11.44-1.74-.11-.25-.39-.62.42-.79v-.47c-.39-.05-.43-.19-.51-.32.04-.52.1-1.02.12-1.52zm-73.48 1.26c-.063-.008-.127-.008-.19 0 .063-.008.127-.008.19 0z"></path>
        </g>
    </svg>
        </a>

        <nav class="PrimaryNavigation PrimaryNavigation--inverted" data-component="PrimaryNavigation">
            <a href="#offcanvas" class="PrimaryNavigation-menu" aria-hidden="true">Menu</a>
            <ul class="PrimaryNavigation-list">
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link is-active ">Case Studies</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Team</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Posts</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Events</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="EvoProject-wrapper">

        <div class="EvoProject-breadcrumb">
            <div class="Breadcrumb Breadcrumb--inverted">
                <a href="" class="Breadcrumb-item Breadcrumb-item--first">Our Work</a>
                <span class="Breadcrumb-separator">/</span> <a class="Breadcrumb-item" href="">Channel 4</a></div>
            <!--/.Breadcrumb-->
        </div>

        <div class="EvoProject-content">

            <div class="EvoProject-question"></div>

            <h2 class="EvoProject-title Heading Heading--secondary Heading--inverted">Inject Energy.</h2>

            <div class="EvoProject-description Lead Bar">
                How do you give a magazine a huge boost to increase readership? This is the story of how we made Apple’s “Best Newsstand App” with 97,000 new downloads in 4 months.
            </div>

            <img class="EvoProject-logo" src="/assets/img/work/evo/evo-logo.svg" alt="evo logo">

        </div>

    </div>
</div>
<!--./EvoProject-->

<div class="Background Background--grey">
    <div class="Voice">
        <div class="Voice-person">
            <img src="/assets/img/team/voice/graham.png" alt="Graham Smith">
        </div>
        <!--/.Voice-person-->
        <div class="Voice-description">
            <blockquote>“We’re in the news room, in the centre of all the activity, watching the team capture, edit, and share events from all over the world. It’s fast-moving, exciting, and iterative. In that moment, I realised that we could also design in a way
                that harnesses that same excitement.”</blockquote>
            <p class="Voice-cite Heading Heading--context">James Box, UX Director, Team lead</p>
        </div>
        <!--/.Voice-description-->
    </div>
    <!--/.Voice-->
</div>

<main>
    <div class="Scene">
        <div class="Scene-side">
            <dl class="Metadata">
                <dt class="Metadata-heading">What we did</dt>
                <dd class="Metadata-description Pill">Strategy</dd>
                <dd class="Metadata-description Pill">UX Design</dd>
                <dd class="Metadata-description Pill">Visual Design</dd>
            </dl>
            <!--/.MetaData-->
            <dl class="Metadata">
                <dt class="Metadata-heading">Our team</dt>
                <dd class="Metadata-description">Norma Bernhard, Dynamic Security Consultant</dd>
                <dd class="Metadata-description">Karina Sipes, Principal Security Producer</dd>
                <dd class="Metadata-description">Benny Murazik, Central Solutions Designer</dd>
                <dd class="Metadata-description">Kenton Corkery, Regional Optimization Representative</dd>
            </dl>
            <!--/.MetaData-->
            <dl class="Metadata">
                <dt class="Metadata-heading">something</dt>
                <dd class="Metadata-description">aasdasd</dd>
                <dd class="Metadata-description">baasdr</dd>
            </dl>
            <!--/.MetaData-->
        </div>
        <!--/.Scene-side-->
        <div class="Scene-main">
            <h2 class="Scene-heading Heading Heading--medium">The challenge for Evo Magazine</h2>
            <div class="Prose">

                <p>Evo’s existing app was well-regarded and had a loyal fan base, but its traditional, page-turn format wasn’t allowing that fan base to grow. Our brief was to create a product that still delivered a rich editorial experience, but would widen
                    the audience and prolong reader engagement.</p>
                <p>We were approached by Dennis Media Factory to help them define that strategy and create a vision for the next iteration of the magazine’s native apps.</p>

            </div>
            <a class="Anchor" href="#results">Go straight to results &#8595;</a>
        </div>
        <!--/.Scene-main-->
    </div>
    <!--/.Scene-->

    <figure class="ImageBlock">
        <img class="ImageBlock-image" src="/assets/img/work/evo/car.jpg" alt="Car">
        <figcaption class="ImageBlock-item">image courtesy of evo magazine</figcaption>
    </figure>
    <!--/.ImageBlock-->

    <div class="EvoDisplayCase">
        <div class="EvoDisplayCase-wrapper">

            <img class="EvoDisplayCase-chimney" src="/assets/img/work/evo/display-case/header.png" alt="Channel 4 website screen shots">

            <div class="TextBlock Textblock--wide Prose">
                <h2>How do you give form to content that has never existed before?</h2>
                <p>To accommodate the eclectic mix of content to be produced, we created a “feed”. This took on the shape of a mosaic of content presented as a grid.</p>
                <p>But without knowing the shape of future content, we couldn’t define a pixel-perfect grid. Instead we created a system using a series of art boards that would adapt to the ever-changing content.</p>
                <p>We outlined a new content strategy that blended the traditional long-form, along with shorter bite-size content from their other channels. All this content aimed to address the needs of both existing fans and new users.</p>
                <p>It was designed in HTML to work across the full range of devices that a responsive design supports, making the most of the power of the great photography and editorial design that makes EVO such a compelling magazine.</p>
            </div>
            <!--/.Textblock-->

            <img class="ImageBlock" src="/assets/img/work/evo/display-case/content-types.png" alt="Content types">
            <img class="ImageBlock" src="/assets/img/work/evo/display-case/evo-phone.png" alt="Phones">
            <img class="ImageBlock" src="/assets/img/work/evo/display-case/evo-home-landscape.png" alt="Evo home landscape">
        </div>
        <!--/.DisplayCase-wrapper-->
    </div>
    <!--/.DisplayCase-->
    <div class="Trio Trio--evo Trio--inverted Trio--stacked">
        <div class="Trio-wrapper">
            <h2 class="Trio-title Heading Heading--main">The Results</h2>
            <div class="Trio-collection">
                <div class="Trio-item">
                    <div class="Trio-description">
                        <h3 class="Trio-itemHead Heading Heading--small">Change in behaviour.</h3>
                        <p>Radically improve existing products and services, or create them from scratch. Optimise a key interaction to get big results, give your website a new lease of life, or work with the team to conceive, create and build on an entirely
                            new idea.</p>
                    </div>
                </div>
                <!--/.Trio-item-->
                <div class="Trio-item Trio-item--rebel">
                    <div class="Trio-description">
                        <h3 class="Trio-itemHead Heading Heading--small">Get clear on your strategy</h3>
                        <p>You might need a targeted intervention, to unpick a thorny problem, or a fresh perspective on your process. Our strategists work with you to research and develop an appropriate digital strategy that integrates with your organisation.</p>
                    </div>
                </div>
                <!--/.Trio-item-->
                <div class="Trio-item">
                    <div class="Trio-description">
                        <h3 class="Trio-itemHead Heading Heading--small">Transform your digital culture</h3>
                        <p>Upskill your team, develop your processes, integrate design thinking and introduce new habits. By working closely with the Clearleft team as part of your in-house process, or in a bespoke workshop setting, you get an external perspective
                            that’s directly relevant to your needs.</p>
                    </div>
                </div>
                <!--/.Trio-item-->
            </div>
            <!--/.Trio-collection-->
        </div>
        <!--/.Trio-wrapper-->
    </div>
    <!--/.Trio-->

    <div class="Signpost">
        <div class="Signpost-item">
            <a href="#" class="Signpost-link Signpost-link--prev">Create a new universe</a>
            <span class="Signpost-prevContext Heading Heading--context">Penguin Random House</span>
        </div>
        <!--/.Signpost-->
        <div class="Signpost-item">
            <a href="#" class="Signpost-link Signpost-link--next">Inject energy</a>
            <span class="Signpost-prevContext Heading Heading--context">Evo Motoring Magazine</span>
        </div>
        <!--/.Signpost-->
    </div>
    <!--/.Signpost-->
</main>

<div class="Hello">
    <div class="Hello-container">
        <figure class="Hello-image">
            <img src="" alt="">
            <figcaption></figcaption>
        </figure>
        <div>
            <h3 class="Hello-title Heading Heading--inverted Heading--medium">Open the conversation.</h3>
            <div class="Hello-body">

                <p>Ask us anything. From basic questions to complex queries about your approach to strategy, research, content and design, Dan is ready to talk to you on +44 (0)845 838 6163 or <a href="#">get in touch</a></p>

            </div>
        </div>
    </div>
</div>
<!--/.Hello-->

<footer class="SiteFooter">
    <div class="SiteFooter-container Cols">
        <div class="Cols-half Cols-item">
            <div class="InputGroup">
                <form action="" method="post">
                    <input type="hidden" value="1" name="embed">
                    <label class="InputGroup-label Heading Heading--body" for="">Feed your curiosity.</label>
                    <div class="Input InputGroup--combo">
                        <input class="InputGroup-field" type="email" name="email" placeholder="" id="" />
                        <button type="submit" class="InputGroup-submit">Get the Clearletter</button>
                    </div>
                    <!--/.InputGroup-->
                </form>
            </div>
            <!--/.InputGroup-->
            <small class="Heading Heading--context"></small>
        </div>
        <!--/.SiteFooter-container-->
        <div class="Cols-half Cols-item">
            <nav class="SiteFooter-navigation">
                <ul class="SiteFooter-navigationLinks">
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Test Lab</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Accessibility</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Cookies</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Styleguide</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Jobs</a></li>
                </ul>
                <!--/.SiteFooter-navigationLinks-->
                <ul class="SiteFooter-icons">
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-github.svg" alt="Find us on Github"></a>
                    </li>
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-instagram.svg" alt="Find us on Instagram"></a>
                    </li>
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-linkedin.svg" alt="Find us on LinkedIn"></a>
                    </li>
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-medium.svg" alt="Find us on Medium"></a>
                    </li>
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-flickr.svg" alt="Find us on Flickr"></a>
                    </li>
                </ul>
                <!--/.SiteFooter-icons-->
            </nav>
        </div>
        <!--/.Cols-half-->
        <div class="Cols-item SiteFooter-small">
            &copy; 2005‑now Clearleft Ltd. All rights reserved.
        </div>
        <!--/.SiteFooter-small-->
    </div>
    <!--/.Cols-->
</footer>
<!--/.SiteFooter-->
{% include '@evo-project' %}

<div class="Background Background--grey">
    {% include '@voice' %}
</div>

<main>
    {% include '@scene' %}

    {% include '@image-block' %}

    {% include '@evo-display-case' %}

    {% include '@trio' %}

    {% include '@signpost' %}
</main>

{% include '@hello' %}

{% include '@site-footer' %}
{
  "primaryNavlinks": [
    {
      "title": "Case Studies",
      "url": "#",
      "primaryActive": true
    },
    {
      "title": "Team",
      "url": "#"
    },
    {
      "title": "Posts",
      "url": "#"
    },
    {
      "title": "Events",
      "url": "#"
    },
    {
      "title": "Contact",
      "url": "#"
    }
  ],
  "primaryNavModifiers": [
    "--inverted"
  ],
  "logoModifiers": [
    "--inverted"
  ],
  "segmentOne": "Our Work",
  "segmentTwo": "Channel 4",
  "breadcrumbModifier": "--inverted",
  "evoTitle": "Inject Energy.",
  "evoModifier": "--stage",
  "evoDescription": "How do you give a magazine a huge boost to increase readership? This is the story of how we made Apple’s “Best Newsstand App” with 97,000 new downloads in 4 months.",
  "evoMainSrc": "/assets/img/work/evo/evo-mag-stack.png",
  "evoLogoSrc": "/assets/img/work/evo/evo-logo.svg",
  "evoLogoAlt": "evo logo",
  "voiceDescription": "We’re in the news room, in the centre of all the activity, watching the team capture, edit, and share events from all over the world.  It’s fast-moving, exciting, and iterative. In that moment, I realised that we could also design in a way that harnesses that same excitement.",
  "voiceCite": "James Box, UX Director, Team lead",
  "voicePersonSrc": "/assets/img/team/voice/graham.png",
  "voicePersonAlt": "Graham Smith",
  "metas": [
    {
      "metadataHeading": "What we did",
      "metadataPill": true,
      "items": [
        {
          "metadata": "Strategy"
        },
        {
          "metadata": "UX Design"
        },
        {
          "metadata": "Visual Design"
        }
      ]
    },
    {
      "metadataHeading": "Our team",
      "items": [
        {
          "metadata": "Norma Bernhard, Dynamic Security Consultant"
        },
        {
          "metadata": "Karina Sipes, Principal Security Producer"
        },
        {
          "metadata": "Benny Murazik, Central Solutions Designer"
        },
        {
          "metadata": "Kenton Corkery, Regional Optimization Representative"
        }
      ]
    },
    {
      "metadataHeading": "something",
      "items": [
        {
          "metadata": "aasdasd"
        },
        {
          "metadata": "baasdr"
        }
      ]
    }
  ],
  "sceneHeading": "The challenge for Evo Magazine",
  "sceneProse": "\n            <p>Evo’s existing app was well-regarded and had a loyal fan base, but its traditional, page-turn format wasn’t allowing that fan base to grow.\n            Our brief was to create a product that still delivered a rich editorial experience, but would widen the audience and prolong reader engagement.</p>\n            <p>We were approached by Dennis Media Factory to help them define that strategy and create a vision for the next iteration of the magazine’s native apps.</p>\n        ",
  "trioModifiers": [
    "--evo",
    "--inverted",
    "--stacked"
  ],
  "trioItems": [
    {
      "heading": "Change in behaviour.",
      "imageSrc": "/assets/img/icons/heart-speech.svg",
      "text": "Radically improve existing products and services, or create them from scratch. Optimise a key interaction to get big results, give your website a new lease of life, or work with the team to conceive, create and build on an entirely new idea."
    },
    {
      "trioItemModifier": "--rebel",
      "heading": "Get clear on your strategy",
      "imageSrc": "/assets/img/icons/heart-speech.svg",
      "text": "You might need a targeted intervention, to unpick a thorny problem, or a fresh perspective on your process. Our strategists work with you to research and develop an appropriate digital strategy that integrates with your organisation."
    },
    {
      "heading": "Transform your digital culture",
      "imageSrc": "/assets/img/icons/heart-speech.svg",
      "text": "Upskill your team, develop your processes, integrate design thinking and introduce new habits. By working closely with the Clearleft team as part of your in-house process, or in a bespoke workshop setting, you get an external perspective that’s directly relevant to your needs."
    }
  ],
  "trioHeading": "The Results",
  "imageBlockSrc": "/assets/img/work/evo/car.jpg",
  "imageBlockAlt": "Car",
  "imageBlockCaption": "image courtesy of evo magazine",
  "signpostItems": [
    {
      "link": "Create a new universe",
      "linkUrl": "#",
      "context": "Penguin Random House",
      "linkModifier": "Signpost-link--prev"
    },
    {
      "link": "Inject energy",
      "linkUrl": "#",
      "context": "Evo Motoring Magazine",
      "linkModifier": "Signpost-link--next"
    }
  ],
  "helloHeading": "Open the conversation.",
  "helloBody": "\n            <p>Ask us anything. From basic questions to complex queries about your approach to strategy, research, content and design, Dan is ready to talk to you on +44 (0)845 838 6163 or <a href=\"#\">get in touch</a></p>\n        ",
  "footerLinks": [
    {
      "title": "Test Lab",
      "url": "#"
    },
    {
      "title": "Accessibility",
      "url": "#"
    },
    {
      "title": "Cookies",
      "url": "#"
    },
    {
      "title": "Styleguide",
      "url": "#"
    },
    {
      "title": "Jobs",
      "url": "#"
    }
  ],
  "socialLinks": [
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-github.svg",
      "alt": "Find us on Github"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-instagram.svg",
      "alt": "Find us on Instagram"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-linkedin.svg",
      "alt": "Find us on LinkedIn"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-medium.svg",
      "alt": "Find us on Medium"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-flickr.svg",
      "alt": "Find us on Flickr"
    }
  ],
  "inputGroupLabel": "Feed your curiosity.",
  "inputGroupSubmit": "Get the Clearletter",
  "inputModifier": "--combo",
  "siteFooterSmall": "&copy; 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.