<div class="Background Background--grey">

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

        <a href="" class="Logo Logo--plum" 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--plum" 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="Masthead Masthead--arrows Masthead--chimney">

        <div class="Masthead-secondary">
            <div class="Nextprev">
                <a rel="prev" class="Nextprev-link" href=""><img src="/assets/img/icons/icon-arrow-circle-left.svg" alt="Previous"></a>
                <a rel="next" class="Nextprev-link" href=""><img src="/assets/img/icons/icon-arrow-circle-right.svg" alt="Next"></a>
            </div>
            <!--/.Nextprev-->
        </div>
        <!--/.Masthead-secondary-->

        <div class="Masthead-primary">

            <div class="Breadcrumb">
                <a href="" class="Breadcrumb-item"></a>
            </div>
            <!--/.Breadcrumb-->

            <h1 class="Heading Heading--secondary">UX Design and Service Design are growing ever closer</h1>

            <p class="Masthead-sub Heading Heading--context">Process, Featured</p>
        </div>
        <!--/.Masthead-primary-->

    </div>
    <!--/.Masthead-->
</div>

<main>

    <div class="PageLead PageLead--image ">
        <div class="PageLead-primary">
            <img src="/assets/img/blog-header.jpg" alt="Ideas">
        </div>
    </div>
    <!--/.PageLead-->

    <div class="BlogArticle">

        <div class="TextBlock TextBlock--author Lead Bar Bar--lightBlue">
            <div class="TextBlock-author">
                <div class="Author">
                    <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                    <div class="Author-name">Graham Smith</div>
                </div>
                <!--/.Author-->
            </div>

            <div class="Prose">
                <p>The agile manifesto was born out of a frustration with traditionally managed projects. But I don’t think it solved the problem. It actually created another one. I’ve seen teams and organisations go from waterfall, which reduces their ability
                    to compete in the market and deliver value, to dysfunction and paralysis when implementing agile.</p>
            </div>

        </div>
        <!--/.TextBlock Prose-->
        <div class="TextBlock">

            <div class="Prose">
                <p>The agile manifesto was born out of a frustration with traditionally managed projects. But I don’t think it solved the problem. It actually created another one. I’ve seen teams and organisations go from waterfall, which reduces their ability
                    to compete in the market and deliver value, to dysfunction and paralysis when implementing agile.</p>
            </div>

        </div>
        <!--/.TextBlock Prose-->

    </div>

</main>

<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-->
<div class="Background Background--grey">
    {% include '@site-header' %}
    {% include '@masthead' %}
</div>

<main>

    {% include '@page-lead' %}

    <div class="BlogArticle">

        {% include '@text-block' %}
        {% include '@text-block' with {textBlockModifier: ''} %}

    </div>


</main>

{% include '@site-footer' %}
{
  "primaryNavlinks": [
    {
      "title": "Case Studies",
      "url": "#",
      "primaryActive": true
    },
    {
      "title": "Team",
      "url": "#"
    },
    {
      "title": "Posts",
      "url": "#"
    },
    {
      "title": "Events",
      "url": "#"
    },
    {
      "title": "Contact",
      "url": "#"
    }
  ],
  "primaryNavModifiers": [
    "--plum"
  ],
  "logoModifiers": [
    "--plum"
  ],
  "mastheadTitle": "UX Design and Service Design are growing ever closer",
  "mastheadSub": "Process, Featured",
  "mastheadSecondary": true,
  "mastheadBreadcrumb": true,
  "mastheadModifier": "--arrows Masthead--chimney",
  "mastheadImage": true,
  "textBlockModifier": "--author Lead Bar Bar--lightBlue",
  "textBlockProse": "\n        <p>The agile manifesto was born out of a frustration with traditionally managed projects.\n        But I don’t think it solved the problem. It actually created another one. I’ve seen teams and\n        organisations go from waterfall, which reduces their ability to compete in the market and\n        deliver value, to dysfunction and paralysis when implementing agile.</p>\n        ",
  "authorImage": "/assets/img/team/voice/graham.png",
  "authorName": "Graham Smith",
  "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.",
  "indexCardModifier": "--profile",
  "imageSrc": "/assets/img/team/james-g.jpg",
  "indexCardName": "Nestor Dickens",
  "indexCardInfo": null,
  "pageLeadModifier": "--image",
  "pageLeadAlt": "Ideas",
  "pageLeadSrc": "/assets/img/blog-header.jpg",
  "blogContent": "\n\n<p>‘Tone of voice’ is not just language. &#8216;Brand&#8217; is not just imagery. And that grey corporate, strategic language is always in terrible danger of leaking through into the final product. Binding these elements together to tell an evocative story is the ultimate challenge for any website.</p>\n<p>To discover those alchemical reactions between visual language, brand language and strategic intent, we put a UXer, a designer and a content strategist in a room together for a day.</p>\n\n\n<h2>A tiny lesson: The ripping exercise</h2>\n\n<p>Here’s a step by step account&nbsp;of one of&nbsp;the activities we used during the day.</p>\n<p><strong>1. Gather up a set of magazines, some of which you feel have affinity with your brand, some of which are total wild cards.</strong></p>\n<p>We used National Geographic, Wired, New Scientist, Womankind, Monocle and Better Health.</p>\n<p><strong>2. Establish a question that you’re hoping to answer with this exercise.</strong></p>\n<p>Our question was &#8220;How do we show individuals solving problems?&#8221;.</p>\n<p><strong>3. Allow your team to spend time ripping out anything and everything&nbsp;that sparks their imagination, from the profound to the downright silly.</strong></p>\n<p>Bearing the question in mind, we made notes on the images with post-it notes.</p>\n<p><strong>4. Ask the team to group the images according to relevance. Do it out loud.</strong></p>\n<p>Everyone grouped their&nbsp;ripped up pieces into people and processes, with a grey area in between. We spoke about our groupings out loud.</p>\n<p><strong>5. Harvest their language as you go.</strong></p>\n<p>As we spoke about our choices, wild and wonderful language emerged -&nbsp;almost by accident. This language serves as an authentic starting point for the tone of voice.</p>\n\n<figure>\n    <img src=\"http://clearleft.com.s3.amazonaws.com/uploads/blog/creating-a-tone-of-voice/Slack-for-iOS-Upload-1.jpg?mtime=20160811105135\" alt=\"\">\n</figure>\n\n\n<h2>Show, don’t tell</h2>\n\n<p>In almost every project I’ve worked on as a content strategist, there has been a strong temptation to &#8216;tell’ the brand strategy on the website (or whatever&nbsp;service it is). Your strategy is fundamental, yes,&nbsp;but utterly&nbsp;lacking in ability to engage an audience. You need to paint the picture. Evoke the concept. Bring it alive. This is something magazines do brilliantly.</p>\n\n<figure>\n    <img src=\"http://clearleft.com.s3.amazonaws.com/uploads/blog/creating-a-tone-of-voice/Slack-for-iOS-Upload-2.jpg?mtime=20160811105128\" alt=\"\">\n</figure>\n\n\n<h2>Transposing reality onto the ideas</h2>\n\n<p>It’s all very well to develop wonderful visuals, and to think of language that hits readers between the eyes.&nbsp;</p>\n<p>But&nbsp;once you’ve done the wild creativity, you need to think of your resources, the reality of your story. What are the facts that you&nbsp;have you got to work with?</p>\n<p>We began to transpose the real stories, with real people, and real problems onto the ripped up concepts we had gathered to see how they worked.</p>\n<p>To keep the storytelling fresh&nbsp;we also&nbsp;asked each other these questions:</p>\n<p>1. What do you really love about this?</p>\n<p>2. What is the finest, most lovable detail?</p>\n\n\n<h2>Outputs from the day</h2>\n\n<p>By the end of the day we were exhausted, but we made a concerted effort to finish the day with some convergence.</p>\n<p>We&nbsp;brought&nbsp;the results together so that we could use them in the next stages of the site design:</p>\n<p>1. We&nbsp;discovered a set of <strong class=\"redactor-inline-converted\">design and content principles</strong></p>\n<p>2. We&nbsp;harvested a <strong class=\"redactor-inline-converted\">healthy set of tone of voice&nbsp;phrases</strong> that form the starting point for tone of voice development</p>\n<p>3. We had a set of <strong class=\"redactor-inline-converted\">sketched out concepts</strong> which gave the designer something to play with</p>\n<p>4. We had <strong>shared investment</strong> in several story elements that form ingredients for the website</p>\n\n\n<h2>And you?</h2>\n\n<p>Have you worked on your tone of voice? Have you got suggestions for activities? Or questions to ask?&nbsp;</p>\n<p>If you’re interested in hearing more about the process, drop me a line: ellen@clearleft.com.</p>\n"
}

There are no notes for this item.