Benjy StantonHi, my name is Benjy Stanton and I’m an interaction designer.2024-03-15T00:00:00Zhttps://www.benjystanton.co.uk/Benjy Stantonbenjystanton@gmail.comWeeknotes – series 07 episode 102024-03-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-10/<h2>Space for new work and design debt</h2>
<p>For what feels like the first time in about 6 months, we have a bit of breathing space. We've been in reactive mode for a long time, responding to questions and issues that have arisen as our design hits the constraints of the platform we are building on.</p>
<p>Finally, we are getting some space to work on some brand new requirements. I'm trying to force myself to not dive straight in. I think we still need to do some effort versus impact type workshops as a team to help us pull together all the constraints, dependencies and user needs. We desperately need a shared understanding of the scope of the work.</p>
<p>I’m also keen to make some progress with our design debt and accessibility statement work. This post about <a href="https://www.gavinelliott.co.uk/design-debt/">Design debt by Gavin Elliot</a> arrived just in time.</p>
<h2>Coming up to 1 year contracting</h2>
<p>I’ve been on my current contract for almost a year. And it’s on track to be at least 18 months if things go to plan. I’ve not stayed in a role longer than 12 months since I was at Swirrl, so I’m enjoying the chance to really get my head down and make a decent impact (in this case, get a big chunky product out into private beta).</p>
<p>We’ve just started our 5th Planning Interval (PI) which is a 6 sprint phase of work. I’m yet to be convinced by PIs, but just like with sprints, having a set period of reflection time at the end of a period of hard work is very welcome. That short reset period makes it easier to maintain focus and effort for the rest of the time.</p>
<h2>Mentoring</h2>
<p>I started mentoring someone this week and found a couple of interesting resources off the back of my discussions with them…</p>
<ul>
<li><a href="https://gooddesigner.substack.com/p/steal-my-portfolio-how-i-structure">Steal my portfolio: How I structure my portfolio preview including FREE Figma Template! By Liz Hamburger</a></li>
<li><a href="https://eleventy-excellent.netlify.app/">Eleventy Excellent</a> (An Eleventy starter) by <a href="https://www.lenesaile.com/en/">Lene Saile</a></li>
</ul>
<h2>RSS feeds, blogrolls and Feedbin</h2>
<p>I updated my <a href="https://www.benjystanton.co.uk/blogroll">blogroll</a> this week. And I’ve simplified the content a bit, to make it easier to maintain.</p>
<p>Plus, I’m really enjoying subscribing to blogs and reading them in <a href="https://feedbin.com/">Feedbin</a>. It feels like RSS feeds have finally clicked for me. The experience is more relaxing than scrolling through social media to find things. I’m actually enjoying the reading experience. Tempted to move all my email newsletter subscriptions there too.</p>
<h2>White default in autocorrect</h2>
<p>A few articles about how autocorrect systems exclude people who don’t have white, English sounding names. Via <a href="https://bsky.app/profile/priyanca.bsky.social">Priyanca</a>.</p>
<ul>
<li><a href="https://www.positive.news/society/i-am-not-a-typo-campaign-autocorrect-inclusivity/">‘I am not a typo’ campaign urges tech giants to correct their autocorrect systems in the name of inclusivity by Robin Eveleigh</a></li>
<li><a href="https://www.iamnotatypo.org/">I am not a typo</a></li>
<li><a href="https://medium.com/black-ux-collective/autocorrect-or-auto-white-81abdb5049b7">Autocorrect or Auto-white? by Jacquelyn Iyamah</a></li>
</ul>
<h2>Frontend devaluation</h2>
<p>These two posts about the devaluation of frontend web development really hit home for me.</p>
<ul>
<li><a href="https://medium.com/@paulmsmith/building-for-everyone-e8194fdc99af">Building for everyone: The case for specialist user centred Front-end Developers within Government and beyond. By Paul Smith</a></li>
<li><a href="https://joshcollinsworth.com/blog/devaluing-frontend">The quiet, pervasive devaluation of frontend by Josh Collinsworth</a></li>
</ul>
<p>I said on LinkedIn…</p>
<blockquote>
<p>From my experience with quite a few different teams over the years. I’d say that convincing orgs that someone should be focusing on the front-end has become a bigger problem than convincing them that someone should be doing user research.</p>
</blockquote>
<h2>Links and anchors</h2>
<p>I wrote about <a href="https://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-05/">standards for links</a> a few weeks ago. This blog post is great too: <a href="https://www.a11yquest.com/guides/patterns/links-and-anchors">Links and Anchors by Michael Mathews and Ian Pouncey</a>. Might move all of this link stuff into it’s own blog post.</p>
<h2>Bookmarks</h2>
<ul>
<li><a href="https://iknowdavehouse.medium.com/adapting-a-type-scale-based-for-users-that-zoom-a-discussion-and-experiment-5713f11f471f">Adapting a type scale based for users that zoom… a discussion and experiment by Dave House</a></li>
<li><a href="https://doingweeknotes.com/">Doing weeknotes by Giles Turnbull</a></li>
<li><a href="https://thathtml.blog/2024/03/superpowered-container-style-queries/">Add Superpowers to Your CSS Variables with Style Queries by Jared White</a></li>
<li><a href="https://bradfrost.com/blog/post/whats-next-for-a-global-design-system/">What’s next for a global design system by Brad Frost</a></li>
</ul>
Weeknotes – series 07 episode 092024-03-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-09/<h2>Design Swansea Cropped</h2>
<p>I spoke at Design Swansea on Thursday, I’ve shared my <a href="https://www.benjystanton.co.uk/blog/3-interaction-design-things/">talk slides and rough transcript</a>. I put a lot of effort it to the talk, and making it available in multiple ways, so not much energy for weeknoting today.</p>
<h2>Subscribing to RSS feeds</h2>
<p>I’ve started using <a href="https://feedbin.com/">Feedbin</a> to keep up with the blogs that I follow (again). I’ve subscribed to all the sites I have listed on my <a href="https://www.benjystanton.co.uk/blogroll">blogroll</a> that have feeds.</p>
<p>You can <a href="https://www.benjystanton.co.uk/subscriptions.xml">import my subscriptions using this OPML file</a> if you want.</p>
<h2>Jakob Nielsen</h2>
<p>Oof Jakob Nielson’s article about AI and accessibility has been robustly critiqued by many accessibility experts.</p>
<p>I’ve linked to a few posts below. And those posts link to many more.</p>
<p>Thanks to <a href="https://deanvipond.com/">Dean</a> for initially bringing it to my attention.</p>
<p>I wonder how much damage has already been done, and whether Jakob will retract the original post, or at least respond to the feedback?</p>
<p>People seem so desperate for AI to come and solve problems they don’t understand, or that they don’t want to invest in. I worry that Jakob’s article will still have a huge reach given his standing in the community.</p>
<ul>
<li><a href="https://axbom.com/nielsen-generative-ui-failure/">On Nielsen's ideas about generative UI for resolving accessibility by Per Axbom</a></li>
<li><a href="https://www.briandeconinck.com/jakob-nielsens-bad-ideas-about-accessibility/">Jakob Nielsen’s Bad Ideas about Accessibility by Brian DeConinck</a></li>
<li><a href="https://tink.uk/nielsen-needs-to-think-again/">Nielsen needs to think again by Léonie Watson</a></li>
</ul>
<p>(As an aside, it feels very civilised to experience this via the medium of blog posts rather than a Twitter public shaming).</p>
<h2>Reading (and things to read later)</h2>
<ul>
<li><a href="https://www.tempertemper.net/blog/getting-voiceover-to-shut-up">Getting VoiceOver to shut up by Martin Underhill</a></li>
<li><a href="https://digitalbydefault.com/2024/02/29/old-man-yells-at-cloud-digital-gov-edition/">Thoughts on the state of the (digital gov) union by Matt Jukes</a></li>
<li><a href="https://blog.ldodds.com/2024/03/02/data-format-design-is-a-ux-issue/">Data format design is a UX issue by Leigh Dodds</a></li>
<li><a href="https://www.darins.page/articles/dynamic-accessible-descriptions-reference">Dynamic accessible descriptions reference by Darin Senneff</a></li>
<li><a href="https://heydonworks.com/article/what-is-a-single-page-application/">What Is A Single-page Application? By Heydon Pickering</a></li>
<li><a href="https://arstechnica.com/cars/2024/03/carmakers-must-bring-back-buttons-to-get-good-safety-scores-in-europe/">European crash tester says carmakers must bring back physical controls by Jonathan M. Gitlin</a></li>
<li><a href="https://designnotes.blog.gov.uk/2024/03/05/how-were-designing-a-bilingual-service-for-wales-from-the-start/">How we’re designing a bilingual service for Wales, from the start by Abbie Foxton</a></li>
<li><a href="https://hidde.blog/why-its-good-for-users-that-html-css-and-js-are-separate-languages/">Why it's good for users that HTML, CSS and JS are separate languages by Hidde de Vries</a></li>
</ul>
3 interaction design things2024-03-06T00:00:00Zhttps://www.benjystanton.co.uk/blog/3-interaction-design-things/<h2>Get the slides</h2>
<p><a href="https://docs.google.com/presentation/d/1sUdzaVdywa7J4j-6M0Vh-xGWoAb7QiZKT5H_meBqyi0/edit?usp=sharing">View slides on Google Slides</a></p>
<hr />
<h2>Hi, my name is Benjy</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-01.png" alt="Benjy Stanton, interaction designer from Swansea." />
<p>Hi, my name is Benjy and I'm an interaction designer from Swansea. I’m interested in user-centred design in the public sector, inclusive design and accessibility.</p>
<h2>Link to slides and transcripts</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-02.png" alt="Link to slides and transcript benjystanton.co.uk/cropped." />
<p>Here’s a link to my slides and a rough transcript. If you go to my blog you can download the slides for later, and get access to the links that I mention.</p>
<h2>3 interaction design things</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-03.png" alt="3 interaction design things" />
<p>The focus of this talk is about 3 interaction design workflow type things that I think/hope can be applied to other design practices too.</p>
<p>These are things that I’m trying to get better at the moment. I can’t say that I do them consistently on every project, but I believe that they can lead to better outcomes.</p>
<h2>Who I’ve worked with</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-04.png" alt="> Worked with Home Office Met Office, UK Health Security Agency, Environment Agency, Office for National Statistics and Driver and Vehicle Licensing Agency." />
<p>I've been working as a designer for about 20 years. And I’ve been focused on design in government for about nine years now. My first ever role was with DVLA here in Swansea, and currently I’m working remotely as a contractor for the Home Office.</p>
<p>I’ve worked as a civil servant, as an external designer working via a design agency and as a freelancer.</p>
<h2>Things that I do</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-05.png" alt="Define user needs and problems, Help plan and analyse user research, Share user journey maps and prototypes, Do accessibility and design reviews, Document design assets, html and css." />
<p>According to my website, these are the things that I do, but I want to focus more on the second half of the list today.</p>
<p>I think there are a lot of people who talk and write about user needs and user research better than me. Those things are essential, but I want to focus on these things…</p>
<ul>
<li>sharing user journey maps and prototypes</li>
<li>doing accessibility and design reviews</li>
<li>documenting design assets, html and css</li>
</ul>
<p>I’m really interested in how we can execute user research findings and business requirements to make the best thing.</p>
<p>That can mean spending a lot of time in meetings, talking to stakeholders and alongside software developers. Just to get something over the line.</p>
<h2>Thing 1: share early and iterate</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-06.png" alt="1 Share early and iterate" />
<p>I think that sharing early and often is a great practice. I think as an inexperienced designer, I wanted to hide my work away until I thought it was perfect. But this is rarely a good approach.</p>
<p>It’s much better to involve the whole team and get their expertise as early as possible.</p>
<h2>Poppit Sands lifeguard sign</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-07.png" alt="A lifeguard sign on a beach that details the air and water temp, wind direction and tide times." />
<p>One example I want to give was when I was working with Made Tech and Met Office on improving beach safety</p>
<p>This photo shows a lifeguard sign on Poppet Sands beach near Cardigan.</p>
<p>Met Office were working with other organisations, like RNLI, to get more beach safety information into their app. Understanding information like tide times and wind strength can help stop paddle boarders, for example, from getting into trouble at sea.</p>
<p>Working on this team was great, everyone joined in with the design ideation sessions. Often the best ideas came from non-designers. I think as a inexperienced designer, I would have dismissed ideas that didn’t come from other designers, which is a real shame.</p>
<h2>The boring designer</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-08.png" alt="The boring designer chases the right idea over their idea every time. The Boring Designer by Cap Watkins" />
<p>I really like this quote from Cap Watkins, from a blog post called <a href="https://capwatkins.com/blog/the-boring-designer">the boring designer</a>, and he says that…</p>
<blockquote>
<p>The boring designer chases the right idea over their idea every time.</p>
</blockquote>
<p>I think the skill of a designer is in the execution and testing. Part of the work is discovering all the potential ideas and whittling it down to the best one. It might come from something a user says, a team mate, or from a stakeholder.</p>
<p>It’s good to not be too precious over where ideas come from.</p>
<h2>Searching for beach forecasts</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-09.png" alt="A screenshot of the Met Office app that shows search results for a place. Normal places have a map pin icon. Beach places have a parasol icon." />
<p>We had a problem on the app where users couldn't find the beach forecasts, alongside the normal forecasts. One of the devs on the team suggested that we change the icon in the search results to make the beach items stand out a bit.</p>
<p>This screenshots show how when searching for Rhossili, you get 2 results, one is Rhossili the place and the other Rhossili beach. We did some click testing, and this change improved peoples' ability to get the beach forecast.</p>
<p>It's just a small incremental improvement, but it's probably one I wouldn't have come up with by myself.</p>
<h2>A prototype is worth a thousand meetings</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-10.png" alt="If a picture is worth a thousand words, a prototype is worth a thousand meetings - IDEO" />
<p>I like this quote from <a href="https://www.ideo.com/">IDEO</a> as well…</p>
<blockquote>
<p>If a picture is worth a thousand words, a prototype is worth a thousand meetings</p>
</blockquote>
<p><a href="https://www.weareserviceworks.com/blog/service-design-secrets">Jo Carter</a> reminded me about it recently in a blog post she wrote.</p>
<p>It's so easy to get stuck in meetings that go round and round with no real outcome. I think something designers can do really well is to help visualise the conversations.</p>
<p>Perhaps everyone is discussing a complex user journey. Or changing something on a page. By visualising it using pictures and prototypes, designers can help the whole team to get a shared understanding of the decisions and ideas that are being floated.</p>
<p>It can also come in useful, when you need to test or revisit the idea later.</p>
<h2>Flow diagrams</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-11.png" alt="Simplified designs showing GOV UK service pages linked together with arrows." />
<p>This template by Paul Smith is great for quickly putting together flow diagrams. The level of detail is just right for visualising high level journeys.</p>
<p>It looks enough like a website, but it stops people from getting to bogged down in discussions over the detail.</p>
<p>I adapted this whilst working on the Met Office mobile app. And the devs really liked it.</p>
<p><a href="https://paulsmith.site/posts/govuk-flow-diagrams-figma/">GOV.UK Design System Flow Diagrams for Figma</a></p>
<h2>Thing 2: Make it work for everyone</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-12.png" alt="2 Make it work for everyone" />
<p>Thing two is “make it work for everyone”.</p>
<p>People are often excluded from digital things, because the designers responsible didn’t consider the needs of everyone, and so they end up introducing barriers that can block people with disabilities from using the service.</p>
<h2>Accessible design is good design</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-13.png" alt="Accessible design is good design" />
<p>I strongly believe that “accessible design is good design”.</p>
<h2>Driving with a medical condition service</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-14.png" alt="A screenshot of the DVLA website that allows people to search for their medical condition." />
<p>I first properly learnt about accessibility whilst I was at DVLA. I was working on a service called “driving with a medical condition”.</p>
<p>It’s used by people who have disabilities and long term medical conditions that affect their ability to drive. Things like epilepsy, Parkinson’s and visual impairments.</p>
<p>All designs should be accessible, but it was critical here since many of the conditions that may affect someone’s ability to drive might also affect their ability to use a poorly designed digital service.</p>
<h2>Working with disability charities and user research with people with disabilities</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-15.png" alt="A browser with very large white text and a black background. The user has typed in the amazon website address." />
<p>We did loads of user research, and we worked closely with charities, to understand the barriers that these users might face when using a poorly designed digital experience.</p>
<p>This is a photo I took whilst visiting RNIB (Royal National Institute of Blind People) in Cardiff.</p>
<p>I think something clicked for me when seeing this. It’s too easy to dismiss the experience of disabled people if you don’t spend time talking with them and understanding the barriers they might face.</p>
<p>This person has high contrast mode turned on and is zoomed right in using a screen magnifier.</p>
<p>It’s absolutely possible to design digital services that are compatible with computers that have been set up in this way. As long as you follow web standards, and test your work as you go.</p>
<h2>Basic accessibility checks</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-16.png" alt="Basic accessibility checks: Zoom to 400%, Test with keyboard, Turn colours off, Check on phone" />
<p>These are some basic accessibility checks I recommend doing on every design…</p>
<ul>
<li>zoom to 400%</li>
<li>test with keyboard</li>
<li>turn colours off</li>
<li>check on phone</li>
</ul>
<p>I also have a more detailed <a href="https://www.benjystanton.co.uk/blog/accessibility-checklist/">accessibility checklist</a> with links to more resources.</p>
<h2>Microsoft’s Accessibility Insights for Web</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-17.png" alt="A website screenshot. Numbers from 1 to 7 overlay the interactive elements and are connected with a thin black line to show the tab order." />
<p>This is a screenshot of <a href="https://accessibilityinsights.io/docs/web/overview/">Microsoft’s Accessibility Insights for Web</a> plug-in running on my homepage.</p>
<p>It visualises the order of interactive elements. Each time you press tab on the keyboard, it jumps to the next link or button. It's really useful for making sure the experience for keyboard users is equivalent to mouse users.</p>
<p>If the order is not quite right, or keyboard focus in unclear, then it's probably a sign that other assistive technology tools will struggle too.</p>
<p>Screenshots like this can become part of a handover document for developers too, so they can see how the code should be built.</p>
<h2>Thing 3: document everything</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-18.png" alt="3 Document everything" />
<p>That takes me to my last point which is “document everything”.</p>
<h2>Make things open, it makes things better</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-19.png" alt="The phrase Make things open, it makes things better repeated several times. The text is white and each word has a different brightly coloured rectangle behind it." />
<p>One great thing about the design community in UK government is that they love designing in the open.</p>
<p>I think as civil servants it's really important show your workings, so that they can be accountable to the public. After all, government work is funded by taxes, so it’s important to show how it’s being spent.</p>
<p>Even if you can’t share your work publicly, I think that getting into a habit of documenting things will help you, your team and other teams in your organisation to learn and improve.</p>
<p>(Aside: if you’re interested in stickers, check out this post by Vicky Teinaki: <a href="https://medium.com/gov-design/metaphors-we-sticker-by-4e4ecdbf8d64">Metaphors we sticker by</a>)</p>
<h2>Department for Education’s design histories</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-20.png" alt="Screenshot of a website. Large white text on a blue banner reads: Becoming a teacher design history." />
<p>One really good example of this is design histories.</p>
<p>This is a community built tool from <a href="https://x-govuk.github.io/">X-GOVUK</a>.</p>
<p>It’s not funded by gov, it’s just a bunch of people getting together to make free tools for the community.</p>
<p>This screenshot shows how Department for Education (DfE) have used this tool to create really detailed <a href="https://becoming-a-teacher.design-history.education.gov.uk/">design histories for their teacher services</a>.</p>
<p>I recommend taking a look if you have time.</p>
<h2>Design history tool</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-21.png" alt="Make your own: A design history for your GOV.UK service" />
<p>Or you can create your own if you want. As mentioned, the tool is open and free. Even if you’re not working on GOV.UK services, you’re welcome to have a poke around.</p>
<p><a href="https://x-govuk.github.io/govuk-design-history/">A design history for your GOV.UK service</a>.</p>
<h2>Basic design history questions</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-22.png" alt="What we changed, Why we changed it, How we’ll measure success, Adam Silver" />
<p>Even if you don’t want to create a whole website to document your decisions. I think documenting basic design histories are really worth it.</p>
<p>Something I'm trying to do it at the moment is answer these questions (via <a href="https://adamsilver.io/">Adam Silver</a>) at the end of every week.</p>
<ul>
<li>What we changed</li>
<li>Why we changed it</li>
<li>How we’ll measure success</li>
</ul>
<p>I’ve been doing this for a few months now, and it’s really great to see how a design has evolved over time. Just a few paragraphs every week can soon become a really valuable resource.</p>
<p>And it can become really useful for justifying decisions, helping new team members get up to speed and avoiding past mistakes.</p>
<h2>Recap</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-23.png" alt="Recap: Share early and iterate, Make it work for everyone, Document everything" />
<p>So to recap, these are the 3 things I’ve been talking about…</p>
<ul>
<li>Share early and iterate</li>
<li>Make it work for everyone</li>
<li>Document everything</li>
</ul>
<h2>Why?</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-24.png" alt="Working openly and showing you care builds trust" />
<p>In the end, I think that working in the open and showing that you care builds trust.</p>
<p>It builds trust with users, your team and your stakeholders. It can help create the right environment for good to design to happen.</p>
<h2>Thanks</h2>
<img class="border" src="https://www.benjystanton.co.uk/images/design-swansea-cropped/slide-25.png" alt="Thanks benjystanton.co.uk/cropped" />
<p>Thanks!</p>
Weeknotes – series 07 episode 082024-03-02T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-08/<p>Super quick weeknotes this week because I want extra time to prepare for <a href="https://www.skiddle.com/whats-on/Swansea/HQ-Urban-Kitchen/Design-Swansea-Cropped-2024/37890390/">my lightning talk at Design Swansea</a> next week.</p>
<h2>Breaking words in tables</h2>
<p>I <a href="https://mastodon.social/@benjystanton/111985483721389868">tooted about a problem with breaking words in tables</a>.</p>
<p>Looks like it inspired Adrian Roselli to write a whole post about it. This is good because Adrian is the expert on accessible tables: <a href="https://adrianroselli.com/2024/02/techniques-to-break-words.html">Techniques to Break Words by Adrian Roselli</a>.</p>
<p>I’m also glad that <a href="https://bsky.app/profile/sarasoueidan.com/post/3kmmy7lhtcx2z">Sara Soueidan mentioned it on Bluesky</a>. Otherwise I may not have spotted it.</p>
<h2>Trip to Sheffield</h2>
<p>I had a great 2.5 days away in Sheffield. It was the first time meeting many of the team in person. And even the first time seeing some people’s faces. (We’re a “video-off by default” team).</p>
<p>It was very productive and very fun. But I also wrote a post about why I prefer my <a href="https://www.benjystanton.co.uk/blog/why-i-love-remote-work/">day-to-day work to be done remotely</a>.</p>
<h2>Bilingual design</h2>
<p><a href="https://bsky.app/profile/niacampbell.bsky.social">Nia Campbell</a> is sharing a lot of really interesting work around designing Welsh products and services. Even though I don’t speak Welsh, it’s something really close to my heart as a Welsh person who cares about well designed Welsh services.</p>
<p>So it’s really great to see that <a href="https://docs.google.com/document/d/1Jm7DKPLaURH6GZE92vAw-FrKABnY9_B9wfVIAq1gRs4/mobilebasic">Nia has started sharing weeknotes</a> too. In her post you can find some interesting notes around <a href="https://docs.google.com/document/d/1ky4Tqh5CvRxV4Y_qNMMFyteC-BbT77V0vUX-tIZH9F4/edit#heading=h.wo7xp55rh41p">bilingual design and accessibility</a>. With some really great tips via <a href="https://twitter.com/mglancy">Martin Glancy</a>.</p>
<h2>Reading and listening to</h2>
<ul>
<li><a href="https://zeroheight.com/podcast/">Design Ops Island Discs by Luke Murphy</a> you can also find <a href="https://open.spotify.com/show/7A7pOj3UEg6O6Au7ys5sA5">Design Ops Island Discs on Spotify</a></li>
<li><a href="https://lynnandtonic.com/thoughts/entries/a-decade-of-working-remotely/">A decade of working remotely by Lynn Fisher</a></li>
</ul>
<h2>Some bookmarks for later</h2>
<ul>
<li><a href="https://joelanman.com/posts/govuk-prototype-kit-versioning/">GOV.UK Prototype Kit - Versioning your prototype by Joe Lanman</a></li>
<li><a href="https://medium.com/@kellyleeGDS/tired-of-fortnightly-sprints-were-trying-something-different-add529ac7d8b">Tired of fortnightly sprints? We’re trying something different by Kelly Lee</a></li>
<li><a href="https://www.vickyteinaki.com/blog/design-pattern-histories/">Design pattern histories by Vicky Teinaki</a></li>
</ul>
Why I love remote work2024-02-27T00:00:00Zhttps://www.benjystanton.co.uk/blog/why-i-love-remote-work/<p>After 2 days away with the team. I’m reminded that in-person workshops are often amazing (this one included).</p>
<p>But… joining video calls in an open plan office full of other people on video calls is a disaster for my productivity and wellbeing.</p>
<p>My brain literally can’t do it. I used to struggle through this way of working before, because I didn’t know any better. I thought I’d eventually “learn to cope like everyone else”.</p>
<p>Mandated “return to office” policies feel like a huge step backwards. Just trust and enable people to work where they feel most comfortable and productive.</p>
<p>Enable flexibility. Make it as inclusive as possible. Enable occasional face-to-face meetings that make the most of being together for short periods. (Please).</p>
<h2>What remote working means to me</h2>
<p>I recognise that I’m very privileged. But, I need remote working. It helps me in so many ways.</p>
<h3>I need it because I’m</h3>
<ul>
<li>an introvert</li>
<li>a parent of school age kids</li>
<li>someone who lives away from the places where most digital jobs tend to be</li>
</ul>
<h3>It helps me to</h3>
<ul>
<li>drive less and own fewer cars (without remote working this would be impossible where we live, because the public transport infrastructure just isn’t good enough)</li>
<li>help the kids with their school run and morning routine (breakfast, getting dressed, brushing teeth, packing lunchboxes)</li>
<li>be available to pick up my kids if they’re ill and need to come home in an emergency</li>
<li>be more active (school run, walking the dog, pop to shops)</li>
<li>do a few chores in my lunch break (like loading the dishwasher or putting clothes out to dry)</li>
<li>help my partner to work full time if she wants to</li>
<li>have more energy for life in the evening and weekends (see friends, exercise, help the kids with homework)</li>
<li>have more focused, uninterrupted work time (if I need it)</li>
<li>work for a much wider range of companies</li>
<li>have access to better paid jobs</li>
</ul>
<h2>Related links</h2>
<ul>
<li><a href="https://www.theguardian.com/environment/2023/sep/18/people-who-work-from-home-all-the-time-cut-emissions-by-54-against-those-in-office">People who work from home all the time ‘cut emissions by 54%’ against those in office by The Guardian</a></li>
<li><a href="https://www.atlassian.com/blog/distributed-work/distributed-work-report">Lessons learned: 1,000 days of distributed at Atlassian</a></li>
<li><a href="https://lynnandtonic.com/thoughts/entries/a-decade-of-working-remotely/">A decade of working remotely by Lynn Fisher</a></li>
</ul>
Weeknotes – series 07 episode 072024-02-24T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-07/<h2>Almost 1500 GitHub commits</h2>
<p>I spotted that I’ve made almost 1500 commits on GitHub for this site. The <a href="https://github.com/benjystanton/benjystanton.github.io/commit/7e7f84513d773b4d997bfce3ff6d214662556cc2">first commit</a> was 9 years ago!</p>
<p>Back then this site was built using Jekyll, and I was migrating across from WordPress. Some of the blog posts themselves were brought across from my old WordPress blog and the oldest was written in 2007.</p>
<p>I’ve also been making lots of tweaks to this site’s design recently. I’m pretty happy with how it's looking and working at the moment, even if it is still extremely vanilla. The current version of the site has been in progress since 2020.</p>
<h2>Now page</h2>
<p>I’ve added a <a href="https://www.benjystanton.co.uk/now">/now</a> page to my site. It’s inspired by <a href="https://sive.rs/">Derek Sivers</a>, but it was <a href="https://minutestomidnight.co.uk/">Simone Silvestroni</a>’s blog where I first spotted the idea.</p>
<p>I love these little ideas and concepts that spread between people’s personal blogs. ‘Now’ pages feel somewhere in-between an ‘about’ page and a ‘weeknote’.</p>
<p>My ‘about’ page has become very long, like a CV. So a ‘now’ page is a short, fun(?) and more personal page about things I’m currently doing, or thinking about.</p>
<p>Next, I’d like to add a <a href="https://uses.tech/">/uses</a> page. As a way to document all the different software and hardware that I use as an interaction designer.</p>
<h2>Away day in Sheffield</h2>
<p>In work, it’s the end of our planning interval, so we have a 2 day team workshop in Sheffield next week. We’ll be planning the next 12 weeks / 6 sprints of work and reflecting on the past few months.</p>
<p>It’s a nice change of pace, and a chance to spend some time with the team. I think it’s the first time I’ve been to Sheffield since my ONS (Office for National Statistics) days.</p>
<h2><a href="https://www.deque.com/axe-con/">Axe-con</a></h2>
<p>Axe-con was last week. It’s an online digital accessibility conference. Someone in work recommended watching these 2 talks, so I’m hoping to watch them on the 5 hour (each way) train to Sheffield! I think they’re free, as long as you register.</p>
<ul>
<li><a href="https://www.deque.com/axe-con/sessions/building-a-culture-of-accessibility-through-design-annotation/">Building a culture of accessibility through design annotation by Damian Sian and Taniya Bhosale</a></li>
<li><a href="https://www.deque.com/axe-con/sessions/multisensory-design-accessibility-as-a-creative-practice-for-designers-2/">Multisensory Design: Accessibility as a Creative Practice for Designers by Lauren Race</a></li>
</ul>
<h2>Reading</h2>
<ul>
<li><a href="https://silviamaggidesign.com/">Silvia Maggi’s blog</a> recommended by <a href="https://minutestomidnight.co.uk/">Simone Silvestroni</a></li>
<li>Not entirely safe for work: <a href="https://heydonworks.com/article/what-is-utility-first-css/">What is Utility-First CSS? By Heydon Pickering</a></li>
<li><a href="https://blog.jim-nielsen.com/2024/ui-fn-org/">UI=f(org): UI is a Function of Your Organization by Jim Nielsen</a></li>
</ul>
<h2>Listening to</h2>
<p>I’ve got a couple of gigs on the horizon (<a href="https://www.instagram.com/follygroupcomms/">Folly Group</a> and <a href="https://ninjatune.net/artist/thundercat">Thundercat</a>). So I’m spending some time listening to their stuff in preparation.</p>
Why Markdown is a great design tool2024-02-18T00:00:00Zhttps://www.benjystanton.co.uk/blog/why-markdown-is-a-great-design-tool/<p>Markdown is an incredibly flexible tool that’s part of my daily working practice. Almost everything I write digitally (including this post) starts in Markdown. It’s even influenced the way I write on paper. And all of my design work starts with some form of writing.</p>
<p>This post by John Gruber is a good <a href="https://daringfireball.net/projects/markdown/">intro to Markdown</a>.</p>
<h2>Markdown example</h2>
<pre><code># Heading 1
## Heading 2
Paragraph with **bold** text.
- list item 1
- list item 2
- list item 3
</code></pre>
<h2>Markdown helps me to…</h2>
<ul>
<li>take notes quickly (during meetings or user research sessions)</li>
<li>start designing something with a "content first" approach</li>
<li>focus on writing, instead of visual style</li>
<li>convert notes to HTML</li>
<li>write HTML quickly</li>
<li>learn HTML basics (like heading levels)</li>
<li>share my notes everywhere (Markdown is just plain text, so it works everywhere)</li>
<li>write blog posts (it’s compatible with lots of blogging tools, like <a href="https://www.11ty.dev/docs/languages/markdown/">Eleventy</a>)</li>
<li>write formatted notes in lots of apps, like <a href="https://slack.com/intl/en-gb/help/articles/202288908-Format-your-messages">Slack</a>, <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">GitHub</a>, <a href="https://support.atlassian.com/trello/docs/how-to-format-your-text-in-trello/">Trello</a> (although the different flavours of Markdown can be annoying)</li>
</ul>
<p>It’s even compatible with this <a href="https://grillopress.github.io/2019/05/04/writing-shorthand.html">lo-fi prototyping method</a> that Andrew Duckworth has written about (thanks to <a href="https://joelanman.com/">Joe Lanman</a> for sharing that recently).</p>
<h2>Tools for writing Markdown</h2>
<p>My favourite is <a href="https://ia.net/writer">iA Writer</a>. It’s been a part of my <a href="https://www.benjystanton.co.uk/blog/my-interaction-design-tools-version-3/">design toolbox</a> for over 10 years. but any code editor or plain text writing tool will do.</p>
Weeknotes – series 07 episode 062024-02-17T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-06/<h2>Designing with many dependencies and an unclear scope</h2>
<p>Despite the team being under lots of pressure in work. We are starting to pick up new things. I’m really trying to avoid past mistakes (rushing work to catch up with over-promised schedules).</p>
<p>Part of this is making sure I reach out to the team and get their thoughts on how to solve problems. Despite me being good at blogging and tweeting, I know that I’m less good at speaking to the people I work with day-to-day to get their help.</p>
<p>I’ve been doing some <a href="https://stephaniewalter.design/blog/an-introduction-to-user-journey-map-pdf-templates/">high level journey maps</a> to help me think about what each of our users need to do at each phase.</p>
<p>I’ve been stuck on this kind of thing before by focusing too soon on the exact order that things need to be done. But, by grouping things by rough phases, I’ve been able to get beyond the initial paralysis caused by trying to do things in hi-fidelity straight away.</p>
<p>There are a lot of dependencies with this user journey. So I’ve made a plan to show my early, rough designs with various people and teams next week, including the…</p>
<ul>
<li>business analyst and product manager</li>
<li>service owner</li>
<li>software developers</li>
<li>wider interaction design team</li>
<li>reference data team</li>
</ul>
<p>I think I’m happy sharing designs before they are finished, but I’m recognising that I don’t like to share designs before I understand the scope of the work.</p>
<p>In this instance, I think I have to figure out the design and the scope of the work at the same time, so that means lots of iterations, and lots of chatting to people. It feels long-winded, but I know that it’s better to solve these problems sooner rather than later.</p>
<p>I can feel already that sharing in this way is reducing some of the stress that I’m facing.</p>
<h2>Accessibility strategy resources</h2>
<p>Shaun Conner shared this post: <a href="https://sconner.net/blog/getting-to-an-accessibility-strategy/">getting to an accessibility strategy</a>. It’s a theme close to my heart, after the time I spent as part of the inclusive design team at UKHSA (The UK Health Security Agency).</p>
<p>I remembered that I’d created a list of accessibility strategy resources on Twitter, so I’m resharing them here, before I lose them.</p>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/defining-a-strategy-for-accessibility/">Defining a strategy for accessibility by Craig Abbott</a></li>
<li><a href="https://www.hassellinclusion.com/accessibility-maturity-scorecard/">Digital Accessibility Maturity Scorecard by Hassell Inclusion</a></li>
<li><a href="https://hodigital.blog.gov.uk/2021/11/29/how-inclusive-services-help-us-to-deliver-effectively/">How inclusive services help us to deliver effectively by David Caldwell</a></li>
<li><a href="https://tetralogical.com/blog/2021/01/07/sustainable-accessibility/">Sustainable accessibility by Léonie Watson</a></li>
<li><a href="https://www.ab11y.com/articles/the-four-biggest-unanswered-accessibility-questions-for-any-organisation/">The Four Biggest Unanswered Accessibility Questions for Any Organisation by Gareth Ford Williams</a></li>
<li><a href="https://accessibility.blog.gov.uk/2021/12/20/what-weve-found-from-monitoring-public-sector-accessibility/">What we’ve found from monitoring public sector accessibility by Chris Heathcote</a></li>
<li><a href="https://makeitfable.com/article/building-the-accessible-usability-scale/">Building the Accessible Usability Scale by Abid Virani</a></li>
<li><a href="https://pleasefunda11y.com/">How to Fund Accessibility Work by Melanie Sumner</a></li>
<li><a href="https://tetralogical.com/blog/2022/04/05/business-case-for-accessibility/">The business case for accessibility by Felicity Miners-Jones</a></li>
<li><a href="https://www.deque.com/blog/change-management-for-accessibility-part-1/">Change Management for Accessibility: Part 1 by Michael Harshbarger and Heidi Kelly-Gibson</a></li>
<li><a href="https://accessibility.blog.gov.uk/2023/01/06/a-new-accessibility-strategy-for-the-gov-uk-design-system/">A new accessibility strategy for the GOV.UK Design System by David Cox</a></li>
</ul>
<h2>Bombay Bicycle Club</h2>
<p>I’m looking forward to seeing <a href="https://bombaybicycle.club/">Bombay Bicycle Club</a> this weekend. It’s my first gig of the year. Little disappointed that I didn’t manage one in January in though.</p>
<h2>Reading</h2>
<ul>
<li><a href="https://fitzrovialightindustries.com/products/haudoo-how-to-do-presentations">How to do presentations by Anne Shewring and Russell Davies</a></li>
<li><a href="https://medium.vickyteinaki.com/a-weeknote-starting-february-5-2023-5ae4d2946aeb">Information architecture in the world of GOV.UK (a weeknote, starting 5 February 2024) by Vicky Teinaki</a></li>
<li><a href="https://stephaniewalter.design/blog/an-introduction-to-user-journey-map-pdf-templates/">An Introduction to User Journey Map + free User Journey Map Templates by Stéphanie Walter</a></li>
<li><a href="https://rs.sjoy.lol/">RSS JOY by Sara Joy</a></li>
<li><a href="https://tetralogical.com/blog/2024/02/12/can-generative-ai-help-write-accessible-code/">Can generative AI help write accessible code? By Léonie Watson</a></li>
<li><a href="https://tantek.com/2024/044/t1/twenty-years-microformats-updates">Twenty years microformats by Tantek</a></li>
<li><a href="https://grillopress.github.io/2019/05/04/writing-shorthand.html">Prototyping in shorthand by Andrew Duckworth</a></li>
<li><a href="https://visitmy.website/2024/02/10/the-bing-bong/">The Bing Bong by Steve Messer</a></li>
<li><a href="https://daverupert.com/2024/02/ui-states/">UI states by Dave Rupert</a></li>
</ul>
<h2>Bookmarks</h2>
<p>Some things I’m saving here to read later…</p>
<ul>
<li><a href="https://uxdesign.cc/decision-provenance-is-a-requirement-for-two-way-door-decision-making-c24015c6b02a">Decision provenance is a requirement for “two-way door” decision-making by Pavel Samsonov</a></li>
<li><a href="https://public.digital/2024/02/08/pd-sessions-leading-inclusive-services">PD Sessions: Leading Inclusive Services by Connie van Zanten</a></li>
<li><a href="https://alistapart.com/article/opportunities-for-ai-in-accessibility/">Opportunities for AI in Accessibility by Aaron Gustafson</a></li>
</ul>
Weeknotes – series 07 episode 052024-02-10T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-05/<h2>Stressful week</h2>
<p>This week has been stressful. If the ‘how much I’ve moaned at my partner scale’ is anything to go by, then it’s probably about 7 out of 10.</p>
<p>The product I’m working on is heading towards a private beta, and I’m constantly worrying about things we could be doing better. I know it’s part of a designer’s job to be thinking about ways to improve quality and better meet user needs, but I think I let it get the better of me this week, and I let my worries spill over, and perhaps distracted others on the team with things that didn’t need to be addressed yet.</p>
<p>But, it definitely hasn’t been all bad…</p>
<h2>Prototype demos</h2>
<p>I’ve been going round various external show and tells, showing our latest prototype to stakeholders across the wider organisation.</p>
<p>Many of the people at the show and tells represent our users, so it’s been good to get a sense of their reactions. Their feedback and questions were positive (if a little reserved). Previously the prototype has been described as “clunky” and nobody said that this time. Phew.</p>
<p>I’ve done the same presentation 3 times now, and there’s even a recording of me doing it, so I’ve been immortalised on the department’s Sharepoint for generations to watch.</p>
<h2>Links withouts <code>hrefs</code></h2>
<p>I was reviewing a screen this week and spotted that it contained many links without <code>href</code> attributes. That's the bit of the link that tells browsers which page to go to when clicked.</p>
<p>JavaScript was being used to add the link’s destination URL in. Apart from the <a href="https://www.gov.uk/service-manual/technology/using-progressive-enhancement">progressive enhancement</a> issues, I felt like this was going to cause accessibility problems too.</p>
<p>I wanted to report this issue, but first I wanted to gather some evidence and resources about why this was bad practice and how it could introduce barriers to users.</p>
<p>Here’s what I found out about links without <code>href</code>s</p>
<ul>
<li>the links rely on CSS to work, so if CSS is disabled, or customised by the user, then the links might not look or act as expected</li>
<li>extra code is needed to make the links work with keyboard navigation</li>
<li>link styling can be unpredictable on Windows High Contrast Mode</li>
<li>the links can act unexpectedly with some screen readers</li>
</ul>
<p>Read more about this in <a href="https://www.tempertemper.net/blog/links-missing-href-attributes-and-over-engineered-code">links, missing href attributes, and over-engineered code by Martin Underhill</a></p>
<p>This page by The Ally Project is also good primer on <a href="https://www.a11yproject.com/posts/creating-valid-and-accessible-links/">creating valid and accessible links</a>.</p>
<h2>Bluesky is open</h2>
<p>Bluesky seems to be emerging as the place for government digital people to migrate to, now that Elon is ruining Twitter. If you want to try it out, it’s open for anyone to sign up to…</p>
<p><a href="https://bsky.app/profile/benjystanton.bsky.social">View my profile or join Bluesky</a></p>
<p>Bluesky is far from perfect, but I really hope we (as a community) find somewhere that rekindles the spirit of early Twitter.</p>
<h2>Reading (and listening to)</h2>
<ul>
<li><a href="https://www.vickyteinaki.com/blog/design-and-uncertainty/">Design and uncertainty by Vicky Teinaki</a></li>
<li><a href="https://daverupert.com/2024/01/what-can-a-website-do/">What Can a Website Do? By Dave Rupert</a></li>
<li><a href="https://michaelcattell.com/2024/02/03/weeknotes-no56.html">Weeknotes No.56 by Michael Cattell</a></li>
<li><a href="https://www.weareserviceworks.com/blog/service-design-secrets">Essential Service Design Secrets by Jo Carter</a></li>
<li>Podcast: <a href="https://www.fourthwallcontent.com/podcasts/designing-content-for-welsh-language-users">Designing content for Welsh language users by Robert Mills and Nia Campbell</a></li>
</ul>
<h2>Bookmarks</h2>
<p>A few things that I didn’t get round to reading, but don’t want to forget about…</p>
<ul>
<li><a href="https://dav-idc.com/making-a-character-count-component-more-accessible/">Making a character count component more accessible by David Cox</a></li>
<li><a href="https://abilitynet.org.uk/webinars/whats-new-wcag-22">What's new in WCAG 2.2 by AbilityNet</a></li>
<li><a href="https://speakerdeck.com/tempertemper/getting-started-with-manual-accessibility-testing">Getting started with manual accessibility testing by Martin Underhill</a></li>
<li><a href="https://tonsky.me/blog/checkbox/">In Loving Memory of Square Checkbox by Niki</a></li>
<li><a href="https://cennydd.com/writing/major-new-work-harmful-design-in-browser-choice">Major new work: harmful design in browser choice by Cennydd Bowles and Harry Brignull</a></li>
<li><a href="https://joelanman.com/projects/coronavirus-extremely-vulnerable-people/">Coronavirus Extremely Vulnerable People by Joe Lanman</a></li>
<li><a href="https://nrw-digital.github.io/week-notes/en/updates/2024/02/09/week-notes.html">Weeknotes 09/02/2024 by Heledd and Alex at Natural Resources Wales</a></li>
</ul>
Weeknotes – series 07 episode 042024-02-03T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-04/<h2>Design Swansea 60</h2>
<p>I went to Design Swansea on Thursday. I hadn’t realised until I’d got there, but it was their 60th event!</p>
<p>The talks were by photographer <a href="https://morrishandco.com/about">Nick Morrish</a> and his previous life as an in-house photographer at British Airways. And, Lloyd Morgan the founder of video agency <a href="https://www.rockadove.co.uk/">Rockadove</a>.</p>
<p>I may have signed up to give a talk next month! Planned for Thursday 7th March. It’ll be part of their semi-regular lightning talks event called Design Swansea Cropped. So… I think I only have to talk for maybe 5 or 10 minutes. Not thought too much about the talk yet, but I expect it’ll be about interaction design in government (big surprise). Please come along if you can!</p>
<h2>Shoreline management plans</h2>
<p>I found out from Rob that something I started working on with Swirrl back in 2019 or 2020 has gone live. It’s a data explorer for <a href="https://www.gov.uk/guidance/shoreline-management-plans">shoreline management plans</a>. Aimed at organisations who need to know about coastal flood and erosion risks.</p>
<p>I really enjoyed the early days of the project. It involved lots of iteration, user research, working closely with experts and community feedback sessions… and of course the subject matter was really interesting.</p>
<p>It’s great to see it finally go live. Thankful that Rob picked up the baton and kept going to get it out!</p>
<h2>Test local prototypes from your phone</h2>
<p>I wrote myself a refresher guide on how to connect my phone (or any other device) to my MacBook, so that I can test any prototypes that I have running locally on my Mac from my other devices.</p>
<p>It’s a good way to make sure designs are responsive and work in a range of browsers. But I often forget the specific details of how to set it up.</p>
<ul>
<li>Run a prototype (or website generator) locally on your Mac</li>
<li>Address will be something like <code>http://localhost:3000</code></li>
<li>Navigate to page you want to test <code>http://localhost:3000/path/to/page</code></li>
<li><a href="https://www.avg.com/en/signal/find-ip-address#mac">Find out your Mac’s IP address</a></li>
<li>It will be something like <code>192.000.00.000</code></li>
<li>Make sure both devices are on the same wifi network</li>
<li>Navigate to <code>http://192.000.00.000:3000/path/to/page</code> on your other device</li>
</ul>
<p>I used to use apps (Ghostlab?) and terminal packages that helped to do this for me, some of them even synced the page and scroll position to make cross-browser testing even easier. Need to look back into that.</p>
<h2>Managing design debt in Jira</h2>
<p>In work, we are thinking about what the next 3 to 6 months looks like, so the design team I’m working with are pulling together user research and any other design issues we are aware of, to make these things get considered in a thorough way.</p>
<p>I’ve been focusing on Jira, as I’m aware that there are lots of issues in there raised by the UCD (user-centred design) and QAT (quality assurance testing) team. They are labelled in different ways (for example ‘UCD’ or ‘accessibility’) or assigned to different epics. But there is no way to see them all in one place to get a sense of what our design debt looks like.</p>
<p>Individually each of these tickets are small, but together they can amass into a huge chunk of work, that importantly can really harm the user experience of a product.</p>
<p>I’ve been wrestling with Jira search to create a filter list that puts all these issues in the same place. We have about 50 so far. Having confidence that I can track them all in one place will give me much more confidence in raising more issues (sorry team).</p>
<p>I think that being able to get a steady amount of these small tickets through every sprint is a sign of healthy, productive team. So this work is good step towards that.</p>
<h2>Target size</h2>
<p>I decided to do a bit of a deep dive on target size, these are the articles that I’ve been reading on that subject.</p>
<ul>
<li><a href="https://tetralogical.com/blog/2022/12/20/foundations-target-size/">Foundations: target sizes by Joe Lamyman</a></li>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">Understanding SC 2.5.8: Target Size (Minimum) (Level AA) by World Wide Web Consortium (W3C)</a></li>
<li><a href="https://ishadeed.com/article/target-size/">Designing better target sizes by Ahmad Shadeed</a></li>
</ul>
<h2>Reading</h2>
<ul>
<li><a href="https://grillopress.github.io/2024/01/24/it-s-okay-to-start-with-a-stakeholder-s-solution-just-don-t-stop-there.html">It's okay to start with a stakeholder's solution. Just don't stop there by Andrew Duckworth</a></li>
<li><a href="https://deanvipond.medium.com/banning-cosmetic-discussions-in-design-236f809245b8">Banning cosmetic discussions in design by Dean Vipond</a></li>
<li><a href="https://amyhupe.co.uk/articles/dont-be-afraid-of-the-big-long-page/">Don't be afraid of the Big Long Page by Amy Hupe and Caroline Jarrett</a></li>
</ul>
Weeknotes – series 07 episode 032024-01-25T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-03/<p>Work has been busy, and very up-and-down this week, so I’m pleased to be heading towards the weekend feeling pretty positive.</p>
<h2>Prototype rhythm</h2>
<p>I’m getting into a good prototyping rhythm. I’m working on multiple branches at the same time, with each being focused on a self-contained update.</p>
<p>I’m working on a mixture of…</p>
<ul>
<li>tidying things up</li>
<li>adding new user flows</li>
<li>making sure the design keeps pace with the dev environments</li>
</ul>
<p>That last one isn’t ideal. Generally a prototype should be driving what gets built. But in my experience, there’s usually a bit of give and take, especially when designs first hit real dev environments. We have to integrate with a wider service too, so we’re figuring that out a little bit as we go.</p>
<p>I’m trying to keep the prototype up-to-date, making multiple changes every week. This can feel like a grind sometimes, when the changes are small and repetitive, but I think making sure the prototype is up-to-date with our latest decisions is good for a few reasons…</p>
<ul>
<li>it’s always going to be ready for a demo</li>
<li>or a new round of research</li>
<li>design debt doesn’t build up</li>
<li>it keeps me aware of any changes that are being worked on by others on the team</li>
</ul>
<h2>Design authority</h2>
<p>We had a design authority presentation on Monday. This was a 2 hour, semi-formal review, going through our department’s definition of ready. And showing what we were doing to meet that standard.</p>
<p>It wasn’t as scary as we’d feared, and the outcome was generally positive. We managed to get some focus on user needs, and the need to improve our accessibility ways of working.</p>
<h2>Design histories</h2>
<p>Adam silver wrote a short <a href="https://www.linkedin.com/posts/adamsilverhq_ive-written-more-than-300-design-history-activity-7155103071532904448-sUBz">post about design histories on LinkedIn</a>.</p>
<p>Adam’s tip was to try and answer these questions to document every design iteration.</p>
<blockquote>
<ul>
<li>What we changed</li>
<li>Why we changed it</li>
<li>How we’ll measure success</li>
</ul>
</blockquote>
<p>I’m trying to get into a regular habit of doing this. I’m planing on diving into the good work that <a href="https://x-govuk.github.io/govuk-design-history/">X-GOVUK</a> and <a href="https://design-histories.education.gov.uk/">Department for Education</a> are doing with design histories.</p>
<h2>Design Swansea is back!</h2>
<p>After a break in January, Design Swansea is back next month. It’s a meet-up in Swansea for all kinds of designers. I haven’t been to one in ages, so I’m looking forward to getting to this one.</p>
<p>Grab a free ticket to <a href="https://www.skiddle.com/whats-on/Swansea/HQ-Urban-Kitchen/Design-Swansea-60---Nick-Morrish--Lloyd-Morgan/37266191/">Design Swansea 60 with Nick Morrish & Lloyd Morgan</a>.</p>
<h2>Task list pattern event</h2>
<p>I joined a community event to celebrate the launch of the updated <a href="https://design-system.service.gov.uk/components/task-list/">task list component</a> that’s part of the <a href="https://design-system.service.gov.uk/">GOV.UK Design System</a>. It was a really nice event.</p>
<p>You can read more about the work that happened in this blog post: <a href="https://designnotes.blog.gov.uk/2023/12/15/working-as-a-community-to-iterate-the-task-list-pattern/">Working as a community to iterate the task list pattern by Frankie Roberto</a>.</p>
<h2>Reading</h2>
<ul>
<li><a href="https://visitmy.website/2024/01/22/universal-interfaces-and-semantic-agents/">Universal interfaces and Semantic Agents by Steve Messer</a></li>
<li><a href="https://chriscoyier.net/2024/01/22/where-have-all-the-websites-gone/">Where have all the websites gone? by Chris Coyier</a></li>
<li><a href="https://ames.world/en/posts/reflections-on-ukgovcamp-2024/">Reflections on UKGovCamp 2024. by Ian Ames</a></li>
<li><a href="https://www.atlassian.com/blog/distributed-work/distributed-work-report">Lessons learned: 1,000 days of distributed at Atlassian by Annie Dean</a></li>
<li><a href="https://www.deque.com/axe-con/schedule/">axe-con 2024 Agenda</a></li>
</ul>
Weeknotes – series 07 episode 022024-01-18T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-02/<h2>Deadline approaching</h2>
<p>This week we finished our first sprint of the year. I’m feeling productive, and a bit more like I have enough time to do things properly. Compared to the last few months of last year, which were very full on.</p>
<p>But, there is still loads to do. We are aiming to get a private beta out by the end of March, which isn’t much time. Still, things do feel like they are starting to fall into place, and our hard work is paying off.</p>
<p>We’re trying to find that sweet spot of being far enough ahead of the developers to remove any design bottleneck, but not so far ahead that we become detached from the day-to-day delivery challenges of the team.</p>
<p>On reflection, I think the ability to keep that gap small is a sign of a healthy, agile team. It feels safer to work a few sprints or even months ahead, but in my experience that leads to feedback loops that are too big to manage.</p>
<h2>Paid off my laptop</h2>
<p>I paid off my laptop this month. I took out a loan to buy a MacBook in March. And managed to pay it off a little earlier than expected, which feels like it's worth celebrating.</p>
<p>I went for a 14-inch 2023 MacBook Pro with the Apple M2 Pro chip and 16GB memory. It’s probably way over-powered considering I only run Google Chrome and Visual Studio Code.</p>
<p>I’m really happy with the investment though, and it still feels like new.</p>
<p>I wrote this around that time: <a href="https://www.benjystanton.co.uk/blog/setting-up-a-new-mac-for-interaction-design/">setting up a new mac for interaction design</a></p>
<h2>Flow diagrams and design resources</h2>
<p>I created a flow diagram this week, showing our service from a high level. Once again, using some great community created resources from other designs across gov.</p>
<p>Credit to <a href="https://github.com/clare-brown">Clare Brown</a>, <a href="https://paulsmith.site/">Paul Smith</a> and <a href="https://github.com/dashouse">Dave House</a> for helping to make the <a href="https://github.com/clare-brown/govuk-designsystem-flow-diagram-mural">GOVUK Design System Flow Diagrams for MURAL</a> a reality. Stuff like this really saves me time.</p>
<p>Also in the GOV.UK Design System’s community section are some great videos about <a href="https://design-system.service.gov.uk/community/blogs-talks-podcasts/#how-to-use-the-design-system">inspecting and testing for accessibility</a>.</p>
<h2>Sara Soueidan's accessible notifications chapter</h2>
<p>I've not read this yet, but Sara Soueidan has very generously released a chapter of <a href="https://practical-accessibility.today/">Practical Accessibility</a> for free.</p>
<p>I'm working on accessible notifications at the moment so it's great timing for me.</p>
<ul>
<li><a href="https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/">Accessible Notifications with ARIA Live Regions (Part 1) by Sara Soueidan</a></li>
<li><a href="https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/">Accessible Notifications with ARIA Live Regions (Part 2) by Sara Soueidan</a></li>
</ul>
<h2>Reading (and listening to)</h2>
<ul>
<li><a href="https://www.designswarm.com/blog/2024/01/organising-design-or-why-you-need-to-care-about-spreadsheets/">Organising Design (or why you need to care about spreadsheets) by Alexandra Deschamps-Sonsino</a></li>
<li><a href="https://designnotes.blog.gov.uk/2023/12/15/working-as-a-community-to-iterate-the-task-list-pattern/">Working as a community to iterate the task list pattern by Frankie Roberto</a></li>
<li><a href="https://toward.studio/latest/16-lesser-known-accessibility-issues">16 Lesser Known Accessibility Issues by Matthew Jackson</a></li>
<li><a href="https://www.bbc.co.uk/sounds/brand/p07h3hhp">So You’ve Been Publicly Shamed by Jon Ronson (podcast)</a></li>
</ul>
Weeknotes – series 07 episode 012024-01-13T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-07-episode-01/<h2>Trying weeknotes again</h2>
<p>I’m struggling to get into a writing habit at the moment, so I’m going to try weeknotes for a while. Although, looking back, it looks like I wrote 12 blog posts last year, which is more than I was expecting.</p>
<h2>Contracting extension</h2>
<p>I’ve just got another extension at work. Meaning that my first contracting gig is on track to be 12 months. Hopefully I’ll get another extension after March too. Although, I expect making it into the next financial year will be tricky, as budgets get re-jigged. I think my team have plenty of work ahead of them, so fingers crossed.</p>
<p>I’m really enjoying the hands-on interaction design work still. I’ve only managed to feel this focused a couple of times before in my career (whilst working at DVLA and <a href="https://www.swirrl.com/">Swirrl</a>). So I’m still feeling like my decision to switch to contracting was the right one for me.</p>
<p>I’ve been at Home Office for 10 months already. Which is the same amount of time I was at <a href="https://www.madetech.com/">Made Tech</a>. So that feels like a good milestone.</p>
<h2>Centre for Digital Public Services (CDPS) community of practice</h2>
<p>I’ve joined CDPS’s <a href="https://digitalpublicservices.gov.wales/courses-and-events/communities-practice/designing-digital-experiences">Designing Digital Experiences community of practice</a>.</p>
<p>It’s a community for designers to discuss…</p>
<blockquote>
<p>…the practical aspects of designing digital experiences, such as user-centred design methods and processes, design skills, and software.</p>
</blockquote>
<p>I’ve not attended any meet-ups yet, but it’s been great to see how many digital designers there are in and around Wales, working across all sort of sectors.</p>
<p>The organiser Liam has done a great job of finding where we are all hiding, so I have high hopes that this will become a great community to be part of.</p>
<h2>My Neighbour Totoro show</h2>
<p>I’m taking the family to see the <a href="https://www.barbican.org.uk/whats-on/2023/event/royal-shakespeare-company-my-neighbour-totoro">My Neighbour Totoro</a> show at the Barbican at the end of the month. Can’t wait for that, I’ve heard good things, and the kids love the film.</p>
<h2>Reading</h2>
<ul>
<li><a href="https://www.vickyteinaki.com/blog/more-efficient-prototyping-with-the-gov-uk-prototype-kit-step-by-step/">More efficient prototyping with the GOV.UK prototype kit: step by step (updated January 2024) by Vicky Teinaki</a></li>
<li><a href="https://alexleedesign.co.uk/blog/articles/are-prototypes-enough-for-sharing-design-work/">Are prototypes enough when sharing design work? by Alex Lee</a></li>
<li><a href="https://ishadeed.com/article/target-size/">Designing better target sizes by Ahmad Shadeed</a></li>
<li><a href="https://accessibility.blog.gov.uk/2024/01/11/get-to-wcag-2-2-faster-with-the-gov-uk-design-system/">Get to WCAG 2.2 faster with the GOV.UK Design System by David Cox</a></li>
</ul>
Helping to get quality code into production as an interaction designer2023-12-06T00:00:00Zhttps://www.benjystanton.co.uk/blog/helping-to-get-quality-code-into-production-as-an-interaction-designer/<p>My notes on how interaction designers can work with software developers and testers on agile delivery teams.</p>
<p>I shared this earlier in the week and wanted to expand on it a bit…</p>
<blockquote>
<p>… I think the value an interaction designer can bring to how digital products are delivered (as in … working alongside devs and getting things into production, in a good usable, accessible state) is really undervalued. Creating rough prototypes is only half the battle!<br />
— <a href="https://bsky.app/profile/benjystanton.bsky.social/post/3kfqfhhmmf62k">Bluesky on Dec 4, 2023 at 17:57</a></p>
</blockquote>
<p>Here are some things I try to do (I never manage to do all of these things, all of the time, though). I've focused on my experience of working in UK gov, but hopefully the principles will apply elsewhere too.</p>
<h2>Tidy up the prototype</h2>
<p>I use the <a href="https://prototype-kit.service.gov.uk/docs/">GOV.UK Prototype Kit</a> to create rough prototypes for use in user research. Once the research is done, it's often useful to go back and tidy up the prototype code so that…</p>
<ul>
<li>it uses the <a href="https://design-system.service.gov.uk/">design system's styles, component and patterns</a> correctly</li>
<li>it makes sense to other designers in future</li>
<li>the code valid and accessible, and that it doesn't introduce any bad practices that developers might copy over to the build environments</li>
</ul>
<h2>Write handover notes</h2>
<p>I'm not a fan of super detailed handover notes, they can be frustrating to keep up to date. I prefer the prototype to explain the design by itself. But, some things are easy to miss when you weren't the person who designed the prototype. Especially if some things are…</p>
<ul>
<li>hidden visually</li>
<li>only appear at certain resolutions</li>
<li>only appear on certain types of device</li>
<li>only become apparent when using a particular input method (like a keyboard)</li>
</ul>
<p>Taking some time to write a few notes can help with handover conversations and when you (or another designer) comes back to the design in future.</p>
<p>I like to include…</p>
<ul>
<li>designs - link to prototypes or user flow diagrams</li>
<li>screenshots - capture the design at key breakpoints</li>
<li>notes - describe behaviour, decisions, accessibiltiy considerations and anything else to be aware of</li>
<li>assets - links to any production ready assets like SVG icons</li>
<li>content - make it easy for engineers to copy and paste any text content</li>
<li>follow on tasks - any next steps that need to be captured as tickets or tasks, or anything that is out of scope for now</li>
</ul>
<h2>Write tickets</h2>
<p>Documenting handover notes can help with writing tickets too. I think it's healthy for designers to contribute to how tickets are populated, even if the work is going to be picked up by someone else.</p>
<p>View my <a href="https://gist.github.com/benjystanton/d701e4d4b3106e7cefcef46c1b60aaf9">ticket template</a>.</p>
<h2>Have a handover chat</h2>
<p>It's good practice to talk to the devs and testers on the team through the design before the development work starts. If the design is a complete surprise to them when they come to pick-up the ticket, that's probably a warning sign.</p>
<p>Be available to respond to their questions as they go. Devs and testers are able to spot things that designers can't, no mattter how good the handover is.</p>
<h2>Design and accessibility review</h2>
<p>Before the build goes live, the developers should be able to show you their progress, and give you a chance to check it all over. A chat is good, but I prefer to set some time aside to go through it at my own pace.</p>
<p>I like to be able to inpect the code, and interact with the design on different devices.</p>
<p>The amount of time needed can depend on the team and whether or not you have dedicated testers. But, even with a great test team in place, there are some issues that designers are more likely to spot.</p>
<p>View my notes on basic <a href="https://gist.github.com/benjystanton/a549446dff269f2229280c97691d6ba8">accessibility testing</a>.</p>
<p>It's a good idea to make sure your own prototype passes these tests too, so you can share examples of how to fix things.</p>
<h2>Help developers to write HTML and CSS</h2>
<p>Often software developers won't be experts in HTML and CSS, so it's useful if you can recognise code issues and help to fix them. For example…</p>
<ul>
<li>Using the correct CSS <a href="https://design-system.service.gov.uk/styles/">style classes</a> from the design system</li>
<li>Using semantic HTML, so the code is valid and accessible, for example: nesting <code><input></code>, <code><label></code>, and <code><legend></code> correctly within a fieldset, like with the <a href="https://design-system.service.gov.uk/components/radios/">radio component</a> on the GOV.UK Design System.</li>
</ul>
First 6 months contracting2023-09-10T00:00:00Zhttps://www.benjystanton.co.uk/blog/first-6-months-contracting/<p>I’ve just started my 6th month as a contractor, and wanted to share some notes around the practicalities of being employed inside IR35.</p>
<h2>Inside IR35</h2>
<p>I’m writing this from the perspective of being inside IR35.</p>
<p>This means that I'm not self-employed, or running my own business. I'm employed by an Umbrella company who sort my pay, tax, pension and liability insurance (for a weekly fee).</p>
<p>A big chunk of my daily rate disappears before it comes to me, but I don't need to worry about saving for my tax bill or much of the paperwork associated with running a business or limited company.</p>
<p>Inside IR35 daily rates tend to be higher too, which helps to balance out the fact that the tax situation is less favourable.</p>
<p>All in all, I'm happy with the arrangement.</p>
<p>(By the way, I’m certainly not an expert in all of this so please get professional advice before acting on my notes.)</p>
<h2>Contract extensions</h2>
<p>I was initially contracted for 3 months, then I got a further 6 month extension. I think there’s a chance of further extension, but I’m not sure, I need to start looking into it. I'm happy that my first contract is on track to be 9 months. It seems like the maximum length for these types of contracts is 2 years, but again, I'm not sure.</p>
<p>My current contract takes me to early January, and December’s pay will be light given that I’m planning on taking around 2 weeks off. So planning ahead is essential.</p>
<p>Worth saying that my department is furloughing contractors over Christmas for at least 2 weeks. Meaning that we’ll be forced to take time off. I’m okay with this as I like taking time off at Christmas, though I’m sure others might be less happy with this.</p>
<h2>Holidays and annual leave</h2>
<p>I’m on track to take about 40 days of holiday this year, including bank holidays. I think this is generous but hopefully not too extravagant.</p>
<p>I was 40 years old this year, so there were a lot of reasons to take time off here and there. But I’m also the kind of person who always uses up all of their leave so I’ll probably do the same next year.</p>
<p>As an inside IR35 contractor you don’t get paid if you don’t work. So I need to put aside money to cover those days in advance. I think some umbrella companies can keep money aside for you, but I’ve opted to have it all paid to me upfront so I can keep it in a savings account.</p>
<h2>Working days</h2>
<p>The amount of days I end up working is different each month. It varies from 14 to 20 days depending the month and how much leave I take. About 18 seems normal. So pay can go up and down each month.</p>
<h2>Pay day and time sheets</h2>
<p>Pay day each month can vary which can be tricky to get used to. I put my time sheets into my recruitment agency’s system at the end of the month.</p>
<p>This is then sent to my line manager for approval. The money goes from my place of work, through my agency, to my umbrella company. The umbrella company then pay me on the first Friday of the following month. In reality this means that I get payed somewhere between the 1st and the 8th of the month after I’ve worked.</p>
<p>When I started, I spent some time moving all my direct debits to later in the month (where possible) so they all leave my account after my latest possible pay day.</p>
<h2>Expenses</h2>
<p>I've had more stress from expenses than anything else since starting contracting. Even though my current contract is remote, I'm encouraged to visit my office for meetings (like end of sprint ceremonies), and operational locations for user research.</p>
<p>I think travelling around once a week would be acceptable to my managers. In reality I've made 2 trips to London to since starting. I'd like to take a few more, perhaps a couple a month.</p>
<p>There are 2 routes for me to cover the costs…</p>
<ol>
<li>I can ask my manager (or any permanent civil servant on my team) to book the travel and accommodation for me. This is easy enough for me, but I don't like putting the hassle onto others. Nobody likes using that system.</li>
<li>Pay for it myself, then claim it back.</li>
</ol>
<p>I've tried both, but claiming it back later doesn't seem to work very well so far. Just like my time sheets, expenses have to be entered into my recruitment agency's system, then approved by my line manager before the funds can get to me, via my umbrella company.</p>
<p>Even though it seems pretty clear to me that this is an allowable expense, my Umbrella company, needed to do an ad-hoc investigation into it, to make sure they are satisfying HMRC's rules. If the expense isn't deemed allowable, then it's taxed like income.</p>
<p>The upshot is, I've been out of pocket for weeks. I've heard horror stories about others who have lost out much more, and waited too long to act and now may never get the full amount back.</p>
<p>My advice it to be wary about expenses!</p>
<p>In the end though, I count myself very lucky that I’m able to work this way and to earn good money, doing a job I enjoy. I'm paid well enough that I can afford to be out of pocket for a little while. So it's more the frustration about not being 100% clear what's happening to the money and taxes, rather than worrying about being out of pocket.</p>
<h2>Next time</h2>
<p>Next time I'd like to blog more about savings (as a contractor you need to put a lot aside) and benefits (as a contractor you don't get many employment benefits).</p>
Seb2023-07-18T00:00:00Zhttps://www.benjystanton.co.uk/blog/seb/<p>Content warning: cancer and death.</p>
<p>My cousin Seb died early last year from cancer. He was just a few months older than me.</p>
<p>He had moved to New Zealand a few years ago, and we had lost touch. But he was the kind of person that I could reconnect with instantly, no matter how long it has been since we'd last seen each other. So I didn't think much of the fact that we'd drifted apart.</p>
<h2>4 cousins</h2>
<p>Me and Seb were part of a group of 4 cousins that were very close in age (within a group of lots more, equally great cousins).</p>
<p>I loved hanging out with them.</p>
<p>I have one particular memory of the 4 cousins together. We were taken to see the Teenage Mutant Ninja Turtles movie. The live action one. And then went to McDonalds for Super Mario Brothers happy meals. A literal perfect day out for a kid in the '90s.</p>
<p>Even if I've mixed up multiple days out here, this kind of event was typical of the kind perfect of weekends we'd spend together.</p>
<h2>Surfing down Gower</h2>
<p>Seb and his siblings loved surfing. I remember thinking they were impossibly cool. Next to me, who had no clue about anything other than Super Mario.</p>
<p>I remember Seb and his family turning up to campsites in Wales. They'd be hanging out of old cars and camper vans, with surfboards strapped to the roof.</p>
<p>I instantly wanted to grow my hair long and buy surfy clothes.</p>
<p>We spent loads of summers together down Llangennith exploring the dunes, surfing (in my case, very poorly, and only in fair weather), and trying desperately to get served in the local pub.</p>
<h2>Music</h2>
<p>Seb and his brothers and sister helped turn me on to decent music too.</p>
<p>I remember they'd turn up with something like Alanis Morissette, Oasis or Moby. Next time we'd see them, they would have moved on and would deny ever liking whatever it was they'd been obsessed with last time. Whilst we'd play down the fact that we'd gone straight out and bought whatever album was flavour of the month, and had listened to it non-stop.</p>
<p>For one birthday, I received a Beach Boys album from my parents. I had no idea if they were considered cool or not, so I hid it from Seb and the other cousins. Afraid of being mocked for my childish music taste. Turns out The Beach Boys <em>were</em> considered cool. Phew.</p>
<p>So much music reminds me of Seb: Sublime, Crash Test Dummies, Red Hot Chill Peppers, Reef, G Love & Special Sauce.</p>
<p>For my 12th birthday, my parents took us to Glastonbury festival. I have hazy memories of seeing Finley Quaye, Foo Fighters and Ben Harper.</p>
<h2>Uni</h2>
<p>Whilst at Uni, Seb came to visit me in London. We went to see a band called Capdown. Seb accidentally burnt my arm with a cigarette (you could still smoke inside in them days).</p>
<p>I still have the scar now.</p>
<p>On the way back, after getting the night bus home to my Uni house, we ended up play fighting outside the front of the house. Rolling around in the mud, that our landlord was turning into a driveway. Something we'd probably done together our whole lives, but it must have looked odd to strangers who had no idea it was harmless.</p>
<p>My housemates had to drag us inside, before we disturbed any neighbours.</p>
<h2>Living together</h2>
<p>After Uni, me and Seb both moved back to Swansea, we ended up living together, twice. I have so many random memories of that time.</p>
<p>He worked as a bin man for a while, and always used to remind me and the fellow housemates to rinse and squash our plastic milk bottles.</p>
<p>"We'd just be throwing out air otherwise."</p>
<p>To this day, I think of this story whenever I put the plastic recycling out (e.g. at least every 2 weeks).</p>
<p>He was a vegetarian around this time and used to keep a bucket of natural peanut butter in the fridge. It would separate, so that it had about an inch of oil on top and had to be mixed every time he wanted some.</p>
<p>He had an Apple Mac and an impressively curated iTunes library of ripped MP3s. And for some reason he became obsessed, for a while, by navigating it with a keyboard. He had gotten rid of mouse completely. Perhaps this was my first introduction to accessibility testing.</p>
<p>We'd have BBQs any night of the week, and our poor neighbours would rush out to bring their sheets in off the line to stop them smelling of smoke.</p>
<h2>Pontneddfechan waterfalls</h2>
<p>The last time I saw Seb (still a few years before he died). He was visiting Wales from New Zealand and organised a walk for some friends and family.</p>
<p>We met at The Angel Inn in Pontneddfechan, Glynneath, on the edge of Bannau Brycheiniog National Park, and walked up to see the waterfalls there. Highly recommend this walk if you haven't done it.</p>
<figure>
<img src="https://www.benjystanton.co.uk/images/angel-inn.jpg" alt="A family sit around a wooden picnic table with drinks on it, large rusty metal farm sheds and woodland in the background." />
<figcaption>
Sitting outside The Angel Inn, after our walk.
</figcaption>
</figure>
My contracting goals 20232023-07-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/my-contracting-goals-2023/<p>Here are some work goals I've set myself, now that I've started contracting.</p>
<h2>The goals at a glance</h2>
<ol>
<li>Work with more varied organisations and services</li>
<li>Improve my processes and use the best tools</li>
<li>Contribute to, and be active in, the wider gov design community</li>
</ol>
<p>Read on for a bit more detail…</p>
<h2>Work with more varied organisations and services</h2>
<ul>
<li>UK Government</li>
<li>Welsh public sector</li>
<li>Private sector</li>
<li>Work on planet centred design, or products and services that are trying to address climate change</li>
</ul>
<h2>Improve my processes and use the best tools</h2>
<ul>
<li>Continue using the <a href="https://prototype-kit.service.gov.uk/docs/">GOV.UK Prototype Kit</a></li>
<li>Work on design systems</li>
<li>Get better at <a href="https://git-scm.com/">Git</a> (for example; use Terminal more, work with teams that use Git, try doing code reviews)</li>
<li>Continue working on accessibility and inclusion</li>
</ul>
<h2>Contribute to, and be active in, the wider gov design community</h2>
<ul>
<li>Work in the open (for example; by using the <a href="https://x-govuk.github.io/govuk-design-history/">X-GOVUK Design History</a> project)</li>
<li>Continue blogging about personal and work things</li>
<li>Stay with my union (<a href="https://utaw.tech/about/">United Tech and Allied Workers</a>)</li>
<li>Attend meet-ups, training and conferences</li>
</ul>
First 3 months contracting2023-07-01T00:00:00Zhttps://www.benjystanton.co.uk/blog/first-3-months-contracting/<h2>Contract extensions</h2>
<p>I've just finished my first 3 months contracting, and have finished on a high by getting an extension for a further 6 months.</p>
<p>I think the extension was always a strong possibility, but it was nice to get the paperwork through. Having been on the other side, I know how difficult hiring and budgets can be for civil servants. So, I'm really grateful for everyone who made it happen.</p>
<p>My <a href="https://www.interactconsulting.co.uk/">recruitment agency</a> are great too. Very quick to respond, and always have time to answer my questions. It's great to feel like there are a few people behind the scenes that I trust to get the paperwork sorted.</p>
<p>Despite all that, getting the extension approved with about a week to go was a little scary. Even though I <a href="https://www.benjystanton.co.uk/blog/this-is-forty">previously blogged</a> about trusting the process, things did get a little close for comfort.</p>
<p>Luckily I haven't lost sleep over it, which was one of my genuine worries about getting into contracting this time around. I think it's quite normal for approvals to happen like this, and I was kept up to date the whole time.</p>
<p>Previously when I've done freelance work in the past I definitely worried more. The difference this time is that opportunities last months, rather than days or even hours. Which gives a much better sense of security.</p>
<h2>Day-to-day interaction design work</h2>
<p>Work wise, the honeymoon period is probably over now. The novelty of the new job is fading, but I'm still very much enjoying the work and the opportunity to be more focused on hands-on interaction design work.</p>
<p>I feel like I'm having a positive impact on my team, and I also feel I'm learning lots from them, and the wider department that I'm working with.</p>
<p>I've been able to observe quite a few rounds of remote user research, and there are a couple of opportunities to do on-site research too which would be great to join. I've really missed that. Generally I love working from home for all sorts of reasons, but I do miss the occasional (every 2 weeks?) trip on the train.</p>
<p>I'm very much loving being back in central government, and being able to use the <a href="https://prototype-kit.service.gov.uk/docs/">GOV.UK Prototype Kit</a>. The team behind it seem to be making some great improvements at the moment.</p>
<p>I've also enjoying being (a little bit more) active on the cross-government Slack. If you're not aware, this recent post by <a href="https://visitmy.website/">Steve Messer</a> is a great intro: <a href="https://x-govuk.github.io/posts/how-to-use-cross-government-slack/">How to use cross-government Slack</a>.</p>
<p>It's great to see some familiar faces working hard to make the community what it is. Such as these posts I spotted via the prolific <a href="https://www.vickyteinaki.com/">Vicky Teinaki</a>…</p>
<ul>
<li><a href="https://medium.com/@vickytnz/approaching-interaction-design-in-government-ea1d3aeac72f">Approaching interaction design in government</a></li>
<li><a href="https://dfe-digital.github.io/ixd-standards/">9 DfE interaction design principles</a></li>
</ul>
This is forty2023-06-17T00:00:00Zhttps://www.benjystanton.co.uk/blog/this-is-forty/<p><img src="https://www.benjystanton.co.uk/images/this-is-forty.jpg" alt="This is forty, spelt out in white letters on a black peg board" /></p>
<p>I'm turning 40 this month, so I thought it was worth marking it with a blog post</p>
<p>Lots has happened since <a href="https://www.benjystanton.co.uk/blog/30-things-done-before-im-30/">I turned 30</a>. 10 years ago, I was still working at a design agency, and struggling to find a fit for my skills, which were a mix UX (user experience), HTML/CSS and graphic design.</p>
<h2>Switching jobs a lot</h2>
<p>I took a big risk, giving up a stable job to go freelance (with no clients lined up – big thanks to my friends and old colleauges who stepped in with lots of work for me).</p>
<p>A couple of years later I landed my first UX role with a Finnish service design agency (called Leadin) who were working with DVLA (Driver and Vehicle Licensing Agency). This gave me my first taste of UCD (user-centered design) in government. Something I'd been keen to break into for a while.</p>
<p>2 things have been pretty constant since then. All of my jobs have been in UCD in government in some shape or form (Office for National Statistics, Swirrl, UK Health Security Agency, Made Tech). And I've switched jobs a lot. It's become a running joke in my family. But it's always paid off, either by giving me a great experience, or by getting a pay rise. Often both.</p>
<p>In some ways I wish I'd taken more risks sooner. But I also recognise that I've been privileged and lucky to be able to take these chances. Especially when I have a mortgage to pay and a family to help support.</p>
<h2>Family</h2>
<p>My family has also grown. We had <a href="https://www.benjystanton.co.uk/blog/sids-words/">another kid</a> in 2016. We moved into our third (and hopefully last) home. Although I said this last time so who knows. We've got a dog. And 2 cars. We're a living breathing stereotype now.</p>
<h2>Contracting</h2>
<p>My latest and maybe biggest risk has been <a href="https://www.benjystanton.co.uk/blog/im-going-contracting/">going contracting</a>. The nature of contracting and the length of my previous notice period, meant that I had to quit my job before securing a contract to work on. But thanks to some excellent advice from a bunch of people I know, meant that I was able to get work lined up pretty quickly.</p>
<p>I have a theory that my previous experience as a freelance graphic designer means that I quite like the thrill of living contract-to-contract, and never quite knowing what's around the corner. Case in point, my current contract is due to end in a couple of weeks. I fully trust and expect it to be renewed, but I think part of contracting is being able to trust in the process.</p>
<p>So overall, it's going really well. Although I'd be lying if I said I wasn't a teensy bit worried by the constant news about AI (artificial intelligence) and tech layoffs.</p>
<h2>Birthday party(s)</h2>
<p>Anyway, on to the celebrations. Although my birthday isn't until later in the month. I've already thrown myself a couple of parties. We had a big house party with lots of family, friends and neighbours. Then I dragged my close family (about 25 people) to a campsite in Tenby and around all the tiny craft beer bars.</p>
<p>Highly recommend <a href="https://www.tenbybrewingco.com/collections/tap-tan">Tap & Tân</a>, and Tenby in general. Even though it's only about 1 hour from Swansea, I havent visited there much, as we usually go to Gower, or further west to St Davids.</p>
<p>Here's a photo of me living my best life. Taken by my brother-in-law <a href="https://twitter.com/tjhossy">Tariq</a>.</p>
<p><img src="https://www.benjystanton.co.uk/images/benjy-happy-place.jpeg" alt="White man with beard and cap, smiling and looking very happy, carrying a wooden flight with 3 beers on it" /></p>
<p>Here's to the next 10.</p>
Inclusive design for interaction designers2023-04-23T00:00:00Zhttps://www.benjystanton.co.uk/blog/inclusive-design-for-interaction-designers/<h2>What can interaction designers do to make services more inclusive?</h2>
<p>Methods for designing digital services that are accessible to people with disabilities are well documented, but what if we take a broader view about how to include other groups that face barriers?</p>
<p>(Note, this isn't meant to minimise the efforts of web accessibility. But I'll try not to focus on that specialism in this post).</p>
<p>Reasons for exclusion could be related to peoples' protected characteristics, digital exclusion, and many other factors.</p>
<p>A <a href="https://gist.github.com/benjystanton/1cf8c3a24ddccbc23ba2304f4166ca13">list of groups that might face exclusion</a>.</p>
<p>In the past, <a href="https://www.claragreo.com/">Clara Greo</a> and <a href="https://soniaturcotte.com/">Sonia Turcotte</a> have used the phrase “oppressed and systematically disadvantaged people and communities in the UK”. Which I think is a better term than excluded groups.</p>
<h2>Things interaction designers can consider to help make services more inclusive</h2>
<ul>
<li>Physical points in the journey</li>
<li>Multiple digital channels</li>
<li>Accessible formats</li>
<li>Multiple languages and bilingual services</li>
<li>Progressive enhancement and performance</li>
<li>Barriers and access needs</li>
<li>Co-design and co-production</li>
<li>Content and language</li>
</ul>
<h2>Physical points in the journey</h2>
<p>For example; signs, physical products and printed documents.</p>
<p>Although the production of these parts of the service might be handled by other teams, an interaction designer may still be well placed to make sure these parts of the journey are simple, and consistent with the digital parts of the journey.</p>
<p>Related: <a href="https://twitter.com/magmidd/status/1410909224490700801">A Twitter thread about gender inclusive icons</a></p>
<h2>Multiple digital channels</h2>
<p>For example; PDFs, emails, social media, videos, podcasts.</p>
<p>Similarly to physical things, the production of these other digital assets may be handled by a comms, publishing or a social media team, but an interaction designer can work with these teams and help advice on usability and accessibility best practices.</p>
<h2>Accessible formats</h2>
<p>For example; large print, easy read, British Sign Language (BSL) videos, Braille, audio.</p>
<p>Related:</p>
<ul>
<li><a href="https://www.gov.uk/government/publications/inclusive-communication/accessible-communication-formats">Accessible communication formats</a>.</li>
<li><a href="https://designnotes.blog.gov.uk/2021/10/11/easy-read-is-hard-to-get-right/">Easy read is hard to get right</a></li>
</ul>
<h2>Multiple languages and bilingual services</h2>
<p>Designing services that are translated into multiple languages, or languages other than English, might mean the following need more work:</p>
<ul>
<li>typography</li>
<li>layout</li>
<li>navigation</li>
<li>information architecture (IA)</li>
<li>content management systems</li>
</ul>
<p>Related: <a href="https://digitalpublicservices.gov.wales/blog/producing-bilingual-content-through-trio-writing">producing bilingual content through trio writing</a></p>
<h2>Progressive enhancement and performance</h2>
<p>As the GOV.UK service manual says, progressive enhancement can "help users with device or connectivity limitations to use your service".</p>
<p>Create assets that are lightweight, cross-compatible and reusable on other channels.</p>
<p>Avoid designing journeys that require large downloads.</p>
<p>Related: <a href="https://www.gov.uk/service-manual/technology/using-progressive-enhancement">building a resilient frontend using progressive enhancement</a></p>
<h2>Barriers and access needs</h2>
<p>Focus on excluded people and communities. Understand the barriers they face.</p>
<p>Related:</p>
<ul>
<li><a href="https://gds.blog.gov.uk/2019/03/26/understanding-all-the-barriers-service-users-might-face/">Understanding all the barriers service users might face</a></li>
<li><a href="https://www.gov.uk/service-manual/user-research/understanding-users-who-dont-use-digital-services">Understanding users who do not use digital services</a></li>
</ul>
<h2>Co-design and co-production</h2>
<p>Work alongside people, communities and content experts.</p>
<p>Lend your interaction design skills to help prototype how other types of content and channels could work before they go into production.</p>
<p>Related: <a href="https://www.beyondstickynotes.com/what-is-codesign">what is co-design? A brief overview</a></p>
<h2>Content and language</h2>
<p>The words we use in the service and in our teams matter. Be careful to use terms that don't exclude people.</p>
<p>For an interaction designer, this could mean something like renaming the branch you're working on from <code>master</code> to <code>main</code>.</p>
<ul>
<li><a href="https://contentdesign.intuit.com/accessibility-and-inclusion/anti-racist-language/">Anti-racist language</a></li>
<li><a href="https://emmaparnell.medium.com/lets-talk-about-sex-6bb64c7e8f0c">Let’s talk about sex*</a></li>
<li><a href="https://www.selfdefined.app/">Self-Defined</a></li>
</ul>
<h2>Related posts on this blog</h2>
<ul>
<li><a href="https://www.benjystanton.co.uk/blog/inclusive-design-resources/">Inclusive design resources</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/list-of-inclusive-design-books/">List of inclusive design books</a></li>
<li>I blog about exclusion mapping in this post: <a href="https://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-12/">Weeknotes – series 06 episode 12</a></li>
</ul>
My first few weeks contracting2023-04-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/my-first-few-weeks-contracting/<p>I'm a few weeks in to my first contracting role and so far, so good. It feels like a pure interaction design role, which is really what I was looking for. In my experience these kinds of roles have been quite difficult to find though, and I'm not 100% sure why that is. More thoughts around that in a bit.</p>
<p>I've been itching to blog about something, which I take as a good sign that I'm feeling productive, but also not exausted. But I couldn't think of what to write. This <a href="https://www.usethehumanvoice.com/formats/">blog post formats for teams</a> website from <a href="https://gilest.org/">Giles Turnbull</a> really helped spur me on to try a post, even if I'm not going with regular weeknotes for now.</p>
<h2>Interaction design versus service design</h2>
<p>I've been thinking a lot about interaction design as a profession, and how it blurs with service design. And whether or not that's a good thing.</p>
<p>(If you're unfamiliar with the terms, this page on <a href="https://www.gov.uk/government/collections/digital-data-and-technology-profession-capability-framework#user-centred-design-job-family">GOV.UK defines the user-centred design job family</a> pretty well.)</p>
<p>I have a huge amount of respect for service design, and I know that many people are able to do both interaction design and service design (or perhaps some people have to because that's what their team or situation demands). But sometimes it feels like we expect interaction designers and service designers to be able to pick both things up, and I'm worried that we're letting both professions down a bit by not being clearer with boundries between the two?</p>
<p>I'm feeling less sure that interaction design is very close to service design (at least when compared to other UCD (user centered design) roles). Many content designers, user researchers, product managers and engineers are great at thinking about service design too, but there doesn't feel like the same expectation on those roles to be doing both things at the same time?</p>
<p>Anyway, in a round-about way, I'm saying that this new role I have feels very focused on interaction design, and I feel like I'm bringing some specific and useful skills to the team, rather than trying to wear lots of hats. Hopefully this continues to be the case!</p>
<h2>Some of my open browser tabs</h2>
<ul>
<li><a href="https://prototype-kit.service.gov.uk/docs/create-routes">Create routes with the GOV.UK Prototype Kit</a></li>
<li><a href="https://prototype-kit.service.gov.uk/docs/branching-journeys">Branching with the GOV.UK Prototype Kit</a></li>
<li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/">What's New in WCAG 2.2 Draft</a></li>
<li><a href="https://design.homeoffice.gov.uk/accessibility">Accessibility on the Home Office design system</a></li>
<li><a href="https://x-govuk.github.io/">X-GOVUK – A community-maintained collection of resources which are useful for working on GOV.UK services</a></li>
<li><a href="https://github.com/ctdesign/gov-design-systems-list">Gov Design Systems – A list of design systems and design resources that gov departments have created</a></li>
</ul>
Setting up a new mac for interaction design2023-03-27T00:00:00Zhttps://www.benjystanton.co.uk/blog/setting-up-a-new-mac-for-interaction-design/<p>Check out my <a href="https://www.benjystanton.co.uk/uses">uses</a> page for an up-to-date list of hardware and software that I use for interaction design.</p>
<p>A round up of things that I'll install first on a new Macbook. I use all of these tools regularly when designing, or require them to get setup. I've written about some of them in more detail in this other post: <a href="https://www.benjystanton.co.uk/blog/my-interaction-design-tools-version-3/">my interaction design tools</a>.</p>
<h2>Apps</h2>
<ul>
<li>1Password</li>
<li>Chrome</li>
<li>Figma</li>
<li>Firefox</li>
<li>GitHub Desktop</li>
<li>iA Writer</li>
<li>ImageOptim</li>
<li>Slack</li>
<li>Visual Studio Code</li>
<li>Xcode</li>
</ul>
<h2>Menu bar apps</h2>
<ul>
<li>Contrast – Colour Accessibility</li>
<li>Divvy – Window Manager</li>
</ul>
<h2>Chrome plugins</h2>
<ul>
<li>45to75</li>
<li>Axe Accessibility</li>
<li>Toggle Javascript</li>
<li>Validity</li>
<li>WAVE Evaluation Tool</li>
<li>Web Developer Toolbar</li>
<li>WhatFont</li>
</ul>
<h2>Terminal</h2>
<ul>
<li>GOV.UK Prototype Kit</li>
<li>Homebrew</li>
<li>Node.js</li>
</ul>
The stickers on my laptop, 2023 edition2023-03-17T00:00:00Zhttps://www.benjystanton.co.uk/blog/the-stickers-on-my-laptop-2023-edition/<p><img src="https://www.benjystanton.co.uk/images/stickers-on-my-laptop-2023.jpg" alt="A Macbook Pro covered in colourful stickers" /></p>
<p>Time to clean the stickers off my laptop (again). Quite a good haul this time. See this <a href="https://www.benjystanton.co.uk/blog/the-stickers-on-my-laptop/">laptop sticker post from 2018</a> too.</p>
<p>Read on for a description of each sticker, with links to their origin stories or creators' web sites. Descriptions go roughly left to right, top to bottom.</p>
<ol>
<li><strong>Design</strong> – White, all caps text on black background. Part of the <a href="https://designnotes.blog.gov.uk/2022/08/16/join-us-for-design-system-day-2022/">GOV.UK Design System Day</a> swag.</li>
<li><strong>Work Together, Super Friendly</strong> – Red and blue text, custom hand-drawn lettering, surrounded by blue stars. From <a href="https://superfriendly.com/">SuperFriendly</a>.</li>
<li><strong>Be Inclusive</strong> – Black text on white background. Above each letter, hands spell the letters out in sign language. I think it's American Sign Language (ASL). From <a href="https://www.redbubble.com/i/sticker/Be-Inclusive-ASL-by-amyhutchison/57273663.EJUG5">RedBubble</a>.</li>
<li><strong>Weirdo</strong> – Green, pink and yellow hand-drawn text. Behind the text, a black cat peers over the top. By <a href="https://www.badgebomb.com/products/weirdo-cat-sticker">Gemma Correll</a>. I added 2 blue rectangles to give the impression of frowning eyebrows.</li>
<li><strong><a href="https://gowerdough.co.uk/">The Gower Dough Co</a>, Est 2020, Wood Fired Pizza</strong> – A happy, cartoon pizza carries a pizza box and wears a backpack.</li>
<li><strong>User-Centred Profession, <a href="https://www.madetech.com/">Made Tech</a></strong> – An orange cartoon crab on a black circle. Black text sits on a green ring around the edge.</li>
<li><strong>The problem with London is it is so far from everywhere</strong> – Blue illustration of the United Kingdom on a pink background. From <a href="https://ames.world/">Ian Ames</a>.</li>
<li><strong>Our rights are not for debate</strong> – Black text on a round, shiny metallic sticker. In the middle is an upside down triangle. From <a href="https://sarah-drummond.com/">Sarah Drummond</a>'s <a href="https://www.kickstarter.com/projects/dontsaygay/dont-say-gay">Don't Say Gay film Kickstarter</a>.</li>
<li><strong>UX</strong> – Large colourful letters spell out "UX". The U is partially covered by sticker 8. From <a href="https://www.redbubble.com/i/sticker/UX-User-Experience-Design-and-Research-by-minarama/33892312.EJUG5">RedBubble</a>.</li>
<li><strong>If it's not accessible, it's not acceptable</strong> – White retro font with a gradient drop shadow. From <a href="https://www.redbubble.com/i/sticker/Retro-If-It-s-Not-Accessible-It-s-Not-Acceptable-by-abderr/81193269.EJUG5">RedBubble</a>.</li>
<li><strong>And then you die</strong> – Black text on a white sticker shaped like a coffin. From <a href="https://www.friendandfriends.co/store/p/bad-vibes-sticker-pack">Owen Friend</a>.</li>
<li><strong>Cats not TERFs</strong> – Black and white painterly effect sticker. White text on a black cat silhouette. From <a href="https://shop.frankduffy.co.uk/">Frank Duffy</a></li>
<li><strong>2022</strong> – White text on a black square. Part of the same set as sticker 1.</li>
<li><strong>User-Centred Design</strong> – A stylised red crab. White text follows the curve of the crab's body. From <a href="https://www.madetech.com/">Made Tech</a>.</li>
<li><strong>I'm silently judging your app's usability</strong> – Black text on a white background. From <a href="https://www.redbubble.com/i/sticker/I-m-silently-judging-your-app-s-usability-by-aaworsham/53268518.EJUG5">RedBubble</a>.</li>
</ol>
Lining up my first role2023-02-27T00:00:00Zhttps://www.benjystanton.co.uk/blog/lining-up-my-first-role/<p>Good news, it looks like I've lined up my first contract role.</p>
<p>It's a…</p>
<ul>
<li>interaction design role</li>
<li>3 months</li>
<li>remote</li>
<li>central UK government</li>
<li>inside IR35</li>
</ul>
<p>I haven't seen the contract yet, so it's not 100% certain. I keep reminding myself that delays happen and orgs can change their mind. But in an effort to share my working as I go, I'm writing this update.</p>
<h2>Timelines</h2>
<p>I first blogged about going contracting at the beginning of February, and this role was one of the first that I looked at. A recruiter shared it with me after seeing my LinkedIn post (I think) and it's direct with the department (via the agency) rather than being via another design agency.</p>
<p>I won't be starting until some time in April, so I think I'm lucky to get something lined up so early. I wasn't expecting to have this much certainty so early, as it sounds like most recruiters want to fill roles within 2 to 3 weeks.</p>
<h2>Lots of work around</h2>
<p>I have to be honest, I was surprised at how many contract roles there seems to be, given that permanent interaction designer roles seem very rare at the moment. It's great for me and others in my position, but if I'm honest it doesn't seem like a sustainable way to grow the profession across government.</p>
<p>The interviewing process seems to be slightly more tipped in favour of the job seeker too (when compared to perm interviews). Interviews are generally shorter, less prep is needed, and more time is taken by the interviewer trying to sell the role.</p>
<p>That all makes sense I suppose, given that I won't be permanent and could be fired much more easily. But it's making me wonder if there's a balance between the contract and permanent hiring process that combines the best of both worlds.</p>
<p>Perhaps a big part of it is that I have been openly looking for work, something I always wished I'd had the guts to do before. Perhaps being more open in my job search when looking for permenant roles in the past would have been a better approach.</p>
<h2>Hard work</h2>
<p>That's not to say it's been easy though. I've been toying with the idea of contracting for years, and seriously looking into it for about 3 months.</p>
<p>I think my constant tweeting and blogging over the years has helped me to get a good reputation.</p>
<h2>Some tips</h2>
<p>These are some rough tips (caveat: I'm still working through these, your mileage my vary).</p>
<ul>
<li>Get some savings (6 to 8 weeks) – I haven't got this yet but it's part of my plan</li>
<li>Learn the difference between inside IR35 and outside IR35</li>
<li>If you go inside IR35, you'll need an umbrella company to work through</li>
<li>Get a MacBook (probably) – sounds like some roles supply these, some don't</li>
<li>Speak to people: recruiters, heads of design in gov, head of design at design agencies, get on talent pool lists, get recommendations from past colleagues, friends who are doing the same role as you</li>
<li>Find out if the role is remote or not, find out who pays for travel and accommodation if travel is required</li>
<li>keep your CV and LinkedIn profile up to date</li>
<li>work in the open, share what you know</li>
<li>network little and often – a few minutes each day makes it easier to manage</li>
</ul>
I’m going contracting2023-02-02T00:00:00Zhttps://www.benjystanton.co.uk/blog/im-going-contracting/<p>Hey friends, I've decided to take the plunge and go contracting.</p>
<p>I'll be available from October 2024, so if you know of any interesting opportunities kicking off around then, please let me know!</p>
<h2>What I'm looking for</h2>
<ul>
<li>Interaction design, UX (user experience) design or product design roles</li>
<li>Lead or senior level</li>
<li>Starting April 2023</li>
<li>UK public sector or tech for good</li>
<li>Remote – happy with occasional travel</li>
<li>Inside IR35 – would consider outside</li>
<li><strong>Bonus points</strong> if there's a focus on accessibility or inclusive design</li>
</ul>
<p>Very happy to chat if you have other kinds of role available.</p>
<h2>What I can do</h2>
<p>I'm an interaction / product / UX designer, with plenty of experience working in UK government. I love iterating on HTML/CSS prototypes, and I'm focused on accessibility and inclusive design.</p>
<p>I've worked with Driver and Vehicle Licensing Agency (DVLA), Environment Agency (EA), Met Office, Office for National Statistics (ONS) and UK Health Security Agency (UKHSA) / NHS Test and Trace.</p>
<p>More <a href="https://www.benjystanton.co.uk/about/">about me</a>.</p>
<h2>Contact me</h2>
<p>Check my <a href="https://www.linkedin.com/in/benjystanton/">LinkedIn</a> page, or email me at <a href="mailto:benjystanton@gmail.com">benjystanton@gmail.com</a>.</p>
<p>Happy to share an up-to-date CV.</p>
<hr />
<h2>Thanks</h2>
<p>Thanks to everyone who has helped me understand what contracting is like, and how to get started. Including Barry Khan, Walt Buchan, Paul Pod, Matthew Solle, Ian Ames, Rob Whiting, Katy Beale, Karl Goldstraw and Tom Davy. Sorry if I've forgotten anyone!</p>
Accessible PowerPoint presentations2022-11-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/accessible-powerpoint-presentations/<p>A collection of tips for making PowerPoint presentations more accessible. Created (and crowdsourced) by the UKHSA (UK Health Security Agency) Inclusive Design team earlier in the year. Many tips will be useful for other presentation tools too.</p>
<h2>Make your slides available</h2>
<ul>
<li>Share your slides</li>
<li>Before the meeting starts ideally</li>
<li>Or at the beginning of the presentation</li>
<li>So people can follow at their own pace</li>
</ul>
<h2>When speaking</h2>
<ul>
<li>Turn the camera of the person speaking on</li>
<li>Speak clearly (but not slowly)</li>
</ul>
<h2>Sounds and music</h2>
<ul>
<li>Avoid sounds and music where possible</li>
<li>Especially if it might make it difficult to hear other people speaking</li>
</ul>
<h2>Make content available in different ways</h2>
<ul>
<li>Add speaker notes</li>
<li>Turn on auto subtitles or captions if you can</li>
<li>Consider sharing alternative formats like HTML or audio</li>
</ul>
<h2>Turn on accessibility checker</h2>
<ul>
<li>On the tool bar, go to “Review” then “Check Accessibility”</li>
<li>Or search for “Accessibility”</li>
<li>Keep it running while you work</li>
<li>Re-open checker from link in bottom left</li>
</ul>
<h2>Graphic design</h2>
<ul>
<li>Keep the design simple</li>
<li>Use a legible font, like Arial</li>
<li>Minimum 18pt font size</li>
<li>Avoid low contrast text</li>
<li>Avoid using colour as the only means of conveying information</li>
<li>Avoid using text in images</li>
<li>Add an off-white slide background colour for people with dyslexia</li>
</ul>
<h2>Content</h2>
<ul>
<li>Aim for no more than 6 words per line</li>
<li>Aim for no more than 7 lines per slide</li>
<li>Add alt text to images (unless they are decorative)</li>
<li>Explain visual information when presenting</li>
<li>Use simple language</li>
<li>Check <a href="https://support.microsoft.com/en-us/office/make-slides-easier-to-read-by-using-the-reading-order-pane-863b5c1c-4f19-45ec-96e6-93a6457f5e1c">reading order</a></li>
<li>Add meaningful hyperlink text</li>
<li>Give every slide a unique title</li>
<li>Warn users about sensitive content with TW (trigger warning) or CW (content warning)</li>
</ul>
<h2>Tables</h2>
<ul>
<li>Use tables for simple data</li>
<li>Don’t use tables for layout</li>
<li>Don’t merge cells or nest tables</li>
<li>Make sure tables have header rows with descriptive text</li>
</ul>
<h2>Animation and transitions</h2>
<ul>
<li>Avoid using animations and transitions</li>
<li>Use gifs sparingly, and stop them from repeating forever</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://gov.wales/how-create-accessible-powerpoint-presentations">How to create accessible PowerPoint presentations from GOV.WALES</a></li>
<li><a href="https://www.tpgi.com/all-about-the-presentation-dont-let-accessibility-slide/">All about the presentation: don’t let accessibility slide from TPGi</a></li>
<li><a href="https://webaim.org/resources/contrastchecker/">Contrast Checker from WebAIM</a></li>
<li><a href="https://gds.blog.gov.uk/2016/05/10/doing-the-hard-work-to-make-talks-readable/">Doing the hard work to make talks readable from Government Digital Service (GDS)</a></li>
<li><a href="https://www.deque.com/blog/accessible-speaking-best-practices/">Accessible Speaking Best Practices from Deque</a></li>
<li><a href="https://fitzrovialightindustries.com/products/haudoo-how-to-do-presentations">How to do presentations by Anne Shewring and Russell Davies</a></li>
</ul>
Inclusive design resources2022-11-12T00:00:00Zhttps://www.benjystanton.co.uk/blog/inclusive-design-resources/<p>A collection of posts and guides about inclusive design.</p>
<p>(It’s only whilst pulling this list together I’ve realised how many of my bookmarks are written by the talented <a href="https://www.jacquelyn.design/">Jacquelyn Ogorchukwu Iyamah</a>).</p>
<ul>
<li><a href="https://uxplanet.org/6-principles-for-inclusive-design-3e9867f7f63e">6 Principles for Inclusive Design – Lillian Xiao</a></li>
<li><a href="https://uxdesign.cc/a-beginners-guide-to-inclusive-ux-design-b8dcc94f5068">A beginner’s guide to inclusive UX design – Trina Moore Pervall</a></li>
<li><a href="https://contentdesign.intuit.com/accessibility-and-inclusion/">Accessibility and inclusion – Intuit content design</a></li>
<li><a href="https://cardsforhumanity.idean.com/">Cards for Humanity – Idean</a></li>
<li><a href="https://amyhupe.co.uk/articles/design-systems-for-humans/">Design systems for humans – Amy Hupe</a></li>
<li><a href="https://medium.com/black-ux-collective/designing-for-equity-and-inclusion-6465bd9246cc">Designing for equity and inclusion – Jacquelyn Iyamah</a></li>
<li><a href="https://medium.com/sdn-new-york-chapter/george-aye-on-understanding-power-and-privilege-in-design-1d5b26a23f4e">George Aye on “Understanding Power and Privilege in Design” – LaTeisha Moore</a></li>
<li><a href="https://eyeondesign.aiga.org/design-often-encourages-the-white-default-how-can-designers-create-more-inclusive-digital-interfaces/">How Can Designers Build Interfaces That Avoid the “White Default?” – Jacquelyn Iyamah</a></li>
<li><a href="https://humanebydesign.com/">Humane by Design – Jon Yablonski</a></li>
<li><a href="https://sayyeah.com/glossary/category/inclusive-design/">Inclusive design glossary – Say Yeah</a></li>
<li><a href="https://www.gov.uk/service-manual/design/making-your-service-more-inclusive">Making your service more inclusive – GOV.UK</a></li>
<li><a href="https://contentdesign.london/blog/the-importance-of-inclusive-content-design/">The Importance of Inclusive Content Design – Jacquelyn Iyamah</a></li>
<li><a href="https://sayyeah.com/digital-insights/universal-design-accessibility-inclusive-design/">What are the differences between universal design, accessibility, and inclusive design? – Say Yeah</a></li>
<li><a href="https://eyeondesign.aiga.org/what-does-it-mean-to-decolonize-design/">What Does It Mean to Decolonize Design? – Anoushka Khandwala</a></li>
</ul>
<h2>Related</h2>
<p>My <a href="https://www.benjystanton.co.uk/blog/list-of-inclusive-design-books/">list of inclusive design books</a>.</p>
Visiting all the beaches in Swansea and Gower2022-11-04T00:00:00Zhttps://www.benjystanton.co.uk/blog/visiting-all-the-beaches-in-swansea-and-gower/<p>I’ve set myself a challenge to visit all the beaches in Swansea and Gower. There are about 39 in total.</p>
<p>We visit some of these beaches regularly, but loads are completely new to me. No strict rules, I’m going to include beaches I’ve visited recently, to give myself a head start.</p>
<h2>Very important stats</h2>
<ul>
<li>Beaches visited: 16 of 39 (41%)</li>
<li>Longest continuous stretch: 9 beaches</li>
<li>Seals spotted: 0</li>
</ul>
<hr />
<h2>Swansea Bay</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/swansea-bay.jpg" alt="A small dog sniffs near 3 mounds of long grass in the sand. Choppy sea in the background. Rays of sun and blue sky break through a grey sky." />
<figcaption>
Swansea Bay, near Sketty Lane
</figcaption>
</figure>
<ul>
<li>Date: 8 March 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.60491/-3.98236">Swansea Bay on Open Street Map</a></li>
</ul>
<h2>Knab Rock</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/knab-rock.jpg" alt="Two paddle boarders on the sea. Cliffs topped with trees in the background. Sky is cloudy and blue." />
<figcaption>
Paddle boarding around Mumbles passing Knab Rock, photo by Dylan Tucker
</figcaption>
</figure>
<ul>
<li>Date: 28 July 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.57106/-3.98029">Knab Rock on Open Street Map</a></li>
</ul>
<h2>Mumbles Head Beach</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/mumbles-head.jpg" alt="Small rocky island with a lighthouse, just the other side of the water from a sandy beach." />
<figcaption>
Looking from the beach near the pier towards the islands and lighthouse. Some maps call this beach Touch Down, not sure why.
</figcaption>
</figure>
<ul>
<li>Date: 19 November 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.56857/-3.97628">Mumbles Head Beach on Open Street Map</a></li>
</ul>
<h2>Bracelet Bay</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/bracelet-bay-02.jpg" alt="Sandy beach with rocks at the shore. In the distance is a lighthouse on a small rocky island." />
<figcaption>
Bracelet Bay towards Mumbles lighthouse
</figcaption>
</figure>
<ul>
<li>Date: 16 October 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.567019/-3.978289">Bracelet Bay on Open Street Map</a></li>
</ul>
<h2>Limeslade Beach</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/limeslade-bay.jpg" alt="Grey rocks and pebbles disappear into the sea at the shore. Jagged rocks poke out of the sea, and rocky headland can be seen in the distance." />
<figcaption>
Limeslade Beach looking south west
</figcaption>
</figure>
<ul>
<li>Date: 14 November 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.56617/-3.98436">Limeslade Beach on Open Street Map</a></li>
</ul>
<h2>Rotherslade Bay</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/rotherslade-bay.jpg" alt="A sandy, pebbly beach at low tide. Beyond the rocks on one side, another beach and green hills can be seen." />
<figcaption>
Rotherslade Bay looking towards Langland Bay
</figcaption>
</figure>
<ul>
<li>Date: 4 November 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.567/-4.007">Rotherslade Bay on Open Street Map</a></li>
</ul>
<h2>Langland Bay</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/langland-bay.jpg" alt="Waves on a sandy shoreline. Sunrise behind the headland in the distance is reflecting orange in the wet sand." />
<figcaption>
Sunrise at Langland
</figcaption>
</figure>
<ul>
<li>Date: 9 October 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.56680/-4.01322">Langland Bay on Open Street Map</a></li>
</ul>
<h2>Caswell Bay</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/caswell-bay.jpg" alt="Beach with tide out. Sun, blue sky and cliffs in distance reflect off the water." />
<figcaption>
Low tide at Caswell, looking west
</figcaption>
</figure>
<ul>
<li>Date: 6 February 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.56865/-4.03344">Caswell Bay on Open Street Map</a></li>
</ul>
<h2>Brandy Cove</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/brandy-cove.jpg" alt="View down from a coastal path to a small sandy and rocky beach. Small waves break from the left. Cliffs on the far side lead up to dark green hills with shrubs and bushes." />
<figcaption>
Looking towards Brandy Cove from the coastal path that leads to Caswell
</figcaption>
</figure>
<ul>
<li>Date: 3 December 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.56784/-4.04355">Brandy Cove on Open Street Map</a></li>
</ul>
<h2>Rhossili</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/rhossili.jpg" alt="Steep cliffs topped with green grass reflect in wet sand below. Sky is grey." />
<figcaption>
South end of Rhossili Bay, with Worms Head in the distance
</figcaption>
</figure>
<ul>
<li>Date: 28 June 2023</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.57074/-4.29090">Rhossili on Open Street Map</a></li>
</ul>
<h2>Llangennith</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/llangennith.jpg" alt="Surf board on the sand. Sea and cliffs in the background. Blue clouds with wispy clouds." />
<figcaption>
Surfing near Hillend campsite, Worms Head in the distance
</figcaption>
</figure>
<ul>
<li>Date: 15 June 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.59385/-4.29473">Llangennith on Open Street Map</a></li>
</ul>
<h2>Burry Holms</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/burry-holms.jpg" alt="A small island in the distance surrounded by choppy seas. Long dune grass in the foreground is being blown sideways by the wind." />
<figcaption>
Burry Holms tidal island seen from the coastal path, looking west.
</figcaption>
</figure>
<ul>
<li>Date: 15 July 2023</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.60934/-4.31093">Burry Holms on Open Street Map</a></li>
</ul>
<h2>Blue Pool Bay</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/three-chimneys.jpg" alt="Rocky cliffs from the beach. A hole has formed in the rocks and you can see blue sky through the middle." />
<figcaption>
A natural archway at Blue Pool Bay called the Three Chimneys
</figcaption>
</figure>
<ul>
<li>Date: 10 August 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.61383/-4.30064">Blue Pool Bay on Open Street Map</a></li>
</ul>
<h2>Little Broughton</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/little-broughton.jpg" alt="A massive stretch of wet sand with grass topped cliffs in the distance. The cliffs and sky are mirrored almost perfectly in the wet sand below." />
<figcaption>
Little Broughton at low tide
</figcaption>
</figure>
<ul>
<li>Date: 12 November 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.61455/-4.29025">Little Broughton on Open Street Map</a></li>
</ul>
<h2>Broughton Bay</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/broughton-bay.jpg" alt="Beach at high tide. Sun light is reflecting off the surface. The sun is covered by small clouds. A bird flies past, and there is a hill in the background." />
<figcaption>
Broughton Bay at high tide, from the coastal path, looking towards Llanmadoc
</figcaption>
</figure>
<ul>
<li>Date: 14 August 2022</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.61537/-4.28255">Broughton Bay on Open Street Map</a></li>
</ul>
<h2>Whiteford Sands</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/whiteford-sands.jpg" alt="Windswept sand dunes in early morning light, topped with beachgrass." />
<figcaption>
Dunes at Whiteford Sands
</figcaption>
</figure>
<ul>
<li>Date: 22 August 2023</li>
<li>Location: <a href="https://www.openstreetmap.org/#map=17/51.62819/-4.26130">Whiteford Sands on Open Street Map</a></li>
</ul>
<hr />
<h2>All the beaches in Swansea and Gower</h2>
<ol>
<li>Jersey Marine Beach</li>
<li><s>Swansea Bay</s></li>
<li><s>Knab Rock</s></li>
<li><s>Mumbles Head</s></li>
<li><s>Bracelet Bay</s></li>
<li><s>Limeslade Beach</s></li>
<li><s>Rotherslade Bay</s></li>
<li><s>Langland Bay</s></li>
<li><s>Caswell Bay</s></li>
<li><s>Brandy Cove</s></li>
<li>Pwll Du Bay</li>
<li>Bantam Bay</li>
<li>Hunts Bay / Deep Slade</li>
<li>Foxhole</li>
<li>Pobbles Bay</li>
<li>Three Cliffs Bay</li>
<li>Tor Bay</li>
<li>Nicholaston / Crawley Beach</li>
<li>Oxwich Bay</li>
<li>Slade Sands</li>
<li>The Cove / Horton Beach</li>
<li>Port Eynon</li>
<li>Salt House Mere</li>
<li>Overton Mere</li>
<li>Common Cliff</li>
<li>Foxhole Slade</li>
<li>Knave Bay</li>
<li>Ramsgrove</li>
<li>Butterslade</li>
<li>Mewslade Bay</li>
<li>Fall Bay</li>
<li><s>Rhossili</s></li>
<li><s>Llangennith</s></li>
<li><s>Burry Holms</s></li>
<li><s>Blue Pool Bay</s></li>
<li><s>Little Broughton</s></li>
<li><s>Broughton Bay</s></li>
<li><s>Whiteford Sands</s></li>
<li>Llanrhidian Sands</li>
</ol>
Starting a blogroll2022-10-29T00:00:00Zhttps://www.benjystanton.co.uk/blog/starting-a-blogroll/<p>Inspired by <a href="https://mxb.dev/blogroll/">Max Böck</a>, I've decided to add a <a href="https://www.benjystanton.co.uk/blogroll/">blogroll</a> to my site. According to <a href="https://indieweb.org/blogroll">IndieWeb</a>, a blogroll is "a list of other sites that you read, are a follower of, or recommend".</p>
<p>With Twitter under threat from you-know-who, it's a great time to start publishing on your own domain.</p>
<p>Let me know your blog and I'll add it to my <a href="https://www.benjystanton.co.uk/blogroll/">blogroll</a>. My contact details are on my <a href="https://www.benjystanton.co.uk/">home page</a>. Or, add your own via a <a href="https://github.com/benjystanton/benjystanton.github.io/blob/main/src/blogroll.md">pull request</a>.</p>
<p>In particular, I'll be looking to add people posting about…</p>
<ul>
<li>user-centred design</li>
<li>accessibility</li>
<li>inclusive design</li>
<li>web design</li>
<li>service design in the public sector</li>
</ul>
List of inclusive design books2022-10-22T00:00:00Zhttps://www.benjystanton.co.uk/blog/list-of-inclusive-design-books/<p>Some inclusive design books that I'm reading, or are on my wish list.</p>
<ul>
<li><a href="https://www.beyondstickynotes.com/tellmemore">Beyond Sticky Notes</a> – “…your guide to doing co-design, for real.”</li>
<li><a href="https://designjustice.mitpress.mit.edu/">Design Justice</a> – “An exploration of how design might be led by marginalized communities, dismantle structural inequality, and advance collective liberation and ecological survival.”</li>
<li><a href="https://papress.com/pages/extra-bold">Extra Bold</a> – “a feminist, inclusive, anti-racist, nonbinary field guide for graphic designers.”</li>
<li><a href="https://good.services/home">Good Services</a> – “How to design services that work.”</li>
<li><a href="https://mitpress.mit.edu/9780262539487/">Mismatch</a> – “How Inclusion Shapes Design.”</li>
<li><a href="https://www.ruinedby.design/">Ruined by Design</a> – “How designers destroyed the world, and what we can do to fix it.”</li>
</ul>
<p><img src="https://www.benjystanton.co.uk/images/inclusive-design-books.jpg" alt="A pile of books on a desk. The books are Extra Bold, Mismatch, Beyond Sticky Notes, Design Justice and Good Services." /></p>
Showing the post excerpt on blog post lists2022-10-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/showing-the-post-excerpt-on-blog-post-lists/<p>I've been getting into the habit of writing excerpts for my weeknotes, so that they can be used in the <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">social media snippets (or cards)</a> when I share my posts on Twitter.</p>
<p>I think they are especially useful for weeknotes as the titles of my weeknotes don't have any specific descriptive content in them, because they follow a <code>series-01-episode-01</code> format.</p>
<p>They look a bit look this…</p>
<pre><code>excerpt: "Design Swansea, user research and design reviews."
</code></pre>
<p>I add this content to the <a href="https://www.11ty.dev/docs/data-frontmatter/">front matter</a> of my blog post files, so they aren't displayed by default. But, because they are stored as front matter, they become meta data for the post, and I can use them in different places.</p>
<p>Until now, I haven't been displaying this content on the blog.</p>
<p>Buuut… it's useful content that will probably help people and search engines understand what my posts are about. It'll also help me go back over old weeknotes and understand what I was writing about each week.</p>
<p>So, I've updated a couple of my site templates with the following <a href="https://www.11ty.dev/docs/languages/liquid/">liquid tags</a> (see the last <code><p></code>).</p>
<h2>HTML example</h2>
<pre><code><li class="post-list-item">
<h2 class="post-list-item__title">
<a href="{{ post.url }}">{{ post.data.title }}</a>
</h2>
<p class="post-list-item__text">{{ post.date | date: "%e %B %Y" }}</p>
{% if post.data.excerpt %}
<p class="post-list-item__text">{{ post.data.excerpt }}</p>
{% endif %}
</li>
</code></pre>
Weeknotes – series 06 episode 142022-10-07T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-14/<h2>Design Swansea</h2>
<p>This week was Design Swansea 48. It’s a free meet-up held at the <a href="https://hqurbankitchen.co.uk/">HQ Urban Kitchen</a> near the train station. It’s a really nice venue which serves good coffee, tiny rebel beers and drop bear alcohol free beers.</p>
<p>Both talks were great this week. <a href="https://www.ryanstephens.co/">Ryan Stephens</a> is a mindset coach that talked about persistence.</p>
<p>And <a href="https://www.friendandfriends.co/">Owen Friend</a> is a Cardiff based graphic designer who talked about work-life balance.</p>
<p>The next meet-up will be on Thursday 10th November at 6:30pm. <a href="https://www.eventbrite.co.uk/e/design-swansea-49-with-steve-kelly-zoe-angelise-tickets-433516819477">Grab a free ticket on Eventbrite</a>.</p>
<h2>Finished the first round of user research</h2>
<p>We finally finished the last user research session that had been delayed due to the queen’s passing and period of mourning.</p>
<p>I’m really glad we were able to get this final session in, the participant was deaf and we learnt a lot about their needs.</p>
<h2>Started a weekly design show the thing session</h2>
<p>We started a weekly design meeting between the 3 designers on my assignment. We’re all working on different platforms, so an opportunity to review and critique each other’s work will really help.</p>
<p>We have other similar recurring meetings for all user-centred people working with this client, but I’m really looking forward to the to chance for us to focus on interaction and service design.</p>
Weeknotes – series 06 episode 132022-10-01T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-13/<p><img src="https://www.benjystanton.co.uk/images/cavern.jpeg" alt="Framed posters on a wall. The middle one says: welcome to the cavern the world’s greatest rock ‘n’ roll club. A small plaque below it says they were designed by Tony Booth. The brick wall in the background is completely covered in signatures. The room is quite dark but bathed in cool, blue light." /></p>
<p>Posting from my phone again today as we’ve gone to Liverpool for a friend’s 40th.</p>
<p>It’s been a week of highs and lows.</p>
<h2>My Gran’s funeral</h2>
<p>It was my Gran’s funeral on Monday, a sad day but she had lived a full life. I enjoyed <a href="https://www.walesonline.co.uk/news/june-stanton-swansea-councillor-died-24912912">hearing more about what she achieved</a>.</p>
<h2>Probation</h2>
<p>Some better news was that I found out I’d passed my 3 month probation at Made Tech. It’s always nice to pass milestones like that, but especially nice now as it unlocks some things like the pension scheme and my sign on bonus. Should be useful for paying our energy bill.</p>
<h2>Service design in gov</h2>
<p>I’ve been following along with the <a href="https://govservicedesign.net/">service design in gov</a> news on Twitter.</p>
<p>Some friends from Made Tech, <a href="https://mobile.twitter.com/tsmz">Tom</a> and <a href="https://mobile.twitter.com/VHoughtonP">Vicky</a>, both spoke there. Looking forward to finding out more about how it went.</p>
<p>Plus it was nice to hear that the work of the inclusive design team at UKHSA got a couple of mentions, from <a href="https://twitter.com/benjystanton/status/1575590856563621888">Soh-yon Park and Claudia Hopkins</a> and <a href="https://mobile.twitter.com/katybeale">Katy Beale</a>.</p>
Weeknotes – series 06 episode 122022-09-23T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-12/<h2>Accessibility best practices</h2>
<p>Leaning heavily on the <a href="https://www.gov.uk/service-manual">GOV.UK Service Manual</a>, and the work that the inclusive design team did whilst I was at UKHSA (UK Health Security Agency), I've been iterating on a list of accessibilty best practices to share with my current team.</p>
<ol>
<li>Everyone understands how they can help
<ul>
<li><a href="https://accessibility-manual.dwp.gov.uk/guidance-for-your-job-role">Guidance for your job role – Department for Work and Pensions Accessibility Manual</a></li>
</ul>
</li>
<li>Do <a href="https://www.gov.uk/service-manual/user-research/running-research-sessions-with-people-with-disabilities">regular user research with disabled people</a></li>
<li>Consider accessibility in the design phase
<ul>
<li><a href="https://twitter.com/WalterStephanie">Stef Walter</a> has a great <a href="https://stephaniewalter.design/blog/a-designers-guide-to-documenting-accessibility-user-interactions/">guide for designers on documenting accessiblity requirements</a></li>
</ul>
</li>
<li>Review barriers and excluded groups
<ul>
<li>see <a href="https://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-12/#exclusion-mapping">exclusion mapping</a> later in the post</li>
</ul>
</li>
<li>Run regular accessibility testing
<ul>
<li><a href="https://docs.flutter.dev/development/accessibility-and-localization/accessibility">Flutter's guide to accessibility testing for native apps</a></li>
</ul>
</li>
<li><a href="https://www.gov.uk/service-manual/helping-people-to-use-your-service/getting-an-accessibility-audit">Get an accessibility audit</a></li>
<li><a href="https://www.gov.uk/guidance/make-your-website-or-app-accessible-and-publish-an-accessibility-statement#publish-your-accessibility-statement">Publish an accessibility statement</a></li>
</ol>
<h2 id="exclusion-mapping">Exclusion mapping</h2>
<p><img src="https://www.benjystanton.co.uk/images/exclusion-mapping.png" alt="A yellow square with a blue bounding box. Black text inside the square says: Exclusion mapping." /></p>
<p>I also ran a lightweight exclusion mapping exercise, again inspired by work done at UKHSA (UK Health Security Agency).</p>
<p>The idea was to try and identify…</p>
<ul>
<li>groups who might be excluded by a service</li>
<li>barriers that they might face</li>
<li>groups who might be at greater risk from the problems you are trying to solve</li>
</ul>
<p>The result was a list of people to include in our user research plans and barriers to focus on as we design.</p>
<p>It's useful to have some design concepts and user journeys to hand, to review against.</p>
<h3>Step 1 – Excluded groups</h3>
<p>Reflect on the different types of people who may be excluded from any service (or policy or system).</p>
<p>As I mentioned in my weeknotes last week, <a href="https://twitter.com/claragt">Clara Greo</a> and <a href="https://twitter.com/sonia_turcotte">Sonia Turcotte</a> have an excellent list of people and groups: <a href="https://twitter.com/claragt/status/1503644184737112066?s=46&t=EM4Ii8beHE6caF53d6QcCg">oppressed and systematically disadvantaged people and communities in the UK</a>.</p>
<h3>Step 2 – Accessibility barriers</h3>
<p>Go through the Home Office's <a href="https://ukhomeoffice.github.io/accessibility-posters/">accessibility posters</a>. They have posters for the following groups…</p>
<ul>
<li>Anxiety</li>
<li>Autistic spectrum</li>
<li>Deaf or hard of hearing</li>
<li>Dyslexia</li>
<li>Low vision</li>
<li>Physical or motor disabilities</li>
<li>Screenreaders</li>
</ul>
<p>Identify which barriers from each group could appear as a result of poor design in your service.</p>
<p>For example, some barriers that might affect users with physical or motor disabilities are…</p>
<ul>
<li>High precision or dexterity required</li>
<li>Dynamic content that requires a lot of mouse movement</li>
<li>Lots of scrolling and tabbing</li>
<li>Lots of typing</li>
<li>Things time out without much warning</li>
<li>Interactive elements are bunched together</li>
<li>Bits of the page don't work a keyboard</li>
<li>Can't interact with or close pop-ups</li>
</ul>
<h3>Step 3 – <a href="https://gds.blog.gov.uk/2019/03/26/understanding-all-the-barriers-service-users-might-face/">Universal barriers</a></h3>
<p>The universal barriers framework is a good way to focus on the barriers that can affect anyone.</p>
<p>For example…</p>
<ol>
<li>Awareness</li>
<li>Enthusiasm</li>
<li>Access</li>
<li>Time</li>
<li>Finance</li>
<li>Evidence</li>
<li>Interface and interaction skills</li>
<li>Comprehension skills</li>
<li>Self confidence</li>
<li>Emotional state</li>
<li>Trust</li>
</ol>
<p>Identify which statements from each group could happen as a result of poor design in your service.</p>
<p>For example, when thinking about time, people may feel…</p>
<ol>
<li>I don't have time to use this service</li>
<li>The waiting times are too long</li>
<li>It takes too long to travel to do this</li>
<li>Download speeds take too long</li>
<li>The information took too long to arrive</li>
</ol>
<h3>Step 4 – <a href="https://www.citizensadvice.org.uk/law-and-courts/discrimination/about-discrimination/equality-act-2010-discrimination-and-your-rights/">Protected characteristics</a></h3>
<p>Finally, thinking about protected characteristics, are there any groups which are more at risk from being excluded from, or being harmed when, using your service?</p>
<ul>
<li>age</li>
<li>gender reassignment</li>
<li>being married or in a civil partnership</li>
<li>being pregnant or on maternity leave</li>
<li>disability</li>
<li>race including colour, nationality, ethnic or national origin</li>
<li>religion or belief</li>
<li>sex</li>
<li>sexual orientation</li>
</ul>
<h3>Step 5 – Wrap up</h3>
<p>You should be left with a list of people and groups to focus user research on. And a list of barriers to consider when designing and building the service.</p>
<hr />
<p>Phew that was a lot to go through, if you find this useful, or can see any areas for improvement, please let me know!</p>
<h2>Other things</h2>
<ul>
<li>Intuit have a great content design guide called <a href="https://contentdesign.intuit.com/accessibility-and-inclusion/abolish-racist-language/">Abolish racist language</a></li>
<li>I was reminded of something that <a href="https://twitter.com/LouDowne/status/1544223825193213952">Lou Downe says: "Service design is 10% design… 90% creating the conditions for design to happen"</a></li>
<li>It was <a href="https://inclusivedesign24.org/2022/schedule/">Inclusive Design 24</a> this week, a free 24-hour online event full of inclusive design and accessibility talks</li>
</ul>
Weeknotes – series 06 episode 112022-09-16T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-11/<h2>First sprint</h2>
<p>This week my team finished their first sprint without any of the old supplier onboard. It was good to get stuck in.</p>
<p>I worked on tickets that I proposed myself, and found accessibility issues that have since been prioritised by the product manager and then fixed by the engineers. I know that's the minimum I should be doing and/or just what's expected of my job… but it still felt nice to achieve those things on my first sprint.</p>
<p>I also presented my work at the sprint review to some people from outside the team. Always weird to present to a faceless group of people of Microsoft Teams. And I was quite nervous berfore hand. But glad I did it.</p>
<h2>Running retro and planning</h2>
<p>Made Tech (or maybe its just the team I'm on?) has a culture of letting everyone have a go at hosting agile ceremonies.</p>
<p>This sprint it was my turn to host the double whammy retrospective and sprint planning. The retro went well I think, but I was out of my depth driving Jira for the sprint planning portion of the meeting. The meeting should have been 90 minutes but ended up lasting 2 hours! We're going to split them into 2 next sprint.</p>
<p>Still, I think the rota has a good effect on the team overall, even if, for the first few sprints, we're a little rusty. I definitely feel like an equal in the team, when often in the past, I've noticed that user-centred people can feel side-lined in enginering teams.</p>
<p>Feels strange that I've gotten to be a lead designer without ever really touching Jira? Overall it seems okay, if bloated. Personally I prefer Trello or GitHub Projects.</p>
<h2>Exclusion mapping</h2>
<p>I'm working up an exclusion mapping workshop to run with some of the team next week. It's part inspired by a workshop that the inclusive design team did at UKHSA (UK Health Security Agency).</p>
<p>We want to identify some groups that may be excluded from an early feature we're working on, so I'm planning on guiding the team through a few exercises, inspired by a mix of…</p>
<ul>
<li>the Home Office's <a href="https://ukhomeoffice.github.io/accessibility-posters/">accessibility posters</a></li>
<li>GOV.UK's <a href="https://www.gov.uk/government/publications/understanding-disabilities-and-impairments-user-profiles">accessibility user profiles</a></li>
<li>GOV.UK's <a href="https://gds.blog.gov.uk/2019/03/26/understanding-all-the-barriers-service-users-might-face/">universal barriers</a></li>
<li><a href="https://twitter.com/claragt">Clara Greo</a> and <a href="https://twitter.com/sonia_turcotte">Sonia Turcotte</a>'s <a href="https://twitter.com/claragt/status/1503644184737112066?s=46&t=EM4Ii8beHE6caF53d6QcCg">list of excluded groups</a></li>
</ul>
<h2>Other things</h2>
<ul>
<li>I'm almost through my 90 day probabation at Made Tech. By early October I should be a fully fledged employee at Made Tech. It's really flown by.</li>
<li><a href="https://techcrunch.com/2022/09/15/adobe-is-buying-figma-for-20b-taking-out-one-of-its-biggest-rivals-in-digital-design/">Figma was bought by Adobe for $20 billion</a>, it was massive news on design Twitter, even eclipsing "The Queue".</li>
<li>I asked on Twitter for tips about doing <a href="https://gist.github.com/benjystanton/8902400f3f672f2761d2cccb06a29a24">user research with people with access needs</a> and collected the notes in a GitHub gist.</li>
<li>I'm heading to <a href="https://strangerthings-experience.com/london/">Stranger Things:The Experience</a> in London this weekend.</li>
</ul>
<p><img src="https://www.benjystanton.co.uk/images/benjy-arcade.jpeg" alt="Me in a dark room, tinged in blue light, playing an 80s style missile command arcade machine. I’m turning round to look at the camera. Wearing a cut off black denim jacket and a baseball cap." /></p>
Weeknotes – series 06 episode 102022-09-09T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-10/<h2>Design Quality Assurance (QA) and device testing</h2>
<p><img src="https://www.benjystanton.co.uk/images/devices.jpg" alt="An iPad and a Google Pixel phone rest on a wooden stand on a table. Behind the phone, a black sticker with white text that says "Customers, Users" The word customer has a red line through it." /></p>
<p>This week my devices from Made Tech arrived in the post. I ordered some second-hand devices to do some QAing on the apps. In addition to my personal iPhone, I now have access to an Android phone and tablet, plus an iPad.</p>
<p>I found a few small bugs that relate to design consistency, content standards and assistive technology compatibility. I also created a few process based tickets around making sure we’re following GDS’s (Government Digital Service) recommended practices for the beta phase, for example…</p>
<h3>Making sure everyone can use your service (at beta phase)</h3>
<ul>
<li>run regular accessibility testing</li>
<li>run research sessions with disabled people</li>
<li>get an accessibility audit and fix any issues</li>
<li>explore whether the service has any pain points that might lead to people being excluded, and what steps you are taking to address them</li>
<li>prepare to publish an accessibility page for your service</li>
</ul>
<p>This list is taken from: <a href="https://www.gov.uk/service-manual/agile-delivery/how-the-beta-phase-works#making-sure-everyone-can-use-your-service">How the beta phase works – GOV.UK</a></p>
<h2>Remote user research about video and text content</h2>
<p>Our team also kicked off a round of discovery user research around video and written content formats. It’s been so good to observe user research again, it’s been a while since I was last able to do it. We're using User Zoom to run the sessions, which has some nice features specifically for user research, making it better that relying on just Google Meet or Microsoft Teams.</p>
<p>It’s early days, but it seems like a mix of content types can help people to understand complex content more easily. And I was very happy when one participant described the need for content in different formats (text, audio and video) and different languages (for people who use English as a second language or people who use sign language). This was a need that was very common in Test and Trace, so I’m keen to explore what we can do to better meet this need.</p>
<h2>Content warning: ableist language</h2>
<p>I sparked a <a href="https://twitter.com/benjystanton/status/1566700632551133185">little debate on Twitter</a> about <a href="https://designsprintkit.withgoogle.com/methodology/phase3-sketch/crazy-8s">Crazy 8s</a>. Some people suggested more inclusive names for the exercise, like Random 8s.</p>
<p>Others discussed whether it’s even a useful exercise to do. When we ran it in work earlier this week, I did think it was a good way to bring non-designers into the process.</p>
<h2>Other things</h2>
<ul>
<li>Colin, someone I used to work with, shared <a href="https://portfoliopages.co.uk/2022/09/02/time-travel-really-is-possible/">a blog post about his experiences working at Test and Trace</a>, it included a nice little shout out for my old team (the inclusive design team) which was nice to see</li>
<li>I remembered that the <a href="https://govdesign.tumblr.com/">gov design tumblr</a> exists!</li>
<li><a href="https://www.eventbrite.co.uk/e/design-swansea-47-with-craig-jones-tickets-406792195407">Design Swansea</a> (a local meet-up) was back after a two and a half year break</li>
<li>It was back to school this week, and my eldest daughter started secondary school!</li>
</ul>
Weeknotes – series 06 episode 092022-09-02T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-09/<h2>Goodbye old team, hello new sprint</h2>
<p>It was sprint change over this week, and the last of the old supplier’s team were leaving, including the old designer. So I’m on my own now, so to speak.</p>
<p>We did a final run Sketch through to make sure I had all the correct fonts, plugins and libraries. And I tested that I can publish changes to Zeplin. The team uses Zeplin to share designs from Sketch with the engineers.</p>
<p>I like that there’s an established workflow to follow, and there are lots of plus points. For example, you can set the design layers to be associated with iPhone or Android specs, so it will create values (like measurements and colours) in the correct format for the engineers. But, Zeplin seems incredibly slow even when just exporting one layer. It might get tedious in future.</p>
<p>But for now the designs are all up-to-date, and very neatly organised, and I don’t have any new designs to create, so just something to keep an eye on.</p>
<h2>Writing Jira tickets for user-centred design (UCD) tasks</h2>
<p>I’ve started to create my own tickets which feels like a little win. The client uses Jira, which I haven't used since I worked at DVLA. Generally I prefer Trello or GitHub projects, but I'm getting to grips with Jira slowly. Me and the user researcher have been thinking about how best to write tickets for UCD tasks.</p>
<p>Some ideas we came up with…</p>
<ul>
<li><strong>User story</strong> – include one whenever we can</li>
<li><strong>Outcome</strong> – what user need, problem or outcome are we trying to meet/solve?</li>
<li><strong>Sizing or story points</strong> – build up examples for how long typical UCD things take</li>
<li><strong>Links</strong> – link to previous user research, epics and design mock-ups</li>
<li><strong>Accessibility and inclusion</strong> – add notes about access needs and barriers</li>
<li><strong>Interaction</strong> – show user flows for key changes in component states and page navigation</li>
</ul>
<h2>Design quality assurance (QA)</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/accessibility-shortcuts.jpg" alt="iPhone screenshot showing accessiblity shorcuts: Colour Filters, Voice Control, VoiceOver and Zoom are listed." />
<figcaption>
Some of the iPhone accessibility features I've been learning about
</figcaption>
</figure>
<p>We’re releasing a big new feature on the app, so I’m spending some time this sprint to do a design QA. I’m testing the public beta on my personal iPhone. (I’ve ordered some other iOS and Android devices from Made Tech too).</p>
<p>Here’s the rough process I’m following so far (room for improvement here)…</p>
<ul>
<li>Create a sample list of pages/components to check</li>
<li>Check in portrait mode and landscape mode</li>
<li>Check against the mock-ups (in Zeplin)</li>
<li>Check with Dark mode</li>
<li>Basic VoiceOver check</li>
<li>Basic Voice Control check (to check hidden labels and focus order)</li>
<li>Check the design with colour filters</li>
<li>Increase text size</li>
</ul>
<p>This blog post about testing with Voice Control was really useful: <a href="https://www.deque.com/blog/new-in-ios-13-accessibility-voice-control-and-more/">New in iOS 13 Accessibility – Voice Control and More – Deque</a>.</p>
<p>I also followed this: <a href="https://www.gov.uk/government/publications/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one">Doing a basic accessibility check if you cannot do a detailed one - GOV.UK</a>.</p>
<h2>Other things</h2>
<ul>
<li>The Design Swansea meet-up is back, for its first event since the pandemic – <a href="https://www.eventbrite.co.uk/e/design-swansea-47-with-craig-jones-tickets-406792195407">grab a free Design Swansea ticket</a></li>
<li>Formal job role guidance launched by GOV.UK about <a href="https://www.gov.uk/guidance/accessibility-specialist">accessibility specialists</a></li>
</ul>
Weeknotes – series 06 episode 082022-08-29T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-08/<h2>Made Tech design community stuff</h2>
<p>I got myself some tickets to the UK Gov <a href="https://designnotes.blog.gov.uk/2022/08/16/join-us-for-design-system-day-2022/">design system day</a> conference in September. I think the theme is inclusivity – so really looking forward to attending (remotely).</p>
<p>At our fortnightly designer community of practice, one of the team did a great demo on using Figma’s Google Sheets plugin to create a dynamic, data driven prototype. The speed of putting it together was impressive, much quicker than anything I could do with code.</p>
<p>I also joined my first interview panel at Made Tech.</p>
<h2>Design assignment stuff</h2>
<p>The user researcher on the team is planning some discovery research. We’re going to recruit a couple of people with access needs. I’m looking forward to observing during the sprint that starts on Wednesday, it’s been a while since I’ve been involved directly with user research.</p>
<p>I got access to Test Flight and App Store Connect so that I can test beta releases of the app on my iPhone. I’m working with Made Tech to get access to some Android devices so that I can test that out too.</p>
<p>I’ve been thinking about how to document designs. I think that making sure that I write detailed acceptance criteria will help with engineer handover (especially since I’ll be creating designs in Sketch, rather than coded prototypes).</p>
<p>This post from Stéphanie Walter has been a great help: <a href="https://stephaniewalter.design/blog/a-designers-guide-to-documenting-accessibility-user-interactions/">A Designer’s Guide to Documenting Accessibility & User Interactions</a>.</p>
Weeknotes – series 06 episode 072022-08-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-07/<p>This was my first week back after my holiday, and I went straight into my first client assignment at Made Tech. I’m also half way through my probation.</p>
<h2>Native app design</h2>
<p>For my first assignment, I’ll be working on a native iOS and Android app, and I have just over one sprint to handover with the existing designer before they leave at the end of the month.</p>
<p>We’re spending time having handover meetings whilst I get to grip with the regular sprint meetings and ceremonies. Next week, we’re hoping to do some shadowing.</p>
<p>The existing team uses <a href="https://www.sketch.com/">Sketch</a> for designing, and <a href="https://zeplin.io/">Zeplin</a> to hand over the designs to the engineering team. Although this workflow isn’t my (or Made Tech’s) first choice, it looks like it’s working well.</p>
<p>Apple publishes a lot of their design resources in Sketch format, so I think this is one reason that app designers use Sketch.</p>
<p>Here are some resources…</p>
<ul>
<li><a href="https://developer.apple.com/design/resources/#ios-apps">Sketch library, design templates and production templates</a></li>
<li><a href="https://developer.apple.com/design/resources/#fonts">SF (San Francisco) Fonts</a></li>
<li><a href="https://developer.apple.com/design/resources/#sf-symbols">SF (San Francisco) Symbols</a></li>
</ul>
<p>The apps follow native design patterns, so it’s been recommended that I get familiar with Apple’s <a href="https://developer.apple.com/design/human-interface-guidelines/guidelines/overview">Human Interface Guidelines</a> and Android <a href="https://m3.material.io/">Material Design</a> system. This helps to take advantage of the operating systems’ built-in accessibility features.</p>
<h2>Accessibility best practices</h2>
<p>I’ve been getting to know the rest of the team, including the user researchers and engineers. It’s been great to get back into hands-on delivery work. I’ve been chatting with the user researcher about how we can include people with access needs in the next round of user research.</p>
<p>And it seems like improving the definition of done and acceptance criteria will be one of the key ways to make sure engineers can pick up designs and really understand the intention of the designs when they implement new user stories.</p>
<p>I’ve been gathering some resources about how to document accessibility…</p>
<ul>
<li><a href="https://tetralogical.com/blog/2022/05/26/how-to-write-user-stories-for-accessibility/">How to write user stories for accessibility - Tetra Logical</a></li>
<li><a href="https://bbc.github.io/accessibility-news-and-you/guides/accessibility-acceptance-criteria.html">How to write accessibility acceptance criteria - BBC</a></li>
<li><a href="https://insidegovuk.blog.gov.uk/2018/01/24/improving-accessibility-with-accessibility-acceptance-criteria/">Improving accessibility with accessibility acceptance criteria - GOV.UK</a></li>
</ul>
<p>Also, inspired by some work my old team did at UKHSA (UK Health Security Agency), I’m putting together a list of accessibility practices and behaviours that are needed on a team in order to deliver accessible services. This is still a draft, but shared here as a work in progress…</p>
<ul>
<li>Identify excluded groups and their pain points</li>
<li>Do user research with people with disabilities and other excluded groups</li>
<li>Use native app design patterns and components</li>
<li>Continuously run accessibility tests</li>
<li>Get an accessibility audit</li>
<li>Publish an accessibility statement</li>
<li>Gather performance data and analytics in a way that includes everyone</li>
</ul>
<h2>Reading about inclusive design</h2>
<p>I was reminded that I can spend my Made Tech learning budget on books (amongst other things) so I bought a copy of one that I’ve had my eye on for a while…</p>
<p><img src="https://www.benjystanton.co.uk/images/extra-bold.jpg" alt="Book cover: Extra Bold: A Feminist, Inclusive, Anti-racist, Nonbinary Field Guide for Graphic Designers." /></p>
<p>Just a few pages in, and I can’t believe I didn’t get it sooner. It reminds me of <a href="https://renieddolodge.co.uk/why-im-no-longer-talking-to-white-people-about-race/">Why I’m no longer talking to white people about race</a> for the way it cuts straight to it, and really helps me to understand oppression and privilege (only this time it’s focussed on design). Bonus points for how beautiful it is.</p>
<p>I’m collecting <a href="https://gist.github.com/benjystanton/5f55aa3a99b5ab636cfad2ff9fed38b5">further reading resources about inclusive design</a> over on my Github Gists page.</p>
Weeknotes – series 06 episode 062022-08-14T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-06/<p>This week we stayed in a static caravan at <a href="https://www.broughtonfarmcaravanpark.co.uk/">Broughton Farm</a>, near Llangennith in Gower.</p>
<h2>Broughton Bay</h2>
<p><img src="https://www.benjystanton.co.uk/images/broughton-ferns.jpg" alt="Looking over bushy green ferns at the sea and a hazy coastline in the distance." /></p>
<p>It was very hot again, which made packing a real chore, but when we got there, the weather was perfect for some lazy beach days. The tides were on our side too, especially early on in the week. The tides go out for what feels like miles at Broughton, so it's a long walk when it's out, it can be dangerous too.</p>
<p>We did plenty of paddle boarding, and spotted lots of <a href="https://www.wildlifetrusts.org/wildlife-explorer/marine/jellyfish/barrel-jellyfish">Barrel jellyfish</a> when we were out a bit deeper. There were fish swimming around and the water was incredibily clear, but there was the odd bit of sheep poo floating by to remind us we were in Gower.</p>
<h2>Blue Pool Bay</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/three-chimneys.jpg" alt="Rocky cliffs from the beach. A hole has formed in the rocks and you can see blue sky through the middle." />
<figcaption>
A natural archway at Blue Pool Bay called the Three Chimneys
</figcaption>
</figure>
<p>When the tide started to get low during the day, we walked around the headland on the beach from Broughton Bay to <a href="https://www.thebeachguide.co.uk/south-wales/glamorgan/blue-pool-bay.htm">Blue Pool Bay</a>. It's only accessible this way when the tide is at its lowest point. You can walk down from the coastal path around the cliffs too, but it's a little steep with young kids.</p>
<h2>Ice cream and pizza</h2>
<p><img src="https://www.benjystanton.co.uk/images/pizza-bus.jpg" alt="Red double decker bus, serving pizzas in a green field, surrounded by picnic benches with red umbrellas. A large house can be seen in the background." /></p>
<p>Gower is a lot less developed than similar streches of coast like Cornwall or even Pembrokshire, so we tend to have lazy, off-grid holidays here, but the heat meant we stuck to the nearby beaches even more than usual.</p>
<p>We did venture away from the camp site a few times though. I always drag the family to the <a href="https://kingsheadgower.co.uk/">Kings Head</a> for at least one meal, and this week was no exception.</p>
<p>We drove to Penclawdd (famous for its local cockle industry) one day to pick up some supplies and grab a <a href="https://www.ggsgelato.co.uk/">GG's Ice Cream</a>.</p>
<p>The best surprise were the pizzas we had the <a href="https://www.gowerdough.co.uk/">Gower Dough Co</a> pop-up at <a href="https://www.gowercamping.co.uk/">Kennexstone camp site</a>. They have a double decker bus serving wood fired pizzas and a converted horsebox trailer serving local beers like <a href="https://gowerbrewery.com/">Gower Gold</a> and non alcoholic beers from <a href="https://www.dropbearbeers.com/">Drop Bear</a>. They were playing music too… it had a nice festival vibe. Definitely worth a visit again.</p>
<p>I tweeted <a href="https://twitter.com/benjystanton/status/1556899300520726528">a few more photos from the whole trip in this thread</a>.</p>
Weeknotes – series 06 episode 052022-08-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-05/<p><img src="https://www.benjystanton.co.uk/images/chicken.jpg" alt="Close up of a brown chicken, walking towards the camera, on bright green grass." /></p>
<h2>Camping at Alton Towers</h2>
<p>On Monday we got up early to drive to Alton Towers – a 4 hour drive from Swansea. We stayed at a campsite called <a href="https://www.commonendfarmcampsite.co.uk/">Common End Farm</a>. It was a really nice site, with chickens wandering around and cows in the field next door. The only draw back was a busy road nearby which was loud in the night. We might try <a href="https://www.ruehillcampsite.co.uk/">Rue Hill Campsite</a> next time.</p>
<p><img src="https://www.benjystanton.co.uk/images/cow.jpg" alt="A black and white cow looks at the camera, it's standing in a big green field, brown and white cows are in the distance." /></p>
<p>We had a good day at Alton Towers, but even though some of the rides are great, I thought it was looking run down. They have a wasp problem too (seem to remember it being the same when I visited it as a teenager?). Overall, I thought Legoland was much better when we went there last year.</p>
<p>On the way back we drove through the nearby village of Stanton to get a photo by the sign.</p>
<p><img src="https://www.benjystanton.co.uk/images/stanton-sign.jpg" alt="A black and white road sign says: STANTON Please drive carefully. It’s beside a narrow road with trees either side." /></p>
<h2>Packing for Llangennith</h2>
<p>Today we're packing for the second half of the holiday, we're staying in a static caravan site in <a href="https://www.broughtonfarmcaravanpark.co.uk/">Broughton</a>, which is near Llangenith village in Gower. The weather looks hot, so I'm looking forward to lots of beach days. We're packing bikes, surf boards and a stand-up paddle board that I've borrowed.</p>
<h2>Beaches in Swansea and Gower</h2>
<p>I found out recently that Swansea has about 30 beaches. I've been to lots of these, but equally I haven't heard of some of them. I'd love to visit every single one. This week we'll be very close to the last 6 or 7 on the list, hopefully we'll tick a few off.</p>
<ul>
<li>Swansea Bay</li>
<li>Knab Rock</li>
<li>Bracelet Bay</li>
<li>Limeslade Bay</li>
<li>Rotherslade Bay</li>
<li>Langland Bay</li>
<li>Caswell Bay</li>
<li>Brandy Cove</li>
<li>Pwll Du Bay</li>
<li>Three Cliffs Bay</li>
<li>Nicholaston Burrows</li>
<li>Oxwich Bay</li>
<li>Pennard Burrows</li>
<li>Pobbles Bay</li>
<li>Port Eynon Bay</li>
<li>The Sands - Slade</li>
<li>The cove - Horton</li>
<li>Salt House Mere</li>
<li>Tor Bay</li>
<li>Overton Mere</li>
<li>Mewslade Bay</li>
<li>Butterslade</li>
<li>Fall Bay</li>
<li>Ramsgrove</li>
<li>Rhossili Bay</li>
<li>Llangenith</li>
<li>Burry Holms</li>
<li>Blue Pool Bay</li>
<li>Broughton Bay</li>
<li>Whiteford Sands</li>
<li>Llanrhidian Sands</li>
</ul>
<p>I used this <a href="https://www.gowerholidays.com/attractions-activities-in-gower-swansea/beaches/">Gower Holidays website</a> to populate the list.</p>
Weeknotes – series 06 episode 042022-07-30T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-04/<p><img src="https://www.benjystanton.co.uk/images/paddle-boards.jpg" alt="Three paddle boards on the ground, next to 2 black and yellow bollards. Black railings edge the path next to the sea. One the other side of the bay, there are hills and buildings." /></p>
<h2>Meeting the team</h2>
<p>This week, I met some more of the team I’ll be working with. We had a few one to one chats, and our delivery manager also ran a good “ways of working” session with the team.</p>
<p>One exercise asked everyone to think about what the worst team in the world might look like. It was a good way to recognise bad practice, and to hopefully do the opposite.</p>
<p>Some of us have started to share our <a href="https://www.benjystanton.co.uk/blog/a-user-manual-for-me-version-3/">Manuals of Me</a>, so I took it as an opportunity to update mine.</p>
<h2>Design community</h2>
<p>We had our fortnightly design community of practice. This includes our content designers, interaction designers, service designers and some of the user centred academy members.</p>
<p>I hosted a retrospective, looking back at the last 3 months of the community, and we came up with some actions to help strengthen the community:</p>
<ul>
<li>Create a slide deck containing intros to everyone in the community</li>
<li>Gather some notes around the different meetings and Slack channels</li>
<li>Agreed to share more work, problems and tips via Slack</li>
</ul>
<h2>Design leadership for introverts</h2>
<p>Someone in the wider design community shared a link to this great podcast <a href="https://open.spotify.com/episode/6XZcSnNG8YvbnzQtaN7PqW">design leadership for introverts with Tim Yeo</a>.</p>
<p>I really enjoyed listening to Tim’s thoughts about being introverted. He shared lots tips about being a design leader and an introvert, in a world where extroversion is often seen as the ideal or default:</p>
<ul>
<li>Learn to schedule in breaks and time to focus</li>
<li>Prepare for meetings and workshops in advance – plan what you’re going to say and practice saying things out loud to give yourself confidence</li>
<li>Preparation enables you to be present and to listen well</li>
<li>Don’t wait until you think you are 100% right before speaking up, say the thing, and use feedback to improve ideas together</li>
<li>Be yourself, everyone has a unique perspective to bring</li>
</ul>
<h2>Design portfolios and tools</h2>
<p>I had a chat with some of the user centred academy members who were interested in interaction design. We talked about how to build a network, and how to create a portfolio:</p>
<ul>
<li>Use social media like Twitter and LinkedIn</li>
<li>Play around with code on <a href="https://github.com/">Github</a> and <a href="https://codepen.io/">CodePen</a></li>
<li>Start a personal blog to practice writing and html/css</li>
<li>Create case studies in slide deck format</li>
</ul>
<p>It also spurred me on to update my blog post about <a href="https://www.benjystanton.co.uk/blog/my-interaction-design-tools-version-3/">interaction design tools</a>.</p>
<h2>Paddle boarding around Mumbles</h2>
<p>I went <a href="https://twitter.com/benjystanton/status/1552932291458076679">paddle boarding at high tide</a> with some friends this week. We went around the headland at Mumbles, over to the lighthouse island. It really was beautiful – Mumbles at high tide is one of my favourite places, but I’ve never really been in the water there to look at it from the opposite side. Definitely one of Swansea’s best features.</p>
My interaction design tools, version 32022-07-27T00:00:00Zhttps://www.benjystanton.co.uk/blog/my-interaction-design-tools-version-3/<p>This blog post explores the tools that I use for interaction design. It's an update on a post that I wrote in <a href="https://www.benjystanton.co.uk/blog/interaction-design-tools">2018</a> and <a href="https://www.benjystanton.co.uk/blog/web-design-tools">2013</a>.</p>
<p>Check out my <a href="https://www.benjystanton.co.uk/uses">uses</a> page for an up-to-date list of hardware and software that I use for interaction design.</p>
<h2>Devices</h2>
<p>I prefer to work on Apple devices, I'm currently using a 14 inch 2021 Macbook Pro and an iPhone 8. It's useful to have access to other devices (like a Windows laptop or an Android phone) so you can test your designs on different technology.</p>
<h2>Pen and paper</h2>
<p>Pen and paper is always useful, but since lockdown and remote working, I don't tend to use sticky notes or worry too much about what kind of notebook I have on me.</p>
<p>A while ago, I asked people on Twitter to recommend their <a href="https://www.benjystanton.co.uk/blog/pens-for-ux-sketching-and-note-taking/">favorite pens</a>. So, I've started using Paper Mate Flairs, when I can be bothered to order some.</p>
<p>I also think Pental Sign Pens are great. But my kids steal them, so I often end up with bog standard ball point pens.</p>
<h2><a href="https://www.google.com/drive/">Google Drive</a></h2>
<p>Google Drive and the Docs, Slides and Sheets tools have had some nice improvements recently! A few things seem to be "inspired" by <a href="https://www.notion.so/">Notion</a>, like the ability to insert <a href="https://support.google.com/docs/answer/10710316">chips</a>. Chips are special links that refer to things in your Google Workplace, like other documents, meetings or people.</p>
<p>It also allows you to write in <a href="https://support.google.com/docs/answer/12014036">Markdown</a> now which I really like, although I would prefer it if it allowed me to export in Markdown too.</p>
<p>It's still so far ahead of alternatives like Office 365 and Sharepoint, in terms of usability and allowing people to edit the same document at the same time.</p>
<h2><a href="https://code.visualstudio.com/">Visual Studio Code</a></h2>
<p>Visual Studio Code is a code editor from Microsoft.</p>
<p>Since the last time I blogged about this (back in 2018) I've switched from Atom to Visual Studio Code for writing code. Visual Studio Code feels very similar to Atom, but it also has a nice built-in Terminal and GitHub integrations.</p>
<h2><a href="https://www.11ty.dev/">Eleventy</a></h2>
<p>I use Eleventy as a base for my personal projects. It’s a static site generator (SSG), that's similar in many ways, to the <a href="https://govuk-prototype-kit.herokuapp.com/docs">GOV.UK prototyping kit</a>.</p>
<p>I find that using both tools (Eleventy for personal stuff, and the GOV.UK prototyping kit for work) helps me get better at understanding the technical processes and models behind building quick prototypes and basic websites.</p>
<h2><a href="https://www.netlify.com/">Netlify</a></h2>
<p>For personal projects, and this blog, I prefer to use Netlify for hosting (it's similar to <a href="https://www.heroku.com/">Heroku</a>). It watches my <a href="https://github.com/benjystanton/benjystanton.github.io">GitHub repo</a>, and automatically rebuilds my site when I merge things.</p>
<p>It has some great features, like being able to see a web preview of any changes I deploy, before they are merged into the main branch. The free plan is also good enough for my needs.</p>
<h2><a href="https://developers.google.com/web/tools/chrome-devtools/">Google Chrome and Developer Tools</a></h2>
<p>Chrome is an essential tool for inspecting and iterating on designs in the browser. I like to install other browsers like Safari and Firefox too. Installing and testing designs across different browsers is good practice.</p>
<p>Here are a few useful plugins too:</p>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh">WAVE</a> for checking accessibility</li>
<li><a href="https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd">axe DevTools</a> for checking accessibility</li>
<li><a href="https://chrome.google.com/webstore/detail/validity/bbicmjjbohdfglopkidebfccilipgeif?hl=en-GB">Validity</a> for checking code is valid</li>
<li><a href="https://chrome.google.com/webstore/detail/45to75/efmppndinjbljeellfdkpghgblenbcdd">45to75</a> for checking line length</li>
<li><a href="https://chrome.google.com/webstore/detail/toggle-javascript/cidlcjdalomndpeagkjpnefhljffbnlo">Toggle JavaScript</a> quickly turn off JS to check how sites perform without it</li>
<li><a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm">Web Developer</a> a collection of tools for web development</li>
</ul>
<h2><a href="https://desktop.github.com/">GitHub Desktop</a></h2>
<p>I feel slightly guilty for using this tool (instead of using Terminal).</p>
<p>But, features are being added are more quickly than my Terminal knowledge improves, so even though it has a reputation for being less powerful than using GitHub via the Terminal (which is true) it still does everything I need, and more.</p>
<h2><a href="https://support.apple.com/en-gb/guide/terminal/welcome/mac">Terminal</a></h2>
<p>Even though I don't often use Terminal for GitHub, I do use it to run Eleventy and the GOV.UK prototyping kit locally. This lets me build and test things on my local devices. Visual Studio Code has a great Terminal built into it.</p>
<h2><a href="https://trello.com/">Trello</a></h2>
<p>Trello is my tool of choice for managing sprints and kanban processes. It's especially handy if you learn the <a href="https://trello.com/shortcuts">keyboard shortcuts</a> and <a href="https://help.trello.com/article/821-using-markdown-in-trello">Markdown formatting</a>.</p>
<h2><a href="https://ia.net/writer">iA Writer</a></h2>
<p>iA Writer is a great stripped back text editor. I use it less these days, as Google Drive has become my starting point for most documents. But I still love iA Writer's speed and simplicity. It uses Markdown formatting, which is a nice gateway to learning HTML.</p>
<h2><a href="https://www.figma.com/">Figma</a> and <a href="https://www.sketch.com/">Sketch</a></h2>
<p>Tools like Figma and Sketch allow for the creation of lo and hi-fidelity designs, prototypes and assets. Despite being hugely powerful and flexible, often I still prefer to design and prototype in code, especially once designs reach a certain level of maturity.</p>
<h2><a href="https://miro.com/">Miro</a></h2>
<p>Miro (and similar tools) have filled the whiteboard gap left by the pandemic, and allowed for groups to colloborate remotely using visual notes and diagrams. It's perfect for creating user journey maps and group affinity sorting.</p>
<p>It's also possible to do fairly complex design layouts (like Figma and Sketch), but Miro isn't designed to fit into a production workflow, so it's difficult to export assets ready for the web.</p>
<h2><a href="https://codepen.io/">CodePen</a></h2>
<p>CodePen gives me a sandbox for quick code projects. It makes it really easy to start writing HTML and CSS and getting a live preview in the browser. When I want to do a quick code experiment, this is a really good option.</p>
A user manual for me, version 32022-07-25T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-user-manual-for-me-version-3/<p>This is version 3 of my user manual. If you're unfamilier with the concept, check out this <a href="https://cassierobinson.medium.com/a-user-manual-for-me-d3a851fbc694">blog post on user manuals by Cassie Robinson</a>.</p>
<img class="image-avatar" src="https://www.benjystanton.co.uk/images/benjy-stanton-2022.jpg" width="48" height="48" alt="Close up of Benjy, he’s smiling at the camera" />
<h2>Conditions I like to work in</h2>
<ul>
<li>Remote work helps me to drop my kids off at school at a sensible time, it also helps me to recharge between meetings</li>
<li>I like to work in open, inclusive, multi-disciplinary teams</li>
<li>I prefer structured workshops over meetings with no agenda</li>
</ul>
<h2>The times/hours I like to work</h2>
<ul>
<li>I drop my kids off at school at 8:45am, so I'm usually back and ready to start work by 9am(ish)</li>
<li>I usually work 9am to 5pm, Monday to Friday</li>
<li>Some days I do school pick-up, so I can be unavailable around 3pm</li>
<li>I tend to have more energy in the mornings</li>
</ul>
<h2>The best ways to communicate with me</h2>
<ul>
<li>I’m happy to use a mix of communication methods (face-to-face, email, Slack)</li>
<li>I prefer teams who use asynchronous tools (like Slack) for most things</li>
<li>You’ll get the best answers from me if I’ve got time to prepare</li>
<li>I'm more likely to remember something if it's written down</li>
</ul>
<h2>The ways I like to receive feedback</h2>
<ul>
<li>I like demoing my work and presenting at show and tells</li>
<li>I need time to prepare for feedback sessions</li>
<li>And time to process them afterwards</li>
</ul>
<h2>Things I need</h2>
<ul>
<li>To observe user research</li>
<li>Good digital tools like Trello, Slack and Google Drive</li>
<li>Protected time to focus on complex tasks</li>
<li>A team where I can focus on accessibility and inclusive design</li>
</ul>
<h2>Things I struggle with</h2>
<ul>
<li>I’m an introvert, which means too many meetings can drain me</li>
<li>Long email threads with lots of contributors</li>
<li>Acronyms and jargon</li>
<li>Long days of back-to-back meetings</li>
</ul>
<h2>Things I love</h2>
<ul>
<li>My family</li>
<li>Music</li>
<li>The beach</li>
</ul>
<h2>Other things to know about me</h2>
<ul>
<li>I have 3 school aged kids (and a puppy)</li>
<li>I value <a href="https://capwatkins.com/blog/the-boring-designer">boring design</a> over shiny things</li>
<li>I spend too much time on Twitter</li>
</ul>
Weeknotes – series 06 episode 032022-07-23T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-03/<h2>Extreme heat and end of school</h2>
<p>This was the week of the extreme heat, and even though Swansea had cooler temperatures than the highs of 40 degrees seen in England, it was still <a href="https://www.bbc.co.uk/news/uk-wales-62154870">uncomfortably hot</a>. Thankfully a few meetings were postponed until next week, reducing the pressure on people.</p>
<p>I also took a half day on wednesday to see my eldest daughter’s leaving assembly. She’s moving to secondary school next year, so we unearthed some photos of her first day in primary school. Like this one…</p>
<p><img src="https://www.benjystanton.co.uk/images/girl-painting-nursery.jpg" alt="A young girl stands proudly next to an easel with a messy painting on it" /></p>
<p>I think this photo has the potential to become a meme. There’s something about her face that is both condescending towards me (the person who took the photo), and pride in her own painting skills. Plus, there’s a clear section on the easel to add custom messages. Where does one submit new memes?</p>
<h2>Helping with the software academies</h2>
<p>I kicked off the week by joining an intro to user centred design course/workshop, tailored for the Made Tech software academy. I helped a little by answering questions from the delegates, but I also really enjoyed listening along to the training. It was a good refresher course for me.</p>
<p>It prompted me to think about what makes a good project kick-off. Or, what things should I always remember to find out, before I dive head first into designing the details...</p>
<ul>
<li>Who’s on the team?</li>
<li>Who are the users?</li>
<li>What different types of users are there?</li>
<li>What are their needs?</li>
<li>What user research has been done?</li>
<li>What <a href="https://www.gov.uk/service-manual/agile-delivery/how-the-discovery-phase-works#define-the-problem">problems</a> are we trying to solve?</li>
<li>What outcomes do we want?</li>
</ul>
<p>It also reminded me to check out the great <a href="https://wow.how/">Ways of Working</a> website by <a href="https://public.digital/people/lawrence-kitson">Lawrence Kitson</a>, <a href="https://www.jamiearnold.com/">Jamie Arnold</a> and <a href="https://usethehumanvoice.com/">Giles Turnbull</a>.</p>
<h2>Mobile app design</h2>
<p>When I start my first assignment next month, I’m going to be joining a mobile app team that publishes two native apps, one for iOS and one for Android. I’m doing a bit of research into how this differs from the kind of interaction design that I’m used to, and I’ll try and share useful resources as I go on this <a href="https://twitter.com/benjystanton/status/1547144071898169344">mobile app design twitter thread</a>.</p>
<p>I think the barrier to entry (for designers contributing code to mobile app environments) is higher than with web design, so I’m preparing myself to spend more time using design software like Sketch, Figma and Zeplin.</p>
<h2>1-to-1s</h2>
<p>I feel like my 1-to-1s with my manager are going well, and they’re helping to keep me focused and motivated.</p>
<p>At Made Tech they use a web app called <a href="https://www.small-improvements.com/">Small Improvements</a> to manage 1-to-1s (including appointments, notes, actions), objectives and feedback. And it makes the whole process a lot less like a chore than it usually feels.</p>
Weeknotes – series 06 episode 022022-07-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-02/<h2>Onboarding</h2>
<p>It’s the end of my second week, and even though I’m out of the official onboarding week, there’s been plenty of things to set up. Luckily, it's mostly felt very easy and straightforward. Everyone has been very supportive. The Ops team are really organised, and seem to respond to all questions within minutes.</p>
<p>Because I’m new, I was treated to lunch on Friday along with other new starters and a random selection of people from my region (South West England and Wales). There are quite a few people from South Wales here, so I'm looking forward to some in-person social events coming up.</p>
<h2>The Chalet</h2>
<p>Now that I’m done officially with onboarding, I’ve been moved into the chalet (also known as the bench). This is where people work when they aren’t assigned to a client project. I like that this is explicit and organised. We have stand-ups and Trello boards to use if we want.</p>
<p>It seems that people are encouraged to do training, help with their community of practice, support bids for new work or even take time off when in the chalet. Although I’m also noticing that some people can find it unsettling to be off client work for long periods.</p>
<p>I’m going to spend the time chatting to people I know around the organisation, getting prepped for my first project, and helping out with the community of practice and <a href="https://www.madetech.com/careers/academy/">academy</a>.</p>
<p>I need to think about setting some objectives for my first 90 days, in order to help me pass my 3 month probation. One thing I really like about Made Tech so far is the balance between having just enough process and assurance that I feel like I have some direction, paired with the feeling of a tech start-up that is self organising and able to move quickly.</p>
<h2>Design tools and kit</h2>
<p>I’ve spent a couple of days this week getting my design tools setup.</p>
<p>So far I've installed…</p>
<ul>
<li><a href="https://govuk-prototype-kit.herokuapp.com/docs">GOV.UK Prototype Kit</a></li>
<li>Figma</li>
<li>Visual Studio Code</li>
<li>GitHub Desktop</li>
<li>Heroku</li>
<li>Xcode</li>
</ul>
<p>I've been working my way through the <a href="https://govuk-prototype-kit.herokuapp.com/docs/tutorials-and-examples">GOV.UK Prototype Kit Tutorials and templates</a> which are all really well written and easy to follow. Hopefully I can find some time next week to do the advanced usage section.</p>
<p>I’ve also used some of my new starter tech budget to buy a keyboard and wireless headphones. Luckily I’ve got a lot of home working kit already, but having some wireless headphones should encourage me to use my standing desk more often (and to move to cooler parts of the house when it’s hot).</p>
Weeknotes – series 06 episode 012022-07-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-06-episode-01/<h2>Onboarding</h2>
<p>My first week at Made Tech is complete… and so far, so good. Most of the week I’ve been in remote onboarding sessions. There were about 25 people joining about 15 sessions.</p>
<p>The onboarding week was really well organised, easily the best I’ve ever done. Overall I preferred the shorter sessions that gave concise intros to the various teams, like finance, scheduling, security, agile etc.</p>
<p>Some of the sessions were a bit long though, and on balance I would’ve preferred some more time in between to set up my laptop, chat to people and find my bearings. Although for many people, this wasn’t their very first week so I guess you have to balance it out somehow.</p>
<h2>Culture</h2>
<p>The Made Tech culture is coming through quite strongly. They are self-organising, hands-on, digital-by-default and high energy. I’m not the most high energy person (to say the least), but that’s not to say I don’t like being around people like this. Like some introverts, I think I like to be high energy for some of the time, then go and focus for the rest of the day.</p>
<p>I haven’t spent much time with the user-centred design team yet, so I’m interested to see how the culture translates there. I know a few people in that team from Twitter and gov design meet-ups, so I’m looking forward to working with and learning from them.</p>
<h2>New (old) role</h2>
<p>I’m joining as a lead designer, which is different from the last role I had at UKHSA, but something I’ve got plenty of experience doing. I think I feel more comfortable in hands-on roles, so I’m looking forward to getting stuck into agile delivery again. But, I hope I’ll be able to apply lots of the inclusive design knowledge I’ve picked up from UKHSA to my work here.</p>
<h2>Tools</h2>
<p>I’m much more at ease with the tooling setup here, I’ve been issued with a Macbook Pro, and the whole org is fully embedded into Google Workspace and Slack. The operations teams seem very well organised too, and it seems incredibly easy to get things installed or added to your account etc.</p>
<p>Next week I’m going to get Figma, Github and the GOV.UK Prototype Kit setup.</p>
<h2>The handbook</h2>
<p>Made Tech publish lots of their policies and guides, in the open. It’s one of the things that drew me to the organisation. Not only are some of their benefits great, but publishing it this way was a good sign for me about their culture. I recommend having a look – <a href="https://github.com/madetech/handbook">Made Tech handbook</a>.</p>
<h2>Ending the week feeling motivated</h2>
<p>Overall I feel like I’m ending the week feeling very motivated and excited to come back next week to finish setting up my tools, chatting to more people, and getting ready for my first assignment.</p>
<p>I think I have a few weeks on the bench (they call it “the chalet” here – not sure how far they take this metaphor yet) and this will be some welcome time to get settled in before I start my first assignment.</p>
Things to do in Swansea2022-05-25T00:00:00Zhttps://www.benjystanton.co.uk/blog/things-to-do-in-swansea/<p>My non-exhaustive list of nice things to do in Swansea. Mostly places that serve pale ale. And beaches. Roughly East to West.</p>
<h2>Marina and SA1 waterfront</h2>
<p><img src="https://www.benjystanton.co.uk/images/beer-riff.jpg" alt="2 Beer Riff pint glasses on a table" /></p>
<ul>
<li><a href="https://beerriffbrewing.com/pages/taproom-1">Beer Riff</a>. Independent brewery and taproom. Relaxed. Family and doggy friendly in the day. Nice outside seating with views of the marina. Serves pizza and some snacks. Essential visit!</li>
<li><a href="https://www.instagram.com/swanseaobservatory/">The Observatory</a>. Unique, hipster-ish bar with good beer, brunch and amazing views over Swansea bay.</li>
</ul>
<h2>Wind Street</h2>
<ul>
<li><a href="https://foundersandco.uk/">Founders & Co</a>. Large food hall with long benches. Lots of different street food style options. Also serves Tiny Rebel beer.</li>
<li><a href="https://en-gb.facebook.com/FlickeringLight/">Flickering Light</a>. Late night bar playing hip-hop and R&B, I'm probably too old to go there. Less Wind Street-y than most of Wind Street. Which is why it’s good.</li>
</ul>
<h2>City centre</h2>
<ul>
<li><a href="http://www.swanseaindoormarket.co.uk/">Swansea Market</a>. Indoor market with bakeries, butchers and delis. It’s the law to try some cockles and laverbread. Buy from a few different places, then sit in seating area in the middle. <a href="http://www.swanseaindoormarket.co.uk/market-stalls/places-to-eat/storm-in-a-teacup/">Storm in a Teacup</a> does great coffee.</li>
<li><a href="https://www.kardomahcafe.com/">Kardomah</a>. Unique cafe that feels like it hasn't changed in a hundred years. Great service and food. Definitely doesn't serve avocado on toast. Been used as a set for TV programmes like Channel 4’s <a href="https://en.wikipedia.org/wiki/The_End_of_the_F***ing_World">The End of the F***ing World</a>.</li>
<li><a href="https://www.existskatestore.co.uk/">Exist Skate Store</a>. Independent skate shop with boards, trainers and T-shirts. Shares its space with Hobos, an excellent vintage clothes shop.</li>
</ul>
<h2>Bryn-y-mor and Uplands</h2>
<ul>
<li><a href="https://www.littlevalleybakery.com/">Little Valley Bakery</a>. Artisan sourdough, pasties and cakes. Has another shop near Three Cliffs Bay.</li>
<li><a href="https://hiatus-store.com/">Hiatus</a>. Surfing and adventure lifestyle shop. If I was rich I would buy everything.</li>
<li><a href="https://www.hoogah-swansea.com/">Hoogah</a>. Brunch style food and drink cafe/bar, sourced locally. Nice relaxed vibe.</li>
<li><a href="https://www.facebook.com/NoahsYard">Noah’s Yard</a>. Swansea’s original hipster bar. Good beer and music. Slowly expanding to take over every building in Uplands.</li>
<li><a href="https://craftysmugglercoffee.co.uk/">Crafty Smuggler Coffee</a>. Good little coffee shop in Uplands. Also on Western Street which is near Bryn-y-mor area.</li>
</ul>
<h2>Sketty</h2>
<ul>
<li><a href="https://www.squarepeg.org.uk/">Square Peg</a>. Best coffee in Swansea, as rated by me. Great brunch too.</li>
</ul>
<h2>Mumbles</h2>
<figure>
<img src="https://www.benjystanton.co.uk/images/bracelet-bay.jpg" alt="A rocky bay at high tide. 3 mounds of headland stretch into the sea. The last has a white lighthouse on top. The sky is blue and clear." />
<figcaption>
View from The Lighthouse restaurant at Bracelet Bay, looking towards Mumbles Lighthouse.
</figcaption>
</figure>
<!-- ![A rocky bay at high tide. 3 mounds of headland stretch into the sea. The last has a white lighthouse on top. The sky is blue and clear.](/images/bracelet-bay.jpg) -->
<ul>
<li><a href="https://thelounges.co.uk/croeso/">Croeso Lounge</a> Relaxed brunch and burgers type restaurant. Family and doggy friendly. Great views of Swansea bay.</li>
<li><a href="https://www.joes-icecream.com/">Joes Ice Cream</a>. Swansea’s most famous ice cream parlour. Unique style of ice cream.</li>
<li><a href="https://www.facebook.com/tycwrwmumbles/">Ty Cwrw</a>. Little pub serving great craft beer. Nice seating on the green opposite.</li>
<li><a href="https://www.swansea.gov.uk/braceletbay">Bracelet Bay</a>. Small cove behind mumbles pier. Walk the headland round to Langland.</li>
<li><a href="https://www.visitwales.com/attraction/beach/langland-bay-beach-1443779">Langland Bay</a>. Picturesque beach, but can get very busy. Good for surf and paddle boards. Range of options for food.</li>
<li><a href="https://www.enjoygower.com/caswell-bay">Caswell Bay</a>. Huge bay when the tide is out. Smaller surf than Langland, so better for beginners. Nice walks in the woods behind the car park.</li>
<li><a href="https://surfabilityukcic.org/">Surfability UK</a>. Provides surfing lessons at Caswell for people with additional needs due to disability, illness, injury or learning difficulties.</li>
</ul>
<h2>Gower</h2>
<ul>
<li><a href="https://www.nationaltrust.org.uk/rhosili-and-south-gower-coast/trails/rhosili-headland-walk">Worm's Head, Rhosili Bay</a>. Stunning cliffs that overlook Llangennith beach. Headland walk along the worm’s head is amazing, but pay attention to the tide. Gets more advanced the further you walk. But quite accessible to begin with.</li>
<li><a href="https://kingsheadgower.co.uk/">King's Head</a>. Relaxed pub with good food. Sit outside the front and enjoy the sunset.</li>
<li><a href="https://www.visitswanseabay.com/listings/llangennith-beach/">Llangennith Beach</a>. Huge beach with good surf. Camp site and cafe nearby.</li>
<li><a href="https://www.thebeachguide.co.uk/south-wales/glamorgan/blue-pool-bay.htm">Blue Pool Bay</a>. Remote, secluded beach. With large rock pool that you can jump into from surrounding rocks.</li>
</ul>
<h2>More beaches</h2>
<p>I’ve blogged separately about <a href="https://www.benjystanton.co.uk/blog/visiting-all-the-beaches-in-swansea-and-gower/">all the beaches in Swansea and Gower</a>.</p>
My first 3 months in the inclusive design team2021-10-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/my-first-3-months-in-the-inclusive-design-team/<p>I've been at test and trace for 3 whole months! As I've got a day off without too much to do, I've decided to put some thoughts down about how things are going.</p>
<h2>Rebooting the inclusive design team</h2>
<p>This week has been a tough one. Lots of new people are joining the team. I've been trying, not very successfully it feels like, to welcome them in and help them get started. Whilst at the same time trying to fit in my day-to-day job.</p>
<p>The good news is that we now have an excellent team of user-centred designers. They will focus on designing and delivering inclusive and accessible services. Supported by an equally excellent team of product and delivery roles.</p>
<p>Our team is made up of a mix of...</p>
<ul>
<li>user researchers</li>
<li>content designers</li>
<li>service designers</li>
<li>accessibility specialists</li>
<li>a business analyst</li>
<li>a delivery manager</li>
<li>a product manager</li>
</ul>
<p>I'll look back on this recruitment as one the key things we've achieved in the last 3 months. Of course with lots of support from the wider team.</p>
<p>Now we've got some work to do.</p>
<h2>What's it like being a head of design?</h2>
<p>This is my first "head of" role. It's similar to when I was a lead interaction designer at Office for National Statistics. And the responsibility of this new role, together with the red tape of the civil service can feel overwhelming.</p>
<p>The good news is, I'm supported by a lot of great people, including the...</p>
<ul>
<li>inclusive design team</li>
<li>other heads of design</li>
<li>wider user-centred design community</li>
<li>equality and inclusion group</li>
</ul>
<p>A big part of adjusting to the new role is about adjusting to the pace. There are lots of meetings. Lots of emails. Days are full of conversations about complex services and decisions.</p>
<p>And, I have to be able to <a href="https://www.benjystanton.co.uk/blog/how-to-lead-user-centred-design/">tell a good story about the team</a>. So that other teams want to work with us, and so that the team will understand the scope of what they need to do.</p>
<h2>Software and tools</h2>
<p>I'm getting better at Microsoft stuff too. I don't use a Mac at all in work now. I've decided to go all-in and avoid the stress of switching between the two operating systems all day long. Now that I'm used to it, it's fine.</p>
<p>To be honest I miss Notion, Google Drive and iA Writer. So, on reflection, it's more about the ecosystem of tools, rather than the operating system.</p>
<p>A big part of the job is about staying on top of conversations. Which means Outlook is my <s>friend</s> Work Proximity Associate. I'm often in my inbox or checking my calendar. Making sure I'm going to the right meetings and blocking time out to focus, eat or pick up my kids.</p>
<p>It can be tiring. But, as I mentioned earlier, it's partly about adjusting to the pace, and I think my body is slowly catching up.</p>
<h2>Strategy, Key Performance Indicator (KPIs) and setting standards</h2>
<p>Aside from recruiting a lot of great people into the inclusive design team, another thing I can look back on and recognise some improvement in, is my ability to think more strategically about inclusive design.</p>
<p>The team have been working hard on a set of measures for inclusive design and accessibility. We will use these to help embed best practice and behaviours across the different teams. The result should be that services become more inclusive and accessible. And so that our team can recognise which areas the organisation needs more support with.</p>
<p>These will then be collated, and combined with other indicators. Giving our team a set of KPIs that we can then use to measure our own success (or lack of). Then we'll report this to the equality and inclusion group.</p>
<p>Related to this, I'm working on a strategy for the inclusive design team. Having a simple strategy, in plain language, is helping me to connect the dots between 'telling a good story' and how we measure performance.</p>
<p>Luckily in this new job I get to work for Sophie Dennis and she's helping me get better at this stuff. I keep referring back to Sophie's talk <a href="http://2017.uxbristol.org.uk/2017/07/14/lets-talk-about-strategy-what-it-is-why-it-matters-and-how-to-do-it-well/">Let’s Talk About Strategy</a>.</p>
<p>Sophie's questions, captured in the slides linked in the last paragraph, help me to think about what a good strategy should tell us...</p>
<blockquote>
<ul>
<li>Where are we going?</li>
<li>What will be different when we get there?</li>
<li>Where are we now?</li>
<li>How are we going to get from here to there?</li>
<li>What might stop us and how will we overcome that?</li>
</ul>
</blockquote>
Joining NHS test and trace2021-07-24T00:00:00Zhttps://www.benjystanton.co.uk/blog/joining-nhs-test-and-trace/<p>I recently joined the NHS test and trace team and I wanted to get a quick blog post out to mark the occasion, before too much time passed.</p>
<h2>Head of inclusive design</h2>
<p>My new role is head of inclusive design (I feel very lucky to be able to say that). The inclusive design team are responsible for helping test and trace to meet the needs of excluded groups.</p>
<p>We’re a multi-disciplinary team that are responsible for a range of things including…</p>
<ul>
<li>helping with the design and delivery of services</li>
<li>setting standards for accessibility and inclusive design</li>
<li>helping teams across test and trace to work in more inclusive and accessible ways</li>
</ul>
<h2>Heads of user-centred design</h2>
<p>I also work closely with the other "heads of" roles, including…</p>
<ul>
<li>the heads of profession – the people who lead the design, design-ops, user research and content design functions</li>
<li>the heads of UX (user experience) – the people who lead the user-centred teams on specific services</li>
</ul>
<h2>Working across different orgs</h2>
<p>The work is spread across different organisations. I work for the department of health and social care (DHSC). But NHS digital and Public Health England and other orgs are involved too.</p>
<p>Being spread out has its challenges, but it also means that there are some great teams involved with doing this work. I feel like I’m discovering new people every day, so if you’re reading this and your working on test and trace (or anything similar) feel free to get in touch.</p>
<h2>A step up</h2>
<p>I feel honoured to be able to work on something like this, alongside some user-centred people that I really look up to.</p>
<p>I’m hoping some of their experience rubs off, as this role definitely feels like a step up for me.</p>
<h2>Weeknotes?</h2>
<p>I can’t promise week notes but I hope to be able to share more about what I’m working on, as I go.</p>
A user manual for me, version 22021-06-25T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-user-manual-for-me-version-2/<p>View my latest <a href="https://www.benjystanton.co.uk/blog/a-user-manual-for-me-version-3/">user manual</a>.</p>
<p>It's been over 2 years since I last updated <a href="https://www.benjystanton.co.uk/blog/a-user-manual-for-me/">my old user manual for me</a>. If you're unfamilier with the concept, check out this <a href="https://cassierobinson.medium.com/a-user-manual-for-me-d3a851fbc694">blog post on user manuals by Cassie Robinson</a>.</p>
<h2>Conditions I like to work in</h2>
<ul>
<li>Remote work helps me to drop my kids off at school at a sensible time, it also helps me to recharge between meetings</li>
<li>I like to work in open, inclusive, multi-disciplinary teams</li>
<li>I prefer structured workshops over meetings with no agenda</li>
</ul>
<h2>The times/hours I like to work</h2>
<ul>
<li>I drop my kids off at school at 8:45am, so I'm usually back and ready to start work by 9am(ish)</li>
<li>For this reason, I usually work 9am to 5pm. Although some days I do school pick-up too, which means I can be unavailable for 30 mins around 3pm.</li>
<li>Staggered school start and end times (due to COVID) are making this less predictable</li>
<li>I prefer to work in the morning, so during school holidays you'll catch me working 8am to 4pm</li>
</ul>
<h2>The best ways to communicate with me</h2>
<ul>
<li>I’m happy to use a mix of communication methods (face-to-face, email, Slack)</li>
<li>You’ll get the best answers from me if I’ve got time to prepare</li>
<li>I'm more likely to remember something if it's written down</li>
</ul>
<h2>The ways I like to receive feedback</h2>
<ul>
<li>I like demoing my work and presenting at show and tells</li>
<li>I need time to prepare for feedback sessions</li>
<li>And time to process them afterwards</li>
</ul>
<h2>Things I need</h2>
<ul>
<li>To observe user research</li>
<li>Good digital tools like Trello, Slack and Google Drive</li>
<li>Protected time to focus on complex tasks</li>
</ul>
<h2>Things I struggle with</h2>
<ul>
<li>I’m an introvert, which means too many meetings can drain me</li>
<li>Long email threads with lots of contributors</li>
<li>Acronyms and jargon</li>
</ul>
<h2>Things I love</h2>
<ul>
<li>My family</li>
<li>Music</li>
<li>The beach</li>
</ul>
<h2>Other things to know about me</h2>
<ul>
<li>I have 3 young kids</li>
<li>I value <a href="https://capwatkins.com/blog/the-boring-designer">boring design</a> over shiny things</li>
<li>I spend too much time on Twitter</li>
</ul>
Adding some basic CSS2021-04-11T00:00:00Zhttps://www.benjystanton.co.uk/blog/adding-some-basic-css/<p>I've had an email from Google Search Console telling me that it's detected some mobile usability issues on the site.</p>
<blockquote>
<p>The following issues were found on your site:</p>
<ul>
<li>Content wider than screen</li>
<li>Text too small to read</li>
<li>Clickable elements too close together</li>
</ul>
</blockquote>
<p>So, I've added some very basic CSS for now, just to keep Google off my back.</p>
<p>I've increased the <code>font-size</code> and <code>line-height</code>, added some styles to stop images from being wider than the screen width, and included a basic <code>sans-serif</code> font stack.</p>
<p>I'm not sure this'll fix the last point (about clickable elements being too close together), we'll see.</p>
<p>I feel a bit bad for doing what Google says, instead of listening to, you know, users. But in this instance I agree with the things it's asking for. Also I don't want to harm my site's search engine ranking, as I've put so much effort into keeping the content structure the same so far.</p>
<h2>CSS</h2>
<pre><code class="language-CSS">body {
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1em;
line-height: 1.5;
overflow-wrap: break-word;
word-wrap: break-word;
}
code {
font-size: 1.2em;
white-space : pre-wrap;
}
@media screen and (min-width: 660px) {
body {
font-size: 1.4em;
line-height: 1.65;
}
}
img {
height: auto;
width: 100%;
}
</code></pre>
<h2>Update</h2>
<p>Looks like it was actually the <code>code</code> elements that were causing most of the issues. So I've added a bunch of wrapping styles to make sure the long lines don't break out of the viewport width.</p>
<p>And I've increased the font size of <code>code</code> elements, as the browser default was only 14px, which is too small.</p>
<h2>Update 17 April 2021</h2>
<p>Whoop! The basic CSS that I added fixed the issues. It took Google about 5 days to validate them. I think these styles are a good example of basic CSS that is better (for usability and accessibility) than the default browser styles…</p>
<ul>
<li>Bigger <code>font-size</code></li>
<li>More generous <code>line-height</code></li>
<li>Prevent horizontal scrolling</li>
</ul>
Switching to Eleventy, but still naked2021-04-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/switching-to-eleventy-but-still-naked/<p>Back in December I decided to move this blog from GitHub and Jekyll, to Netlify and Eleventy (11ty). It's been over 5 years since I've done anything this drastic, when I <a href="https://www.benjystanton.co.uk/blog/goodbye-wordpress/">moved away from WordPress</a>.</p>
<p>My plan this time, after switching to Eleventy, was to publish the site (naked, without any styling) and then slowly iterate on the design and learn about modern CSS techniques as I go.</p>
<p>I've been chipping away at it slowly and you can read more about my progress in this <a href="https://twitter.com/benjystanton/status/1337685688259645441">Twitter thread</a>, <a href="https://www.benjystanton.co.uk/blog/category/release-notes/">these posts</a> and on my <a href="https://github.com/benjystanton/benjystanton.github.io/projects/2">GitHub project board</a>.</p>
<p>So, I'm finally ready to publish my progress. If you're reading this, then you're reading content generated by Eleventy. Hopefully everything will be the same, apart from the lack of CSS.</p>
<p>If you spot any issues, please let me know via <a href="mailto:benjystanton@gmail.com">email</a> benjystanton@gmail.com.</p>
<p>Tomorrow is also <a href="https://css-naked-day.github.io/">CSS naked day</a>, which gave me the extra push I needed to get the redesign out there.</p>
Family friendly TV shows with LGBT characters2021-03-11T00:00:00Zhttps://www.benjystanton.co.uk/blog/family-friendly-tv-shows-with-lgbt-characters/<table>
<thead>
<tr>
<th>Name</th>
<th>Current streaming service (UK)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adventure Time</td>
<td>Prime (not included in subscription)</td>
</tr>
<tr>
<td>Arlo the Alligator Boy</td>
<td>Netflix</td>
</tr>
<tr>
<td>Clarence</td>
<td>Netflix</td>
</tr>
<tr>
<td>Danger & Eggs</td>
<td>Prime</td>
</tr>
<tr>
<td>Gravity Falls</td>
<td>Disney+</td>
</tr>
<tr>
<td>Julie and the Phantoms</td>
<td>Netflix</td>
</tr>
<tr>
<td>Kipo and the Age of Wonderbeasts</td>
<td>Netflix</td>
</tr>
<tr>
<td>She-Ra and the Princesses of Power</td>
<td>Netflix</td>
</tr>
<tr>
<td>Steven Universe</td>
<td>Netflix</td>
</tr>
</tbody>
</table>
<p>Thanks to <a href="https://mobile.twitter.com/delarge">Paul Burgess</a>, <a href="https://mobile.twitter.com/matthewbeta">Matthew Jackson</a>, <a href="https://mobile.twitter.com/_simeonsmith">Simeon Smith</a>, <a href="https://mobile.twitter.com/digidatajen">Jen</a> and <a href="https://mobile.twitter.com/shiggsatwork">steve higgs</a> for the recommendations.</p>
<p><a href="https://mobile.twitter.com/benjystanton/status/1367201010293301248">Link to original tweet asking for tips</a>.</p>
Redirect custom domain name from GitHub pages to Netlify2021-02-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/redirect-custom-domain-name-from-github-pages-to-netlify/<p>This was the worst part of moving my site so far. Fiddling with DNS settings reminded me of when I used to be a freelance web designer, and I would offer hosting services to clients.</p>
<p>Anyway, after flicking a few switches in somewhat random order, I'd got the sequence correct and the domain switched away from GitHub and over to Netlify pretty quickly. I may have muttered "hold onto your butts" under my breath.</p>
<h2>Netlify</h2>
<p>First I had to login to my domain name provider’s website and update the DNS settings for my domain (benjystanton.co.uk) to match the settings given by Netlify. <a href="https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/#configure-an-apex-domain">This page in the Netlify docs</a> helped me figure that out.</p>
<h2>GitHub Pages</h2>
<p>I also had to stop GitHub Pages from building my site and publishing it on my custom domain. This all felt a bit hacky, I had to switch the build to a new branch, then delete that branch. This <a href="https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/unpublishing-a-github-pages-site#unpublishing-a-user-or-organization-site">GitHub docs page</a> helped with that bit.</p>
<p>Despite feeling in over my head, the whole thing only took half an hour probably. And now my site is being hosted on Netlify.</p>
Checking for visual changes with BackstopJS2021-01-09T00:00:00Zhttps://www.benjystanton.co.uk/blog/checking-for-visual-changes-with-backstopjs/<p>With my site deployed to Netlify, but still living on a preview URL, I wanted to do a quick visual regression test against the old GitHub Pages build, to make sure nothing had broken.</p>
<p>As I mentioned in the last post, this was more about practising this kind of testing technique, rather than any real expectation that anything would be wrong. Visual testing will likely be more useful later when I do some serious changes to the CSS.</p>
<p>I've been playing around with <a href="https://percy.io/">Percy.io</a> at <a href="https://www.swirrl.com/">Swirrl</a>, but for personal use, I decided to use the open source <a href="https://garris.github.io/BackstopJS/">Backstop.JS</a>, which I'm pretty sure I first heard about via <a href="https://twitter.com/StuRobson">Stuart Robson</a> (thanks Stu!).</p>
<p>After a little while digging around the <a href="https://github.com/garris/BackstopJS">BackstopJS README</a> I found the commands that I needed.</p>
<h2>Setting up BackstopJS</h2>
<ul>
<li>Open Terminal</li>
<li>Install BackstopJS globally <code>$ npm install -g backstopjs</code></li>
<li>Move to the project directory <code>$ cd your/project/folder</code></li>
<li>Initialize the project <code>$ backstop init</code></li>
<li>Open the project in Visual Studio Code</li>
<li>Open the <code>backstop.json</code> file</li>
<li>Update the breakpoints to match my site's
<ul>
<li>460px</li>
<li>660px</li>
<li>900px</li>
<li>1400px</li>
</ul>
</li>
<li>Populate the <a href="https://www.benjystanton.co.uk/blog/create-a-list-of-sample-pages-for-testing/">list of pages to test</a>, each page needs the new preview URL and the current/old reference URL to test against</li>
<li>Create the reference images against <code>$ backstop reference</code> (this bit took a while to find as it's buried in the README, but it's an important first step before you can go any further)</li>
<li>Run the test <code>$ backstop test</code></li>
<li>This command will generate a test report in HTML which you can open in a browser to compare the images</li>
</ul>
<p>There's a lot more possible with these kinds of tools, but this was enough for me to get started. Testing just 7 pages times 4 breakpoints gives me 28 tests, so doing this manually would become difficult pretty quickly.</p>
<h2>Example report</h2>
<p>Here's a <a href="https://friendly-fermi-9e5984.netlify.app/backstop_data/html_report/">copy of my report</a>, as you can see everything passed, so there isn't much to see.</p>
Some personal goals for 20212021-01-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/some-personal-goals-for-2021/<ul>
<li>Average daily steps: 6500</li>
<li>Average weight: 12 st 9 lbs</li>
<li>Continue being mostly vegetarian</li>
<li>Save for Christmas and holidays every month</li>
<li>Family walk every weekend</li>
<li>Stop listening to white men on Spotify</li>
<li>Move house or convert loft</li>
<li>Pay off small Lloyds loan</li>
<li>Switch to electric car</li>
</ul>
Deploy my Jekyll site to Netlify2020-12-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/deploy-my-jekyll-site-to-netlify/<p>Before I switch to building the site with Eleventy, I want to move my current Jekyll site over to Netlify. This will help me to take advantage of <a href="https://www.netlify.com/github-pages-vs-netlify/">some of the things that Netlify does versus GitHub Pages</a>.</p>
<p>The most important feature to me right now is the ability to compare my current Jekyll site to another branch where I'll be making some big changes (rebuilding it with Eleventy). I basically want to swap out Jekyll and replace it with Eleventy without any major changes noticeable on the front-end, to begin with.</p>
<p>Another thing I like about Netlify is that it gives you a summary of what it's doing when a build is triggered. So you can follow the steps it's taking and you can see when the build is published. With GitHub Pages (unless I'm missing something?) you just have to just wait for the change to happen, and then check if it's done by refreshing your browser.</p>
<p>I’m pretty familiar with Netlify because we use it at <a href="https://www.swirrl.com/">Swirrl</a>, but I was still surprised at how easy it was to get the site up and running. It took less than 5 minutes before it was built and deployed to a preview URL. Netlify generates unique preview URLs automatically that are really handy for testing things as you go.</p>
<p>I basically needed to follow these <a href="https://www.netlify.com/blog/2020/04/02/a-step-by-step-guide-jekyll-4.0-on-netlify/#connecting-to-netlify">Connecting to Netlify</a> steps, and the automatic settings all worked without me needing to tweak anything.</p>
<p>After a quick glance, the preview site is looking good, but I'm going to do some more formal testing with <a href="https://garris.github.io/BackstopJS/">BackstopJS</a>. This is mainly because I want some practice with visual regression, rather than me expecting anything to have gone wrong.</p>
<p>Once I'm satisfied that Netlify has built and deployed everything correctly, I will then direct my custom domain (benjystanton.co.uk) away from GitHub Pages and point it at Netlify.</p>
Create a list of sample pages for testing2020-12-13T00:00:00Zhttps://www.benjystanton.co.uk/blog/create-a-list-of-sample-pages-for-testing/<p>Having a representative sample of pages to check as I make changes to the blog will be useful for a few reasons.</p>
<p>I can…</p>
<ol>
<li>check pages are building building correctly as I move to Eleventy and Netlify</li>
<li>check CSS styling when I setup visual regression testing</li>
<li>check for accessibility issues when I do some manual and automatic accessibility testing</li>
<li>have a list of different kinds of pages in my <a href="https://www.benjystanton.co.uk/style-guide/">style guide</a> for future reference</li>
</ol>
<h2>How I've picked my list of sample pages</h2>
<ul>
<li>Key pages (homepage, blog post, list of posts)</li>
<li>Pages with unique layouts or templates</li>
<li>Popular pages (I'll check this with <a href="https://search.google.com/search-console/about">Google Search Console</a>)</li>
<li>Style guide (because it should contain almost every single component)</li>
</ul>
<h2>List of sample pages</h2>
<ol>
<li><a href="https://www.benjystanton.co.uk/">Home</a></li>
<li><a href="https://www.benjystanton.co.uk/style-guide/">Style Guide</a></li>
<li><a href="https://www.benjystanton.co.uk/about/">About</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/">Blog</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/category/">List of blog categories</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/accessible-close-buttons/">Post: Accessible close buttons</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/a-plan-for-accessible-charts/">Post: A plan for accessible charts</a></li>
</ol>
<h2>Further reading</h2>
<p><a href="https://www.gov.uk/government/publications/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one#preparing-to-do-a-basic-accessibility-check">Preparing to do a basic accessibility check on GOV.UK</a></p>
Change default branch from master to main2020-12-13T00:00:00Zhttps://www.benjystanton.co.uk/blog/change-default-branch-from-master-to-main/<p>Yesterday <a href="https://twitter.com/benjystanton/status/1337685688259645441">I tweeted that I want to switch this blog</a> from <a href="https://jekyllrb.com/">Jekyll</a> to <a href="https://www.11ty.dev/">Eleventy</a>, then blog in the open as I rebuild the site with modern CSS techniques.</p>
<p>There's going to be a few behind the scenes steps to get ready for the changes, including <a href="https://www.netlify.com/github-pages-vs-netlify/">moving over to Netlify from GitHub pages</a>.</p>
<p>Step one is to change the name of my default branch from <code>master</code> to <code>main</code>. The Black Lives Matter movement of summer 2020 helped to point out the countless microaggressions that exist to perpetuate racism. Renaming branches won't solve racism but as Una said back in the summer…</p>
<blockquote>
<p>If it prevents even a single black person from feeling more isolated in the tech community, feels like a no brainer to me!
<br />— <a href="https://twitter.com/Una/status/1271181775130279936">Una Kravets</a></p>
</blockquote>
<p>The change is fairly simple to do, and I <a href="https://stevenmortimer.com/5-steps-to-change-github-default-branch-from-master-to-main/">followed these steps by Steven Mortimer</a>. But before deleting <code>master</code> (Step 5), I made sure that GitHub Pages was building from the newly created <code>main</code> branch. You can do this by going to your repo's Settings in GitHub, selecting Options and scrolling down to the GitHub Pages section.</p>
A plan for accessible maps2020-11-28T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-plan-for-accessible-maps/<p>Designing accessible interactive maps is hard. I don’t think I could point to any single thing that I’ve worked on that covers all of the things mentioned here. But, if I was going to start a brand new project, with plenty of time to get things right, this is where I’d start.</p>
<p>The following isn't perfect, I'm really just sharing my workings so far. I hope that if you can see something is wrong or missing, you'll point it out. I’ll definitely iterate and add to this post in future.</p>
<h2>Accessible map overview</h2>
<ul>
<li>First, decide if you really need a map</li>
<li>Make sure information in the map is available elsewhere</li>
<li>Keep the map simple</li>
<li>Design the map in black and white first</li>
<li>Follow web best practice (semantic HTML, progressive enhancement)</li>
<li>Break the map down into layers (features, dialogues, controls, backgrounds, supporting information)</li>
<li>Test the map with different browsers and devices including mobiles and keyboards</li>
</ul>
<h2>First, decide if you really need a map</h2>
<p>Maps are complicated, both for the people using them, and the teams building them. Do user research to make sure you really need a map.</p>
<h2>Make sure information in the map is available elsewhere</h2>
<p>It's useful to remember that maps, no matter how well done, are an exclusive tool. They require digital literacy, geographic literacy and they rely on visual communication methods to present information. So they shouldn't be relied upon solely to communicate information to your users.</p>
<ul>
<li>Think of maps as an enhancement to the service your building, the core content and functionality should be available without the map</li>
<li>Make sure that any information available via the map is also available via another accessible route (for example, in a nearby bit of text or data table, or in a downloadable spreadsheet)</li>
<li>Users of geospatial data might need to download the data in GeoJSON or Shapefile format so they can analyse it with GIS (geographic information system) software</li>
<li>Interactive maps often require JavaScript, so making sure information is available outside of the map is compatible with a progressive enhancement approach too</li>
<li>Aside: <a href="https://www.fixmystreet.com/">FixMyStreet</a> uses HTML image maps to work even if the JavaScript doesn’t work, thanks to <a href="https://twitter.com/dracos">Matthew Somerville</a> for pointing this out</li>
</ul>
<h2>Keep the map simple</h2>
<ul>
<li>Break content down into multiple pages or sections that meet specific needs, rather than having a single map that contains all of the things</li>
<li>Avoid complex interactive maps if you don’t need them, for example a static inline SVG might be enough in some cases</li>
<li>Don't add panning and zooming and multiple layers if you just need to display a single area and its boundary</li>
</ul>
<h2>Design maps in black in white first</h2>
<p>Don’t use colour alone to convey meaning. Using red and green to convey "good and bad" without labels is a classic bad example of this. I find that designing in black and white first helps me to do this, then I add colour later, as an enhancement.</p>
<ul>
<li>Directly label things where possible, or use a separate legend or key, if direct labelling is not possible</li>
<li>Consider using shading or cross-hatch patterns instead of colour fills</li>
<li>Consider using unique line styles, for example dotted or dashed lines</li>
<li>Use high contrast colours clear enough to read (avoid light greys)</li>
<li>If legends/keys are used, make sure they work in black and white too</li>
</ul>
<h2>Break the map down into layers</h2>
<p>Interactive maps are made up of multiple layers:</p>
<ul>
<li>features (points or areas of interest)</li>
<li>dialogues (for detailed information)</li>
<li>controls (for example zoom buttons)</li>
<li>background maps</li>
<li>supporting information (for example small print)</li>
</ul>
<p>I like to break down the map, then think about how to make each layer more accessible.</p>
<p>It may be very hard to make maps 100% accessible for everyone, but by considering each component part I think there is plenty of room for improvement and reasonable adjustment.</p>
<h3>Features (points or areas of interest)</h3>
<p>Features are the points of interest on the map. The individual data points that users are most interested in. They could be points that mark the location of a town, a line that follows the path of a river or a polygon that maps the outline of a local authority. Often they'll have short text labels that are always visible.</p>
<ul>
<li>Interactive lines (for example rivers or roads) should be thick enough and high contrast enough to see</li>
<li>Interactive elements should be large enough to click on</li>
<li>You can add clickable labels to lines if the lines themselves are so thin they are hard to tap or click on</li>
<li>Allow users to zoom in, so that selecting the area they need becomes easier</li>
<li>Make sure interactive elements have clear affordance or example, if a label is a link to new page, style it to look like a link (blue and underlined) and use semantic HTML (<code><a></code> instead of a <code><div></code>)</li>
<li>Add clear hover style for interactive elements, for example change the line thickness, tint and mouse cursor</li>
<li>Any interactive elements of the map should have a clear focus style</li>
<li>If elements are not interactive, they should have a different visual treatment (for example black and white text without an underline)</li>
</ul>
<h3>Dialogues (for detailed information)</h3>
<p>A benefit of interactive maps is that you can progressively disclose details when the user needs, so they don't get bombarded with everything all at once.</p>
<ul>
<li>Avoid using tool tips that only appear on mouse hover</li>
<li>Dialogues need to be keyboard accessible too</li>
</ul>
<h3>Map controls</h3>
<p>Map controls are the buttons, form elements and gestures that the allow users to manipulate how they view the map.</p>
<ul>
<li>Common controls include the ability to zoom and pan the map</li>
<li>Test to make sure these controls are available to all input types, for example mouse, touch, keyboard and voice</li>
<li>Use visible text labels, not just icons, for less common controls like toggling full screen mode</li>
<li>Make sure to follow best practice for web forms when adding custom controls (like adding a select menu to change the background map layer)</li>
</ul>
<h3>Background maps</h3>
<p>The background map contains extra context. They typically depict large water bodies, land masses and can include labels for important landmarks like cities.</p>
<p>The images might be generated from satellite photos or they can by stylised illustrations that are common in things like Google Maps.</p>
<p>If you have control of the background layer it’s worth simplifying things down to exactly what you need.</p>
<ul>
<li>Turn off any background layers you don’t need, for example hide roads if your users don't need to see them</li>
<li>Make the text legible, for example increase size and contrast of labels for towns and cities</li>
<li>Choose background tiles that don’t contrast too much with the foreground layers</li>
</ul>
<h3>Supporting information, map metadata and descriptive labels</h3>
<p>Supporting text such copyright, source and license information is often overlooked in maps.</p>
<ul>
<li>Make sure the text has sufficient size and contrast</li>
<li>Make sure links are styled to look like links</li>
<li>Icons, elements and sections need to have accessible text labels</li>
</ul>
<h2>Test the map with a mobile</h2>
<ul>
<li>Don't rely on complex motions or gestures</li>
<li>The <a href="https://www.gov.uk/government/publications/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one#technology">doing a basic accessibility check if you cannot do a detailed one from GOV.UK</a> explains this in more detail</li>
<li>Make sure users don't accidentally zoom into the map, when they meant to scroll down the page</li>
<li>Test maps still work at small sizes</li>
<li>Test map works with touch interfaces</li>
</ul>
<h2>Test the map with a keyboard</h2>
<p>Consider adding a skip link, allowing keyboard users to skip the map completely. Skip link are more commonly used to skip the main navigation, but could be adapted for this purpose too. Read about <a href="https://design-system.service.gov.uk/components/skip-link/">skip links in the GOV.UK design system</a>.</p>
<p>Make sure to check all interactive elements are available to keyboard users. For example users will need to interact with the map controls (like zoom buttons and full screen toggles) as well as any interactive features like points and polygons.</p>
<h2>Do a range of testing</h2>
<p>This blog post isn't an exhaustive list of ways to meet all access needs or create something that works with all kind of assistive technology.</p>
<p>It's definetely worth doing your own manual and automatic testing. I've written <a href="https://www.benjystanton.co.uk/blog/accessibility-checklist/#manual-tests">a bit about manual and automatic accessibility testing</a> before so I won’t go into more detail here.</p>
<p>It's also important to do user research (including with people with access needs) and to get some accessibility experts to audit the finished thing.</p>
<h2>Further reading</h2>
<ul>
<li><a href="https://github.com/DEFRA/design-standards/blob/master/Maps.md">Defra map design standards</a></li>
<li><a href="https://fossheim.io/writing/posts/accessible-dataviz-us-elections/">How (not) to make accessible data visualizations, illustrated by the US presidential election by Sarah L. Fossheim</a></li>
<li><a href="https://github.com/alphagov/govuk-design-system-backlog/issues/75">Maps issue from the GOV.UK design system backlog</a></li>
<li><a href="https://phase.com/magazine/design-accessible-maps/">Design Accessible Maps from Phase</a></li>
<li><a href="https://www.ordnancesurvey.co.uk/blog/2019/12/try-our-new-os-open-zoomstack-styles-for-colour-blind-users/?utm_source=twitter&utm_medium=social&utm_term=&utm_content=&utm_campaign=80b1c9ea-de5b-4e1b-9d13-474ef3a40243">OS Open Zoomstack styles for colour blind users from Ordnance Survey</a></li>
<li><a href="https://developer.paciellogroup.com/blog/2020/04/accessible-digital-map-experiences/">Accessible digital map experiences: a mountain climb or a walk in the park? from David Sloan</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/best-way-mark-up-svg-map/">What's the best way to mark-up an SVG map? by Benjy Stanton</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/a-plan-for-accessible-charts/">A plan for accessible charts by Benjy Stanton</a></li>
<li><a href="https://mn.gov/mnit/about-mnit/accessibility/maps/">Map Accessibility from Minnesota IT Services</a></li>
</ul>
<h2>Services with maps</h2>
<ul>
<li><a href="https://mapit.mysociety.org/area/2553.html">MapItUK from My Society</a></li>
<li><a href="https://www.compare-school-performance.service.gov.uk/">Search for schools and colleges to compare on GOV.UK</a></li>
<li><a href="https://flood-map-for-planning.service.gov.uk/">Flood map for planning on GOV.UK</a></li>
<li><a href="https://flood-warning-information.service.gov.uk/warnings">Flood warnings for England on GOV.UK</a></li>
<li><a href="https://verify-local-patterns.herokuapp.com/service-patterns/parking-permit/check/design">Alpha local gov service pattern: Apply for a resident's parking permit</a></li>
<li><a href="https://digital-land.github.io/organisation/local-authority-eng/BAR/">Prototype organisation page from Digital Land</a></li>
<li><a href="https://www.theguardian.com/world/2020/oct/13/senior-tory-calls-for-short-sharp-shock-to-curb-covid-surge-bernard-jenkin">UK: New COVID cases in the last week from The Guardian</a></li>
<li><a href="https://visual.parliament.uk/msoanames">MSOA Names from House of Commons Library</a></li>
<li><a href="https://visual.parliament.uk/research/visualisations/coronavirus-restrictions-map/">Coronavirus restrictions from House of Commons Library</a></li>
<li><a href="https://www.fixmystreet.com/">FixMyStreet from My Society</a></li>
</ul>
<h2>Map prototyping tools</h2>
<ul>
<li><a href="https://www.google.co.uk/maps/about/mymaps/">My Maps from Google Maps – create basic maps</a></li>
<li><a href="https://docs.mapbox.com/playground/static/">Mapbox static map image playground – create realistic static maps for your prototypes</a></li>
<li><a href="https://leafletjs.com/">Leaflet – an open-source JavaScript library
for maps</a></li>
<li><a href="http://mapstarter.com/">Mapstarter – convert Shapefiles and GeoJSON to SVGs</a></li>
<li><a href="http://geojson.io/">GeoJSON.io – edit GeoJSON in the browser</a></li>
</ul>
<hr />
<h2>Thanks</h2>
<p><a href="https://twitter.com/cathy_dutton">Cathy Dutton</a> and the interaction design team at Defra, <a href="https://twitter.com/AngharadStone">Angharad Stone</a>, <a href="https://twitter.com/joelanman">Joe Lanman</a>, <a href="https://twitter.com/simoneverest">Simon Everest</a>, <a href="https://twitter.com/jwaterworth">John Waterworth</a>, <a href="https://twitter.com/robchamberspfc">Rob Chambers</a>, <a href="https://twitter.com/olihawkins">Oli Hawkins</a>, ONS digital and <a href="https://www.swirrl.com/">Swirrl</a>.</p>
<h2>Updates on 7 December 2020</h2>
<ol>
<li>Added a link to <a href="https://mn.gov/mnit/about-mnit/accessibility/maps/">Map Accessibility from Minnesota IT Services</a> via <a href="https://twitter.com/pkiff">Philip Kiff</a></li>
<li>Added a note about Shapefiles via <a href="https://twitter.com/mgifford">Mike Gifford</a></li>
<li>Added a link to <a href="https://www.fixmystreet.com/">FixMyStreet from My Society</a> and clarification that interactive maps don't always require Javascript via <a href="https://twitter.com/dracos">Matthew Somerville</a></li>
<li>Added a link to <a href="https://github.com/DEFRA/design-standards/blob/master/Maps.md">Defra map design standards</a> via <a href="https://twitter.com/cathy_dutton">Cathy Dutton</a></li>
</ol>
Weeknotes – series 04 episode 042020-11-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-04-episode-04/<p>This week I have been mostly thinking about accessible mark-up and content design for HTML tables (again).</p>
<h2>Adrian's simple, responsive, accessible table</h2>
<p><a href="https://twitter.com/aardrian/status/1326150127959105538">Adrian's twitter thread about tables</a> really caught my eye this week. The technique shows how you can achieve a simple, responsive, accessible table with just a few lines of HTML…</p>
<pre><code><div
role="region"
aria-labelledby="Caption01"
tabindex="0">
<table>[…]</table>
</div>
</code></pre>
<p>The thread goes into more detail, but a couple of things stood out for me…</p>
<ol>
<li>An overflowing table is interactive, so you need to add <code>tabindex="0"</code> to the container so that keyboard users can scroll the content too</li>
<li>Anything that receives focus needs an accessible name and role</li>
</ol>
<p>I've been working with HTML tables for a few years, but I always learn stuff from Adrian. Here's a link to all of <a href="https://adrianroselli.com/tag/tables">Adrian's blog posts about tables</a>. Worth a read if you want to make sure your tables are semantic and accessible.</p>
<h2>Accessible characters in tables</h2>
<p>In other table news, I needed to move some data from a spreadsheet to a html table for a project. The table contained mathematical symbols (like "greater than" <code>></code>), but I wasn't sure if screen readers can be relied upon to read out these kind of symbols correctly.</p>
<p><a href="https://twitter.com/tweetingFrog">Annemarie Parsons</a> shared a good blog post with me that goes into detail about what you can expect when specific screen readers encounter symbols and characters: <a href="https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">Why Don’t Screen Readers Always Read What’s on the Screen from Deque</a>. It's worth noting that the blog post is quite old (2014) so I assume some of the details will have changed, but it's still worth a read to help understand what kind of things can affect how screenreaders announce things.</p>
<p>For these kind of content issues I also like to check <a href="https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style">GOV.UK's content style guide</a> and <a href="https://style.ons.gov.uk/">ONS's style guide</a> for best practice.</p>
<p>I think there's an interesting cross-section here between readability, data literacy and numeracy which often leads me down the path deciding to write things out in full, to make sure the widest possible range of people can perceive and understand the content.</p>
<h2>One day I'll write a big post about tables</h2>
<p>I'd really like to write a big blog post to round-up everything I've learnt about tables. I've been working on services that publish tables for about 4 years, so I feel like I can add some good practical tips.</p>
<p>But for now, for my fellow table nerds, there's this <a href="https://www.benjystanton.co.uk/blog/making-data-tables-more-accessible/">short post I wrote about tables from 2019</a>. There's also some bits about <a href="https://www.benjystanton.co.uk/blog/accessibility-checklist/#tables">tables in my accessibility checklist</a>.</p>
Weeknotes – series 04 episode 032020-11-06T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-04-episode-03/<p>Notes about API user research, recording remote user research sessions, and onboarding remote team members during lockdown.</p>
<h2>API user research</h2>
<p>This week I've been getting ready for a round of API user research. I've done bits of this before, but it's always challenging as my knowledge of APIs is often less than that of the participants I'm speaking too.</p>
<p>Last time I put together a list of resources, so I decided to share these <a href="https://gist.github.com/benjystanton/295d6a84f58e62ab02e36f59491cbcad">API user research resources on GitHub</a>. I'd also blogged about some <a href="https://www.benjystanton.co.uk/blog/user-research-questions-for-data-users/">user research questions for data users</a>. These were a really good start for planning my research this time round.</p>
<p>It's also tricky for me because there is no visual interface to design, so it feels like extra pressure on me to make sure the research findings can speak for themselves. <a href="https://twitter.com/AgileTimelord">Jason Bell</a> from DWP has written a good blog post about this: <a href="https://dwpdigital.blog.gov.uk/2018/04/20/how-we-designed-for-users-without-having-a-user-interface-to-test/">How we designed for users without having a user interface to test</a>.</p>
<p>In preparation, I've been speaking to the team at Swirrl and the API service owners to help me setup some good research objectives and activities.</p>
<p><a href="https://twitter.com/robchamberspfc">Rob</a> suggested that I should give participants a heads up that I'd like to see them use an API, some API documentation and/or whatever software they usually use to work with the data once they have it. Already this has worked really well, as participants have taken the time to email me in advance with links to relevant websites and taken the time to write notes about their workflow.</p>
<h2>Recording remote user research sessions</h2>
<p>Earlier in the summer I bought myself an <a href="http://buildtoconnect.com/en/products/recordit">app to record my mac screen called Record It</a>. It's a nice lightweight app and it allows me to record my screen, my microphone and the participant's audio at the same time. There seems to be lots of ways to get around this problem, including <a href="https://obsproject.com/">Open Broadcaster Software</a>, but Record It "just worked" for me, so I'm happy.</p>
<p>At the time, I asked people on Twitter for tips for <a href="https://twitter.com/benjystanton/status/1288075299444449281">Mac apps that lets you record the screen, the system audio and the mic audio at the same time</a> – take a look at that thread if you want to see some other options.</p>
<h2>Onboarding remote team members during lockdown</h2>
<p>On a different note… at Swirrl we're thinking about how we can improve our onboarding system now that we're fully remote (during the corona virus lockdowns). So I've been gathering links to resources to help with that.</p>
<p>The general consensus seems to be that a well thought out Trello board or slidedeck is the way to go. So I've added some great examples of those to this GitHub gist: <a href="https://gist.github.com/benjystanton/c745b0c400eb7d73e2766686dff6de78">list of articles and resources about remote onboarding</a>.</p>
Weeknotes – series 04 episode 022020-11-01T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-04-episode-02/<p>Notes about wireframing, checking accessibility with CSS off, the user-centred design and data community, and designing in the open.</p>
<h2>Wireframing design workflow</h2>
<p>Back when I worked at a design agency, we spent hours (sometimes days and weeks) on high fidelity mock-ups. These designs looked great, but often failed when they came into contact with real code, content, devices and users. Around the same time, the whole practice of designing mock-ups started to get a bad rep on #DesignTwitter.</p>
<p>Later, when I worked at DVLA (Driver and Vehicle Licensing Agency) I discovered GDS's (Government Digital Service's) <a href="https://designnotes.blog.gov.uk/2014/10/13/how-designers-prototype-at-gds/">'sketch first, then prototype' design workflow</a>. Sketching with pen and paper is great when all or most of your team are sitting in the same room. But, if the team are distributed across different locations and time zones, then sketches don't work as well.</p>
<p>But I still let those old bad experiences with mock-ups put me off using any digital design tools for a while. So I'm trying to be less precious.</p>
<p>At Swirrl we use <a href="https://moqups.com/">Moqups</a>. It's certainly not "flavour of the month" for web based design tools, but I really like it. I can quickly create and annotate my designs, share links to the live design and export PDFs. And it has some nice diagram features for drawing user journey maps too.</p>
<p>I still think wireframes and mock-ups are sub-optimal for user research, communicating final design quality and documenting detailed design specs. But they definitely have an important part to play in helping me discuss designs with developers, product managers and service owners.</p>
<p>For me it works well where I can pick up a small design change, create a wireframe, critique it with the project team, then prototype it code, all within a single sprint. This workflow helps to spot issues sooner, but also makes sure the wireframe itself doesn't become a "design asset" that needs to be kept up to date.</p>
<h2>Checking accessibility with CSS off</h2>
<p>Whilst working on something this week, I was reminded how useful testing prototypes with CSS off can be. There's a useful guide on GOV.UK called <a href="https://www.gov.uk/government/publications/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one#check-pages-are-usable-when-stylesheets-are-disabled">doing a basic accessibility check if you cannot do a detailed one</a> that recommends checking designs in this way.</p>
<p>I was able to spot that a group of related links wasn't marked up as a list (<code><ul></code>) in the underlying HTML. The links were also repeated multiple times on the page, and with CSS off it helped me to spot that the same link text was used multiples times.</p>
<p>As a sighted person, I often take for granted how the visual layout of a page can affect the way I understand the content. But with CSS off, it helps me to think about the source order and the underlying content, and how assistive technology might interpret the code in a different way.</p>
<p>I tweeted about this same thing earlier in the year, and there are some useful replies to this tweet if you want to learn more about checking accessibility with CSS off…</p>
<blockquote>
<p>#A11y folks, why is "check the page with CSS off" a useful manual check to do? Is it because some users browse the web this way, or because it helps identify issues with the underlying HTML?<br />— <a href="https://twitter.com/benjystanton/status/1306521869017919488">My tweet on 17 September 2020</a></p>
</blockquote>
<h2>User-centred design and data community</h2>
<p>This week, I also had a chat with the team who organise the <a href="https://designnotes.blog.gov.uk/2020/10/05/introducing-the-user-centred-design-and-data-community/">user-centred design and data community</a>. We're planning the next workshop, where we'll look to develop some principles for designing with data with the rest of the community. There's a <a href="https://trello.com/b/C48j9WTM/user-centred-design-ucd-data-in-government-community-public-board">public Trello board where you can keep up to date with our plans</a>. More on this soon.</p>
<h2>Designing in the open</h2>
<p>UX (User experience) designer <a href="https://twitter.com/westleyknight">Westley Knight</a> got in touch with me <a href="https://twitter.com/westleyknight/status/1322131922026377216">on Twitter to ask about an old blog post</a> of mine that <a href="https://digitalblog.ons.gov.uk/2017/08/15/picking-things-from-a-long-list/">I'd posted on the ONS digital blog</a>.</p>
<p>The post was about creating a design pattern that allowed users to pick lots of items from a long list (for example, a list of places from across the UK). It's a tricky pattern that often comes up in the work that I do (especially when it comes to filtering datasets by geographical areas).</p>
<p>Anyway, it was nice to know that people are still finding this post useful. I remember that it sparked some useful conversations at the time, and it's a useful reminder to me to keep blogging, working in the open, and sharing my work as I go.</p>
Weeknotes – series 04 episode 012020-10-24T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-04-episode-01/<p>It's been a while since <a href="https://www.benjystanton.co.uk/blog/weeknotes-series-03-episode-05/">my last weeknote</a>, (almost a year and a half!) but I'm trying to get back into a blogging rhythm again, plus I've got time to spare as Wales has just gone into lockdown 2.</p>
<h2>Coronavirus</h2>
<p>This week we've been in isolation for various reasons. I had a test last weekend, but luckily after a few days, it turned out to be negative. More worryingly, there was a positive case in our youngest's nursery class. So they're in isolation until the middle of next week. It meant we couldn't really do much during our last week before Wales's firebreak lockdown thing.</p>
<h2>Accessibility testing tools and techniques</h2>
<p>I've been focussing a lot on accessibility testing over the summer. Next I'm thinking how I can integrate these testing techniques into my day-to-day workflow. So this <a href="https://blog.sapegin.me/all/accessibility-testing/">round-up of accessibility testing tools and techniques</a> from Artem Sapegin is timely. It starts off quite technical, but quickly gets into useful browser plugins and manual things you can do without technical knowledge, like using the humble 'tab key' to navigate.</p>
<h2>Switching back into design mode</h2>
<p>After a few weeks when I've been mostly focusing on user research it's been nice to switch back to interaction design mode for a couple of projects. Although I love variation in my work, I think tinkering around in HTML and CSS is my happy place. Which always makes me think of <a href="https://www.jessicahische.shop/product/procrastiworking-poster">Procrastiworking by Jessica Hische</a>.</p>
<p>I use <a href="https://www.11ty.dev/">11ty (static site generator)</a> for my most of my prototyping. It's compatible with the same templating language (<a href="https://shopify.github.io/liquid/">Liquid</a>) that I use on this blog, so it was easy enough for me to pick up. Although I'd really like to push myself and switch over to something a bit more powerful like <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> at some point.</p>
<h2>Swirrl are hiring again (and we've started a podcast)</h2>
<p>There's been lots of Swirrl news recently. We're <a href="https://www.swirrl.com/hiring">hiring junior and senior software engineers</a>. I can't tell you much about the specifics of that role, but if you have any questions about what it's like to work at Swirrl, feel free to get in touch!</p>
<p>Sarah has also started a podcast. You can <a href="https://audioboom.com/posts/7705341-jamie-whyte-why-i-care-about-telling-stories-with-data">listen to the first episode</a> where she chats to <a href="https://twitter.com/northernjamie">Jamie</a> about telling stories with data.</p>
A user-centred design and data community2020-10-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-user-centred-design-and-data-community/<p>Back when I worked at ONS (Office for National Statistics), I remember looking around, trying to find other interaction designers and user researchers across government who were working on data publishing services.</p>
<p>Since then, I've met (well, via Twitter) a few people working on these kinds of services. <a href="https://twitter.com/jeremyhhy">Jeremy</a> and <a href="https://twitter.com/peterjobes">Pete</a> in particular have been doing great work, and whenever I chatted to them it felt like we were facing similar challenges. For example, presenting data in user-friendly ways or working with data professionals who aren't used to working with interaction designers.</p>
<p>Luckily for me, Jeremy, Pete and <a href="https://twitter.com/Rodgermegan">Megan</a> have been working hard on creating a community of user-centred designers, so that people working on these kinds of data services can share design patterns and user research, and organise meet-ups.</p>
<p>If you're interested in learning more about the community, or you'd like to get involved, check out this introductory blog post over on GOV.UK… <a href="https://designnotes.blog.gov.uk/2020/10/05/introducing-the-user-centred-design-and-data-community/">introducing the user-centred design and data community</a>.</p>
<blockquote>
<p>The community is for anyone working on services that collect, analyse, visualise and publish data and applying a user-centred lens to them.</p>
</blockquote>
<p>I helped a bit, and the team were kind enough to give me co-author credit on the blog post, but I hope that I can contribute a lot more to this community in future.</p>
11ty resources2020-05-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/11ty-resources/<p>A list of my 11ty bookmarks. <a href="https://www.11ty.dev/">11ty</a> (or Eleventy) is a static site generator.</p>
<ul>
<li><a href="https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/">Beginner's Guide to Eleventy [Part I] from Tatiana Mac</a></li>
<li><a href="https://heydonworks.com/article/design-tokens-in-eleventy/">Easily Use Design Tokens In Eleventy from Heydon Pickering</a></li>
<li><a href="https://eleventyone.netlify.app/">EleventyOne – a starter kit for Eleventy from Phil Hawksworth</a></li>
<li><a href="https://hylia.website/">Hylia – a starter kit for Eleventy from from Andy Bell</a></li>
<li><a href="https://www.netlify.com/blog/2020/04/09/lets-learn-eleventy-boost-your-jamstack-skills-with-11ty/">Let’s Learn Eleventy! Boost your Jamstack skills with 11ty from Netlify</a></li>
<li><a href="https://css-tricks.com/static-first-pre-generated-jamstack-sites-with-serverless-rendering-as-a-fallback/">Static First: Pre-Generated JAMstack Sites with Serverless Rendering as a Fallback from CSS-Tricks</a></li>
<li><a href="https://11ty.rocks/">11ty Rocks!</a></li>
</ul>
Teams who share their accessibility processes in the open2020-05-19T00:00:00Zhttps://www.benjystanton.co.uk/blog/teams-who-share-their-accessibility-processes-in-the-open/<p>A list of teams who share their accessibility audit plans, backlogs and roadmaps in the open. Last updated on 5 April 2021.</p>
<ul>
<li><a href="https://trello.com/b/QruYduyo/accessibility-roadmap">Buffer's accessibility roadmap on Trello</a>
<br /><small>via <a href="https://twitter.com/whitingx">Rob Whiting</a></small></li>
<li><a href="https://github.com/BulbEnergy/bulb-audit">Bulb Inclusive Design Audit</a><br /><small>via <a href="https://twitter.com/heydonworks">Heydon</a></small></li>
<li><a href="https://digital.canada.ca/a11y/">CDS accessibility handbook</a>
<br /><small>via <a href="https://twitter.com/JuliannaRowsell">Julianna Rowsell</a></small></li>
<li><a href="https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/">GOV.UK Design System</a>
<br /><small>via <a href="https://twitter.com/NickColley">Nick Colley</a></small></li>
<li><a href="https://wiki.mozilla.org/Accessibility/Roadmap">Mozilla's accessibility roadmap</a> and <a href="https://wiki.mozilla.org/Accessibility/Strategy">Mozilla's accessibility strategy</a>
<br /><small>via <a href="https://twitter.com/whitingx">Rob Whiting</a></small></li>
<li><a href="https://www.sciencemuseumgroup.org.uk/web-accessibility/">Science Museum's accessibility statement</a>
<br /><small>via <a href="https://twitter.com/jackcraig">Jack Craig</a></small></li>
<li><a href="https://www.scope.org.uk/accessibility/">Scope's website accessibility statement</a>
<br /><small>via <a href="https://twitter.com/CuriousScutter">CuriousScutter</a></small></li>
<li><a href="https://www.kent.ac.uk/accessibility">University of Kent's accessibility pages</a>
<br /><small>via <a href="https://twitter.com/mearso">Kevin Mears</a></small></li>
<li><a href="https://www.coop.co.uk/accessibility">Co-op digital accessibility policy</a>
<br /><small>via <a href="https://twitter.com/beckytopps">Rebecca Topps</a></small></li>
</ul>
<p>Thanks to everyone who suggested stuff. Here's a <a href="https://twitter.com/benjystanton/status/1260125826395394048">link to my original tweet</a>.</p>
<p><a href="https://twitter.com/NickColley">Nick Colley</a> in particular shared some excellent details in this <a href="https://twitter.com/NickColley/status/1260482262661029891">Twitter thread about how the GOV.UK Design System team worked to meet WCAG 2.1</a>.</p>
Accessible close buttons2020-04-30T00:00:00Zhttps://www.benjystanton.co.uk/blog/accessible-close-buttons/<p>A short post about designing close buttons with SVG icons and accessible mark-up.</p>
<h2>How to design accessible close buttons</h2>
<ul>
<li>Mark it up as a button, for example <code><button type="button">…</button></code></li>
<li>Include accessible text, for example<code><button>Close</button></code> or <code>aria-label="Close"</code></li>
<li>The overall size should be at least 44 pixels in height and width</li>
<li>Add styles for keyboard focus and mouse hover</li>
<li>Consider adding an <code><svg></code> icon</li>
<li>If you use the multiplication/times character (<code>×</code>), be sure to hide it from screen readers with <code>aria-hidden="true"</code> (so it's not read out as "times")</li>
</ul>
<h2>Example mark-up</h2>
<button type="button" aria-label="Close">
<svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
<path d="M0.549989 4.44999L4.44999 0.549988L43.45 39.55L39.55 43.45L0.549989 4.44999Z"></path>
<path d="M39.55 0.549988L43.45 4.44999L4.44999 43.45L0.549988 39.55L39.55 0.549988Z"></path>
</svg>
</button>
<pre><code><button type="button" aria-label="Close">
<svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
<path d="M0.549989 4.44999L4.44999 0.549988L43.45 39.55L39.55 43.45L0.549989 4.44999Z" />
<path d="M39.55 0.549988L43.45 4.44999L4.44999 43.45L0.549988 39.55L39.55 0.549988Z" />
</svg>
</button>
</code></pre>
<h2>Update 11 May 2020</h2>
<p><a href="https://adamsilver.io/">Adam Silver</a> suggested that <a href="https://twitter.com/adambsilver/status/1256142121142300674">using a visible text label with the icon</a> (or even just visible text, with no icon) would improve accessibility for voice dictation software users.</p>
<h2>Update 25 May 2020</h2>
<p><a href="https://www.matuzo.at/">Manuel Matuzović</a> has written <a href="https://www.htmhell.dev/20-close-buttons/">a great round up of close button bad practices</a> and a range of solutions on HTMHell.</p>
<h2>Further reading</h2>
<ul>
<li><a href="https://www.htmhell.dev/20-close-buttons/">#20 HTMHell special: close buttons from HTMHell</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code> from MDN web docs</a></li>
<li><a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html">ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used from W3C</a></li>
<li><a href="https://scottaohara.github.io/accessible_modal_window/">Accessible Modal Dialogs from Scott O'Hara</a></li>
<li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 from Adrian Roselli</a></li>
<li><a href="https://github.com/alphagov/govuk-design-system-backlog/issues/30">Modal dialogues from GOV.UK design system's backlog</a></li>
<li><a href="https://www.sarasoueidan.com/blog/accessible-icon-buttons/">Accessible Icon Buttons from Sara Soueidan</a></li>
<li><a href="https://adrianroselli.com/2019/11/aria-label-does-not-translate.html">aria-label Does Not Translate from Adrian Roselli</a></li>
</ul>
Generally, it’s better to avoid opening links in new windows or tabs2020-04-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/generally-its-better-to-avoid-opening-links-in-new-windows-or-tabs/<ul>
<li>It's bad for usability, because it takes control away from users (for example, it breaks the back button functionality) and makes interactions unpredictable</li>
<li>It's bad for accessibility because it can be disorienting for people, especially those who have access needs associated with perceiving visual content (for example people who use screen readers or screen magnifiers)</li>
<li>It can be <a href="https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing">bad for performance and security</a></li>
</ul>
<h2>Exceptions</h2>
<p>Sometimes the experience might be improved by opening links in new windows or tabs. For example, if:</p>
<ul>
<li>the link provides help from a different place</li>
<li>the link interrupts the user journey</li>
<li>the link leads to another type of document like a PDF</li>
<li>the link leads to a large image which takes time to download</li>
</ul>
<p>In these situations the link text should clearly state what's going to happen, for example:
<code><a href="#" rel="noopener noreferrer">Link to a thing (opens in a new window or tab)</a></code></p>
<h2>Download attribute – update 11 May 2020</h2>
<p><a href="https://twitter.com/adambsilver">Adam</a> suggests that PDF links can be downloaded to the device, instead of opened in a new tab, by using the <code>download</code> attribute.</p>
<h2>Further reading</h2>
<ul>
<li><a href="https://design-system.service.gov.uk/styles/typography/#opening-links-in-a-new-tab">Opening links in a new tab from GOV.UK Design System</a></li>
<li><a href="https://www.smashingmagazine.com/2008/07/should-links-open-in-new-windows/">Should Links Open In New Windows? from Smashing Magazine</a></li>
<li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary from W3C</a></li>
<li><a href="https://adrianroselli.com/2020/02/link-targets-and-3-2-5.html">Link Targets and 3.2.5 from Adrian Roselli</a></li>
<li><a href="https://github.com/alphagov/govuk-design-system/issues/935">Open links in a new window or tab GOV.UK Design System (GitHub issue)</a></li>
<li><a href="https://www.gov.uk/guidance/content-design/links">Guidance on link content design from GOV.UK</a></li>
<li><a href="http://hmrc.github.io/assets-frontend/components/open-links-in-a-new-window-or-tab/index.html">Open links in a new window or tab from HMRC Assets Frontend (old)
</a></li>
<li><a href="https://owasp.org/www-community/attacks/Reverse_Tabnabbing">Reverse Tabnabbing on Open Web Application Security Project (OWASP)</a></li>
</ul>
My first year at Swirrl2020-04-16T00:00:00Zhttps://www.benjystanton.co.uk/blog/my-first-year-at-swirrl/<p>I’ve been at <a href="https://www.swirrl.com/">Swirrl</a> for 12 months (happy swirrliversary to me)!</p>
<p>I joined as an interaction designer back in April 2019. I'd spotted that they were on the lookout for a designer after <a href="https://twitter.com/northernjamie">Jamie</a> shared a link on Twitter.</p>
<figure>
<img src="https://www.benjystanton.co.uk/images/by-the-power-of-data.jpg" alt="A round sticker that says 'by the power of data'. He-Man stands in front, raising his sword." />
<figcaption>
Swirrl's Power of Data laptop sticker
</figcaption>
</figure>
<p>I was a little worried that my skills weren't technical enough for a software team like Swirrl. But the job description was open and honest, and it made them seem like a very supportive and flexible team (which it turns out, they really are!). Plus, my time working with data at Office for National Statistics (ONS) meant that I had some relevant experience.</p>
<p>Moving on from ONS was a big step for me (and I still miss my ONS friends!). But, the move has been good for me. I feel like I'm able to contribute a lot of value to the things that Swirrl are working on.</p>
<h2>Remote working</h2>
<p>Swirrl is based in Manchester, but usually around half the team work remotely. Of course, it's 100% remote right now, due to the lockdown.</p>
<p>The team are based around the UK. With a handful of people around the world in Canada, Australia and Berlin. We use a mixture of tools to keep in touch and share work with each other…</p>
<ul>
<li><a href="https://slack.com/">Slack</a></li>
<li><a href="https://www.notion.so/">Notion</a></li>
<li><a href="https://github.com/">GitHub</a></li>
<li><a href="https://gsuite.google.co.uk/">G Suite</a></li>
<li><a href="https://trello.com/">Trello</a></li>
<li><a href="https://moqups.com/">Moqups</a></li>
</ul>
<p>I'm sure this won't come as a surprise to anyone. Choosing the right digital tools plays a huge part in how teams work together. Forcing them to use some big enterprise thing that does everything usually ends badly in my experience. (Rant over!)</p>
<h2>My role at Swirrl</h2>
<p>My work includes a mix of;</p>
<ul>
<li>user research</li>
<li>stakeholder workshops</li>
<li>drawing journey maps and wireframes</li>
<li>coding HTML and CSS</li>
</ul>
<p>The way that teams and projects are organised at Swirrl means that I'm able to keep my work-in-progress to a minimum. In turn, this means that I'm able to focus on things and make sure I'm doing my best work.</p>
<h2>Getting stuck into development</h2>
<p>One of my aims over the past few months has been to get more involved with the development phase of a project. I wanted to contribute more to day-to-day issues. Rather than only doing upfront discovery research and handing over design specs.</p>
<p>In practice, this means being more disciplined in how I use GitHub to manage and document my work. So that others on the team can make better use of my work, and be more aware of what I'm up to.</p>
<p>I'm sure there's lots of room for me to improve. But I think that working in this way is better. It shortens the feedback loop between user research and deploying improved code.</p>
<h2>Projects I'm working on</h2>
<p>My main focus has been working with Defra and the Environment Agency (EA) on some of their data services. It's exciting for me to work with different kinds of data (e.g. water quality and shoreline management) rather than statistics. (Yes, I did just say that I get excited about data.)</p>
<p>By helping EA to publish environmental data, and improving the way that people are able to access it, I feel like (in a very small way) I'm helping to improve the environment too.</p>
<hr />
<p>Here's a related post about <a href="https://www.benjystanton.co.uk/blog/remote-working-pros-and-cons/">my pros and cons of working remotely</a>.</p>
Pens for UX sketching and note taking2020-04-13T00:00:00Zhttps://www.benjystanton.co.uk/blog/pens-for-ux-sketching-and-note-taking/<p>Not surprisingly, a lot of <a href="https://twitter.com/benjystanton/status/1220305829213151235">my twitter friends are stationery nerds</a> like me.</p>
<p>If you're after a new pen to try, here's a list of recommendations. Seems like there's a lot of love for the Paper Mate Flair?</p>
<ul>
<li>Paper Mate Flair <small>(via <a href="https://twitter.com/graceellins">Grace</a>, <a href="https://twitter.com/MyGuySi">Si</a>, <a href="https://twitter.com/SamHallWales">Sam</a>, <a href="https://twitter.com/jopkins">Jonathan</a>)</small></li>
<li>Pentel SignPen <small>
(via <a href="https://twitter.com/benjystanton">Benjy</a>, <a href="https://twitter.com/chameleonic">Nic F</a>, <a href="https://twitter.com/nicprice">Nic P</a>)</small></li>
<li><a href="https://www.rotring.com/uk/fineliner-pen/154-tikky-graphic-fineliner-3501170814734.html">Rotring Tikky Graphic Fineliner</a> <small>(via <a href="https://twitter.com/whitingx">Rob</a>)</small></li>
<li>Parker Jotter <small>(via <a href="https://twitter.com/whitingx">Rob</a>)</small></li>
<li><a href="https://www.copic-shop.co.uk/copic-multiliner-sp-pens/">Copic Multiliner</a> <small>(via <a href="https://twitter.com/paulmsmith">Paul</a>)</small></li>
<li><a href="https://www.pilotpen.co.uk/en/v-ball-07-medium-tip.html">Pilot V-Ball 07</a> <small>(via <a href="https://twitter.com/stevanbarry">Stevan</a>)</small></li>
<li><a href="https://uniball.co.uk/">Mitsubishi Uniball</a> <small>(via <a href="https://twitter.com/liammcmurray">Liam</a>)</small></li>
<li><a href="https://www.mujionline.eu/uk/">Muji</a> <small>(via <a href="https://twitter.com/peterjobes">Pete</a>)</small></li>
<li>Matador I-Teen <small>(via <a href="https://twitter.com/FozluSays">Fozlusays</a>)</small></li>
<li><a href="https://www.pilotpen.co.uk/en/v-pen-erasable-medium-nib.html">Pilot V-Pen Erasable Fountain pen</a> <small>(via <a href="https://twitter.com/agriculios">Agricool</a>)</small></li>
<li><a href="https://www.winsornewton.com/uk/shop/graphic-markers/fineliners">Winsor and Newton Fineliners</a> <small>(via <a href="https://twitter.com/aw_jones">Andy</a>)</small></li>
<li>Pentel GraphGear <small>(via <a href="https://twitter.com/aw_jones">Andy</a>)</small></li>
<li><a href="https://www.winsornewton.com/uk/shop/graphic-markers/promarker">Winsor and Newton Promarker</a> <small>(via <a href="https://twitter.com/aw_jones">Andy</a>)</small></li>
<li><a href="https://www.pilotpen.co.uk/en/hi-tecpoint-v5-fine-tip.html">Pilot Hi-Tecpoint V5</a> <small>(via <a href="https://twitter.com/gramatter">Graham</a>)</small></li>
</ul>
<h2>Bonus content: try these notebooks</h2>
<ul>
<li><a href="https://rhodiapads.com/">Rhodia notebooks</a> with dot grid <small>(via <a href="https://twitter.com/wiredimage">Ben</a>)</small></li>
<li><a href="https://www.muji.eu/pages/online.asp?Sec=12">Muji notebooks</a> <small>(via <a href="https://twitter.com/MyGuySi">Si</a>)</small></li>
<li><a href="https://www.leuchtturm1917.co.uk/notebook-medium-a5-softcover-123-numbered-pages.html">Leuchtturm 1917 notebooks</a> <small>(via <a href="https://twitter.com/whitingx">Rob</a>)</small></li>
</ul>
User research activities for testing interface content2020-04-06T00:00:00Zhttps://www.benjystanton.co.uk/blog/user-research-activities-for-testing-interface-content/<p>Here are some tips on different user research techniques to try when you're testing user interface content (<a href="https://twitter.com/benjystanton/status/1247148638284980227">crowdsourced from Twitter</a> – thanks everyone!).</p>
<ul>
<li><strong><a href="https://userresearch.blog.gov.uk/2014/09/02/a-simple-technique-for-evaluating-content/">Highlighter test</a></strong> – Ask people to highlight easy-to-understand words, and confusing words, using different colours (via <a href="https://twitter.com/SocialSoup">Helen</a> and many others)</li>
<li><strong>Walkthrough</strong> – Explain to someone how to use the thing (via <a href="https://twitter.com/paulpod">Paul Pod</a>)</li>
<li><strong>Check search logs</strong> – Check the search logs to see if people are looking for features that are right there in the interface (via <a href="https://twitter.com/markhurrell">Mark Hurrell</a>)</li>
<li><strong>Task based usability test</strong> – Start really minimal, find out what you need to add from research, it's much harder to find out what to remove or change (via <a href="https://twitter.com/joelanman">Joe Lanman</a>)</li>
<li><strong><a href="https://www.nngroup.com/articles/cloze-test-reading-comprehension/">Cloze test</a></strong> – Remove words from the content and ask people what the missing words should be (via <a href="https://twitter.com/kieran_forde">Kieran Forde</a>)</li>
<li><strong>Memory test</strong> – Show pages that fade to blank after a period of time and ask people what they remember (via <a href="https://twitter.com/retiredgrinch">Grinchyface</a>)</li>
<li><strong>Eye tracking</strong> – Measure how many times people's eyes stop on different words as they read (via <a href="https://twitter.com/vonRunte">Fritz von Runte</a>)</li>
</ul>
<h2>Related links</h2>
<ul>
<li><a href="https://userresearch.blog.gov.uk/2015/07/01/what-does-this-mean-tips-for-testing-your-words/">What does this mean? Tips for testing your words.</a> (via <a href="https://twitter.com/jwaterworth">John Waterworth</a>)</li>
<li><a href="https://designnotes.blog.gov.uk/2014/07/14/things-we-learnt-designing-register-to-vote/">Things we learnt designing 'Register to vote'</a> (via <a href="https://twitter.com/joelanman">Joe Lanman</a>)</li>
<li><a href="https://medium.com/@jsaito/5-fun-ways-to-test-words-f132af5a8456">5 fun ways to test words</a> (via <a href="https://twitter.com/gwillenberg">Gretchen Willenberg</a>)</li>
<li><a href="https://docs.microsoft.com/en-us/typography/develop/word-recognition">The science of word recognition</a> (via <a href="https://twitter.com/whitingx">Rob Whiting</a>)</li>
<li><a href="https://www.uxmatters.com/mt/archives/2019/07/readability-formulas-7-reasons-to-avoid-them-and-what-to-do-instead.php">Readability Formulas: 7 Reasons to Avoid Them and What to Do Instead</a> (via <a href="https://twitter.com/cjforms">Caroline Jarrett</a>)</li>
</ul>
Making data part of the web sticker2020-04-04T00:00:00Zhttps://www.benjystanton.co.uk/blog/making-data-part-of-the-web-sticker/<p>Here's my first submission for <a href="https://twitter.com/jukesie">Jukesie's</a> <a href="https://github.com/jukesie/sticker-stories/blob/master/README.md">sticker stories</a> project. I made this whilst I was working at Office for National Statistics in 2017. <a href="https://twitter.com/ldodds">Leigh Dodds</a> was working there at the same time and wrote <a href="https://digitalblog.ons.gov.uk/2017/01/06/some-open-data-publishing-principles/">some open data publishing principles</a>.</p>
<p>Me and <a href="https://twitter.com/mr_dudders">Andy Dudfield</a> thought it would be good to turn the principles it a series of stickers and posters. I never quite got round to make a series, but this simple design and message, printed on some rather fetching holographic metallic material was <a href="https://twitter.com/benjystanton/status/931869902641786880">a hit with open data Twitter</a>.</p>
<p><img src="https://www.benjystanton.co.uk/images/make-data-part-of-the-web-sticker.jpg" alt="A sheet of circular make data part of the web stickers printed on holographic metallic material" /></p>
<p><a href="https://github.com/ONSdigital/design/blob/master/stickers/MakeDataPartOfTheWeb.pdf">Get the sticker artwork PDF from GitHub</a></p>
<ul>
<li>Designer(s): <a href="https://www.benjystanton.co.uk/">Benjy Stanton</a>, <a href="https://twitter.com/ldodds">Leigh Dodds</a></li>
<li>Organisation: <a href="https://www.ons.gov.uk/">Office for National Statistics</a></li>
<li>Team: <a href="https://digitalblog.ons.gov.uk/">Digital Publishing</a></li>
<li>Year: 2017</li>
<li>Licence: <a href="https://github.com/ONSdigital/design/blob/master/LICENSE.md">MIT License</a></li>
<li>Willingness to be contacted: Yes</li>
</ul>
Books about racism in the UK2020-02-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/books-about-racism-in-the-uk/<p>I’m trying to get better informed about racism in the UK, so I asked my Twitter friends for some book recommendations. Updated on 13 June 2020.</p>
<blockquote>Currently reading “Why I’m no longer talking to white people about race” by <a href="https://twitter.com/renireni?ref_src=twsrc%5Etfw">@renireni</a>. What should I read next? I want to educate myself about racism in the UK.<br />— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1219744937790660608?ref_src=twsrc%5Etfw">January 21, 2020</a></blockquote>
<h2>List of books about racism in the UK</h2>
<p>Here's my resulting reading list. I'm slowly making my way through it. Please let me know if you have any other recommendations.</p>
<ul>
<li>Why I’m No Longer Talking to White People About Race by <a href="https://twitter.com/renireni">Reni Eddo-Lodge</a></li>
<li>The Good Immigrant by <a href="https://twitter.com/nikeshshukla">Nikesh Shukla</a></li>
<li>Brit(ish): On Race, Identity and Belonging by <a href="https://twitter.com/afuahirsch">Afua Hirsch</a></li>
<li>Natives: Race and Class in the Ruins of Empire by <a href="https://twitter.com/akalamusic">Akala</a></li>
<li>Black and British: A Forgotten History by <a href="https://twitter.com/DavidOlusoga">David Olusoga</a></li>
<li>Heart Of The Race: Black Women's Lives in Britain by Beverley Bryan</li>
<li>Safe: On Black British Men Reclaiming Space by Derek Owusu</li>
<li>What is Islamophobia?: Racism, Social Movements and the State by <a href="https://twitter.com/narzanin">Narzanin Massoumi</a></li>
</ul>
<h2>More resources on racism and anti-racism</h2>
<ul>
<li><a href="https://tatianamac.com/posts/white-guyde/">White Guyde To The Galaxy from Tatiana Mac</a></li>
<li><a href="https://twitter.com/privilegecafe_">The Privilege Cafe on Twitter (@privilegecafe_)</a></li>
<li><a href="https://www.standard.co.uk/lifestyle/books/book-resources-racism-a4457241.html">These books and resources will help you understand anti-racism from Natasha Mwansa</a></li>
<li><a href="https://medium.com/@bbrownie.bb/anti-racism-what-you-can-do-922b22d480bc">Anti-racism: What you can do from Beth Brown</a></li>
<li><a href="https://medium.com/@Diversenett/icantbreathe-704081cc0d8f">#ICantBreathe from Annette Joseph</a></li>
</ul>
<h2>Some Twitter threads that link to more resources</h2>
<ul>
<li><a href="https://twitter.com/wanderingbritt_/status/1267617830872154113">Children's books that discuss race and racism from Brittany</a></li>
<li><a href="https://twitter.com/ObiomaUgoala/status/1266330305985732609">Positive action tips with a UK focus from Ougoala</a></li>
<li><a href="https://twitter.com/EsylltMair/status/1268522259733524480">Resources that focus on racism in Wales from Esyllt Sears</a></li>
</ul>
<br />
<figure>
<img src="https://www.benjystanton.co.uk/images/true" alt="" />
<figcaption>
</figcaption>
</figure>
Accessible search form mark-up2020-01-10T00:00:00Zhttps://www.benjystanton.co.uk/blog/accessible-search-form-mark-up/<p>A brief checklist for marking-up an accessible search form. Last updated on 21 May 2020.</p>
<ul>
<li>Add <code>role="search"</code> landmark to the <code><form></code></li>
<li>Associate the <code><label></code> and <code><input></code> using <code>for="…"</code> and <code>id="…"</code></li>
<li>Add <code>type="search"</code> or <code>type="text"</code> to the <code><input></code></li>
<li>Add <code>type="submit"</code> to the <code><button></code></li>
<li>Optionally, associate the <code><input></code> with any help text using <code>aria-describedby="…"</code></li>
</ul>
<h2>Example</h2>
<pre><code><form role="search">
<label for="search">Search</label>
<input id="search" type="search" aria-describedby="search-help-text">
<button type="submit">Search</button>
<p id="search-help-text">Search by town or postcode.</p>
</form>
</code></pre>
<h2>More info</h2>
<ul>
<li><a href="https://design-system.service.gov.uk/components/text-input/">Text input components from GOV.UK Design System</a></li>
<li><a href="https://adrianroselli.com/2019/07/ignore-typesearch.html">Maybe Ignore type=search from Adrian Roselli</a></li>
<li><a href="https://adrianroselli.com/2015/08/where-to-put-your-search-role.html">Where to Put Your Search Role from Adrian Roselli</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA: search role from MDN</a></li>
<li><a href="https://adrianroselli.com/2020/01/my-priority-of-methods-for-labeling-a-control.html">My Priority of Methods for Labeling a Control from Adrian Roselli</a></li>
</ul>
Some personal goals for 20202020-01-09T00:00:00Zhttps://www.benjystanton.co.uk/blog/some-personal-goals-for-2020/<p>Here are some low-key, achievable personal things for 2020. I'm ignoring the first few days of January, as they are still part of the Christmas hols.</p>
<p>Also, this is my 150th blog post!</p>
<h2>Money</h2>
<ul>
<li>Finish paying off my student loan</li>
<li>Don't take on any short term debt (like credit cards or overdrafts)</li>
</ul>
<h3>Update on 13 April 2020</h3>
<ul>
<li>My student loan direct debit payments stopped until April because I switched banks, so I've been saving the money instead. Might put the money saved up towards another loan instead.</li>
<li>No credit cards or overdrafts so far</li>
</ul>
<h3>Update on 8 July 2020</h3>
<ul>
<li>Nearly saved up enough to pay off my student loan</li>
<li>Going to put it in a Monzo pot, and let Monzo draw from it every month, so that I have access to the money just in case</li>
<li>No credit cards or overdrafts so far</li>
</ul>
<h2>Personal</h2>
<ul>
<li>Take more steps than in 2019 (more than 7000 steps per day on average)</li>
<li>Only eat meat 1 day a week (that means I have a 52 meat budget for the year!)</li>
<li>Weigh less than 13 stone 7 pounds (on average)</li>
<li>No flights</li>
<li>Spend at least 1 hour a week playing video games with the kids</li>
</ul>
<h3>Update on 13 April 2020</h3>
<ul>
<li>My step count was going well until the Coronavirus lockdown, might just scrap this goal!</li>
<li>We're eating a lot less meat as a family. Probably close to once a week on average, but I've given up counting.</li>
<li>Got my weight down to 12 stone 7 pounds, need to lose a little bit more before my BMI is in the ideal zone.</li>
<li>No flights so far!</li>
<li>Hard to track this, but put some good time into Luigi's Mansion and Kingdom Hearts.</li>
</ul>
<h3>Update on 8 July 2020</h3>
<ul>
<li>Step count is averaging about 5,600 because lockdown</li>
<li>Weight is averaging under 13 stone, slowly putting on weight because lockdown</li>
<li>Given up meat most weeks, but still having some on the odd occasion</li>
<li>No flights so far because lockdown</li>
<li>Currently playing Super Mario Maker 2</li>
</ul>
<h2>Home</h2>
<ul>
<li><s>Get the decking sorted</s></li>
<li>Plant 5 trees</li>
<li><s>Grow some vegetables</s> (start with the pumpkin seeds from Halloween)</li>
<li><s>Plant more wild flowers</s></li>
<li><s>Let the lawn grow at the bottom of the garden (again)</s></li>
</ul>
<h3>Update on 13 April 2020</h3>
<ul>
<li>Decking is done</li>
<li>Planted some vegetables and wild flowers</li>
<li>No-mow patch going well, noticing more wild flowers growing naturally, especially in front garden</li>
</ul>
<h3>Update on 8 July 2020</h3>
<ul>
<li>No trees planted, but lots of flowers, small plants and vegetables planted in garden</li>
</ul>
Making data tables more accessible2019-12-18T00:00:00Zhttps://www.benjystanton.co.uk/blog/making-data-tables-more-accessible/<p>For data tables to be accessible, I like to take care of the graphic design, content design and mark-up. These three things work together to improve the way users able to find, use and understand the data. Last updated on 16 October 2020.</p>
<p>Whilst working at Office for National Statistics (ONS) I worked with my content design colleagues <a href="https://twitter.com/Lozza119">Laura</a> and <a href="https://twitter.com/itspaulmcgroovy">Paul</a> to improve our tables.</p>
<p>We also worked with accessibility specialists at the <a href="https://digitalaccessibilitycentre.org/">Digital Accessibility Centre</a> and the <a href="https://www.gov.uk/service-manual/communities/accessibility-community">UK government accessibility community</a>. I'm sharing these notes now before they're lost in a Google Drive forever.</p>
<h2>Use semantic mark-up</h2>
<ul>
<li>Use <code><th></code> tags to define the header cells.</li>
<li>Use <code><caption></code> tags. Captions are like headings for tables, and they help screen reader users understand whether they should listen to, or skip the tables.</li>
<li>Don't cram sentences or meta data that describe the table (like geographic coverage) into table cells.</li>
<li>If you need to add extra content like footnotes, wrap the whole table in a <code><figure></code> tag and insert a <code><footer></code> tag to hold the footnotes.</li>
<li>If you're using <code><figure></code>, it's probably best to use <code><figcaption></code> instead of <code><caption></code>.</li>
</ul>
<h2>Avoid complex markup</h2>
<ul>
<li>If you're using <code>colspan</code> everywhere to merge cells it's probably a sign your table is too complex.</li>
<li>Split complex tables into a few small ones.</li>
</ul>
<h2>Think about structure</h2>
<p><img src="https://www.benjystanton.co.uk/images/table-structure.png" alt="" /></p>
<ul>
<li>Think about structure, not just the visual layout.</li>
<li>Don't split text and headings across cells.</li>
<li>Remember that tables give structure to data.</li>
<li>Avoid using cells simply to control the layout.</li>
</ul>
<h2>Borders can help</h2>
<ul>
<li>Borders (horizontal and/or vertical) can help users to read complex tables.</li>
<li>It’s sometimes frowned upon to include vertical borders, as it can add extra noise to the design and detract from the meaning, but in some cases they can be useful.</li>
<li>We met an accessibility expert who had Nystagmus. This is an eye condition which can lead to involuntary eye movement. Vertical borders helped this person to read complex tables.</li>
</ul>
<h2>Avoid blank cells</h2>
<ul>
<li>Don't leave cells blank.</li>
<li>Explain why there isn't a value.</li>
<li>If space is limited, use "N/A" (to mean “not applicable”).</li>
</ul>
<h2>Further reading on tables</h2>
<ul>
<li><a href="https://www.gov.uk/guidance/content-design/tables#style">Use short content style to save space by GOV.UK</a></li>
<li><a href="https://webaim.org/techniques/tables/data">Creating Accessible Tables by WebAIM</a></li>
<li><a href="https://adrianroselli.com/tag/tables">Everything that Adrian Roselli has written about tables</a></li>
<li><a href="https://inclusive-components.design/data-tables/">Inclusive Components: Data Tables</a></li>
<li><a href="https://twitter.com/webaxe/status/1255864003424706560">Tweet from Web Axe</a></li>
<li><a href="https://gist.github.com/benjystanton/f027bfcfa30c009276e069a3e4c74bf5">Content design for data tables, spreadsheets, CSVs and APIs from Benjy Stanton (GitHub Gist)</a></li>
<li><a href="https://www.brucelawson.co.uk/2020/accessible-data-tables/">Accessible data tables from Bruce Lawson</a></li>
<li><a href="https://tink.uk/how-screen-readers-navigate-data-tables/">How screen readers navigate data tables from Léonie Watson</a></li>
<li><a href="https://www.a11yproject.com/posts/2016-03-05-accessible-data-tables/">Create accessible data tables from he A11Y Project</a></li>
</ul>
User research questions for data users2019-12-09T00:00:00Zhttps://www.benjystanton.co.uk/blog/user-research-questions-for-data-users/<p>A list of questions to help with user research when designing data things.</p>
<p>I was inspired to write this after reading Andrew Duckworth's excellent post <a href="https://grillopress.github.io/2019/12/05/design-for-real-data.html">design for real data</a>. In the post, they list questions that can help you discover details about the data that you're working with. I think the questions have lots of potential uses, and I plan on trying them out next time we do research with data providers.</p>
<p>So, inspired by that post, here's my list of question aimed at end-users of data.</p>
<p>I've found that with a bit of tweaking, these questions can work for a range of users. Whether those people need their data as written information, spreadsheets or APIs.</p>
<ul>
<li>How do you find the data? Where do you start?</li>
<li>Which specific bits of the data do you need and why?</li>
<li>What decisions does the data inform?</li>
<li>What is your end goal?</li>
<li>What software do you use to interrogate or manipulate the data?</li>
<li>What manual tasks do you need to do every time?</li>
<li>Which file formats are most useful?</li>
<li>How will you know if the data is updated? What will you do then?</li>
<li>What will you do next with the data?</li>
<li>Who will you share the data with? How?</li>
<li>What other sources of data you use?</li>
</ul>
<h2>Thanks</h2>
<p>Thanks to <a href="https://twitter.com/AldaviesAlison">Alison</a>, <a href="https://mobile.twitter.com/johnlewisons">John</a>, <a href="https://twitter.com/robchamberspfc">Rob</a>, <a href="https://twitter.com/jeremyhhy">Jeremy</a>, <a href="https://twitter.com/AgileTimelord">Jason</a>, <a href="https://twitter.com/RosalieMarshall">Rosalie</a>, <a href="https://twitter.com/Loup73">Louise</a> and the team at <a href="https://www.swirrl.com/">Swirrl</a> who have been helping me to get better at this data stuff.</p>
What have I accomplished this decade?2019-11-14T00:00:00Zhttps://www.benjystanton.co.uk/blog/what-have-i-accomplished-this-decade/<p>A list of big things that I’ve done over the past 10 years.</p>
<ol>
<li>Got married</li>
<li>Had our first baby</li>
<li>Had to have our dog put down (RIP Harry)</li>
<li>Worked at a design agency</li>
<li>Moved house</li>
<li>Had our second baby</li>
<li>Went freelance</li>
<li>Started a design meet-up</li>
<li>Became a 2 car family</li>
<li>Got my first proper UX role</li>
<li>Climbed the Welsh 3 peaks</li>
<li>Had our third baby</li>
<li>Decided to stop having babies</li>
<li>Became a civil servant</li>
<li>Hired a whole design team</li>
<li>Started working at Swirrl</li>
<li>Got my first proper remote job</li>
<li>Became a 1 car family</li>
</ol>
<p>Joking aside… deciding to stop having kids was probably the hardest time for us. Even though we always planned to have 3, when we reached that point it was mentally very difficult.</p>
<hr />
<p>Anyway, here's a similar post I did <a href="https://www.benjystanton.co.uk/blog/30-things-done-before-im-30/">when I reached thirty</a>.</p>
Accessibility checklist2019-11-07T00:00:00Zhttps://www.benjystanton.co.uk/blog/accessibility-checklist/<p>A list of accessibility recommendations; covering typography, content, layout and interaction.</p>
<h2>Typography</h2>
<ul>
<li>Nest headings in order (for example, h1, h2, h3)</li>
<li>Don't skip heading levels</li>
<li>Use semantic mark-up (for example, headings, lists and blockquotes)</li>
<li>Links should look like links (for example, blue and underlined)</li>
<li>Lines should be less than 80 characters wide</li>
<li>Add suitable vertical spacing between lines and paragraphs</li>
<li>Avoid italics, block capitals or justified text</li>
<li>Use a san-serif font with thick letters</li>
<li><a href="https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/">Make sure text can be resized</a></li>
<li><a href="https://adrianroselli.com/2019/12/responsive-type-and-zoom.html">Responsive Type and Zoom by Adrian Roselli</a></li>
</ul>
<p>Read my post about <a href="https://www.benjystanton.co.uk/blog/how-improving-typography-can-help-us-to-meet-user-needs/">how improving typography can help us to meet user needs</a>.</p>
<h2>Written content</h2>
<ul>
<li>Use plain English</li>
<li>Explain unusual words and jargon</li>
<li>Explain abbreviations in the first instance</li>
<li><a href="https://www.tpgi.com/using-the-html-title-attribute/">Don't rely on link title attribute</a></li>
<li>Put the most important information at the start</li>
<li>Explain what a user has to do in a clear and concise way</li>
<li>Use headings and lists to break the content into chunks</li>
<li>Download links labels should include file format and size</li>
<li>Headings, links and button text must be unique and descriptive</li>
<li>Each page should have a unique, descriptive h1 and page title</li>
</ul>
<h2>Tables</h2>
<ul>
<li><a href="https://www.gov.uk/guidance/content-design/tables#how-to-make-tables-accessible">Make sure tables are accessible</a></li>
<li>Only use tables to present data</li>
<li>Use tables as accessible alternatives to charts and infographics</li>
<li>Split complex tables into multiple small ones</li>
<li>Use correct table markup for headers, rows and cells, so screen reader users can understand and navigate them</li>
</ul>
<p>Read my post about <a href="https://www.benjystanton.co.uk/blog/making-data-tables-more-accessible/">making data tables more accessible</a>.</p>
<h2>Charts</h2>
<p>Read my post about <a href="https://www.benjystanton.co.uk/blog/a-plan-for-accessible-charts/">accessible charts</a>.</p>
<h2>Colour and contrast</h2>
<ul>
<li>Check colour contrast between foreground and background elements</li>
<li><a href="http://webaim.org/resources/contrastchecker/">WebAIM have a web based tool</a>, or <a href="https://usecontrast.com/">Contrast is a great Mac based tool</a></li>
<li>Check design works in black and white</li>
<li>Don't communicate using colour alone</li>
<li>Check design works in high contrast mode</li>
<li>Read <a href="https://colorandcontrast.com/">An interactive guide to color & contrast</a></li>
<li><a href="https://www.whocanuse.com/">Who can use</a></li>
</ul>
<h2>Interaction</h2>
<ul>
<li>Check design is functional when using a keyboard to navigate</li>
<li>Check it's visually apparent which page element has current keyboard focus <a href="https://gomakethings.com/if-its-interactive-it-needs-focus-styles/">if it’s interactive, it needs focus styles</a></li>
<li><a href="https://www.tpgi.com/short-note-on-improving-usability-of-scrollable-regions/">Make sure scrollable regions are focusable</a></li>
<li><a href="https://ishadeed.com/article/clickable-area/">Make clickable areas (target size) at least 44 pixels</a></li>
<li><a href="https://gomakethings.com/better-more-accessible-active-link-styling/">Use aria-current if you're styling active page links</a></li>
<li>Complex interface components, like sliders, should be avoided when simple solutions, like a text input, can be used instead</li>
<li>If an experience cannot be made accessible, create another route for users to get that information</li>
</ul>
<h2>Forms</h2>
<ul>
<li>All form inputs should have labels and be linked with a 'for' attribute</li>
<li><a href="https://design-system.service.gov.uk/components/radios/">Group radios together</a> with a <code><fieldset></code> and a <code><legend></code></li>
<li>Forms and interactive elements should have useful hints if needed</li>
<li>Avoid using placeholder text, because it disappears when users start typing</li>
<li>Error messages should suggest ways to fix errors</li>
<li>Error messages should show a summary of errors above the h1 and move focus to it</li>
<li>Error message summaries should include an h1 message that tells the screen reader user there is a problem, and give a list of descriptive errors with links to the relevant fields</li>
<li><a href="https://www.benjystanton.co.uk/blog/accessible-search-form-mark-up/">Example search form mark-up</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/accessible-close-buttons/">Close buttons</a></li>
<li><a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/">Be careful with input type="number"</a></li>
<li><a href="https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/">Is input type="date" ready for use in accessible websites?</a></li>
</ul>
<h2>Images</h2>
<ul>
<li>Images should have good alternative text</li>
<li>If images are purely decorative, then they need an empty alt tag <code>alt=""</code></li>
<li>Avoid using images of text</li>
</ul>
<p>Read my post about <a href="https://www.benjystanton.co.uk/blog/add-svg-icons/">SVGs icons</a>.</p>
<h2>Layout and structure</h2>
<ul>
<li>Use HTML sectioning elements like <code><header></code>, <code><main></code> and <code><nav></code></li>
<li>Add a <a href="https://design-system.service.gov.uk/components/skip-link/">skip to main content link</a></li>
<li>Layout should be consistent and predictable</li>
<li>Do not rely upon shape, size, or visual location (for example, "Click the square icon to continue" or "Instructions are in the right-hand column")</li>
<li>Check reading and navigation order is logical</li>
<li>Check page is readable and functional when text size is doubled</li>
<li>Don't use duplicate id attributes</li>
</ul>
<h2>iframes</h2>
<ul>
<li>Use the iframe title attribute to give the content a descriptive title</li>
<li>Make sure interactive elements inside an iframe are usable with a keyboard</li>
<li>Make sure interactive elements have a clear focus style</li>
<li>Test the iframe is readable and functional with browser zoom at 200%</li>
<li>Test the content doesn't overflow or become truncated when font size is increased</li>
</ul>
<h2>Manual tests</h2>
<p>Check the service can be operated with…</p>
<ul>
<li>a mouse</li>
<li>a keyboard</li>
<li>a touch device</li>
<li>CSS off</li>
<li>increased browser zoom</li>
<li>increased browser font size</li>
<li>high contrast mode</li>
<li>speech recognition software, like Dragon NaturallySpeaking</li>
<li>screen magnification tools</li>
<li>screen readers</li>
<li>a range of browsers and devices</li>
</ul>
<h3>Further reading on manual testing</h3>
<ul>
<li><a href="https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in">Designing for different browsers and devices from GOV.UK</a></li>
<li><a href="https://accessibility.blog.gov.uk/2018/09/27/assistive-technology-tools-you-can-use-at-no-cost/">Assistive technology tools you can test with at no cost from Anika Henke</a></li>
<li><a href="https://sarahmhigley.com/writing/whcm-quick-tips/">Quick Tips for Windows High Contrast Mode from Sarah Higley</a>.</li>
<li><a href="https://blog.sapegin.me/all/accessibility-testing/">The most useful accessibility testing tools and techniques from Artem Sapegin</a></li>
</ul>
<h2>Automatic tests</h2>
<ul>
<li><a href="https://wave.webaim.org/extension/">WAVE by WebAIM</a></li>
<li><a href="https://www.deque.com/axe/">Axe by Deque</a></li>
<li><a href="https://developers.google.com/web/tools/lighthouse">Lighthouse by Google</a></li>
<li><a href="https://accessibilityinsights.io/">Accessibility Insights by Microsoft</a></li>
<li>Check html mark-up is valid</li>
</ul>
<p>Remember that automatic tests aren't perfect.</p>
<blockquote>
<p>It’s important to note, however, that automated accessibility testing tools can only catch 30-50% of your accessibility defects.
— <a href="https://www.deque.com/blog/how-to-get-development-on-board-with-accessibility-testing/">Deque</a></p>
</blockquote>
<p>Read <a href="https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/">building the most inaccessible site possible with a perfect Lighthouse score from Manuel Matuzović</a>.</p>
<h2>Other accessibility checklists and links</h2>
<ul>
<li><a href="https://www.brucelawson.co.uk/2019/checklist-to-avoid-the-most-common-accessibility-errors/">Checklist to avoid the most common accessibility errors from Bruce Lawson</a></li>
<li><a href="https://fossheim.io/writing/posts/accessible-design-tools/">Tools for designing good-looking accessible interfaces from Sarah L. Fossheim</a></li>
<li><a href="https://github.com/hmrc/accessibility">Accessibility resources GitHub repo from Phil Sherry</a></li>
<li><a href="http://www.webaxe.org/wcag-cheat-sheets/">WCAG Cheat Sheets and Checklists from WebAxe</a></li>
<li><a href="https://www.gov.uk/government/publications/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one">Doing a basic accessibility check if you cannot do a detailed one guidance from GOV.UK</a></li>
<li><a href="https://bite-sized-a11y.com/">Quick and Small Accessibility</a></li>
</ul>
Using Shortcuts app to add location data to my posts2019-11-06T00:00:00Zhttps://www.benjystanton.co.uk/blog/using-shortcuts-app-to-add-location-data-to-my-posts/<p>I've been playing around with the <a href="https://apps.apple.com/us/app/shortcuts/id915249334">Shortcuts app</a> since they added it to iOS. It allows you to string together actions to create automatic workflows.</p>
<p>I think it has a lot of potential for adding some <a href="https://indieweb.org/">IndieWeb</a> features to my blog, which previously felt out of reach without using services like Instagram or Swarm (Boo!).</p>
<h2>Borrowing an idea from Jeremy Keith</h2>
<p>I spotted a while ago that Jeremy has <a href="https://adactio.com/notes/16026">location checkins</a> attached to his image posts. I really had no idea how I might achieve this until I spotted that the Shortcuts app allows you to grab your phone's location and do stuff with it.</p>
<p>I also realised that Jeremy passes the latitude, longitude and zoom level into an <a href="https://www.openstreetmap.org/">Open Street Map</a> url that allows users to click through and see a map of the checkin location.</p>
<pre><code>https://www.openstreetmap.org/#map=15/51.2211/4.3997
</code></pre>
<h2>Create a "copy my location" workflow</h2>
<p>So I started playing with Shortcuts and came up with this workflow…</p>
<blockquote id="workflow">
<ul>
<li>Get location (of my phone)</li>
<li>Extract the latitude, longitude and city as 3 separate variables</li>
<li>Insert those variables into a text template (which happens to be a short snippet of html)</li>
<li>Then copy that to my phone’s clipboard</li>
</ul>
</blockquote>
<figure aria-describedby="workflow">
<img src="https://www.benjystanton.co.uk/images/copy-location-shortcuts.png" alt="" />
<figcaption>
Screenshot of Shortcuts app
</figcaption>
</figure>
<p>Once workflows are created, you can even add them from the iOS's "Today View", so that they're within easy reach. Having the text snippet in my clipboard means that I can paste into into a text editor when I'm writing posts either on my phone or my laptop.</p>
<h3>Example</h3>
<p><a href="https://www.openstreetmap.org/#map=9/51.47608788174919/-3.179009460568023">Posted from Cardiff, United Kingdom</a></p>
<h3>HTML</h3>
<pre><code><a href="https://www.openstreetmap.org/#map=9/51.47608788174919/-3.179009460568023">
Posted from Cardiff, United Kingdom
</a>
</code></pre>
<h2>Next steps</h2>
<p>There is lots of potential for tweaking this workflow, and reusing the data to create embeddable maps, or categorising posts by location for example.</p>
<p>I'm also working on a more complex workflow that allows me to post photos (with location metadata) directly from my phone to my blog, using my <a href="https://www.benjystanton.co.uk/blog/creating-the-image-post-layout/">image post template</a>. Although that one has more moving parts, so I need to iron out a few things before sharing it.</p>
Going full Monzo2019-11-05T00:00:00Zhttps://www.benjystanton.co.uk/blog/going-full-monzo/<p>I’ve recently switched my bank current account to <a href="https://monzo.com/">Monzo</a>.</p>
<h2>Beta user</h2>
<p>I’ve been a user since March 2016 when the bank was in beta, but even though I’ve enjoyed using the app for short periods, I never really used it for sustainable periods because it wasn’t my main account.</p>
<h2>Overdraft</h2>
<p>One of the last blockers to me switching was the fact that my old overdraft was bigger than the one Monzo would provide. So I decided to bite the bullet and get a separate loan to pay that off (and a few other things – ahem). So I could switch to Monzo without needing an overdraft.</p>
<h2>Switching</h2>
<p>Once the overdraft issue was sorted, I tried to use the automatic account switch, but that failed. I think it was because my old account was a joint account.</p>
<p>Manually switching was a pain.</p>
<p>It highlighted how easy it can be to update your direct debit details with user-centred companies like <a href="https://bulb.co.uk/">Bulb</a></p>
<p>And also how bad it can be. With one company I had to request a paper form to be posted out to me. Then I had to return it. Then they posted out a confirmation to me. Which was wrong, so I had to call them up to fix it.</p>
<p>In the end I did manage to do it all within one month. But I did have to create a Trello Board to manage it all.</p>
<h2>Benefits of switching</h2>
<p>I’m trying to be more sensible with my spending and I think Monzo helps me do that.</p>
<p>I love that I can put money aside for bills into pot, and clearly see available spending money that’s left for the month.</p>
<p>I also like that, at a glance, I can check whether I’m spending too quickly or that I'll have money left over.</p>
<h2>Conclusion</h2>
<p>So far I’m really happy. I was slightly nervous when I heard the bad press about peoples’ accounts being frozen, but ultimately, the way Monzo responded to it put my mind at ease.</p>
<p>It would be nice if all companies I dealt with had the same great service design as companies like Monzo and Bulb.</p>
Work trips 20192019-11-04T00:00:00Zhttps://www.benjystanton.co.uk/blog/work-trips-2019/<p>This is a simple presentation of the trips I’ve made for work in 2019, which I keep a record of over the year. I did <a href="https://www.benjystanton.co.uk/blog/work-trips-2018/">something similar last year</a>. I was slightly surprised (and pleased) that even now that I’m working remotely, I’m still getting about a bit.</p>
<div>
<div>
<span>
20
</span>
<span> Individual trips</span>
</div>
<div>
<span>
11
</span>
<span> Unique places</span>
</div>
</div>
<h2>Places</h2>
<ul>
<li>Abergavenny</li>
<li>Bristol</li>
<li>Cardiff</li>
<li>Coventry</li>
<li>Edinburgh</li>
<li>London</li>
<li>Manchester</li>
<li>Newport</li>
<li>Reading</li>
<li>Swindon</li>
<li>Titchfield</li>
</ul>
<h2 id="reasons-for-trips">Reasons for trips</h2>
<ul>
<li>Conference, training or workshop</li>
<li>Meeting</li>
<li>Remote work</li>
<li>User research</li>
</ul>
Finally went to Ty Cwrw in Mumbles last night, tried a lovely Tenby Brewing x Tiny Rebel ale2019-11-03T00:00:00Zhttps://www.benjystanton.co.uk/blog/finally-went-to-ty-cwrw-in-mumbles-last-night,-tried-a-lovely-tenby-brewing-x-tiny-rebel-ale/<figure>
<img src="https://www.benjystanton.co.uk/images/finally-went-to-ty-cwrw-in-mumbles-last-night,-tried-a-lovely-tenby-brewing-x-tiny-rebel-ale.jpeg" alt="Postcard with an illustration of the front of the pub" />
<figcaption>
<h1>Finally went to Ty Cwrw in Mumbles last night, tried a lovely Tenby Brewing x Tiny Rebel ale</h1>
</figcaption>
</figure>Coffee beans2019-11-02T00:00:00Zhttps://www.benjystanton.co.uk/blog/coffee-beans/<p>A list of specialty coffees that I’ve tried at home, so I can remember which ones I like. Thanks to the excellent Square Peg for being my supplier of choice.</p>
<h2>Peru Cajamarca Regional Select</h2>
<dl>
<dt>Process</dt>
<dd>Washed</dd>
<dt>Tasting notes</dt>
<dd>Tangerine, Maple Syrup, Macadamia</dd>
<dt>Type</dt>
<dd>Single origin</dd>
<dt>Roaster</dt>
<dd><a href="https://cliftoncoffee.co.uk/">Clifton Coffee Roaster</a>, Bristol</dd>
</dl>
<h2>Finca Chayote</h2>
<dl>
<dt>Process</dt>
<dd>Natural</dd>
<dt>Tasting notes</dt>
<dd>Sweet Pineapple, Cocoa Finish</dd>
<dt>Type</dt>
<dd>Single origin</dd>
<dt>Roaster</dt>
<dd><a href="https://www.crankhousecoffee.co.uk/">Crankhouse Coffee</a>, Exeter</dd>
</dl>
<h2><a href="https://www.crukafe.com/products/merchants-blend">Organic Merchant's Blend</a></h2>
<dl>
<dt>Process</dt>
<dd>Not sure</dd>
<dt>Tasting notes</dt>
<dd>Dark Chocolate, Raisin, Nutmeg</dd>
<dt>Type</dt>
<dd>Multi origin</dd>
<dt>Roaster</dt>
<dd><a href="https://www.crukafe.com/">Cru Kafe</a>, London</dd>
</dl>Tiny Rebel beer mat2019-10-26T00:00:00Zhttps://www.benjystanton.co.uk/blog/tiny-rebel-beer-mat/<figure>
<img src="https://www.benjystanton.co.uk/images/tiny-rebel-beer-mat.jpeg" alt="Round beer mat pegged on display" />
<figcaption>
<h1>Tiny Rebel beer mat</h1>
</figcaption>
</figure>Design workshops2019-07-06T00:00:00Zhttps://www.benjystanton.co.uk/blog/design-workshops/<p>I’m a big fan of structured/facilitated design workshops. They can be incredibly useful for user research sessions, co-designing services with teams, and stakeholder meetings.</p>
<p>Practising how to run these workshops, and being able to pick and choose the right one for the right task is becoming more valuable to me as a designer as I gain experience.</p>
<h2>Design workshop collections</h2>
<p>Here are some sites that list a range of design workshops, activities and exercises…</p>
<ul>
<li><a href="https://methods.18f.gov/">18F methods</a></li>
<li><a href="https://www.atlassian.com/team-playbook/plays">Atlassian team playbook</a></li>
<li><a href="https://designsprintkit.withgoogle.com/methodology/overview">Google design sprint methodology</a></li>
<li><a href="https://github.com/alphagov/govdesign/blob/master/Cards_User_Research_Activities.pdf">GDS user research activity cards</a></li>
<li><a href="https://www.designkit.org/methods.html">Design Kit methods</a></li>
<li><a href="https://gamestorming.com/">Gamestorming</a></li>
<li><a href="http://www.liberatingstructures.com/">Liberating Structures</a></li>
<li><a href="https://think.design/services/user-research-company/">Think Design's research methods</a> (via <a href="https://twitter.com/whitingx">Rob Whiting</a>)</li>
<li><a href="https://dropbox.design/article/mental-models-for-designers">Mental models for designers</a></li>
<li><a href="https://servicedesigntools.org/tools">Service Design Tools</a> (via <a href="https://twitter.com/katetowsey">Kate Towsey</a>)</li>
<li><a href="https://www.smashingmagazine.com/2023/03/organizing-design-workshops-checklist/">A Comprehensive Checklist For Running Design Workshops</a></li>
</ul>
<h2>A list of design workshop methods</h2>
<p>Here are some links to specific design workshop methods…</p>
<ul>
<li><a href="https://designnotes.blog.gov.uk/2017/11/27/using-design-crits-to-improve-collaboration/">Design critiques</a></li>
<li><a href="https://www.nngroup.com/articles/prioritization-matrices/">Prioritization matrix</a></li>
<li><a href="https://www.nngroup.com/articles/empathy-mapping/">Empathy map</a></li>
<li><a href="https://medium.com/digital-services-nova-scotia/introducing-cards-against-how-might-we-d968a164a3ea">Cards Against How Might We</a></li>
<li><a href="https://www.intercom.com/blog/accidentally-invented-job-stories/">Job stories</a></li>
<li><a href="https://www.interaction-design.org/literature/article/service-blueprints-communicating-the-design-of-services">Service blueprint</a></li>
<li><a href="https://www.interaction-design.org/literature/article/map-the-stakeholders">Stakeholder mapping</a></li>
<li><a href="https://medium.com/the-abcs-of-creating-a-value-proposition-canvas/the-elements-of-a-value-map-7af0d00a682e">Value proposition map</a></li>
<li><a href="https://www.nngroup.com/articles/customer-journey-mapping/">User journey map</a></li>
<li><a href="https://methods.18f.gov/decide/personas/">Personas</a></li>
<li><a href="https://www.cxpartners.co.uk/our-thinking/task-model-cheat-sheet-pdf/">Task Model</a> (via <a href="https://twitter.com/nicprice">Nic Price</a>)</li>
<li><a href="https://articles.uie.com/despicable-design-when-going-evil-is-the-perfect-technique/">Despicable Design</a></li>
<li><a href="https://medium.com/@wnialloconnor/the-gamblers-approach-to-running-a-research-kick-off-workshop-e5d45da4a578">Making Product Decisions in Bets</a></li>
<li><a href="https://servicedesigntools.org/tools/synthesis-wall">Synthesis Wall</a> (via <a href="https://twitter.com/katetowsey">Kate Towsey</a>)</li>
<li><a href="https://blog.louisedowne.com/2020/06/24/introducing-the-good-services-scale/">The good services scale from Lou Downe</a></li>
</ul>
Writing user stories2019-06-28T00:00:00Zhttps://www.benjystanton.co.uk/blog/writing-user-stories/<p>I've been looking again at user stories recently, and had a chance to reflect on why they're useful (and why they are difficult to get right). As I <a href="https://www.benjystanton.co.uk/blog/weeknotes-series-03-episode-05/">wrote in my weeknotes last month</a>… "the middle bit is quite easy to write, the user groups are a little more difficult, and the “so that” bit is really difficult".</p>
<p>Here are some notes that I pulled together on how to write better ones (borrowed heavily on the excellent advice in the <a href="https://www.gov.uk/service-manual">GOV.UK Service Manual</a>).</p>
<h2>Format</h2>
<ul>
<li>As a… [who is the user?]</li>
<li>I need to… [what does the user want to do?]</li>
<li>so that… [why does the user want to do this? What is their goal?]</li>
</ul>
<h2>Tips</h2>
<ul>
<li>User stories are tasks that users must complete, or knowledge they must acquire to inform a decision.</li>
<li>A user in this case does not have to be just one person. It can mean a broad group of people.</li>
<li>User stories should be specific to a person or group of people (to as low a level of granularity as is practical) and to a moment in time.</li>
<li>Try to write from the users‘ perspective. Use the same language that users would use.</li>
<li>Try to describe the problem, not the solution.</li>
<li>If you need to add more detail, try writing acceptance criteria. A list of points that indicate when a user story is complete.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://www.gov.uk/service-manual/agile-delivery/writing-user-stories">Writing user stories</a> on the <a href="https://www.gov.uk/service-manual">GOV.UK service manual</a></li>
<li><a href="http://www.hollidazed.co.uk/wp-content/uploads/artwork/the-test-of-a-good-user-need.pdf">The test of a good user need poster – PDF 433KB</a> by Leisa Reichelt and Ben Holliday</li>
<li><a href="https://paulsmith.site/posts/userneeds-101/">User needs 101</a> by Paul Smith</li>
</ul>
<hr />
<p>Contains public sector information licensed under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0</a>.</p>
Co-working spaces in Cardiff centre2019-06-19T00:00:00Zhttps://www.benjystanton.co.uk/blog/co-working-spaces-in-cardiff-centre/<p>Updated on 1 November 2019.</p>
<ul>
<li>Tramshed</li>
<li><a href="https://www.tripadvisor.co.uk/Restaurant_Review-g186460-d13395160-Reviews-The_Little_Man_Garage-Cardiff_South_Wales_Wales.html">Little Man Garage</a> – Unlimited coffees/teas for £7, closes at 3pm, proper coffee, not strictly co-working though</li>
<li><a href="https://www.indycube.community/places">Indycube</a> – Multiple locations in Cardiff, £10 per month for 1 day per month</li>
<li><a href="https://labs.uk.barclays/locations/cardiff-en">Cardiff Eagle Lab</a></li>
<li>Cardiff Central Library</li>
</ul>
<p>Disclaimer, I've not tried all of these (yet). But, thanks to people for responding to <a href="https://twitter.com/benjystanton/status/1140913131969011713">my tweet asking for tips</a>.</p>
<h2>Related links</h2>
<p><a href="https://seono.co.uk/south-wales-coworking-spaces-map-list/">The Coworking Spaces of South Wales (List & Map)</a></p>
Remote working pros and cons2019-06-17T00:00:00Zhttps://www.benjystanton.co.uk/blog/remote-working-pros-and-cons/<p>After almost 10 weeks of working at <a href="http://www.swirrl.com/">Swirrl</a>, here's a quick post that lists some of my pros and cons of working from home.</p>
<h2>Pros</h2>
<h3>Time to focus</h3>
<p>When working in open plan offices, I have found it difficult to focus on a single task for a few hours. Now, I'm able to do it most days. This is really important for me, because I need time to get my head into a task.</p>
<h3>More time with family</h3>
<p>I'm able to spend more time with my family. I'm spending most of my new found spare time doing the morning school run. Which I'm sure fellow parents will agree, can be stressful sometimes. But I feel like I'm able to be a more hands-on parent.</p>
<h3>Less driving, more walking</h3>
<p>I'm hardly using my car at all. This is saving me time, money and carbon. Commuting is also surprisingly tiring! Because I'm driving less and doing more school runs, I'm pretty sure I'm being more active. There are also less tempting options for lunch, so I can control my diet a little easier.</p>
<h2>Cons</h2>
<h3>Harder to form relationships</h3>
<p>Not being in the same room as people makes it more difficult to form relationships. Swirrl encourage and support me to visit their HQ as much as I need. But after a busy few weeks when I first joined, I decided not to visit during May, which meant I didn't visit for 6 weeks. In hindsight this was too long, so I'm planning on visiting at least once a month from now on.</p>
<h3>Sitting in the same room can get boring</h3>
<p>I've got a nice home office and most of the time I love it. But Sometimes I find that I need to change my environment to stay motivated. Perhaps sitting in the kitchen is enough. Or going for a quick walk. A change of scenery helps when thinking over complex design problems.</p>
<h3>Sometimes, it's hard to focus</h3>
<p>In contrast to my earlier point. Sometimes it's hard to focus when nobody is around. For example, if I have to read something long and boring, I've found that visiting a cafe helps me to concentrate.</p>
Weeknotes – series 03 episode 052019-05-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-03-episode-05/<h2>Wellcome data labs</h2>
<p>I was excited to learn about <a href="https://medium.com/wellcome-data-labs">Wellcome Data Labs</a>, a part of the Wellcome Trust that's combining data science and user research. I don't know of many other teams that are embedding user research and UX (User Experience) practices this closely with data scientists and, even better, they are blogging openly about it.</p>
<p>Although the title nearly put me off (<a href="https://medium.com/wellcome-data-labs/tableau-best-practises-put-to-the-test-f62f5380ba0b">Tableau Best Practises Put to the Test</a>), this is a really good blog post that looks at how the team did usability testing and challenged some bits of received wisdom around how best to design data interfaces.</p>
<h2>Laura Kösten</h2>
<p>I had a chat with <a href="https://laurakoesten.github.io/">Laura Kösten</a>, a PhD candidate at the ODI (Open Data Institute) and a senior research assistant at the School of Electronics and Computer Science at the University of Southampton.</p>
<p>She showed me some of the stuff she's working on, including this <a href="https://data-stories.github.io/data-summary/">data summary tool</a> which helps publishers to describe datasets, with the most useful information that users need.</p>
<h2>IF</h2>
<p>IF, according to their website are a "technology studio, specialising in ethical and practical uses of data". They have a really nice <a href="https://catalogue.projectsbyif.com/">pattern library of data sharing components</a>, which is just beautiful as well as really useful. They seem to work mainly in the space of ethical data collection and privacy, but I still think there's some overlap with the publishing and maintenance of datasets.</p>
<p>They also have some <a href="https://www.projectsbyif.com/blog/data-ethics-toolkits-9-practices-for-organisations-operating-digital-services/">data ethics principles</a> which are available to <a href="https://s3-eu-west-1.amazonaws.com/projectsbyif.com/data-ethics-practices/9+practices+for+organisations+operating+digital+services.pdf">download in poster format</a> too.</p>
<p>My favourite is "understand the flow of data". This is really hard and so important I think.</p>
<h2>Writing requirements as user stories</h2>
<p>We had a meeting with one of the teams at Defra (Department for Environment, Food and Rural Affairs). I suggested that a good way for them to share their requirements with us would be in the form of user stories.</p>
<p>I pulled together a few notes (leaning heavily on the excellent advice in the <a href="https://www.gov.uk/service-manual">GOV.UK Service Manual</a>).</p>
<blockquote>
<ul>
<li>As a… [who is the user?]</li>
<li>I need/want/expect to… [what does the user want to do?]</li>
<li>So that… [why does the user want to do this?]</li>
</ul>
</blockquote>
<p>In my experience the middle bit is quite easy to write, the user groups are a little more difficult, and the "so that" bit is really difficult.</p>
<p>It was good to have some time to think about user stories and what they're good at. When they're written well they help us to focus on the users and why they are trying to do something.</p>
<p>Obviously, you need to do user research before you can write any of them well, but even with that solid understanding I think they are still a challenge to write well.</p>
<h2>Chat to <a href="https://twitter.com/jeremyhhy">Jeremy Yun</a></h2>
<p>I had a chat with Jeremy, an interaction designer on the GOV.UK publishing platform. He's working on a service that visualises content performance for publishers in order for them to make better decisions about the content they publish.</p>
<p>We talked about the common problem of giving data and visualisations enough context, so that less data literate people can still make use of them.</p>
<h2>Things we could try measuring</h2>
<p>It lead me to think more about measuring the performance of data publishing and what the metrics could be…</p>
<p>Apart from common stuff like increases in page views and user satisfaction, what kind of metrics are important to data publishing?</p>
<p>These are some early (hopefully educated) guesses combined with a few I’ve pinched from other places…</p>
<ul>
<li>Increase automatic publishing workflows</li>
<li>More organisations publishing</li>
<li>More datasets</li>
<li>Increased data quality</li>
<li>Increased data standards</li>
<li>Openness of formats</li>
<li>Completeness of metadata</li>
<li>Regular updates</li>
<li>Reduce requests (increase self-serve)</li>
<li>Reduce duplication (more shared code lists and reference data)</li>
<li>Ability to format/filter data to low granularity</li>
</ul>
<p>I also wonder how we could measure inclusiveness? If open data is meant to be easy to access, how can we prove that people with lower data literacy are able to use it? And I'm not talking about the public here, but busy people in central and local governments, who aren't data experts, but still need to use this stuff.</p>
<h2>Other things I’m reading</h2>
<ul>
<li><a href="https://gds.blog.gov.uk/2018/01/10/working-with-citizens-advice-and-its-amazing-data/">Working with Citizens Advice and its amazing data</a> by <a href="https://twitter.com/lorna_tang">Lorna Tang</a></li>
<li><a href="https://www.bbc.co.uk/events/e4vgfx/live/cb54wh">Access All Areas 2019 (BBC Accessibility Awareness Day)</a></li>
<li><a href="https://uxdesign.cc/how-white-space-killed-an-enterprise-app-and-why-data-density-matters-b3afad6a5f2a">How white space killed an enterprise app (and why data density matters)</a> by <a href="https://twitter.com/CLenneville">Christie Lenneville</a></li>
</ul>
Weeknotes – series 03 episode 042019-05-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-03-episode-04/<p>This week I have been mostly thinking about user-centred design and how to apply it when designing, measuring and improving data services (again).</p>
<h2>DWP's presentation at Data Bites</h2>
<p>On Monday I watched a bit of the Data Bites meet-up featuring Aleks Bobrowska from the DWP Data Science Newcastle Hub. The talk was about <a href="https://youtu.be/bU7ucrqjtsg?t=491">bringing skills demand data to local government via a digital service</a>.</p>
<p>It was clear from the talk that Aleks had assembled a multi-disciplinary team (interaction designer, content designer and user researcher), and they were designing to meet user needs.</p>
<p>Even though there was clever data science stuff going on in the background, the user interface of the service presented the information in a clear and simple way, using plain language. I know from experience this is really hard to do with data.</p>
<p>Looking forward to seeing what Aleks, <a href="https://twitter.com/peterjobes">Pete</a> and <a href="https://twitter.com/drryandunn">Ryan</a> do next.</p>
<h2>Selecting multiple things from a long list</h2>
<p>This blog post by Andy Sellick, a frontend developer at GDS (Government Digital Service) is a nice honest write-up about the difficulties of creating <a href="https://accessibility.blog.gov.uk/2019/04/08/accessibility-lessons-dealing-with-a-large-amount-of-form-inputs/">accessible components for search interfaces</a>.</p>
<p>It's relevant to this post I wrote whilst at ONS (Office for National Statistics) called <a href="https://digitalblog.ons.gov.uk/2017/08/15/picking-things-from-a-long-list/">picking things from a long list</a> and it feels like a problem I'll come up against again when designing data interfaces in future.</p>
<p>Challenges with searching, finding and filtering seems to crop up in every conversation I have about data.</p>
<h2>Common problems facing users of data services</h2>
<p>I've been looking over some past projects at Swirrl to see what I can learn from previous user research work. The <a href="https://news.opendatacommunities.org/open-data-communities-engagement-review/">MHCLG (Ministry of Housing, Communities and Local Government) user engagement review was summarised in this blog post</a>.</p>
<p>It's interesting for me to see the similarities and overlaps in user needs and usability problems that seem to crop up repeatedly in data catalogues.</p>
<p>I put together a list and shared them on Twitter…</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Thinking about common data service problems…<br /><br />– Low awareness of service<br />– Finding things<br />– Complex content<br />– Data quality<br />– Maintenance<br />– Visual presentation<br />– Interface usability<br />– Too technical<br />– Geography is hard</p>— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1126097351746162689?ref_src=twsrc%5Etfw">May 8, 2019</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br />
<p>I'm collecting all this thinking together into a slide deck as I go, and hopefully can share it more widely (perhaps as a blog post) when it's more coherent.</p>
<h2>GOV.UK Registers have a done a good job of solving common tasks</h2>
<p>Obviously I'm not a true user of <a href="https://www.registers.service.gov.uk/">GOV.UK Registers</a> but I think they've done a great job at creating a usable interface for exploring <a href="https://www.registers.service.gov.uk/registers/internal-drainage-board">datasets</a>.</p>
<p>They have done a really nice job of meeting user needs that I've observed, for example…</p>
<ul>
<li>A simple search with filters</li>
<li>Enough important metadata (description, row count, field descriptions) without being overwhelming</li>
<li>Clear links to get the data (via download or API)</li>
<li>A history of changes</li>
<li>Subscribe to be notified of updates</li>
<li>A preview of the data in tabular format</li>
</ul>
<p>The also have <a href="https://gds.blog.gov.uk/2016/03/11/getting-from-data-to-registers/">a nice poster that describes the characteristics of a register</a> (I love a good poster) in this article by <a href="https://twitter.com/adewunmi">Ade Adewunmi</a>.</p>
<h2>How do you define success for a data catalogue?</h2>
<p>I've been thinking a lot about <a href="https://twitter.com/puntofisso/status/1124280454209839105">Giuseppe Sollazzo’s tweet</a> about how we can define success for a data catalogue.</p>
<p>I think it's fair to say that my thinking around KPIs (key performance indicators), OKRs (Objectives and Key Results) and outcomes versus outputs is pretty immature. But I hope to spend some serious time digging into how I can link these kind of things back to user needs in future.</p>
<p>Luckily <a href="https://twitter.com/stevenjmesser">Steve Messer</a> is blogging <a href="https://visitmy.website/2019/02/21/how-we-use-okrs-gov-uk/">good stuff about OKRs</a> right now.</p>
<h2>Data inclusion scale</h2>
<p>I also had a chat with user researcher <a href="https://twitter.com/loup73">Louise Petre</a> about her work on <a href="https://data.gov.uk/">data.gov.uk</a> and the data inclusion scale. You can read <a href="https://dataingovernment.blog.gov.uk/2017/11/09/performance-analysis-and-user-research-cross-government-meetup/">a bit about the data inclusion scale in this post</a>.</p>
<p>It's a way to plot users based on their understanding of data and their ability to manipulate it. Ranging from data indifferent to data expert. I think it will be a useful tool to try out with stakeholders and users in future.</p>
<p>It reminded me that <a href="https://twitter.com/mattinwales">Matt Knight</a> worked on something similar whilst he was at ONS. Here's his blog post about it: <a href="https://digitalblog.ons.gov.uk/2018/04/05/a-data-literacy-scale/">A data literacy scale?</a>.</p>
<h2>Other things that I'm reading</h2>
<ul>
<li><a href="https://www.dta.gov.au/help-and-advice/guides-and-tools/requirements-australian-government-websites/open-data#what-is-open-data">What is open data</a> from DTA (Digital Transformation Agency) Australian Government</li>
<li><a href="https://blog.wearefuturegov.com/understanding-your-services-3344d4bb1f75">Understanding your services</a> by <a href="https://twitter.com/BenHolliday">Ben Holliday</a></li>
<li><a href="https://pds.blog.parliament.uk/2019/01/11/understanding-services-through-user-needs%E2%80%AF/">Understanding services through user needs </a> by <a href="https://twitter.com/clementcreate">Jeanette Clement</a></li>
</ul>
Weeknotes – series 03 episode 032019-05-05T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-03-episode-03/<h2>Mapping data ecosystems</h2>
<p>This week, I've been working with Sarah on some of the data ecosystems diagrams she's been doing. These are similar to user journey maps or service blueprints. Swirrl use them in blog posts and share them with stakeholders.</p>
<p>They've been helpful for me too – they show what data is collected and where it goes. It's a reminder that in order to design a good data service, we need to consider lots of different data providers, publishing channels and end-users.</p>
<p>I've been using <a href="https://moqups.com/">Moqups</a> to draw the diagrams. So far I really like it, it's intuitive to use like Sketch, but it's been designed specifically for diagrams and wireframes so it has lots of built in icons and interface elements that you can drag and drop.</p>
<h2>Data user personas</h2>
<p>I was also looking over some project notes and found some personas that had been drawn up. Using these, together with the data ecosystems work, has been really useful in helping me develop my thoughts about how open data fits into users' worlds.</p>
<p>Alongside project work, I've been taking a step back to look at the <a href="https://twitter.com/benjystanton/status/1123258869290082306">similarities in user needs</a> that are visible across different data things I've worked on.</p>
<h2>Teams and people talking about data in a user-centred way</h2>
<p>Continuing on from last week, I'm still <a href="https://www.benjystanton.co.uk/blog/weeknotes-series-03-episode-02/#looking-for-data-designers">on the hunt</a> to discover (and remember) all the people and teams I can find that are working on systems that publish (or enable access to) data.</p>
<p>I've found some good things so far…</p>
<ul>
<li><a href="https://dataingovernment.blog.gov.uk/2019/05/02/a-discovery-into-data-publishing-formats/">A discovery into data publishing formats</a> – a blog post from the <a href="https://www.gov.uk/government/organisations/race-disparity-unit">Race Disparity Unit at GDS</a></li>
<li><a href="https://www.nesta.org.uk/blog/you-can-lead-person-data-you-cant-make-them-use-it/">You can lead a person to data, but you can't make them use it</a> – a blog post by <a href="https://twitter.com/theasnow">Thea Snow</a> that I spotted after <a href="https://twitter.com/kitterati">Kit Collingwood</a> retweeted it</li>
<li><a href="https://community.digital.gov.au/t/open-data-discovery-outcomes/1459">Open data discovery outcomes</a> – detailed research outcomes from the Digital Transformation Agency (DTA) in Australia</li>
</ul>
<p>… of course <a href="https://digitalblog.ons.gov.uk/">ONS digital publishing</a> are always doing good things in the space too.</p>
<h2>More like service design</h2>
<p>So far my new role feels closer to service design than I was expecting. This is definitely a good thing. I'm early on in a few projects, so not much call for hands on interaction design yet. Even so, I'm trying to resist my usual urge to jump straight in to designing the details.</p>
<p>This feels like a good opportunity to keep looking at the big picture for a while.</p>
Weeknotes – series 03 episode 022019-04-29T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-03-episode-02/<p>Week 2 at Swirrl started on Tuesday after the Easter bank holiday weekend and the amazing UK weather.</p>
<h2>Looking for data designers</h2>
<p>I'm looking for people who are using user-centred design and research techniques to build open data publishing services and tools, so if that sounds likes you, please get in touch!</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Who’s out there using user-centred design techniques to help people publish and use open data? Let’s be friends?</p>— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1120656756496117760?ref_src=twsrc%5Etfw">April 23, 2019</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<h2>Meeting more of the team</h2>
<p>I made it to the office in Manchester by 11am after a 6am start in Swansea. I'd arranged a few meetings with the some more of the team, including data consultant <a href="https://medium.swirrl.com/@julijahansen">Julija</a> and fellow designer Guy.</p>
<p>I spent a long time in particular chatting with Guy. It sounds like we have a lot in common – we both like striving for simple, progressively enhanced, accessible designs.</p>
<p>Guy's skills sound more technical than mine, closer to that of front-end developer. He's busy improving the <a href="http://www.swirrl.com/">Publish My Data</a> pattern library. He's been busy adding <a href="https://storybook.js.org/docs/testing/automated-visual-testing/">automated visual testing with storybook</a>.</p>
<p>I also met Sarah. Sarah is responsible for communications, organising events, customer training, and blogging at Swirrl. I'm hoping I can work closely with Sarah to help out with events and blogging – and learning what she know about our users.</p>
<p>I've been catching up with lots of her blog posts, including this one about <a href="https://gss.civilservice.gov.uk/blog/mapping-data-ecosystems-gss-alpha-project/">mapping data ecosystems</a>, which introduced me to this <a href="https://theodi.org/article/mapping-data-ecosystems/">mapping data ecosystems tool</a> by the ODI (Open Data Institute).</p>
<h2>More wandering around Manchester</h2>
<p>I managed to visit the <a href="https://magma-shop.com/">Magma book shop</a> one evening. I used to visit the one near Covent Garden a lot when I was in Uni in Ealing. It sells very nice design books, magazines and posters. If you ever want to buy me a present, I would like everything they sell.</p>
<h2>Trip to London</h2>
<p>On Thursday I was in London to meet some data people at Department for International Trade with Jamie. We tried not to get too excited about the amazing views over Westminster. I also bumped into a couple of friends from ONS (Office for National Statistics).</p>
<h2>Working from home</h2>
<p>Friday was my first day working from home. The plan is, once things have settled down, I'll be doing most of my work remotely from home in Swansea. I'd spent a few days before I started at Swirrl setting up the home office.</p>
Weeknotes – series 03 episode 012019-04-23T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-03-episode-01/<figure>
<img src="https://www.benjystanton.co.uk/images/view-from-the-office-square-large.jpg" alt="St Peter's Square in Manchester, you can see old buildings, people walking and trams" />
<figcaption>
View from Swirrl's shared office in St Peter's Square
</figcaption>
</figure>
<p>Some short-but-sweet weeknotes about my first ever week at Swirrl.</p>
<p>Last week was my first week at <a href="http://www.swirrl.com/">Swirrl</a>. I've joined them as an interaction designer. They're based in Manchester, but I'll be working remotely from home in Swansea (most of the time).</p>
<p>I was convinced to join Swirrl thanks to their digital-first hiring campaign (read: two really well written blog posts about <a href="https://medium.swirrl.com/swirrl-is-hiring-ed456c08b78b">who they were looking for</a> and <a href="https://medium.swirrl.com/whats-it-like-working-at-swirrl-b9972a703778">what it's like to work for them</a>). I also identify with their mission of publishing open, linked data to help public sector organisations provide better services and make better decisions.</p>
<p>Last Monday I travelled up to Manchester for a few days to meet the team and start to learn about what they do and how they do it. I spent time chatting to <a href="https://twitter.com/billroberts">Bill</a>, <a href="https://twitter.com/RicRoberts">Ric</a>, <a href="https://twitter.com/northernjamie">Jamie</a> and others. Their office is located in a very nice co-working space called WeWork (in St Peter's Square).</p>
<p>I also enjoyed wandering around Manchester, highlights include <a href="https://vrevmcr.co.uk/">V-Rev</a> a really good vegan junk food place in Manchester's Northern Quarter. When I get some time I'll head back there to check out some of the <a href="http://www.manchestersfinest.com/manchester/northern-quarter/magma/">stationery shops</a> I spotted nearby.</p>
<p>Helpfully, Swirrl use all the same admin and communication tools that I'm used to including Google Docs, Slack, FreeAgent and Github. I think this is stuff is really important, especially if you have a distributed team that are based in different locations (and timezones). I'm looking forward to seeing what else they do to help remote teams work together</p>
<p>One thing I've noticed is that a lot of conversations happen in Slack, even small updates like "going for lunch" are announced there. This helps everyone to stay up to date and feel included. I'll have to practice this habit to make sure I don't forget.</p>
<p>As for work stuff, I got introductions to some of the core concepts of Swirrl's work, like <a href="https://www.w3.org/standards/semanticweb/data">Linked Data</a> and <a href="https://en.wikipedia.org/wiki/Resource_Description_Framework">RDF</a>.</p>
<p>They also have a pattern library that is built with <a href="https://www.gatsbyjs.org/">Gatbsy</a> so I had a play around with that. <a href="https://www.gatsbyjs.org/tutorial/part-zero/">Gatsby's tutorial</a> is well written for someone like me who is not fully confident with using things like command line interfaces. I think the plan is to integrate it with <a href="https://storybook.js.org/">Storybook</a> too, so will aim to play around with that at some point.</p>
<p>I think my role is set to include a mix of hands-on interaction design work, as well as working with clients to help them discover user needs and visualise user journeys. A familier problem I'm hearing is that the interfaces required to use data are often very complex and probably expect users to be more data and digitally literate than they really are. Looking forward to getting stuck in and sounds like my first project will be working with Defra (Department for Environment, Food & Rural Affairs) via the <a href="https://twitter.com/EnvAgency">Environment Agency</a></p>
How to be a more resilient service designer2019-02-23T00:00:00Zhttps://www.benjystanton.co.uk/blog/how-to-be-a-more-resilient-service-designer/<p>Last week, I turned to Twitter for help. I needed some tips on how to cope with some of the stress I was facing at work. I guessed that the challenges I was facing were pretty common to those faced by service designers.</p>
<blockquote><p>Service designers! How do you cope with the stress of feeling out of control/your depth, when you are constantly trying to breakdown the boundaries between team, departments and organisations?</p>— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1096064210566561793?ref_src=twsrc%5Etfw">February 14, 2019</a></blockquote>
<p>I got an amazing response, and I recommend you take a <a href="https://twitter.com/benjystanton/status/1096064210566561793">look at the entire thread</a>, but I've tried to condense the tips into this blog post.</p>
<h2>Tips for being a resilient service designer</h2>
<ul>
<li>Buddy up</li>
<li>Talk to others outside of work</li>
<li>Build relationships</li>
<li>Remember it’s a long game</li>
<li>Visualise your problems</li>
<li>Switch off</li>
<li>Zoom out</li>
<li>Keep going</li>
</ul>
<h2>Buddy up</h2>
<ul>
<li>It’s a team effort</li>
<li>You will lose the will to live if you're the only one driving change</li>
<li>Work with someone who is able to support and advocate for what you're doing</li>
<li>It doesn’t have to be another service designer (someone with similar agile, user-centred, silo busting mindset)</li>
<li>Share the load of firefighting</li>
</ul>
<blockquote><p>Find a buddy. Don’t say “yes” to the work if you don’t/won’t have one. You need someone who “gets it” (awful phrase I know), is working in the same context, who you can chew the fat and - yes - vent with</p>— Sophie Dennis (@sophiedennis) <a href="https://twitter.com/sophiedennis/status/1096100855718256640?ref_src=twsrc%5Etfw">February 14, 2019</a></blockquote>
<h2>Talk to others outside of work</h2>
<ul>
<li>Talk it over with people who aren't involved</li>
<li>Go to meet-ups like <a href="https://www.oneteamgov.uk/">OneTeamGov</a></li>
<li>Network on social media</li>
<li>Get a mentor</li>
</ul>
<h2>Build relationships</h2>
<ul>
<li>Go in as an explorer, rather then an expert</li>
<li>Focus on building networks not breaking down silos</li>
<li>Try to see things from other people's point of view</li>
<li>Find a balance between organisational goals and user needs</li>
<li>Learn about the personalities and values of the other stakeholders</li>
</ul>
<blockquote><p>I’m also big into not thinking about breaking down silos but focusing on building networks of interest. It’s more of a strength based perspective.<br /><br />Also remember that change needs time. I’ve learned patience over the last ten years of working in and around gov.</p>— rufflemuffin (@rufflemuffin) <a href="https://twitter.com/rufflemuffin/status/1096321215814402048?ref_src=twsrc%5Etfw">February 15, 2019</a></blockquote>
<h2>Remember it's a long game</h2>
<ul>
<li>Change needs time</li>
<li>Be patient</li>
<li>Trust the process</li>
<li>Learn to spot opportunities</li>
<li>Think strategically about where to plant seeds and where they might grow best</li>
<li>Remember that others are trying to reach their own goals</li>
</ul>
<h2>Visualise your problems</h2>
<ul>
<li>Map out your stakeholders and priorities</li>
<li>Frame the big challenges by breaking them down into smaller problems and attach rough odds of success</li>
<li>Knowing how hard a problem is makes it less stressful to fail</li>
<li>Focus on smaller projects or task you can finish</li>
<li>Make sure your maps are accessibile to everyone</li>
<li>Go easy on jargon</li>
</ul>
<blockquote><p>I like to frame these big challenges by breaking them down into smaller problems with rough odds of success in my head. Knowing how hard a problem is, relative to others, makes it less stressful to fail. Then I say, “I tried my best, but that was always going to be a long shot”</p>— Harry Vos (@vosageroll) <a href="https://twitter.com/vosageroll/status/1096307866829549568?ref_src=twsrc%5Etfw">February 15, 2019</a></blockquote>
<h2>Switch off</h2>
<ul>
<li>Don't stare at the wall/screen trying to design solution</li>
<li>Go for a walk</li>
<li>Change your environment</li>
<li>Take a lunch or coffee break</li>
<li>Listen to music</li>
<li>Take up surfing or yoga</li>
<li>This can give you time to arrange your thoughts without realising it</li>
</ul>
<h2>Zoom out</h2>
<ul>
<li>Remind yourself of the context and purpose of the service</li>
<li>Remind yourself of the outcomes you want for the people using the service</li>
<li>Try not to attach your self-worth to the immediate feedback you get</li>
</ul>
<blockquote><p>It can be hard at times for sure. Reminding myself of the context and purpose of the service, and the outcomes we want for people as a result of the work. Going for a walk. Zooming out. Talking it over with someone not involved.</p>— (((Nic Price))) (@nicprice) <a href="https://twitter.com/nicprice/status/1096081140929232897?ref_src=twsrc%5Etfw">February 14, 2019</a></blockquote>
<h2>Keep going</h2>
<ul>
<li>Trust yourself</li>
<li>Celebrate all the wins, no matter how small</li>
<li>Recognise that it's hard</li>
<li>Recognise that it takes emotional investment and mental strength</li>
<li>Keep reminding folk of the duty of doing the right thing</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://www.amazon.co.uk/Hope-Dark-Canons-Book-51-ebook/dp/B002VM7FRQ/">Hope In The Dark (book)</a></li>
<li><a href="https://www.amazon.co.uk/Simpler-Way-WHEATLEY/dp/1576750507">A Simpler Way (book)</a></li>
<li><a href="https://medium.com/@firebethfox/without-a-formal-mandate-8da218b0406b">Without a Formal Mandate (blog post)</a></li>
</ul>
<h2>Thanks</h2>
<p>Thanks to everyone who helped (apologies if I forgot anyone).</p>
<ul>
<li><a href="https://twitter.com/Redjotter">Lauren Currie OBE</a></li>
<li><a href="https://twitter.com/dug">Dug Falby</a></li>
<li><a href="https://twitter.com/SystemsNinja">Mahoo</a></li>
<li><a href="https://twitter.com/JDBramall">Joseph Bramall</a></li>
<li><a href="https://twitter.com/CreativeDynamix">Roisin Markham</a></li>
<li><a href="https://twitter.com/eliotfineberg">Eliot Fineberg</a></li>
<li><a href="https://twitter.com/plexusdesigner">Jenna Law</a></li>
<li><a href="https://twitter.com/IFiniq">Ioana Finichiu</a></li>
<li><a href="https://twitter.com/benbrignell">Ben Brignell</a></li>
<li><a href="https://twitter.com/fcoveram">Francisco Vera</a></li>
<li><a href="https://twitter.com/lucyclmorris">Lucy Morris</a></li>
<li><a href="https://twitter.com/nigel_ux">Nigel Gillis</a></li>
<li><a href="https://twitter.com/beckybirch_">ʙᴇᴄᴋʏ ʙɪʀᴄʜ</a></li>
<li><a href="https://twitter.com/carlbrooks191">Carl Brooks</a></li>
<li><a href="https://twitter.com/genevievegau">Genevieve Gaudet</a></li>
<li><a href="https://twitter.com/firebethfox">Beth Fox</a></li>
<li><a href="https://twitter.com/mariecheungsays">Marie Cheung</a></li>
<li><a href="https://twitter.com/tsmz">Tom Morgan</a></li>
<li><a href="https://twitter.com/rufflemuffin">rufflemuffin</a></li>
<li><a href="https://twitter.com/solle">Matthew Solle</a></li>
<li><a href="https://twitter.com/nicprice">(((Nic Price)))</a></li>
<li><a href="https://twitter.com/janereid73">Smile :)</a></li>
<li><a href="https://twitter.com/markdalgarno">Mark Dalgarno</a></li>
<li><a href="https://twitter.com/jukesie">Matt Jukes</a></li>
<li><a href="https://twitter.com/sophiedennis">Sophie Dennis</a></li>
<li><a href="https://twitter.com/AmyLouWoo">Amy Harcombe</a></li>
<li><a href="https://twitter.com/vosageroll">Harry Vos</a></li>
<li><a href="https://twitter.com/littleannalaugh">Anna Henderson</a></li>
<li><a href="https://twitter.com/stevanbarry">Stephen</a></li>
<li><a href="https://twitter.com/Naomi_Turner">Naomi Turner</a></li>
<li><a href="https://twitter.com/woodylittle0910">Rachel A.Wood</a></li>
<li><a href="https://twitter.com/marthalaldridge">Martha</a></li>
<li><a href="https://twitter.com/JoelStrohmeier">Joel Strohmeier</a></li>
<li><a href="https://twitter.com/pjmoran">Paul Moran</a></li>
<li><a href="https://twitter.com/jess_neely">Jess Neely</a></li>
</ul>
Weeknotes – series 02 episode 062019-02-17T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-02-episode-06/<p>Short weeknotes feat. prototyping, Service Design in Government, my strong tweet game and Andy Bell.</p>
<h2>Prototyping in code</h2>
<p>I got stuck into my new team's <a href="https://github.com/ONSdigital/pattern-library-v2">pattern library</a> and <a href="https://github.com/onsdigital/sdc-prototypes">prototyping kit</a> this week. I put my headphones on and listened to Joe Cornish on 6 music. It felt good to play around with code.</p>
<h2>Service Design in Government</h2>
<p>I also made some good progress with my <a href="https://govservicedesign.net/2019/sessions/index.php?session=102">slides for Service Design in Government</a>. I should have them finished up next week.</p>
<h2>Strong Twitter game</h2>
<p>I did great at Twitter this week too. My twittering about <a href="https://twitter.com/benjystanton/status/1096064210566561793">struggling with resilience when doing service design</a> and a <a href="https://twitter.com/benjystanton/status/1095360463192367104">new data sticker</a> went down pretty well.</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Service designers! How do you cope with the stress of feeling out of control/your depth, when you are constantly trying to breakdown the boundaries between team, departments and organisations?</p>— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1096064210566561793?ref_src=twsrc%5Etfw">February 14, 2019</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br />
<p>I also became the 100th person to contribute to <a href="https://twitter.com/andybelldesign">Andy Bell</a>'s awesome <a href="https://personalsit.es/">Personal sites</a> project.</p>
Weeknotes – series 02 episode 052019-02-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-02-episode-05/<h2>Laura’s leaving do</h2>
<p>I’m writing these notes on my phone, on the train from Swansea to Cardiff. It’s <a href="https://mobile.twitter.com/LauraFHarding">Laura’s</a> leaving do, so a few of us are heading to <a href="https://www.tinyrebel.co.uk/bars/cardiff/">Tiny Rebel</a>.</p>
<h2>Another check-in with Andy</h2>
<p>Even though I’m no longer working for him, me and <a href="https://mobile.twitter.com/mr_dudders">Andy</a> are continuing our one-to-ones.</p>
<p>This week I needed an extra one! As always, I’m thankful for his support.</p>
<h2>Website</h2>
<p>We’re making a website for a thing in work and it’s finally making progress, thanks to <a href="https://mobile.twitter.com/leahvardon">Leah’s</a> hard work. She has that great ability to pin people down and get them to make a decision.</p>
<p>Often in the civil service these kind of decisions can take weeks to make, so having people like Leah on your team is essential.</p>
<h2>Making plans for Service Design in Government</h2>
<p>I’m <a href="https://govservicedesign.net/2019/sessions/index.php?session=102">speaking at service design in government</a> next month with <a href="https://mobile.twitter.com/kieran_forde">Kieran</a>. We’re making headway with our talk outline and slides.</p>
<p>I finally sorted my flight and hotel arrangements too. Although thanks to the quirks of our self service portal I’m still not 100% sure if my conference ticket is paid for.</p>
<p>Note to self: completing the form that’s called "pay for a conference" does not by itself mean your conference will be paid for. Even if you have all the necessary approvals.</p>
<p>Snarky-ness aside, ONS really has a generous and supportive attitude to training and conference attendance.</p>
<h2>Making plans to shadow a field officer</h2>
<p>After a recommendation from <a href="https://mobile.twitter.com/drtommac">Tom</a>, I’m trying to organise a day when I can shadow a field officer.</p>
<p>These are the staff that <a href="https://www.ons.gov.uk/">ONS</a> employ to go door-to-door and help people to fill in surveys.</p>
<p>I’m expecting that observing this activity will be an amazing way to do user research and learn about our end-users and the needs of ONS staff.</p>
<h2>Forgot to mention my stand-up desk</h2>
<p>I think I forgot to mention my stand-up desk in last week’s weeknotes. I’ve been using it for about 8 days so far and I’m really enjoying it.</p>
<p>I don’t find it too tiring. And I feel more likely to walk around and chat to people rather than email or Slack them.</p>
<p>I assume it’s better for my health too, but I’m certainly not noticing any adverse effects so far.</p>
January 2019 bookmarks2019-02-02T00:00:00Zhttps://www.benjystanton.co.uk/blog/january-2019-bookmarks/<dl>
<dt><a href="https://medium.com/@cassierobinson/your-talk-of-the-year-2dac396b926a">Your Talk of the Year?</a></dt>
<dd>One of the things I noticed last year is how often people who are on the speaking circuit basically give the same talk, over, and over again.</dd>
<dt><a href="https://digitalhealth.blog.gov.uk/2019/01/04/changing-the-name-of-a-service/">Changing the name of a service</a></dt>
<dd>Hi, I'm Colin and I'm working on improving Healthy Start which assists vulnerable parents and children to get access to milk, fruit, vegetables and infant formula. This blog post is about how and why the team is changing the name of the service.</dd>
<dt><a href="https://cathydutton.co.uk/posts/why-i-stopped-using-sass">Stepping away from Sass</a></dt>
<dd>I try to rebuild or redesign my website at least once every year, it's a great way to keep up to date with HTML and CSS advances as well as workflows and site generators. I launched the latest version last month moving from Jekyll and Github pages to Eleventy and Netlify.</dd>
<dt><a href="https://www.eventbrite.co.uk/e/52146940904">Interact London 2019</a></dt>
<dd>Interact London is a leading design conference that explores the roles that digital design, user experience, artificial intelligence, strategy, and everything in between play in today's society.</dd>
<dt><a href="https://monzo.com/blog/2019/01/07/progression/">Introducing progression.monzo.com!</a></dt>
<dd>A progression framework is a tool that maps people's competencies (their skills and knowledge) to compensation (how they're rewarded for them financially).</dd>
<dt><a href="https://clearleft.com/posts/the-design-sprint-canvas">The Design Sprint Canvas</a></dt>
<dd>We've been running Design Sprints for a long time at Clearleft and are constantly reminded of their power and ability to tackle challenges and test out hypotheses - essentially fast-tracking processes which traditional may have taken considerably longer.</dd>
<dt><a href="https://www.infoq.com/articles/communities-of-practice-agile-organisation">Communities of Practice: The Missing Piece of Your Agile Organisation</a></dt>
<dd>Communities of practice regularly bring together people who share areas of interest or concerns. They are loose structures that support their members and the organisation's development of those areas. They often form around a specific job role but can also centre on a specific area of interest.</dd>
<dt><a href="https://www.fullstory.com/?&utm_medium=search&utm_source=adwords&utm_campaign=brand-uk&utm_content=brand-em&utm_term=full%20story&gclid=CjwKCAiA99vhBRBnEiwAwpk-uJPjOUJKDVIfm3f0CfVsAhktJYEegcGEQTiqoKCVy5IevfHC8UUabxoCnk8QAvD_BwE">You don't know what you're missing without session replay.</a></dt>
<dd>Replay removes the guesswork from reproducing bugs by providing a detailed console log of JavaScript errors with every session recording. Press play for real-time QA, debugging, and issue tracking to give your developers back their time.</dd>
<dt><a href="https://pds.blog.parliament.uk/2019/01/11/understanding-services-through-user-needs%e2%80%af/">Understanding services through user needs</a></dt>
<dd>Understanding the needs of our users is an integral part of building a service that works for everyone. You may have seen blog posts from the user research team documenting our work towards a better understanding of our users' needs for the UK Parliament website.</dd>
<dt><a href="https://medium.com/@davehouse_80809/bem-for-everyone-else-89ccc8ad66f2">BEM for everyone else</a></dt>
<dd>I'd heard the term Block Element Modifier (BEM) used by many of the frontend developers I've worked with over the years. It wasn't until I started on my current project that I actually needed to understand what it was or what the benefits of using it might be.</dd>
<dt><a href="https://tink.uk/accessible-svg-flowcharts/">Accessible SVG flowcharts</a></dt>
<dd>The accessible SVG line graphs post explains how to use ARIA table semantics to make that form of data visualisation accessible to screen readers. This article uses the same ARIA based approach to make a screen reader accessible SVG flowchart.</dd>
<dt><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type: none</a></dt>
<dd>Update: Thanks to @HugoGiraudel and @gumnos for pointing out that I can use zero-width space would be a cleaner solution. I have updated the code below to reflect this.</dd>
<dt><a href="https://jakeknapp.com/make-time/">Make Time</a></dt>
<dd>Make Time is Jake's new book. It's about creating time and finding focus in daily life. Coming in September 2018.</dd>
<dt><a href="https://medium.com/@collinmathilde/breaking-down-my-job-as-ceo-of-front-8d884cca172a">What does the CEO of Front do?</a></dt>
<dd>At the beginning of Front, my job was to do everything that wasn't engineering: sales, support, product management, hiring, marketing, etc. We were small enough that everyone could literally see my direct contributions and understand what my job was.</dd>
<dt><a href="https://medium.com/mule-design/research-questions-are-not-interview-questions-7f90602eb533">Research Questions Are Not Interview Questions</a></dt>
<dd>The most significant source of confusion in design research is the difference between research questions and interview questions. This confusion costs time and money and leads to a lot of managers saying that they tried doing research that one time and nothing useful emerged.</dd>
<dt><a href="https://axesslab.com/title-texts-suck/">Title Texts Suck</a></dt>
<dd>Here below is a link with a title text. Hold your mouse pointer over it for a while and a small text will pop up. That's the title text. It's added with the title-attribute in the link. Title texts only show up on hover, and you can't hover on 99.9% of all touch screens.</dd>
<dt><a href="https://medium.com/digitalhks/the-end-of-the-beginning-of-digital-service-units-cf1fcce8aa57">The End of the Beginning of Digital Service Units</a></dt>
<dd>This week, digital HKS is partnering with Public Digital to convene digital services units from around the world. We will talk about what is and, more importantly, what is not working, with their work.</dd>
<dt><a href="https://www.deque.com/blog/creating-accessible-svgs/">Creating Accessible SVGs</a></dt>
<dd>Scalable Vector Graphics (SVGs) have been around since 1999, but they have seen a real resurgence in use as design interactions have become more complex and CSS/JavaScript have replaced antiquated animation programs such as Adobe Flash. There are plenty of reasons to use SVGs today including:</dd>
<dt><a href="https://happo.io/">Happo is a visual regression testing service for React.</a></dt>
<dd>Happo hooks in to your CI environment and takes screenshots of your application in a multitude of browsers and across different viewport sizes. It gives you a summarized report of all the visual differences introduced by a code change/commit.</dd>
<dt><a href="http://danmall.me/articles/starting-a-design-system/">Starting a Design System</a></dt>
<dd>There are a lot of great articles about design systems, but I'm not sure I've seen much written about how to start one. When SuperFriendly works with clients to create design systems, the first thing we'll do is an audit of the existing digital landscape.</dd>
<dt><a href="https://chrome.google.com/webstore/detail/css-feature-toggles/aeinmfddnniiloadoappmdnffcbffnjg">CSS Feature Toggles</a></dt>
<dd>A devtools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks. This extension allows developers to disable support of modern CSS features from devtools.</dd>
<dt><a href="https://dataingovernment.blog.gov.uk/2019/01/15/help-us-start-a-data-revolution-for-government/">Help us start a data revolution for government</a></dt>
<dd>We're both passionate about how data can improve how government works, and we want to start a data revolution focusing on service delivery and improving human experience. We believe government is hugely underestimating the need to shift how we create, use and share data.</dd>
<dt><a href="https://medium.com/@davehouse_80809/the-amen-break-is-the-ultimate-design-pattern-53701e79e461">The Amen break is the ultimate design pattern</a></dt>
<dd>Back in the late 60s Gregory Sylvester G. C. Coleman, the drummer of Washington DC funk and soul band The Winstons recorded a drum interlude that changed the world.</dd>
<dt><a href="https://learnvanillajs.com/">Learn Vanilla JS</a></dt>
<dd>Vanilla JS is a term for coding with native JavaScript features and browser APIs instead of frameworks and libraries. I help people learn JavaScript. If you have a question about something or need JavaScript help, get in touch.</dd>
<dt><a href="https://andy-bell.design/wrote/im-a-web-designer/">I'm a Web Designer</a></dt>
<dd>Something that I am increasingly uncomfortable with is our industry's obsession with job titles.</dd>
<dt><a href="https://contrast-checker.glitch.me/">Constrast Checker</a></dt>
<dd>Skip to main content Constrast Checker Text</dd>
<dt><a href="https://www.gov.uk/service-manual/design/making-your-service-more-inclusive">Making your service more inclusive</a></dt>
<dd>There's usually no alternative to using government services so they have to work for everyone. Making your service inclusive means making sure anyone who needs to can use it as easily as possible.</dd>
<dt><a href="http://adrianroselli.com/2019/01/announcing-a11y-reviews.html">Announcing a11y.reviews</a></dt>
<dd>Tobie Langel and I have launched a new site called a11y.reviews (spoken as Accessibility Reviews). Today if you want to identify if a tool, platform, service, resource, etc. is accessible you have to ask the broader community for its feedback. This does not scale.</dd>
<dt><a href="http://mrdudders.posthaven.com/should-we-measure-if-a-digital-service-is-a-good-citizen-of-the-web">Should we measure if a digital service is a good citizen of the web?</a></dt>
<dd>I don't like being annoyed. It is unhelpful.</dd>
<dt><a href="https://medium.com/notbinary/an-alpha-alpha-approach-5d62fb68429a">An alpha alpha approach</a></dt>
<dd>Mr Downey spurred a bit of conversation on Twitter about the idea of alpha stages in the GDS delivery cycle.</dd>
<dt><a href="https://handbook.18f.gov/blogging/">Blogging Guide</a></dt>
<dd>This guide helps 18F employees through the blogging process and assists them in properly framing their post so that it's concise, readable, and achieves its goals. If you have any questions, ask them in #blog or by email to 18f-outreach@gsa.gov.</dd>
<dt><a href="https://defradigital.blog.gov.uk/a-guide-to-agile-communication/">A guide to agile communication</a></dt>
<dd>As a by-product of being fast, agile communication can and does iterate as it goes along. It should be possible for a writer to draft something, discover it contains errors or needs re-writing, and then re-draft it again - all within a few hours.</dd>
<dt><a href="https://medium.com/@deanvipond/designing-design-51cdb4a04489">Designing design</a></dt>
<dd>For the last six months, I've been working on developing a design system for the NHS website, and associated digital services. You may think that working on developing is a bit of a pointlessly long phrase, but it's right.</dd>
<dt><a href="https://medium.com/participant-needs/participant-needs-alpha-design-hypotheses-b235de89f73c">Participant needs - Alpha design hypotheses</a></dt>
<dd>This discovery was to help us understand how we might better design our user research.</dd>
<dt><a href="https://m.signalvnoise.com/designing-for-the-web-ought-to-mean-making-html-and-css/">Designing for the web ought to mean making HTML and CSS</a></dt>
<dd>During the dotcom boom back in the late 90s, I did a bunch of Photoshop-cut jobs. You know, where a designer throws a PSD file over the wall to an HTML monkey to slice and dice. It was miserable.</dd>
<dt><a href="https://medium.com/@slmarsh81/representation-6573850596a4">Representation</a></dt>
<dd>Now that I am Head of User Research and Analysis at GDS, and I have been thinking more about the importance of representation and I what I represent. I also wanted to expand on some of themes I was thinking about in my thoughts on leadership post.</dd>
<dt><a href="https://www.smashingmagazine.com/2019/01/table-design-patterns-web/">Table Design Patterns On The Web</a></dt>
<dd>Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let's take a look at how we can create tables on the web in 2019.</dd>
<dt><a href="https://digitalblog.coop.co.uk/2019/01/17/we-are-not-our-users-we-should-not-tell-them-how-to-feel/">We are not our users: we should not tell them how to feel</a></dt>
<dd>When we create new products and services it's easy to become emotionally invested in them. We're understandably proud of what we're creating and often attach adjectives like simple, quick or exciting to our descriptions of them.</dd>
<dt><a href="https://blog.ldodds.com/2019/01/26/talk-tabular-data-on-the-web/">Talk: Tabular data on the web</a></dt>
<dd>This is a rough transcript of a talk I recently gave at a workshop on Linked Open Statistical Data. You can view the slides from the talk here. I'm sharing my notes for the talk here, with a bit of light editing.</dd>
<dt><a href="https://mikebracken.com/blog/the-strategy-is-delivery-again/">On Strategy: The strategy is delivery. Again.</a></dt>
<dd>In 2011, early in my current role, I discussed with the Minister for the Cabinet Office, Francis Maude, the strategy I recommended we adopt for all things digital. The strategy was to be disarmingly simple: to deliver. Often, iteratively and repetitively.</dd>
<dt><a href="https://medium.com/@emilytulloh/two-sides-of-service-design-20f47d2a8b16">Two sides of service design</a></dt>
<dd>We have different ways to slice and dice what we do, constantly on the lookout for ways to organise and categorise what we do and how we do it. And the caveat on top, of course: that the design process is never linear.</dd>
<dt><a href="https://blog.practicalservicedesign.com/outcome-based-service-mapping-feec7e1937da">Outcome-based service mapping</a></dt>
<dd>At the Department for Work and Pensions in the UK government, I work with many teams who are currently tasked with replacing internal systems and improving the staff experience.</dd>
<dt><a href="https://userresearch.blog.gov.uk/2019/01/29/why-user-researchers-and-service-designers-should-be-best-friends/">Why user researchers and service designers should be best friends</a></dt>
<dd>The Government Digital Service (GDS) has a long history of interaction design and user research working together. But service design is a bit newer to GDS, so we wanted to talk about what service designers do and what works well when we collaborate.</dd>
<dt><a href="https://www.rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/">HTML, CSS and our vanishing industry entry points</a></dt>
<dd>Everyone is angry about CSS again. I'm not even going to try to summarize the arguments. However it always seems to boil down to the fact that CSS is simultaneously too easy to bother with, yet so hard it needs to be wrapped up in a ball of JavaScript in case it scares the horses.</dd>
<dt><a href="https://designnotes.blog.gov.uk/2019/01/29/researching-how-we-ask-users-about-their-ethnicity/">Researching how we ask users about their ethnicity</a></dt>
<dd>Here at the Race Disparity Unit, we produce Ethnicity facts and figures - a service which presents statistics from across government showing the different experiences of people from different ethnic backgrounds.</dd>
<dt><a href="https://ethanmarcotte.com/wrote/a-reading-list-the-world-wide-work/">A reading list for The World-Wide Work. ethanmarcotte.com</a></dt>
<dd>These days, it's easy to feel overwhelmed. The tech industry is facing a veritable raft of ethical, moral, and political crises. Automation and industrialization are reshaping our world. And sitting in the middle of all that? You and me.</dd>
<dt><a href="https://medium.com/@owltastic/new-year-new-website-7065afa64057">New Year, New Website</a></dt>
<dd>Every web designer knows how challenging it is to redesign and maintain your own website. The shoemaker's children often go barefoot, as the clich goes.</dd>
<dt><a href="https://medium.com/@AdeAdewunmi/leadership-skills-when-youre-in-the-business-of-disruption-d42a465fbf6a">Leadership skills when you're in the business of disruption</a></dt>
<dd>A couple of weeks ago Rebecca Kemp and I ran a leadership workshop at the Service Design in Government conference. We had a great time doing it we had an engaged and lively bunch of people and some really good conversations. We've written up the main points from the session.</dd>
<dt><a href="https://garrettdimon.com/2019/openness-and-longevity/">Openness and Longevity</a></dt>
<dd>In our incessant rush to move quickly, everything is ephemeral. Technology moves so quickly that today's strong favorite is outdated in a matter of years. We slurp up notifications and are fascinated by the next thing before we even fully understand the current thing.</dd>
<dt><a href="https://mxb.at/blog/on-simplicity/">On Simplicity</a></dt>
<dd>In the 1997 movie "Contact", Jodie Foster discovers an alien signal that contains the construction plans for a spaceship. Trying to assemble it, the engineers are surprised to find that the crew capsule is just an empty metal pod.</dd>
</dl>Weeknotes – series 02 episode 042019-02-01T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-02-episode-04/<figure>
<img src="https://www.benjystanton.co.uk/images/services-week.jpg" alt="A laptop showing a live stream from London. A designer stands next to a slide that says “what are the new accessibility regulations?”." />
<figcaption>
Watching services week from my kitchen
</figcaption>
</figure>
<h2>Services week</h2>
<p>It was <a href="https://gds.blog.gov.uk/2019/02/01/in-case-you-missed-it-what-happened-during-services-week/">services week</a> – a cross-government week of events lead by Government Digital Service (GDS), with many events happening across the country. I watched a couple of them on YouTube.</p>
<p>Early on in the week <a href="https://twitter.com/LouiseDowne">Lou Downe</a> did a great talk on the <a href="https://www.gov.uk/service-manual/design/introduction-designing-government-services">characteristics of a good government service</a>. This document has become a part of design workflow already and it's up there with the GDS service standard and design principles for me. I recommend you spend time reading it if you haven't already.</p>
<h2>Looking after the design team</h2>
<p>This week I spent some time thinking about how best to lead and manage designers in Office for National Statistics (ONS). Recently ONS have switched to a model where designers are line-managed from within their teams by delivery managers.</p>
<p>There might be some benefits to working this way, but one of the risks comes from being managed by someone who might not be able to measure and recognise good work.</p>
<p>I created a document that sets out how we can best balance these responsibilities. I've also set up fortnightly checkins with the team and began introducing myself to the designers' individual line-managers.</p>
<h2>Went to my first show and tell</h2>
<p>I went to my first cross-census show and tell. I was the only designer there (that I recognised) so I hope I can encourage more of us to attend and participate in future.</p>
<p>It was encouraging to see everyone contributing towards one thing. I also enjoyed seeing some JSON metadata on the screen as it reminded me of the kind of show and tells we did in my old team (in digital publishing).</p>
<h2>Snow and remote working</h2>
<p>There was snow around South Wales on Thursday night and Friday morning so I worked from home for a couple of days. I've been thinking about remote work a lot recently, I wish it was more common and acceptable to work this way.</p>
<p>I know there are benefits of working face-to-face, but I still think we should take more advantage of the benefits of remote working. Especially in Wales where people are more spread out and transport networks are pretty rubbish.</p>
<p><a href="https://twitter.com/emmaboulton/status/1090587439838777345">Emma Boulton has been tweeting</a> recently about how it would help her to balance the demands of having young children and accepting new work.</p>
<p>It's pretty obvious that the digital community is not as inclusive as it pretends to be if people like Emma have to turn down otherwise good contracts.</p>
Weeknotes – series 02 episode 032019-01-26T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-02-episode-03/<figure>
<img src="https://www.benjystanton.co.uk/images/coventry-cathedral.jpg" alt="Colourful stained glass windows at Coventry cathedral." />
<figcaption>
We got a chance to walk around Coventry cathedral on Thursday lunch time
</figcaption>
</figure>
<p>This week I travelled to Newport, Titchfield and Coventry and I realised while writing these that I'd been on 10 different trains!</p>
<h2>Logos, letters and campaign websites</h2>
<p>On Monday I got the train down to Titchfield (Office for National Statistics' other office based near Portsmouth). Much of the communications team are based down there and I had a meeting booked in to chat about the recent updates to the Census brand identity.</p>
<p>I saw the nearly finished logo and heard about some the campaigns they are planning over the next few years. I also learnt a bit more about the letters that will be posted out to ask people to fill the Census in, and the plans for a website that will address people's needs around getting help filling in the survey.</p>
<p>Despite the great work being done, it struck us that we (the 'digital and technology' and the 'communications' departments) need to work more closely together in order to make sure that end users encounter a seamless service when they use the Census, no matter which team are responsible for the individual bits.</p>
<h2>The value of observing user research</h2>
<p>On Wednesday I travelled up to Coventry (changing at Bristol and Birmingham if you're wondering) to get ready for observing user research on Thursday.</p>
<p>For the whole day on Thursday I watched people complete the Census by going through a process that roughly followed this timeline…</p>
<ol>
<li>User becomes aware of the Census via social media</li>
<li>A letter is sent to the household</li>
<li>The user goes online to complete the Census</li>
</ol>
<p>The key thing that jumped out for me is that even people who are happy to complete the Census won't just immediately open the letter and start filling things out. In reality we have to consider things like this…</p>
<ol>
<li>Post arrives in different ways and at different times</li>
<li>People have different systems in place for assessing whether a particular letter is important or not</li>
<li>A period of time will pass between receiving the letter and opening it – in this time people may seek more information about the Census or they may just forget</li>
<li>Some people will take a photo of the letter so they can fill out the survey on their phone on the bus</li>
<li>Some users will plan a time sit with their partner in the study and use a desktop PC</li>
</ol>
<p>Observing user research (and in particular usability testing) never fails to be an amazingly useful use of my time. No matter how many times I do it, I always come away with a more rounded idea of the service in my head. And it never fails to re-focus you onto the most important problems and the things real people are trying to do.</p>
<blockquote class="twitter-tweet" data-conversation="none" data-lang="en" data-theme="light" data-link-color="#2B7BB9"><p lang="en" dir="ltr">1 day watching real people test out a thing has been more useful than 2 and half weeks of talking to people who are making the thing.</p>— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1088491227455152129?ref_src=twsrc%5Etfw">January 24, 2019</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Weeknotes – series 02 episode 022019-01-19T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-02-episode-02/<h2>Chatting to the design team</h2>
<p>On Monday I spent some time catching up with the permanent interaction designers working in my area. Even though they'll be <a href="https://twitter.com/benjystanton/status/1083097108352303105">line-managed by a non-designer</a> (boo) I've been asked to lead them in terms of objectives, progression, training and kit.</p>
<h2>Cross-gov design train</h2>
<p>On Tuesday we had an away day in Swindon. I got the train up and bumped into some of my "old" design team from the Office for National Statistics publishing team. They were on the way to the cross-government design away day in London. The theme was "designing for people in crisis". I was sad to be missing out.</p>
<p>There were a few others I knew on that train too. In total we counted 13 designers!</p>
<h2>Off site away-day</h2>
<p>When we arrived at Swindon, it was good to meet some of the team from Titchfield (Office for National Statistics other office near Portsmouth). I got on with the user researchers in particular.</p>
<p>I realised that, as I was struggling to find my feet in a new team, my new team was also struggling to find its place in an even bigger team. And that bigger team was based in Titchfield.</p>
<p>I'm a fan of remote working, but I think that a big organisation, split over 2 locations, using enterprise software really tests a teams' ability to work flexibly.</p>
<p>The away-day could have been run in a more productive, inclusive way. But I definitely see the value of spending time together, and this was the first time we were thrown together. Next time should be easier.</p>
<h2>Panic attack?</h2>
<p>The following days were hard. A big fat inbox (including invites to 3 different recurring stand-ups) pushed me over the edge and I'm pretty sure I had a panic attack. I think one of the reasons I'm finding this move hard is that I'm used to sounding off on Twitter to let off steam. I don't feel like I can share much of what's going on right now, so all my stresses are building up.</p>
<p>My energy went into firing off passive aggressive emails, which seems to be my speciality at the moment, so apologies if you received one of those.</p>
<h2>Finishing on a high</h2>
<p>On Friday I spent time chatting to familiar faces who have been on the team longer than I have. They confirmed that yes there is way too much to do, that I can't possibly help fix it all by myself, but yes I was probably right to be worried about some of the problems I was seeing.</p>
<h2>Things to focus on next week</h2>
<ul>
<li>I'm visiting the Titchfield office on Monday to chat with the comms team about the Census brand</li>
<li>I'm going to help the Census website team pull together some user needs, so we can begin validating them</li>
<li>I'm going to observe some user research on Thursday</li>
</ul>
Weeknotes – series 02 episode 012019-01-11T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-02-episode-01/<p>This was my first week back after Christmas and my first week on the Census cross-service team.</p>
<p>I was weirdly nervous because I didn’t know where I was meant to sit, but it turns out that nearly everyone was moving desk. The whole Survey Data Collection department was being reorganised as it gets ready for the Census test later this year.</p>
<h2>Resisting the move</h2>
<p>I’ve been resistant to moving teams, and one of the reasons is because the job feels so different (new room, new team, new products, new manager) and it didn’t really come with any of the usually exciting aspects associated with a new job. I guess I’m going to have to bake my own welcome-to-the-team cake?</p>
<h2>Focus on something</h2>
<p>I decided to focus on trying to identify all the channels that a person might experience when using the Census. A simple user journey could include all of these, and more:</p>
<ul>
<li>marketing campaigns</li>
<li>paper letter</li>
<li>people calling at the door</li>
<li>a big fat online survey</li>
<li>email reminders</li>
<li>call centres</li>
</ul>
<h2>Service design fun</h2>
<p>I was slowly getting over myself and realising that this is a very interesting and complicated service journey to help design. There are of course many complex behind-the-scenes things that need to happen to keep this running smoothly, not to mention the challenge of processing and using the resulting data effectively.</p>
<p>My plan over the next few days and weeks is to:</p>
<ul>
<li>meet the wider team</li>
<li>understand the different products</li>
<li>draw up a service blueprint</li>
<li>map out the stakeholders</li>
<li>perform a service walkthrough</li>
<li>identify gaps</li>
</ul>
<p>I’m going to really miss my old team in Digital Publishing and the wider data publishing community, but I'm focusing on the positives of working over here*. I get to:</p>
<ul>
<li>help improve a service that will be used by everyone in the country</li>
<li>work across several multidisciplinary product teams</li>
<li>learn about another bit of statistics (how survey data is collected)</li>
</ul>
<p>Apart from helping the Census, there is real work to be done to help improve the design community here at ONS and I think that being able to hang out with a different team should give me a more rounded view of things.</p>
<p>*in reality my new desk is about a 1 minute walk away from my old one.</p>
Christmas day dinner timings 20182018-12-27T00:00:00Zhttps://www.benjystanton.co.uk/blog/christmas-day-dinner-timings-2018/<p>We cooked Christmas dinner this year, for the first time in at least 6 years. On Christmas Eve we planned our timings in great detail.</p>
<p>The Turkey was about 7 kilograms (about 15 pounds) which was too big for 7 people, even allowing for Boxing Day leftovers (10 pound next year?). We used recipes from Nigella and Jamie for the turkey and it turned out well. It had been soaking in a brine bath for almost 2 days. We cooked it for about 4 hours in the end (which was probably a smidge too long).</p>
<h2>Turkey</h2>
<ul>
<li>06:30am Bring turkey inside to dry and warm up for 2 hours</li>
<li>08:00am Make glaze</li>
<li>08:00am Preheat oven 180°C fan</li>
<li>08:30am Cook turkey for 3½ hours (covered with foil)</li>
<li>11:00am Remove foil for last hour</li>
<li>12:00pm Check turkey – give it another 30 to 60 mins if we need</li>
<li>12:00pm Rest turkey for 2 hours (covered with foil)</li>
</ul>
<h2>Starter</h2>
<ul>
<li>12:20pm Preheat top oven</li>
<li>12:30pm Chop fruit and prep prawns and salmon</li>
<li>12:50pm Roast butternut squash roti for 40 mins</li>
</ul>
<h2>Oven</h2>
<ul>
<li>12:50pm Honey roast parsnips for 60 mins</li>
<li>13:10pm Parsnips for 40 mins</li>
<li>13:15pm Roast potatoes for 35 mins</li>
<li>13:15pm Spinach and cheese parcel for 35 mins</li>
<li>13:15pm Cauliflower cheese for 35 mins</li>
<li>13:20pm Carrot and swede for 30 mins</li>
<li>13:20pm Braised cabbage for 30 mins</li>
<li>13:25pm Pigs in blankets and pork stuffing for 25 mins</li>
</ul>
<h2>Boil</h2>
<ul>
<li>13:30pm Sprouts for 9 mins</li>
<li>13:30pm Carrots for 7 mins</li>
</ul>
<h2>Microwave</h2>
<ul>
<li>13:30pm Sprouts with bacon for 6 mins</li>
<li>13:30pm Bread sauce for 3 mins</li>
<li>Yorkshire pudding</li>
<li>Veggie stuffing</li>
<li>Gravy</li>
</ul>
<h2>Recipes</h2>
<ul>
<li><a href="https://www.nigella.com/recipes/spiced-and-superjuicy-roast-turkey">Nigella's turkey bath and glaze recipe</a></li>
<li><a href="https://www.jamieoliver.com/news-and-features/features/tips-and-timings-for-perfect-turkey/">Jamie's guide to cooking turkey</a></li>
</ul>
December 2018 bookmarks2018-12-21T00:00:00Zhttps://www.benjystanton.co.uk/blog/december-2018-bookmarks/<dl>
<dt><a href="https://public.digital/2018/11/29/adding-value-by-adding-values/">Adding value, by adding values</a></dt>
<dd>This week I had the great honour of being named by the RSA as the first Royal Designer for Industry for Service Design. My hope is to inspire the next generation of designers, just as the current Royal Designers for Industry have inspired me.</dd>
<dt><a href="https://medium.com/bymds/flowkit-1e195759a2b6">Design native userflows right inside Figma and Sketch with Flowkit 2.0</a></dt>
<dd>Drawing and editing lots of lines and boxes for user flows in any design tool is is a real pain. If you’ve ever done it, you know what I’m talking about. Even if you manage to get it done for your current project, there’s always the next project that needs almost the same treatment.</dd>
<dt><a href="https://medium.com/eightshapes-llc/releasing-design-systems-57fca91a23f6">Releasing Design Systems</a></dt>
<dd>Companies realize a design system’s value when adopting products use a system to make and ship experiences that their customers use. As a part of that value chain, the system releases features over time. This puts the system into the hands of its customer: designers and engineers doing their job.</dd>
<dt><a href="https://medium.com/@Heydon/reluctant-gatekeeping-the-problem-with-full-stack-e9ad836570f6">Reluctant Gatekeeping: The Problem With Full Stack</a></dt>
<dd>Much of my career as a web designer has been spent, quite happily, working alongside programmers, engineers, people with computer science degrees. In this symbiotic relationship, each party has a secure job with a well-defined role, and gets to work on the thing they are best at and enjoy the most.</dd>
<dt><a href="https://adactio.com/journal/14562">Prototypes and production</a></dt>
<dd>When we do front-end development at Clearleft, we’re usually delivering production code, often in the form of a component library. That means our priorities are performance, accessibility, robustness, and other markers of quality when it comes to web development.</dd>
<dt><a href="https://www.24a11y.com/2018/accessible-svg-icons-with-inline-sprites/">Accessible SVG Icons with Inline Sprites</a></dt>
<dd>If we were searching for reasons to use icons on a project, we don’t need to go far in order to find them.</dd>
<dt><a href="https://www.24a11y.com/2018/unlocking-accessibility-for-ux-ui-designers/">Unlocking Accessibility for UX/UI Designers</a></dt>
<dd>Tap, tap, one, two… is this thing on? Ahem … My dear designer friends, I have a confession to make, on behalf on anyone who’s ever worked in the field of digital accessibility. We, the accessibility community, have been lying to you for the better part of the last twenty years.</dd>
<dt><a href="https://timkadlec.com/remembers/2018-12-06-using-webpagetest-with-alfred/">An Alfred Workflow for WebPageTest</a></dt>
<dd>By now, I have to be on record at least a few thousand times in saying that WebPageTest.org is an absurdly valuable tool. Pat gave the performance community an incredible gift by building it and making it available to the broader community for free. I spend a lot of time in WebPageTest.</dd>
<dt><a href="https://github.com/smallmultiples/sketch-chippencharts">Sketch plugin for charts</a></dt>
<dd>This is a Sketch plugin for creating charts with random data for use in mockups. Change the size of selected rectangles. Chose between random and linear. Works for both horizontal and vertical bar charts. Made with love by Small Multiples in Chippendale.</dd>
<dt><a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/">About HTML semantics and front-end architecture</a></dt>
<dd>A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.</dd>
<dt><a href="https://24ways.org/2018/what-i-learned-in-six-years-at-gds/">What I Learned in Six Years at GDS</a></dt>
<dd>When I joined the Government Digital Service in April 2012, GOV.UK was just going into public beta.</dd>
<dt><a href="http://www.hollidazed.co.uk/2015/06/19/thinking-about-iteration/">Thinking about iteration</a></dt>
<dd>Making incremental changes to prototypes isn’t iterative. When we’re designing prototypes and user journeys to meet user needs we’re not going to get this right first time. We learn more about user needs as a result of designing and testing possible solutions.</dd>
<dt><a href="https://css-tricks.com/the-ecological-impact-of-browser-diversity/">The Ecological Impact of Browser Diversity</a></dt>
<dd>Early in my career when I worked at agencies and later at Microsoft on Edge, I heard the same lament over and over: "Argh, why doesn’t Edge just run on Blink? Then I would have access to ALL THE APIs I want to use and would only have to test in one browser!"</dd>
<dt><a href="https://dev.to/ben/addy-osmanis-18-point-web-performance-checklist-2e1">Addy Osmani's 18-Point Web Performance Checklist</a></dt>
<dd>Web performance is critical for user experience. Prioritize it before it becomes a problem.</dd>
<dt><a href="https://medium.com/notbinary/an-alpha-alpha-approach-5d62fb68429a">An alpha alpha approach</a></dt>
<dd>Mr Downey spurred a bit of conversation on Twitter about the idea of ‘alpha’ stages in the GDS delivery cycle.</dd>
<dt><a href="https://medium.com/@loft27design/good-design-doesnt-just-happen-7602358096e5">Good design doesn’t just happen</a></dt>
<dd>A lot of factors are at play within an organisation that hinders or helps good design to happen. Investing effort into maintaining a strong design culture is important. For a good design culture to thrive certain things need to be in place.</dd>
<dt><a href="https://squoosh.app/">Squoosh</a></dt>
<dd>Compress and compare images with different codecs, right in your browser.</dd>
<dt><a href="http://www.henrylau.co.uk/2018/12/12/accessible-colour-palettes/">Accessible-as-possible colour palettes · Henry Lau</a></dt>
<dd>Colours is a big part of what makes up graphics and making colours accessible is important. We’re used to thinking of colours in terms of red, green and blue. Add these colours together and you get white. We can describe colours using RGB, breaking up each colour channel into 256 parts.</dd>
<dt><a href="https://blog.mattedgar.com/2018/12/08/being-bolder-reflections-18-months-into-my-work-at-nhs-digital/">Being bolder – reflections 18 months into my work at NHS Digital</a></dt>
<dd>On 5 July 2018, the National Health Service turned 70. I was exactly 13 months into my own time with the service.</dd>
<dt><a href="https://www.macworld.com/article/3153944/photography/how-to-download-your-flickr-photo-library-and-transfer-it-to-google-photos-or-icloud-photo-library.html">How to download your Flickr photo library and transfer it to Google Photos or iCloud Photo library</a></dt>
<dd>SmugMug, the professional photography oriented company, bought Flickr in April 2018. On November 1, 2018, SmugMug announced changes to its free and paid (or “Pro”) tier. SmugMug said that the 1TB of storage that Yahoo gave free-tier users is not sustainable.</dd>
<dt><a href="https://www.fastcompany.com/90281425/how-to-design-the-ultimate-bullet-journal-for-2019-no-art-skills-required">How to design the ultimate Bullet Journal for 2019 (no art skills required)</a></dt>
<dd>If you’ve searched for “Bullet Journal” or “BuJo” online, you may have seen the elaborately illustrated interpretations people have created. They’re gorgeous–motivating to some, but intimidating to many others.</dd>
<dt><a href="https://medium.com/@jessitron/shared-values-are-overrated-7a194462aa33">Shared Values are Overrated</a></dt>
<dd>The other day, I heard a story about a leadership retreat where the goal was to agree upon shared values. They held a vote, and lo, there was an even split between all the values. The group could not agree on which ones represented the company. This makes sense. Our values are part of our identity.</dd>
<dt><a href="https://www.remove.bg/">Remove Background from Image – remove.bg</a></dt>
<dd>Whether you are a graphic designer, photographer or selfie lover: Removing backgrounds has never been easier. Spending hour after hour separating foregrounds from backgrounds? There's a better way now - and it's FREE.</dd>
<dt><a href="https://24ways.org/2018/designing-your-future/">Designing Your Future</a></dt>
<dd>I’ve had the pleasure of working for a variety of clients – both large and small – over the last 25 years. In addition to my work as a design consultant, I’ve worked as an educator, leading the Interaction Design team at Belfast School of Art, for the last 15 years.</dd>
<dt><a href="https://medium.com/@jukesie/sloganeering-for-stickers-500d0c528b5b">Sloganeering for stickers</a></dt>
<dd>01. Minimal viable bureaucracy — I’m not one of those JFDI people. I believe that is the fastest way to get something done that will not stick. If we are in this to make real change then that isn’t good enough.</dd>
<dt><a href="https://medium.com/doteveryone/putting-users-first-is-not-the-answer-to-everything-dd05b9f11b5">Putting users first is not the answer to everything</a></dt>
<dd>User-centred, user need, user story, person-centred — hmm, I’m trying to think of some other variations, I’m sure there’s more!</dd>
<dt><a href="http://mrdudders.posthaven.com/five-things-benjy-taught-me">Five things Benjy taught me.</a></dt>
<dd>As part of a minor org shuffle this week I will no longer be working directly with Benjy. Benjy isnt a showy man, so wouldn't want a fuss, but he is a brilliant writer and his blog is one we should all keep an eye on.</dd>
<dt><a href="https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/">The practical value of semantic HTML</a></dt>
<dd>It has come to my attention that many in the web standards gang are feeling grumpy about Full Stack Developer™’s lack of deep knowledge about HTML. One well-intentioned article about 10 things to learn for becoming a solid full-stack JavaScript developer said</dd>
<dt><a href="https://tink.uk/understanding-semantics/">Understanding semantics</a></dt>
<dd>The word “semantic” is regularly used in the context of web development. We talk about “semantic code” and the “semantics” of a given element, but what do we really mean by it, and why is it important? The word semantic comes from the French sémantique, meaning non-comparable.</dd>
<dt><a href="https://medium.com/@amy.l.hupe/why-every-design-system-needs-a-service-designer-19733b3b01f3">Why every design system needs a service designer</a></dt>
<dd>They were looking for developers, interaction designers, user researchers, product and delivery managers. There were even spots for a couple of content designers (we’re a depressingly rare breed in design system teams). But there was one glaring omission: they weren’t hiring a service designer.</dd>
<dt><a href="https://dfedigital.blog.gov.uk/2018/11/26/6-practices-for-user-centred-civil-servants/">6 practices for user-centred civil servants</a></dt>
<dd>Our boss, Permanent Secretary Jonathan Slater, posted last week over on the Civil Service Blog about how we’re working to make the Department for Education user-centred. This post sets out a bit more about what we mean by that, and what we’re doing about it.</dd>
</dl>
Five things Andy taught me2018-12-19T00:00:00Zhttps://www.benjystanton.co.uk/blog/5-things-andy-taught-me/<p>This is my response to <a href="https://twitter.com/mr_dudders">Andy</a>’s blog post <a href="http://mrdudders.posthaven.com/five-things-benjy-taught-me">five things Benjy taught me</a>. If you’re tired by our cheesy web bromance, turn away now.</p>
<p>Andy is a great leader. Over the past 2 years, he has gone out of his way to help me do a good job. And he's used his experience and contacts to help me become a better designer. I honestly would not have survived my first 2 years as a civil servant without his help.</p>
<p>Here are 5 things he helped me to understand…</p>
<ol>
<li>
<p><strong>Love the Web</strong> — Andy loves the Web more than anyone I know. He's shown me its value as a tool for empowering democracy and debate. And that the mission to publish open data is worth fighting for (because it will save the world).</p>
</li>
<li>
<p><strong>Work in the open</strong> — to live and breath the web, you have to work in the open too. Blog, tweet, week note, speak at meet-ups. It helps you to formulate your ideas and become a better practitioner. It helps other teams going through the same problem. And it invites external people to advise you on the problems you are facing.</p>
</li>
<li>
<p><strong>Support culture</strong> — you have to work hard at culture. Doing digital work in big organisations that don't always understand its value is hard. Culture and supportive teams make it possible, but it doesn't happen by accident. And it doesn't happen from the top down.</p>
</li>
<li>
<p><strong>Trust your team</strong> — Andy trusts his team completely. He hires good people and he gets out of their way. This is what I am trying to do with the designers that I work with. In fact, everything I have learnt about management and leadership I have learnt from Andy.</p>
</li>
<li>
<p><strong>Be human</strong> — Andy has never asked me to be anything but myself. It doesn't matter to him that I'm introverted, or that I'm a bit scruffy, or that I need to leave early to get home for the kids. Just work hard and be nice to people.</p>
</li>
</ol>
<p>Andy is making great things happen at ONS (Office for National Statistics) and he never takes any of the credit. If you have a chance to work with him, I recommend you take it.</p>
A user manual for me2018-12-14T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-user-manual-for-me/<p>View my latest <a href="https://www.benjystanton.co.uk/blog/a-user-manual-for-me-version-3/">user manual</a>.</p>
<p>I’m joining a new team in Office for National Statistics (ONS), so it seemed like a good time to finally create <a href="https://medium.com/@cassierobinson/a-user-manual-for-me-d3a851fbc694">a user manual for me</a>.</p>
<h2>Conditions I like to work in</h2>
<ul>
<li>I like to work in open, inclusive environments</li>
<li>I like to be embedded into multi-disciplinary agile teams</li>
<li>I prefer structured meetings that allow everyone to voice their opinion and vote on the best way forward</li>
<li>I like to be surrounded by good design (posters and journey maps on walls, stickers on laptops)</li>
</ul>
<h2>The times/hours I like to work</h2>
<ul>
<li>I live in Swansea and commute to Newport, which means I need to work an early shift in order to avoid the worst of the traffic</li>
<li>7am to 3pm are the hours I work most days</li>
<li>I work best in the mornings</li>
</ul>
<h2>The best ways to communicate with me</h2>
<ul>
<li>I’m happy to use a mix of communication methods (face-to-face, email, Slack, Skype)</li>
<li>You’ll get the best answers from me if I’ve got time to prepare</li>
</ul>
<h2>The ways I like to receive feedback</h2>
<ul>
<li>I love demoing my work and presenting at show and tells</li>
<li>I need time to prepare for feedback sessions</li>
<li>I find over-the-shoulder comments difficult to process</li>
</ul>
<h2>Things I need</h2>
<ul>
<li>To regularly observe user research in person</li>
<li>Good digital tools like Trello, Slack and Google Drive</li>
<li>The ability to have regular quiet days (no-meeting days and working-from-home days)</li>
</ul>
<h2>Things I struggle with</h2>
<ul>
<li>I’m an introvert, which means too many meetings can drain me</li>
<li>Long email threads with lots of contributors</li>
<li>Acronyms and jargon</li>
</ul>
<h2>Things I love</h2>
<ul>
<li><a href="https://www.gov.uk/guidance/government-design-principles">Government design principles</a></li>
<li>Web standards</li>
<li>Accessibility</li>
<li>User-centred design</li>
<li>Government Digital Service (GDS) service standard</li>
<li>Blogging and sharing my thoughts on Twitter (let me know if anything should be kept private)</li>
</ul>
<h2>Other things to know about me</h2>
<ul>
<li>I have 3 young kids</li>
<li>Before ONS I worked at the Driver and Vehicle Licensing Agency (DVLA) on the “Tell DVLA about a medical condition or disability” service as a user experience (UX) designer</li>
<li>I value <a href="https://capwatkins.com/blog/the-boring-designer">boring design</a> over creating shiny things</li>
</ul>
NaBloPoMo round-up2018-11-30T00:00:00Zhttps://www.benjystanton.co.uk/blog/nablopomo-round-up/<p>I did it! <a href="https://www.benjystanton.co.uk/blog/category/nablopomo/">30 posts in 30 days</a>!</p>
<p>I spent more time tweaking the patterns and components on the blog, rather than writing actual articles, but I think that's okay.</p>
<h2>Here's a quick highlight reel</h2>
<ul>
<li>I created a <a href="https://www.benjystanton.co.uk/blog/category/images/">new image post template</a> and <a href="https://www.benjystanton.co.uk/blog/creating-the-image-post-layout/">blogged about it</a></li>
<li>Added a <a href="https://www.benjystanton.co.uk/feed.xml">link to my RSS feed</a> to the footer</li>
<li>Made a <a href="https://www.benjystanton.co.uk/blog/sids-words/">list of words that my 2 year old says</a></li>
<li>Made a <a href="https://www.benjystanton.co.uk/blog/interaction-design-tools/">list of interaction design tools that I use</a></li>
<li>Started adding some indieweb features to the site in the shape of <a href="https://www.benjystanton.co.uk/blog/getting-started-with-indieweb/">microformats</a></li>
<li>Blogged from my phone using the <a href="https://workingcopyapp.com/">Working Copy app</a></li>
<li>Created a <a href="https://www.benjystanton.co.uk/blog/nablopomo-progress/">progress bar</a> and <a href="https://www.benjystanton.co.uk/blog/blog-stats/">key figures dashboard</a> for my blog</li>
<li>Next and previous links to the bottom of articles</li>
</ul>
<p>Thanks to <a href="https://twitter.com/jukesie">Jukesie</a> for encouraging me to do it. And to Michelle for putting up with me blogging every night.</p>
Learnt recently that definition lists (DLs) can have multiple definitions (DDs) for every term (DT) and I’m so here for it.2018-11-29T00:00:00Zhttps://www.benjystanton.co.uk/blog/dl-lists/Nice people saying nice things about the ONS website2018-11-28T00:00:00Zhttps://www.benjystanton.co.uk/blog/nice-people-saying-nice-things-about-the-ons-website/<p>It was great to see some smart people, that I really respect, recognising the good work that we’re doing in ONS (Office for National Statistics) digital publishing today.</p>
<p>Tom's original screenshot focused on a weirdly specific bit of something we did recently. But, even this small component went through some rigorous usability and A/B testing. It built upon a content pattern that already did a good job of meeting a clear user need (I need to know if I'm looking at the latest stuff).</p>
<p>The good news is, there is lots more of this to come. This is just the tiniest bit of the work we've been doing over the past year.</p>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I've congratulated <a href="https://twitter.com/mr_dudders?ref_src=twsrc%5Etfw">@mr_dudders</a> and <a href="https://twitter.com/ONS?ref_src=twsrc%5Etfw">@ONS</a> for it separately -- and I will never stop. This is one of the biggest single improvements in a websites design ever. <a href="https://t.co/kXB4s75G1G">pic.twitter.com/kXB4s75G1G</a></p>— Tom Forth (@thomasforth) <a href="https://twitter.com/thomasforth/status/1067360583706652672?ref_src=twsrc%5Etfw">November 27, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br />
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Quietly (too quietly!) the <a href="https://twitter.com/ONS?ref_src=twsrc%5Etfw">@ONS</a> have been doing some exceptionally good work properly publishing their stats. <a href="https://t.co/Dg7QNQdW8T">https://t.co/Dg7QNQdW8T</a></p>— Tom Loosemore (@tomskitomski) <a href="https://twitter.com/tomskitomski/status/1067535685559701505?ref_src=twsrc%5Etfw">November 27, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br />
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Gotta love <a href="https://twitter.com/ONS?ref_src=twsrc%5Etfw">@ONS</a> Quietly getting the job done. 👏 👏 👏 <a href="https://t.co/qAGWKbeXar">https://t.co/qAGWKbeXar</a></p>— Steve Foreshew-Cain (@s_foreshew_cain) <a href="https://twitter.com/s_foreshew_cain/status/1067737646229872640?ref_src=twsrc%5Etfw">November 28, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
November 2018 bookmarks2018-11-27T00:00:00Zhttps://www.benjystanton.co.uk/blog/november-2018-bookmarks/<dl>
<dt><a href="https://medium.com/@msjaneaustin/oh-god-help-us-not-another-thing-on-design-tasks-60fb3552ac55">The hidden cost of design tasks</a></dt>
<dd>It’s a strange thing, being diagnosed with a chronic disease. At first there’s just such relief, that this collection of horribleness has a name, and that its not ‘all in your mind’, or ‘stress’.</dd>
<dt><a href="https://open.nytimes.com/kickoff-kit-tools-to-help-teams-work-better-together-3ca6a06b4fc2">Kickoff Kit: Tools to Help Teams Work Better Together</a></dt>
<dd>In order to build products successfully and quickly, your team has to work well together. But so often teams dive into projects without recognizing how each member best operates or what everyone is working towards.</dd>
<dt><a href="https://designnotes.blog.gov.uk/2018/11/05/how-we-document-components-and-patterns-in-the-gov-uk-design-system/">How we document components and patterns in the GOV.UK Design System</a></dt>
<dd>We’ve talked before about the GOV.UK Design System and how we’ve worked to make everything it contains accessible, easy to implement and of a high quality. But just as important as the design and code is the documentation that explains how to use it.</dd>
<dt><a href="https://bigmedium.com/ideas/design-systems-mastering-design-at-scale-video.html">Design Systems: Mastering Design at Scale</a></dt>
<dd>Here’s a gift for you: years and years of experience building design systems, molded into a gorgeous video series. I teamed up with Brad Frost, Dan Mall and InVision to create Design Systems: Mastering Design at Scale, a set of videos to help you plan, build, use, and maintain design systems.</dd>
<dt><a href="https://cushionapp.com/journal/improving-readability">Improving Readability With Bigger Fonts and Higher Contrast</a></dt>
<dd>The title of this post should include a “duh”, but hear me out. A few weeks ago, something hit me—our fonts are too small. By accident, I hit cmd+plus in the browser, which bumped our fonts to 110%, and everything felt better.</dd>
<dt><a href="https://www.w3.org/WAI/business-case/">The Business Case for Digital Accessibility</a></dt>
<dd>This article examines the rationale for organizations to address accessibility. It includes tangible and intangible benefits, and the risks of not addressing accessibility adequately. It explores how accessibility can:</dd>
<dt><a href="https://www.nngroup.com/articles/ux-debt/">UX Debt: How to Identify, Prioritize, and Resolve</a></dt>
<dd>Continually prioritizing fast and easy solutions may help us hit release dates in the short term, but over time, repeatedly choosing shortcuts will leave us with mounting experience issues that adversely impact our users.</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2018/11/14/product-people-west-south-product-for-apis-whats-the-difference/">Product People West & South: Product for APIs, what’s the difference?</a></dt>
<dd>As part of CMD (Customise my data) I was given the opportunity to choose which of out two teams I wanted to lead. I chose to focus on the APIs as this was the area I felt my knowledge was weakest.</dd>
<dt><a href="https://medium.com/@BenHolliday/prompts-for-design-leaders-working-with-product-teams-4345c5dea8df">Prompts for design leaders working with product teams</a></dt>
<dd>When working with product teams, the job of a design leader is to make quick and accurate assessments about the focus and quality of the work being presented back to them. You should be able to answer the following questions.</dd>
<dt><a href="https://digital-land.github.io/">Digital Land</a></dt>
<dd>Prototype This is a prototype. Digital Land is a team at the Ministry of Housing, Communities & Local Government working to improve land and housing data for the emerging proptech sector.</dd>
<dt><a href="http://www.iterate.org.uk/11-more-things-to-hate-about-hotels/">11 more things to hate about hotels – iterate</a></dt>
<dd>This week, I had to spend time in more than one hotel for work-related reasons. Whilst undergoing this trial, I read Sharon’s inspired post about UX anti-patterns in hotels.</dd>
<dt><a href="https://nickcolley.co.uk/2018/11/16/accessibility-in-the-govuk-design-system.html">Design System London: Accessibility in the GOV.UK Design System</a></dt>
<dd>I’ve put together some of the tweets in a Twitter moment, if you’re into that. All the sources are linked from the speakers notes in the footnotes.</dd>
<dt><a href="https://open.nytimes.com/5-questions-with-giorgia-lupi-23e2ba972fd8">5 Questions with Giorgia Lupi</a></dt>
<dd>On October 18th, Giorgia Lupi, award-winning information designer, co-author of the book “Dear Data” and founder of Accurat, a data-driven design firm, stopped by the Times office to talk about her work and career.</dd>
<dt><a href="https://medium.com/@paulmsmith/white-label-wall-templates-1cdec749dae6">White-label agile wall templates</a></dt>
<dd>In “Agile walls what are they good for?” I wrote about the value of physical “agile walls”. However I often find a barrier to teams using them (and staying engaged with them) is the work needed to create and regularly update them.</dd>
<dt><a href="https://digitalhealth.blog.gov.uk/2018/11/21/a-rota-for-retrospectives/">A rota for retrospectives</a></dt>
<dd>In agile teams, the ‘retrospective’ is an essential – maybe the most essential - meeting we have. At the end of every two week sprint, we get together for an hour to reflect on how the work got done so that we can learn from it.</dd>
<dt><a href="http://www.hollidazed.co.uk/2016/07/11/learning-to-enjoy-the-size-of-the-problem/">Learning to enjoy the size of the problem</a></dt>
<dd>Some thoughts about having fun at work. Last week I had a good time speaking at a Glug event in Reading.</dd>
<dt><a href="https://www.w3.org/WAI/standards-guidelines/atag/">Authoring Tool Accessibility Guidelines (ATAG) Overview</a></dt>
<dd>This page introduces the Authoring Tool Accessibility Guidelines (ATAG) web standard. Authoring tools are software and services that “authors” (web developers, designers, writers, etc.) use to produce web content (static web pages, dynamic web applications, etc.).</dd>
<dt><a href="https://www.youtube.com/watch?v=8Ik_LHmZx8Y&feature=youtu.be">Make Technology Work for Everyone: introducing digital accessibility</a></dt>
<dd>This short animated film provides• A short introduction to digital accessibility,• Some reasons why digital inclusion is important,• 15 tips to help you start making your digital technology more accessible, usable, and inclusive.For more information, references and resources - including tools</dd>
<dt><a href="https://www.youtube.com/watch?v=6YupsPD2gcU">Voxxed Thessaloniki 2018 - Automated Visual Testing: The Missing Part of your CI Pipeline?</a></dt>
<dd>Voxxed Thessaloniki 2018 - Automated Visual Testing: The Missing Part of your CI Pipeline? by Viv Richards</dd>
<dt><a href="https://productforthepeople.xyz/loyal-to-the-network-redux-9df296cc69c6">Loyal to the network [redux]</a></dt>
<dd>A few years ago now I read something by Emer Coleman that really struck a chord with me — this idea of being ’loyal to the network’ rather than to particular employers.</dd>
<dt><a href="https://medium.com/public-innovators-network/what-if-boldness-were-an-explicit-value-of-the-civil-service-3df6a3d2d008">What if boldness were an explicit value of the civil service?</a></dt>
<dd>I’ve been thinking a lot recently about what it takes to get difficult and meaningful things done. Why it’s hard, exhausting and incredibly rewarding to make progress.</dd>
<dt><a href="https://commonslibrary.parliament.uk/parliament-and-elections/devolution/local-boundaries-in-england-what-is-place/">Local boundaries in England: What is ‘place’?</a></dt>
<dd>In the last few years, a number of think-tanks have addressed the effects of Government policy on ‘place’. Concerns have centred around spatial variations in GDP across the UK, identifying public spending within a given area, and variations in productivity.</dd>
<dt><a href="http://apgrimes.co.uk/2018/11/17/ux-is-negotiation/">UX is negotiation</a></dt>
<dd>If you were to say that someone was a good UX practitioner, you could mean a great many things. For example, you could be thinking of their ability to run a workshop, an interview or a testing session. You could be thinking of their prototyping, visual or interaction design skills.</dd>
<dt><a href="https://www.nngroup.com/articles/variable-fonts-wide-screen-layout/">Variable Fonts and Wide-Screen Layouts: Adopting Data-Driven Progressive Enhancements</a></dt>
<dd>We recently updated our website homepage, and, in addition to changing the content and visual design, we’ve incorporated two major technical changes: adding a new layout for users with wide screens, and using a variable font.</dd>
<dt><a href="http://blog.memespring.co.uk/2015/09/14/product-land-part-3/">Product Land (Part 3)</a></dt>
<dd>This is the 3rd and final part of an essay about design and possibilities.</dd>
</dl>Blog stats2018-11-26T00:00:00Zhttps://www.benjystanton.co.uk/blog/blog-stats/<p>A quick post of blog stats that used to be on the homepage.</p>
<p>Note, this content used to be dynamic, but now it's static.</p>
<ul>
<li>173 posts</li>
<li>25 categories</li>
<li>42 pages</li>
<li>5 images</li>
<li>4 notes</li>
</ul>
The stickers on my laptop2018-11-25T00:00:00Zhttps://www.benjystanton.co.uk/blog/the-stickers-on-my-laptop/<figure>
<img src="https://www.benjystanton.co.uk/images/the-stickers-on-my-laptop.jpg" alt="A MacBook Pro lid covered in colourful, mostly circular stickers." />
<figcaption>
<h1>The stickers on my laptop</h1>
</figcaption>
</figure>
<p>Here are the descriptions for each of the stickers on my laptop lid right now. Descriptions go from top-left to bottom-right.</p>
<dl>
<dt>Daliwch ati</dt>
<dd>The welsh translation of “keep going”</dd>
<dt><a href="http://international.gov-design.com/">International design in government</a></dt>
<dd>A conference and community of designers working in government around the world</dd>
<dt>Florence</dt>
<dd>The content management system behind the ONS (Office for National Statistics) website</dd>
<dt><a href="http://govdesign.tumblr.com/post/143158136883/download-the-sticker-be-bold-read-the-blog-post">Be bold</a></dt>
<dd>From <a href="https://medium.com/public-innovators-network/what-if-boldness-were-an-explicit-value-of-the-civil-service-3df6a3d2d008">What if boldness were an explicit value of the civil service?</a> by <a href="https://twitter.com/JanetHughes">Janet Hughes</a></dd>
<dt>Customise my data beta</dt>
<dd>A mission patch for a project at ONS (Office for National Statistics), designed by <a href="https://twitter.com/tomten2two">Tom</a></dd>
<dt>Smiley face</dt>
<dd>A hand drawn smiley face on a blue dot sticker</dd>
<dt>Order</dt>
<dd>From a set <a href="https://twitter.com/mr_dudders">Andy</a> brought in</dd>
<dt>One Team Gov</dt>
<dd>The <a href="https://www.oneteamgov.uk/">One Team Gov</a> logo</dd>
<dt>Command</dt>
<dd>A pixelated Apple keyboard command icon from <a href="http://iconhandbook.co.uk/">The Icon Handbook</a></dd>
<dt><a href="http://govdesign.tumblr.com/post/147037699728/download-the-sticker-users-first">Users First</a></dt>
<dd>A classic GDS (Government Digital Service) motto</dd>
<dt>Make data part of the web</dt>
<dd>One that I designed, based <a href="https://twitter.com/ldodds">Leigh Dodds</a>’ <a href="https://digitalblog.ons.gov.uk/2017/01/06/some-open-data-publishing-principles/">open data publishing principles</a></dd>
<dt>Better government by design #oneteamgov</dt>
<dd>A <a href="https://www.oneteamgov.uk/">One Team Gov</a> motto</dd>
<dt><a href="https://twitter.com/uxwales">UX Wales</a></dt>
<dd>A UX (user experience) meet-up in Cardiff</dd>
<dt>Change takes time</dt>
<dd>Part of the <a href="https://alysonfielding.com/2016/12/28/practical-action-stickers-doing/">Practical Action</a> set by <a href="https://twitter.com/alysonf">Alyson Fielding</a></dd>
<dt>Making data meaningful for everyone</dt>
<dd>Designed by <a href="https://twitter.com/Carlie_Edge">Carlie</a> for the ONS (Office for National Statistics) digital content team</dd>
<dt>Data discovery alpha</dt>
<dd>A mission patch for a project at ONS (Office for National Statistics), designed by me</dd>
<dt>You are not the user</dt>
<dd>By <a href="https://twitter.com/marianthux/status/865180783996272640">Marianthi Makra</a></dd>
<dt>Cake driven development</dt>
<dd>Part of <a href="https://twitter.com/dxw/status/542714402827689984">a set from DXW</a></dd>
<dt>Build the right thing</dt>
<dd>From <a href="https://pilot.works/">Pilot Works</a></dd>
<dt>#OfTheGovernment</dt>
<dd>A coveted shiny “hashtag of the government” – I think maybe <a href="https://twitter.com/lauradee">Laura</a> saved this one for me?</dd>
<dt><a href="https://www.ons.gov.uk/">ONS (Office for National Statistics)</a></dt>
<dd>The ONS logo mark, which I’ve just realised has been put on the wrong way round – there goes my chance of getting head of design one day</dd>
<dt><a href="http://govdesign.tumblr.com/post/143794301833/download-the-sticker-whats-the-user-need-white">What is the user need?</a></dt>
<dd>Another classic GDS (Government Digital Service) sticker</dd>
<dt>Go where the users are</dt>
<dd>I designed this one whilst I was working at Leadin – a Finnish service design agency that have now been bought out by <a href="https://gofore.com/">Gofore</a></dd>
<dt>Loyal to the network</dt>
<dd>I found this one in the sticker tub in work – based on <a href="https://productforthepeople.xyz/loyal-to-the-network-redux-9df296cc69c6">a post by Jukesie</a></dd>
<dt>ONS design team</dt>
<dd>One that the ONS (Office for National Statistics) design team designed and printed in-house</dd>
<dt>Medical notifications and renewal service alpha</dt>
<dd>A mission patch from the first service I worked on at DVLA (Driver and Vehicle Licensing Agency)</dd>
</dl>
I’ve added previous and next links, so users can skip to the posts published before and after this one.2018-11-24T00:00:00Zhttps://www.benjystanton.co.uk/blog/adding-previous-and-next-links/Speaking at Service Design in Gov 20192018-11-23T00:00:00Zhttps://www.benjystanton.co.uk/blog/speaking-at-service-design-in-gov-2019/<p>Looks like me and <a href="https://twitter.com/@kieran_forde">Kieran</a> will be speaking at <a href="https://govservicedesign.net/2019/">Service Design in Government 2019</a>.</p>
<p>The conference takes place in Edinburgh in March and we'll be doing a case study on making stats easier to understand.</p>
<p>Here's a bit about the talk from <a href="https://govservicedesign.net/2019/sessions/index.php?session=102">the conference website</a>;</p>
<blockquote>
<h2>At this session, you will learn how we:</h2>
</blockquote>
<ul>
<li>worked with a multidisciplinary team across our department and the wider organisation</li>
<li>gathered evidence to convince stakeholders of the need for simpler statistical reports</li>
<li>presented our work to senior stakeholders and regulatory bodies</li>
<li>learnt about the needs of end users and internal users</li>
<li>improved the service by co-designing and pair-writing with teams</li>
</ul>
<p>Hopefully see you there!</p>
A quick review of the Netflix She-Ra reboot2018-11-22T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-quick-review-of-she-ra/<p>Netflix’s new She-Ra is seriously cool. The female characters are strong and diverse in personality, body shape and skin tone. Some are good, some are evil. Some are funny, some are serious, some are nerdy.</p>
<p>The men are sensitive and supporting without being overtly masculine. Often they are camp and their sexuality is ambiguous.</p>
<p>It’s also funny, spooky and full of cool action sequences.</p>
<p>It’s the feminist cartoon series I’ve been waiting for.</p>
<p><a href="https://www.vox.com/culture/2018/11/21/18105176/she-ra-princesses-of-power-reboot-review">Review of She-Ra on Vox</a></p>
This is a quick test note from my phone. I’m using Working Copy GitHub client for iOS.2018-11-21T00:00:00Zhttps://www.benjystanton.co.uk/blog/posting-from-my-phone/This is a simple note template. A note is a post that is typically short unstructured plain text, written & posted quickly, that has its own permalink page.2018-11-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-note-template/My first “no meeting” day2018-11-19T00:00:00Zhttps://www.benjystanton.co.uk/blog/my-first-no-meeting-day/<p>If you follow me on Twitter, you’ll know that <a href="https://twitter.com/benjystanton/status/1044599479721218048">I moan about meetings a lot</a>. Lots of people have recommended that I block out time in my calendar to make sure I <a href="https://www.benjystanton.co.uk/blog/how-to-focus-in-open-plan-offices/">have space in my week for focussed work</a>.</p>
<p>This seems obvious in hindsight, but joining the Civil Service has been a big culture shock for me. 3 years ago I was freelancing, working remotely on small projects. Now I'm leading a small team in a large organisation. Even though I promised myself I wouldn't end up stuck in meetings all day, that is what has happened.</p>
<h2>Too many meetings are a drain on my energy</h2>
<p>I'm sure that having too many meetings is a problem for different people for many different reasons. It's a problem for me because;</p>
<ul>
<li>I'm an introvert</li>
<li>I need time to focus on my design work</li>
</ul>
<p>Being introverted means that meetings take a huge amount of energy from me. I need time to mentally prepare before a meeting and I need time to unwind afterwards. Most days I have at least 6 meetings, often many more. This leaves me with no energy left to do anything else. The loss of energy is more important than the loss of time.</p>
<p>Meetings also tend to be invitations to chat with people outside of my core team. They are usually concerned with long-term planning or things on the edge of my day-to-day work. They are important, but they distract me from my sprint work, and the context switching is hard.</p>
<h2>Prioritising doesn't work for me</h2>
<p>Trying to prioritise and turn down the meetings you get invited to is an impossible task for me. I've tried for 2 years and failed. <a href="https://twitter.com/benjystanton/status/1047190877364506625">Outlook makes it too easy for people</a> to send you appointments, and it places no value on having free time. Spending all your time in Outlook playing appointment whack-a-mole is as unproductive as spending all your time in meetings.</p>
<p>There's a reason why agile teams have product managers. Objectively deciding what to do next is really difficult. Then having to switch from "prioritisation mode" to "doing mode" is even harder.</p>
<h2>So I created a "no meetings" day</h2>
<p>I created an all-day event called "no meetings" that repeats every week. I looked a few weeks ahead in my schedule and moved any other meetings that clashed with it. If I couldn't do that, I moved the "no meeting" day to another day. It usually falls on either Monday or Tuesday.</p>
<h2>I'm not in "do not disturb" mode</h2>
<p>Even on "no meeting" days, I'm still going to my stand-ups. I get a lot of value from them. Plus agile ceremonies are usually structured and inclusive, so they aren't so energy-consuming for me.</p>
<p>It's also important to say that I'm not in "do not disturb" mode. Having a clear calendar means that I'm free to chat with my team, go for lunch, do some planning or catch up on admin.</p>
<p>Together with my weekly "work from home" day, I feel like I've finally got a balance that will allow me to do focussed work, be available for my team, and stay on top of "all the other things".</p>
Adding h-entry to the posts template2018-11-18T00:00:00Zhttps://www.benjystanton.co.uk/blog/adding-h-entry-to-the-posts-template/<p>The next step in getting my site <a href="https://indieweb.org/">indieweb</a> ready is to add <a href="http://microformats.org/wiki/h-entry">h-entry</a> microformat markup to the posts.</p>
<h2>Here's what I've done so far…</h2>
<ul>
<li>Created a new layout called "post"</li>
<li>This will be used for standard blog posts, and is different from "pages" and "image posts"</li>
<li>Moved the <code><header></code> and <code><h1></code> inside the <code><article></code></li>
<li>Added <code>.h-entry</code> class to the <code><article></code></li>
<li>Added <code>.p-name</code> class to the <code><h1></code></li>
<li>Added a profile image with the class <code>.u-photo</code></li>
<li>Added an author (as in my name) with <code>rel="author" class="p-author h-card"</code> markup</li>
<li>Added a link back from name to my home page</li>
<li>Added <code>.dt-published</code> class to the published on date</li>
<li>Added permalink for the post to the published on date</li>
<li>Added the <code>.u-url</code> class to the permalink</li>
<li>Added the <code>.e-content</code> class to the full content of the post</li>
<li>Checked it all with the indiewebify.me validator</li>
</ul>
<h2>Example markup (with style classes removed)</h2>
<pre><code><article class="h-entry" role="article">
<header>
<h1 class="p-name"></h1>
<p>
<img class="u-photo" src="/images/benjy-stanton.jpg" alt="" height="50" width="50"> by
<a rel="author" class="p-author h-card" href="https://www.benjystanton.co.uk">Benjy Stanton</a> on
<a class="dt-published u-url" href="">18 November 2018</a> in
<a class="p-category" href="/blog/category/nablopomo">nablopomo</a>, <a class="p-category" href="/blog/category/release-notes">release-notes</a>
</p>
</header>
<div class="e-content">
…
</div>
</article>
</code></pre>
<h2>But why?</h2>
<p>Doing all this will make my blog a more fully featured publishing platform (like Medium). But the benefit is, the content is on my domain.</p>
<p>Eventually I hope to start syndicating all my content automatically to other sites like Twitter and Medium by following the Publish (on your) Own Site, Syndicate Elsewhere (POSSE) model. This and other steps are getting the site ready to start POSSEing. (Not sure if that's a word).</p>
<h2>Next steps</h2>
<ul>
<li>Switch all old posts to this template</li>
<li>Add similar features to the image post</li>
</ul>
Getting started with indieweb2018-11-17T00:00:00Zhttps://www.benjystanton.co.uk/blog/getting-started-with-indieweb/<p>I decided to add some indieweb goodness to the site. The indiewebify.me validators were really helpful to check things were working.</p>
<h2>Here's what I've done so far…</h2>
<ul>
<li>Added <a href="http://microformats.org/wiki/rel-me">rel-me</a> links from the home page to my social media profiles</li>
<li>Made sure links back from social media profiles are using https</li>
<li>Added <a href="http://microformats.org/wiki/h-card">h-card</a> markup to the home page</li>
</ul>
<h2>Markup</h2>
<pre><code><div class="h-card">
<article class="post-content" role="article">
<h1 class="post-title">Hi, my name is <span class="p-name">Benjy Stanton</span> and I’m an <span class="p-job-title">interaction designer</span></h1>
<p class="lede p-note">I work at the <span class="p-org">Office for National Statistics (ONS)</span> and I live in <span class="p-locality">Swansea</span>.</p>
<p class="margin-top--s"><a href="/blog">Read my blog</a></p>
<h2>Find me on the web</h2>
<ul>
<li><a class="u-url" href="https://twitter.com/benjystanton" rel="me">@benjystanton on Twitter</a></li>
<li><a class="u-url" href="https://github.com/benjystanton/" rel="me">Github</a></li>
<li><a class="u-email" href="mailto:benjystanton@gmail.com" rel="me">benjystanton@gmail.com</a></li>
</ul>
</article>
</div>
</code></pre>
<h2>Next step</h2>
<p>Next I want to add <a href="http://microformats.org/wiki/h-entry">h-entry</a> markup to my posts.</p>
A single word that makes the tricky task of changing nappies so much easier2018-11-16T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-single-word/<figure>
<img src="https://www.benjystanton.co.uk/images/back-of-nappy-pants.jpg" alt="A close-up of a nappy with the word back printed on the back side" />
<figcaption>
<h1>A single word that makes the tricky task of changing nappies so much easier</h1>
</figcaption>
</figure>
Introduction to interaction design in gov2018-11-15T00:00:00Zhttps://www.benjystanton.co.uk/blog/introduction-to-interaction-design-in-gov/<!-- I wrote this a few years ago when I was at DVLA (Driver and Vehicle Licensing Agency). It’s been hiding in GitHub, so I’ve moved it here. It’s mostly still relevant and useful. Well done past me. -->
<p>Interaction designers, sometimes known as user experience (UX) designers, are an essential part of digital software teams that want to meet user needs.</p>
<p>They work closely with the entire project team, especially service managers, product owners, subject matter experts, user researchers and software engineers.</p>
<h2>What do interaction designers do?</h2>
<ul>
<li>Create design ideas based on user research</li>
<li>Design mock-ups</li>
<li>Create prototypes in code</li>
<li>Decide on high-level user journeys and micro-interactions</li>
</ul>
<h3>Other useful skills</h3>
<ul>
<li>Graphic design</li>
<li>Content design</li>
<li>Accessibility</li>
<li>Front-end development</li>
<li>User research</li>
<li>Information architecture</li>
<li>Responsive web design</li>
</ul>
<h2>GDS (Government Digital Service) design resources</h2>
<ul>
<li><a href="https://www.gov.uk/design-principles">Government Design Principles</a></li>
<li><a href="https://www.gov.uk/service-manual/design">Design section in the Service Manual</a></li>
<li><a href="https://design-system.service.gov.uk/">GOV.UK Design System</a></li>
<li><a href="https://www.gov.uk/guidance/interaction-designer">Interaction designer job profile</a></li>
</ul>
<h2>Day to day</h2>
<ul>
<li>
<p><strong>Sitting at the computer</strong><br />
Much of your time will be spent sitting at the computer, designing things. Don’t forget to walk around and talk to your team.</p>
</li>
<li>
<p><strong>Meetings</strong><br />
There are lots of meetings. Attend as many as you can, this is where decisions are made. Although time consuming and often boring, one of the strengths of agile is the shared understanding between the team. The more you hear, the greater the understanding you will have.</p>
</li>
<li>
<p><strong>Workshops</strong><br />
Workshops are like meetings, but you actually get stuff done. Bring post-its and use whiteboards to analyse research and come up with design ideas.</p>
</li>
<li>
<p><strong>Daily stand-up</strong><br />
A brief meeting with your immediate team to share what you're focusing on. Try to answer these questions: What did you do yesterday? What are you doing today? Is anything blocking you?</p>
</li>
<li>
<p><strong>Show and tell</strong><br />
Once a fortnight, every project has a presentation where they share their progress on a big screen. Anyone in the organisation is allowed to watch. Be prepared to talk about your work and show a few slides.</p>
</li>
<li>
<p><strong>User research</strong><br />
Observe as much user research as you can.</p>
</li>
</ul>
<h2>Basic process</h2>
<ol>
<li>
<p><strong>User need is discovered</strong><br />
User needs are uncovered by user research, or other sources of evidence. Sometimes business requirements are introduced by the internal team too. Make sure business requirements meet user needs.</p>
</li>
<li>
<p><strong>Understand the need</strong><br />
Read the user research, talk to the user researchers and subject matter experts. Understand why this thing needs to be added.</p>
</li>
<li>
<p><strong>Has this been solved before?</strong><br />
Speak to the design team. Speak to the wider government design community. Check the GDS (Government Digital Service) design resources.</p>
</li>
<li>
<p><strong>Mock-up some ideas</strong><br />
Design a few ideas quickly, these could be sketched on paper, created in a design app like Sketch or Figma, or written out as plain text. Usually the most simple idea is the best. Remember that many users are inexperienced with using computers and digital tools.</p>
</li>
<li>
<p><strong>Prototype</strong><br />
Sometimes a paper prototype is enough to use during user research. Sometimes an interactive HTML prototype is required.</p>
</li>
<li>
<p><strong>Usability testing and research</strong><br />
Meet with the user researchers and discuss the prototype and how it functions. If possible, go along and observe the research session.</p>
</li>
<li>
<p><strong>Repeat</strong><br />
Repeat steps 1 to 7.</p>
</li>
</ol>
<h2>Prototyping in code</h2>
<p>It is difficult to set up the <a href="https://govuk-prototype-kit.herokuapp.com/docs">prototype kit</a> first time (unless you are familiar with installing things via the command line). Get some help to setup everything. Once that’s done, you only need a basic knowledge of HTML and CSS to get started.</p>
<h2>Tools</h2>
<h3>Required tools</h3>
<ul>
<li>Pens, post-its, notebook</li>
<li>Macbook</li>
<li>A web browser, like <a href="https://www.google.com/chrome/">Google Chrome</a></li>
<li><a href="https://github.com/">GitHub account</a> for version control and sharing code</li>
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a> for writing code (other text editors are also available)</li>
</ul>
<!-- #### Recommended Atom plugins:
- atom-beautify
- atom-wrap-in-tag
- autoclose-html
- autocomplete-paths
- emmet
- file-icons
- highlight-selected
- linter
- linter-csslint
- linter-htmlhint
- minimap
- open-recent
- sync-settings -->
<p>My blog post about <a href="https://www.benjystanton.co.uk/blog/my-interaction-design-tools-version-3">interaction design tools</a>.</p>
<!-- ### Other tools
- [Sketch](https://www.sketchapp.com/) for designing mock-ups
- [Microsoft Office](https://www.office.com/)
- [Trello](https://trello.com/)
- [iA Writer](https://ia.net/writer) the best note taking app out there
- [GitHub desktop](https://desktop.github.com/) -->
<h2>Blogs to subscribe to</h2>
<ul>
<li><a href="https://accessibility.blog.gov.uk/">Accessibility in government – GOV.UK</a></li>
<li><a href="https://designnotes.blog.gov.uk/">Design in government – GOV.UK</a></li>
<li><a href="https://userresearch.blog.gov.uk/">User research in government – GOV.UK</a></li>
</ul>
Leave me feedback2018-11-14T00:00:00Zhttps://www.benjystanton.co.uk/blog/leave-me-feedback/<p>Inspired by <a href="http://www.ermlikeyeah.com/">Simon’s website</a>, I want to encourage people to leave me feedback.</p>
<p>That way, I can continue to improve this website and spot errors more quickly. Positive comments are welcome too. :)</p>
<h2>Ways to leave feedback</h2>
<ul>
<li><a href="https://github.com/benjystanton/benjystanton.github.io/issues/new">Submit an issue on GitHub</a></li>
</ul>
How improving typography can help us to meet user needs2018-11-13T00:00:00Zhttps://www.benjystanton.co.uk/blog/how-improving-typography-can-help-us-to-meet-user-needs/<h2>What is typography?</h2>
<ul>
<li>Typography isn’t the same as "choosing a font".</li>
<li>Typography is about improving the usability and readability of content.</li>
<li>Typography is concerned with the layout, spacing, size, contrast, ordering and grouping of text.</li>
</ul>
<h2>What problems does good typography solve?</h2>
<p>Good typography can help users to;</p>
<ul>
<li>navigate around a page</li>
<li>understand the meaning of content</li>
<li>understand the relationship between different bits of content</li>
</ul>
<h2>How do we know poor typography is a real problem?</h2>
<p>I've observed the following in usability testing;</p>
<ul>
<li>users get overwhelmed when presented with too much content</li>
<li>users find it difficult to scan a pages and pick out information</li>
<li>users squint, lean closer to the screen and complain about small text</li>
<li>strong headings, clear and generous spacing and larger text helps users to scan text and find specific bits</li>
</ul>
<h2>How can we tell if better typography is solving the problem?</h2>
<p>Through usability testing and collecting feedback, it should be possible to observe that;</p>
<ul>
<li>users are able to find the content they are looking for more easily</li>
<li>users find the content easier to understand</li>
<li>users with low vision will be able to read content more easily</li>
<li>users are able to spend longer reading content</li>
</ul>
100 blog posts2018-11-12T00:00:00Zhttps://www.benjystanton.co.uk/blog/this-is-my-100th-blog-post/<p>This is my 100th blog post.</p>
<p>I've been writing on some version of this blog since at least 2007. I've had 3 kids, 6 jobs and 2 houses since then.</p>
<p>It started out as a Wordpress blog with the Kubrick theme. <a href="https://www.benjystanton.co.uk/blog/goodbye-wordpress/">I switched to Jekyll 3 years ago</a>.</p>
<p>I showed early hipster tendencies in 2010 by adding a <a href="https://www.benjystanton.co.uk/about/2010-colophon/">colophon</a>. I used "Starkers" and "320 and Up" to build on back then (remember those?).</p>
<p>Over half of the 100 posts have been this year. I blame <a href="https://twitter.com/mr_dudders">Andy</a>, <a href="https://twitter.com/dasbarrett">Dan</a> and <a href="https://twitter.com/jukesie">Jukesie</a> for encouraging this over-sharing.</p>
<p>I'm certain that my tendency to blog and tweet openly lead me to working at ONS. And I've left jobs in the past when I've felt stifled or blocked from blogging.</p>
<p>I feel lucky to work in a place where <a href="https://digitalblog.ons.gov.uk/2018/10/18/why-ons-needs-to-hire-service-designers/">I can write openly and honestly about my organisation</a>.</p>
<p>Here's to 100 more.</p>
Interaction design tools2018-11-11T00:00:00Zhttps://www.benjystanton.co.uk/blog/interaction-design-tools/<p>Check out my <a href="https://www.benjystanton.co.uk/uses">uses</a> page for an up-to-date list of hardware and software that I use for interaction design.</p>
<figure>
<img src="https://www.benjystanton.co.uk/images/my-dock-nov-2018.png" alt="The dock on my Mac, showing the app icons that I use frequently." />
<figcaption>
A screenshot of the dock on my MacBook Pro
</figcaption>
</figure>
<p>This blog post looks at the tools that I use every day. Interesting to note the lack of any design apps like Sketch or Adobe Creative Cloud.</p>
<h2>Stationery</h2>
<p>I've usually got a supply of the following to hand…</p>
<ul>
<li>Black Pentel sign pens</li>
<li>Assorted Sharpies</li>
<li>Grey Winsor & Newton marker</li>
<li>Post-its</li>
<li>Blu tack</li>
<li>A4 and A3 paper</li>
</ul>
<h2><a href="https://www.google.com/drive/">Google Drive</a></h2>
<p>Google Drive is an essential part of my design workflow. I store all my files in it. It lets me write, share and collaborate on written documents. And I can create slides for presenting at show and tells.</p>
<p>It's still so far ahead of corporate alternatives (I'm looking at you Office 365 and Sharepoint) in terms of usability at least.</p>
<h2><a href="https://atom.io/">Atom</a></h2>
<p>Atom is my code editor of choice. It has all the plugins I need and its compatibility with GitHub is nice (it highlights files that have changed since my last sync).</p>
<p>I hear <a href="https://code.visualstudio.com/">Visual Studio Code</a> is good now too, so I may switch to that one day.</p>
<h2><a href="https://jekyllrb.com/">Jekyll</a></h2>
<p>I use Jekyll as a base for all my web projects. It’s a static site generator with built in support for Sass, Liquid templating and Markdown. Once you've set it up, it makes it easy spin up a new site, host it with GitHub for free, and then create a URL that I can use for testing and research.</p>
<p>Using <a href="https://jekyllrb.com/docs/datafiles/">data files</a> has become a big part of my workflow recently too.</p>
<h2><a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a></h2>
<p>Chrome is an essential tool for inspecting and iterating on designs in the browser. Here are a few useful plugins too;</p>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh">WAVE</a> for checking accessibility</li>
<li><a href="https://chrome.google.com/webstore/detail/disable-html/lfhjgihpknekohffabeddfkmoiklonhm?hl=en">disable-HTML</a> for disabling HTML, CSS or JS</li>
<li><a href="https://chrome.google.com/webstore/detail/validity/bbicmjjbohdfglopkidebfccilipgeif?hl=en-GB">Validity</a> for checking code is valid</li>
<li><a href="https://chrome.google.com/webstore/detail/45to75/efmppndinjbljeellfdkpghgblenbcdd">45to75</a> for checking line length</li>
<li><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en">WhatFont</a> for checking font size and line height</li>
</ul>
<h2><a href="https://desktop.github.com/">GitHub Desktop</a></h2>
<p>I feel slightly guilty for using this tool (instead of using the terminal commands) but I does everything I need (commit code, push up changes, pull down changes). It also has handy links to let me open any project in Atom, in Terminal or on the GitHub website.</p>
<h2><a href="https://support.apple.com/en-gb/guide/terminal/welcome/mac">Terminal</a></h2>
<p>Even though I don't use Terminal for GitHub, I do use it to fire up Jekyll and run it locally. This let's me build and test web stuff locally.</p>
<h2><a href="https://trello.com/">Trello</a></h2>
<p>Trello is my tool of choice for managing sprints and kanban processes. I also use it home for planning holidays and Christmas. It's especially handy if you learn the <a href="https://trello.com/shortcuts">keyboard shortcuts</a> and <a href="https://help.trello.com/article/821-using-markdown-in-trello">Markdown formatting</a>.</p>
<h2><a href="https://slack.com/">Slack</a></h2>
<p>Slack is amazing at helping teams to stay in touch (arguably better than Email or Skype). It's especially useful when teams don't work in the same location or during the same hours.</p>
<h2><a href="https://ia.net/writer">iA Writer</a></h2>
<p>iA Writer is a great stripped back text editor. I use it less these days, as Google Drive has become my starting point for most documents. But I still love iA Writer's speed and simplicity.</p>
<h2><a href="https://www.google.co.uk/inbox/">Google Inbox</a></h2>
<p>Google Inbox is being shutdown soon, but it's been my go to tool for email and todo lists for the past few years, making it central to most of the work that I do. I'm trying to wean myself back onto Gmail and Google Tasks.</p>
<p>I think most of all, I'm going to miss the <a href="https://support.google.com/inbox/answer/6228360?hl=en-GB">Trip bundles</a>.</p>
<p>Check out <a href="https://www.benjystanton.co.uk/blog/web-design-tools">my similar post from 2013</a> to see how things have changed.</p>
Swn 20182018-11-10T00:00:00Zhttps://www.benjystanton.co.uk/blog/swn-2018/<p>A quick round-up of the things we got up to at Swn.</p>
<p><a href="http://swnfest.com/">Swn</a> is an alternative music festival in Cardiff. Bands play at different small, independent venues across Cardiff. Amazingly it's in its 12th year, but this is the first time I've ever been.</p>
<h2>Numbers</h2>
<ul>
<li>2 days</li>
<li>5 bands</li>
<li>8 venues</li>
</ul>
<h2>Days</h2>
<p>We got a weekend ticket, this includes entry to all the bands playing on Friday and Saturday night. The whole festival lasts 4 days – Wednesday to Saturday.</p>
<h2>Bands</h2>
<p>We only managed to see 5 bands, this was partly down to us arriving too late and venues being full. We were also having too much fun. Our plans to see lots of bands went out the window.</p>
<ul>
<li><a href="https://www.gazcoombes.com/">Gaz Coombes</a></li>
<li>Boy Azooga</li>
<li><a href="http://www.suuns.net/">SUUNS</a></li>
<li><a href="https://accu.bandcamp.com/">Accü</a></li>
<li><a href="https://twitter.com/privateworld20">Private World</a></li>
</ul>
<h2>Venues</h2>
<p>We did much better at venues. We went to 8 different venues across Cardiff. A lot of craft ale was drunk.</p>
<ul>
<li><a href="https://www.craftydevilbrewing.co.uk/">Beelzebubs</a></li>
<li><a href="http://tramshedcardiff.com/">Tramshed</a></li>
<li><a href="https://clwb.net/">Clwb Ifor Bach</a></li>
<li><a href="https://www.tinyrebel.co.uk/bars/cardiff/">Tiny Rebel</a></li>
<li><a href="https://buffalocardiff.co.uk/">Buffalo Bar</a></li>
<li><a href="http://www.fuelrockclub.com/">Fuel</a></li>
<li><a href="https://www.kongsbars.com/">Kongs</a></li>
<li><a href="http://gourmetgorro.blogspot.com/2017/11/the-blue-honey-night-cafe-cardiff-review.html">The Blue Honey Night Cafe</a></li>
</ul>
<h2>Next time</h2>
<p>I'd definitely recommend Swn, and I'm hoping to go again next year – and see a few more bands. It reminded me of <a href="https://www.atpfestival.com/events">All Tomorrow's Parties</a>, a music festival in Butlins (that was a lot better than it sounds).</p>
Articles I’ve written that have been published somewhere else2018-11-09T00:00:00Zhttps://www.benjystanton.co.uk/blog/articles-ive-written-that-have-been-published-somewhere-else/ <dl>
<dt><a href="https://designnotes.blog.gov.uk/2020/10/05/introducing-the-user-centred-design-and-data-community/">Introducing the user-centred design and data community</a></dt>
<dd>Design in government</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2018/11/06/things-we-learnt-when-we-hired-6-designers-at-the-same-time/">Things we learnt when we hired six designers at the same time</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2018/10/18/why-ons-needs-to-hire-service-designers/">Why ONS needs to hire service designers</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2017/12/18/were-hiring-designers/">We’re hiring five graphic designers (and a front end developer)</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2017/12/15/finding-data-by-location-my-first-design-sprint/">Finding data by location (my first Design Sprint)</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2017/10/27/building-a-design-culture-some-tips-from-leading-design-conference/">Building a design culture, some tips from Leading Design Conference</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2017/08/15/picking-things-from-a-long-list/">Picking things from a long list</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2017/01/16/enabling-users-to-customise-datasets/">Enabling users to customise datasets</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2016/11/15/getting-started-with-data-discovery/">Getting started with Data Discovery</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2016/10/21/my-first-week/">My first week</a></dt>
<dd>ONS Digital blog</dd>
<dt><a href="https://www.everydaydesigner.net/freelancing/tips-for-healthy-freelancing">Tips for healthy freelancing</a></dt>
<dd>Everyday Designer</dd>
<dt><a href="http://www.jamesgood.co.uk/blog/visit-eden-project">A Visit To The Eden Project</a></dt>
<dd>James Good</dd>
</dl>Sid’s words2018-11-08T00:00:00Zhttps://www.benjystanton.co.uk/blog/sids-words/<p>Our 2 year old has a unique language. I’ve made a note of the most common words he uses, so we can remember them after he stops.</p>
<dl>
<dt>Hello</dt>
<dd>Ay-oh</dd>
<dt>Baby (as in himself)</dt>
<dd>Bubba</dd>
<dt>Milk</dt>
<dd>Nooz</dd>
<dt>Ice cream or yogurt</dt>
<dd>A-nooz</dd>
<dt>Car</dt>
<dd>Boom-ba</dd>
<dt>Sing</dt>
<dd>Mah-moz</dd>
<dt>Dance</dt>
<dd>Nh-nh</dd>
<dt>Sorry</dt>
<dd>Yoy-oh</dd>
<dt>Tummy</dt>
<dd>Bdum-bdum</dd>
<dt>Sweets</dt>
<dd>Num-num</dd>
<dt>Water</dt>
<dd>Barf (as in bath)</dd>
<dt>Jump</dt>
<dd>Dump</dd>
<dt>Bird</dt>
<dd>Wack wack</dd>
<dt>Dinosaur</dt>
<dd>Raaas</dd>
<dt>Dragon</dt>
<dd>Wack wack a raaas</dd>
<dt>Shark</dt>
<dd>Do-do-do</dd>
</dl>
<figure>
<img src="https://www.benjystanton.co.uk/images/sid-mirror-techniquest.jpg" alt="A toddler looks at his distorted reflection in a round mirror." />
<figcaption>
Sid playing with a mirror at Techniquest, Cardiff
</figcaption>
</figure>
Good coffee in places we go for meetings and user research2018-11-07T00:00:00Zhttps://www.benjystanton.co.uk/blog/good-coffee-in-places-we-go-for-meetings-and-user-research/<p>Sometimes you want a Greggs, but sometimes you want a good, independent, specialty coffee shop. Greggs are easy to find, but good coffee shops are more tricky.</p>
<hr />
<h2>Our (mostly <a href="https://twitter.com/mr_dudders">Andy's</a>) list of coffee shops</h2>
<p>This list is curated by the folks at <a href="https://digitalblog.ons.gov.uk/">ONS digital publishing</a>, and other nice digital people.</p>
<dl>
<dt><a href="http://www.booksandbeans.co.uk/">Books and Beans</a></dt>
<dd>Aberdeen </dd>
<dt><a href="https://www.thepocket.coffee/">The Pocket</a></dt>
<dd>Belfast</dd>
<dt><a href="https://www.yorkscafe.co.uk/">Yorks</a></dt>
<dd>Birmingham</dd>
<dt><a href="https://www.smallstreetespresso.co.uk/">Small Street</a></dt>
<dd>Bristol</dd>
<dt><a href="https://www.fcp.coffee/">Full Court Press</a></dt>
<dd>Bristol</dd>
<dt><a href="https://www.tripadvisor.co.uk/Restaurant_Review-g186220-d4405183-Reviews-Baristas_Coffee_Collective-Bristol_England.html">Baristas</a></dt>
<dd>Bristol</dd>
<dt>Playground</dt>
<dd>Bristol</dd>
<dt><a href="http://www.hartsbakery.co.uk/">Harts Bakery</a></dt>
<dd>Bristol Temple Meads</dd>
<dt><a href="https://mokcoffee.be/">Mok</a></dt>
<dd>Brussels</dd>
<dt><a href="https://hard-lines.co.uk/">Hard Lines</a></dt>
<dd>Cardiff</dd>
<dt><a href="http://www.littlemancoffee.co.uk/">Little Man </a></dt>
<dd>Cardiff</dd>
<dt><a href="https://www.thescandinaviancoffeepod.com/">The Scandinavian Coffee Pod</a></dt>
<dd>Cheltenham </dd>
<dt>Bear</dt>
<dd>Derby</dd>
<dt><a href="https://www.cairngormcoffee.com/">Cairngorm Coffee</a></dt>
<dd>Edinburgh </dd>
<dt><a href="https://www.mreion.com/">Mr Eion</a></dt>
<dd>Edinburgh </dd>
<dt><a href="https://explodingbakery.com/">Exploding Bakery</a></dt>
<dd>Exeter</dd>
<dt><a href="https://www.marchcoffee.co.uk/">March Coffee</a></dt>
<dd>Exeter</dd>
<dt><a href="http://www.mccunesmith.co.uk/">McCune Smith</a></dt>
<dd>Glasgow</dd>
<dt><a href="https://200degs.com/leeds-bond-street">200 degrees</a></dt>
<dd>Leeds</dd>
<dt><a href="http://www.laynesespresso.co.uk/">Laynes Espresso</a></dt>
<dd>Leeds</dd>
<dt><a href="https://www.northstarroast.com/">North Star Coffee Shop </a></dt>
<dd>Leeds</dd>
<dt>IF</dt>
<dd>Leeds</dd>
<dt><a href="http://www.fikanorth.com/">Fika</a></dt>
<dd>Leeds</dd>
<dt><a href="https://dolcezzagelato.com/coffee/">Dolcezza</a></dt>
<dd>London</dd>
<dt>Treves & Hyde</dt>
<dd>London Aldgate East</dd>
<dt><a href="http://kioskafe.com/">Kioskafe</a></dt>
<dd>London Paddington</dd>
<dt>Ready!?</dt>
<dd>Luxembourg </dd>
<dt><a href="http://www.idlehandscoffee.com/">Idle Hands</a></dt>
<dd>Manchester</dd>
<dt><a href="https://northteapower.co.uk/">North Tea Power</a></dt>
<dd>Manchester</dd>
<dt><a href="https://twitter.com/siopshop">Siop Shop</a></dt>
<dd>Manchester</dd>
<dt><a href="http://takkmcr.com/">Takk</a></dt>
<dd>Manchester</dd>
<dt><a href="http://quayingredient.co.uk/">Quay Ingredient</a></dt>
<dd>Newcastle</dd>
<dt><a href="http://quarterscoffee.com/">Quarters Coffee</a></dt>
<dd>Newport</dd>
<dt><a href="https://www.themissingbean.co.uk/">The Missing Bean</a></dt>
<dd>Oxford</dd>
<dt><a href="https://www.colombiacoffeeroasters.co.uk/">Colombia Coffee Roasters</a></dt>
<dd>Oxford</dd>
<dt><a href="https://truckmusicstore.co.uk/">Truck Store</a></dt>
<dd>Oxford</dd>
<dt><a href="http://workhousecoffee.co.uk/">Workhouse Coffee</a></dt>
<dd>Reading</dd>
<dt><a href="http://weareambulo.com/">Ambrulo </a></dt>
<dd>Sheffield</dd>
<dt>Upshot Espresso</dt>
<dd>Sheffield</dd>
<dt>Foundry</dt>
<dd>Sheffield </dd>
<dt><a href="https://tampercoffee.co.uk/">Temper</a></dt>
<dd>Sheffield </dd>
<dt>Bear</dt>
<dd>Stone</dd>
<dt><a href="https://www.squarepeg.org.uk/">Square Peg</a></dt>
<dd>Swansea</dd>
<dt><a href="https://twitter.com/BasekampSwansea">BaseKamp</a></dt>
<dd>Swansea</dd>
<dt>Bear</dt>
<dd>Uttoxeter</dd>
<dt>Create Cafe</dt>
<dd>Wakefield</dd>
<dt><a href="https://uecoffeeroasters.com/">Ue Coffee Roasters</a></dt>
<dd>Witney</dd>
</dl>
<hr />
<p><a href="https://docs.google.com/spreadsheets/d/1mXwoRE_Ws280rLevbXKl1bzbDl1cfmVD63OLY-lfwrk/edit?usp=sharing">Add your own to this list</a>. It's an open, editable Google Sheet. This web page won't automatically update though. I'll do that every now and then.</p>
New design team retro2018-11-06T00:00:00Zhttps://www.benjystanton.co.uk/blog/new-design-team-retro/<p>Here's a snippet from an article I wrote for the ONS (Office for National Statistics) digital blog:</p>
<blockquote>
<p>This year we’ve interviewed, hired and welcomed six new interaction and graphic designers to the Digital Publishing team at ONS (Office for National Statistics). A few weeks ago I ran an anonymous retrospective to review the whole hiring process and their first few weeks and months.</p>
</blockquote>
<p><a href="https://digitalblog.ons.gov.uk/2018/11/06/things-we-learnt-when-we-hired-6-designers-at-the-same-time/">Read the full article on the ONS digital blog</a></p>
<p>I also learnt not to use the word onboarding. <a href="https://twitter.com/robchamberspfc/status/1059907595991945217">Joining</a> or <a href="https://twitter.com/avfletcher/status/1059908570660114433">induction</a> is better.</p>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Sorry for using the word "onboarding" – it won't happen again. <a href="https://t.co/K70vTLIMsB">https://t.co/K70vTLIMsB</a></p>— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1059903687106158593?ref_src=twsrc%5Etfw">November 6, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Work trips 20182018-11-05T00:00:00Zhttps://www.benjystanton.co.uk/blog/work-trips-2018/<p>Inspired by people like <a href="https://twitter.com/AldaviesAlison">Al</a> and <a href="https://twitter.com/dasbarrett">Dan</a>, I've been making a note of all my work trips this year. Here’s a run down of the key things I spotted after looking back at my notes…</p>
<p>In 2018 I went on 15 work trips.</p>
<p>I travelled to 9 different locations – Birmingham, Cardiff, Edinburgh, Exeter, London, Manchester, Reading, Sheffield, Titchfield.</p>
<p>I travelled for meetings, training and conferences, user research.</p>
NaBloPoMo progress2018-11-04T00:00:00Zhttps://www.benjystanton.co.uk/blog/nablopomo-progress/<p>NaBloPoMo stands for National Blog Posting Month. I’ve decided to join in this November and post something new every day.</p>
<hr />
<ul>
<li>30 of 30 posts published</li>
<li>100% complete</li>
</ul>
<hr />
Creating the image post layout2018-11-03T00:00:00Zhttps://www.benjystanton.co.uk/blog/creating-the-image-post-layout/<p>Yesterday I posted a <a href="https://www.benjystanton.co.uk/blog/9-miles-to-glasto">photo using a new image post layout</a>. Here’s a round up of the key things in the new template.</p>
<h2>Content</h2>
<p>Each image post needs 3 bits of unique content;</p>
<ul>
<li>image file name</li>
<li>image alt text</li>
<li>title</li>
</ul>
<p>They are defined at the top of the post, like this;</p>
<pre><code>---
image: "glasto-sign.jpg"
image-alt: "A rusty roadside sign in the countryside"
title: 9 miles to Glasto
---
</code></pre>
<p>The image template is very simple, and doesn't require any more content.</p>
<h2>Template</h2>
<p>The image layout takes these variables and inserts them into the template to generate the page.</p>
<p>Here's a simplified version of the template mark-up;</p>
<pre><code><article role="article">
<figure>
<img src="/images/{{ page.image }}" alt="{{ page.image-alt }}" />
<figcaption>
<h1>{{ page.title }}</h1>
</figcaption>
</figure>
</article>
</code></pre>
<p>The image is wrapped in a <code><figure></code> element.</p>
<p>The <code>image</code> and <code>image-alt</code> variables are combined to fill in the gaps in the <code><img></code> element.</p>
<p>Since the <code>title</code> variable is used to describe the image and the entire post, I've wrapped it inside a <code><h1></code> and then inside the <code><figcaption></code>. This is the simplest, most semantic way I could think of doing the page, and means the mark-up and design is a lean as possible.</p>
<h2>Twitter summary card</h2>
<p>I've also reused the image variables to populate the <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html">Twitter summary card</a> in the <code><head></code>.</p>
<pre><code>{% if page.image %}
<meta name="twitter:image:src" content="/images/{{ page.image }}">
<meta name="twitter:image:alt" content="{{ page.image-alt }}">
{% endif %}
</code></pre>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">For day 2 of <a href="https://twitter.com/hashtag/NaBloPoMo?src=hash&ref_src=twsrc%5Etfw">#NaBloPoMo</a> I've created a new post layout that allows me to publish microblog style image posts with a simple design <a href="https://t.co/0bnbT1Fgza">https://t.co/0bnbT1Fgza</a></p>— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1058257626239197184?ref_src=twsrc%5Etfw">November 2, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
9 miles to Glasto2018-11-02T00:00:00Zhttps://www.benjystanton.co.uk/blog/9-miles-to-glasto/<figure>
<img src="https://www.benjystanton.co.uk/images/glasto-sign.jpg" alt="A rusty roadside sign in the countryside" />
<figcaption>
<h1>9 miles to Glasto</h1>
</figcaption>
</figure>
October 2018 bookmarks2018-11-01T00:00:00Zhttps://www.benjystanton.co.uk/blog/october-2018-bookmarks/<dl>
<dt><a href="https://medium.com/@timberners_lee/one-small-step-for-the-web-87f92217d085">One Small Step for the Web…</a></dt>
<dd>I’ve always believed the web is for everyone. That’s why I and others fight fiercely to protect it. The changes we’ve managed to bring have created a better and more connected world.</dd>
<dt><a href="https://dwpdigital.blog.gov.uk/2018/10/02/why-re-use-is-the-best-design-because-civil-servants-are-users-too/">Why re-use is the best design (because civil servants are users too)</a></dt>
<dd>In government, we have access to lots of research and design patterns that have been tried and tested. If someone else has already solved a problem, we can reuse their design. This saves time and money and creates a consistent experience for the user.</dd>
<dt><a href="http://seeingdata.org/">Seeing Data</a></dt>
<dd>Seeing Data is a group of research projects which aim to understand the place of data visualisations (like those in the examples below) in society. This website includes information about projects which have been completed, are currently underway, or are about to start.</dd>
<dt><a href="https://theblog.adobe.com/kevin-hoffman-designing-better-meetings/">Productivity to the Max: Kevin Hoffman on Designing Better Meetings</a></dt>
<dd>Information architect and design strategist Kevin Hoffman is passionate about improving meetings. It led him to write his first book, “Meeting Design,” in which he explains that meetings don’t have to be “painfully inefficient snoozefests” and suggests treating them as a design problem.</dd>
<dt><a href="https://userresearch.blog.gov.uk/2016/01/29/fillet-your-findings/">Fillet your findings</a></dt>
<dd>In The Old Man and the Sea, Ernest Hemingway tells this story. One day, Santiago goes out to sea, much further than other fisherman go. He engages in a herculean struggle to catch an enormous marlin. He thrashes all day and all night. The fight nearly kills him.</dd>
<dt><a href="https://indiyoung.com/diagram-generator/">Diagram generator</a></dt>
<dd>I’ve released the software to generate a mental model diagram. You can feed your spreadsheet to it and a mental model diagram (the top half of an opportunity map) will appear on the page. The software expects your data to be in a certain format.</dd>
<dt><a href="https://uxdesign.cc/building-a-service-design-team-from-scratch-152d9c0701c">Building a service design team from scratch</a></dt>
<dd>I was recently asked by a client what they should consider when they were thinking about building a service design team from scratch. It made me think about how we went about building out our service design team from scratch.</dd>
<dt><a href="https://content.design/2015/09/everybody-hurts-content-for-kindness">Everybody Hurts: Content for Kindness</a></dt>
<dd>Last month, I gave the most difficult talk I’ve ever given. It’s about something I’ve been thinking a lot about recently: making our content and design work for people who don’t fit our narrow perception of “normal.” Here’s the description:</dd>
<dt><a href="https://medium.com/@jessica.neely/digital-accessibility-course-week-one-a266e29e258b">Digital Accessibility course — week one</a></dt>
<dd>Last week I began a five week FutureLearn course to up my accessibility knowledge. User experience refers to any experience of a user that is related to that technology.</dd>
<dt><a href="https://aycl.uie.com/virtual_seminars/creating_a_design_facilitation_practice">Creating a Design Facilitation Practice</a></dt>
<dd>A disorganized or inefficient meeting is a workplace pain. At best, it’s a waste of time, and at worst, it creates new problems. Luckily, there’s a solution: creating a facilitation process to transform your meetings into what they should have been all along.</dd>
<dt><a href="https://public.digital/2018/10/12/internet-era-ways-of-working/">Internet-era ways of working</a></dt>
<dd>An earlier draft of this list, stuck to the PD office door Our definition of digital says: “Applying the culture, processes, business models & technologies of the internet-era to respond to people’s raised expectations.” Once they’ve heard that, the next thing people always ask us is: “OK.</dd>
<dt><a href="https://digitalblog.coop.co.uk/2017/02/08/building-whats-useful-governance-and-agile-delivery/">Building what’s useful: governance and agile delivery</a></dt>
<dd>I’ve had lots of conversations with colleagues in the Co-op about working in agile ways.</dd>
<dt><a href="https://orgdesignfordesignorgs.com/2018/10/16/the-most-important-role-in-your-design-org-team-lead/">The Most Important Role In Your Design Org: Team Lead</a></dt>
<dd>Discussions of design leadership tend to look upward, toward the executives and directors who sit atop the organization.</dd>
<dt><a href="https://www.propublica.org/article/how-typography-can-save-your-life">How Typography Can Save Your Life — ProPublica</a></dt>
<dd>After decades of silently shouting at the top of its lungs, the National Weather Service recently announced that it’s going to stop publishing its forecasts and weather warnings in ALL CAPS. Beginning May 11, for the first time ever, we’ll start seeing mixed-case letters.</dd>
<dt><a href="http://adamsilver.io/articles/designing-inclusively/">Designing inclusively</a></dt>
<dd>First sent to my private mailing list. Whilst the web is still young, it’s been around long enough for us to know about its power and its constraints. We know what these constraints are now because we’ve bent them so much over the years.</dd>
<dt><a href="http://bradfrost.com/blog/post/how-much-documentation-to-include-in-a-style-guide/">How much documentation to include in a style guide?</a></dt>
<dd>It’s a question I often hear from the design systems teams I work with. The short answer is: include as much or as little documentation as needed. The longer answer is: it depends. Alright, now I’ll quit messing around and explain a bit more.</dd>
<dt><a href="https://lisacharlotterost.github.io/datavistools-revisited">One Chart, Nine Tools – Revisited</a></dt>
<dd>Tableau Public What can I say - Tableau Public works well for data like this. The embedded graphic is too massive to actually use it in an article, but it’s one of my favorite tool for exploration.</dd>
<dt><a href="https://medium.com/@paulmsmith/design-systems-the-means-not-the-end-fc840c21b51e">Design Systems — the means, not the end</a></dt>
<dd>When I bought my first house, it was a busy time, I just needed to get stuff done and quickly! Not unlike the teams a lot of us now work with. They looked good in the store, I’d check the material, open and close the doors, etc and then I’d load up the car and be on my way home.</dd>
<dt><a href="https://mhclgdigital.blog.gov.uk/2018/10/25/data-and-information/">It can be difficult to make data from information</a></dt>
<dd>The Digital Land services team recently ran a discovery in which we researched the barriers our users encounter when trying to find and use housing data. This is the first in a series of posts about those barriers, or what people sometimes call ‘friction’.</dd>
<dt><a href="https://webdesign.tutsplus.com/articles/designing-accessible-content-typography-font-styling-and-structure--cms-31934">Designing Accessible Content: Typography, Font Styling, and Structure</a></dt>
<dd>Creating and designing accessible content means more than just choosing accessible typography. Even with “perfect” font families in place on your website, people with low vision, cognitive, language, and learning disabilities may still struggle to process the text. </dd>
<dt><a href="http://www.myddelton.co.uk/blog/user-research-is-a-team-sport">User research is a team sport</a></dt>
<dd>‘User research is a team sport’ is the most powerful thing I’ve learned in government. Forget user needs. Forget discovery, alpha, beta, live. Forget agile. Forget the service standard and service assessments. This is the one thing I would save in a fire.</dd>
<dt><a href="https://dwpdigital.blog.gov.uk/2018/10/29/what-i-learned-as-an-interaction-designer-at-datajam-north-east/">What I learned as an interaction designer at DataJam North East</a></dt>
<dd>The event aimed to bring the data and service design communities closer together and help solve problems affecting the North East region by holding both a hack (an intensive collaboration on a data or software project) and a free-form discussion called an unconference as part of the same event.</dd>
</dl>September 2018 bookmarks2018-10-02T00:00:00Zhttps://www.benjystanton.co.uk/blog/september-2018-links/<dl>
<dt><a href="https://ethanmarcotte.com/wrote/accessibility-is-not-a-feature/">Accessibility is not a feature. — ethanmarcotte.com</a></dt>
<dd>I care pretty deeply about accessible design. I wouldn’t call myself an accessibility specialist, mind you, but I’ve always felt that “designing for the web” means ensuring our work is accessible as broadly as possible.</dd>
<dt><a href="https://blog-louisedowne-com.cdn.ampproject.org/c/s/blog.louisedowne.com/2018/04/03/why-its-never-a-good-time-for-service-design/amp/">Why it’s never a good time for service design</a></dt>
<dd>Picture the scene: you’ve just joined a new team, they’re doing good work but they’re plugging away at the wrong problem. You bide your time, thinking of ways to bring them round.</dd>
<dt><a href="https://uxplanet.org/from-idea-to-appstore-a-design-sprint-case-study-a7781093de8d">From Idea to App Store: A Design Sprint Case Study</a></dt>
<dd>If you’ve ever worked on an app, you can only dream of that feeling of pure joy when you open the App Store and see your app featured on the homepage.</dd>
<dt><a href="https://alistapart.com/article/the-core-model-designing-inside-out-for-better-results">The Core Model: Designing Inside Out for Better Results</a></dt>
<dd>If you’ve worked on a website design with a large team or client, chances are good you’ve spent some time debating (arguing?) with each other about what the homepage should look like, or which department gets to be in the top-lev</dd>
<dt><a href="https://medium.com/@Ellayanor/team-charters-for-diverse-teams-a50add65dd92">Team Charters for Diverse Teams</a></dt>
<dd>Team Charters are things which come up a lot, and are often triggers for really insightful conversations about how teams work together and function well. A team charter is basically a set of principles for how a group of people work as a team, that a team draft together and agree to abide by.</dd>
<dt><a href="http://www.jamiearnold.com/blog/2014/07/22/seven-questions-to-build-a-roadmap">Seven questions to build a roadmap</a></dt>
<dd>In my last post I wrote about why roadmaps are for everyone. This post is about techniques for building one and how the use of language can help align your pure agile or mixed methodology programmes.</dd>
<dt><a href="https://medium.com/@cassierobinson/a-user-manual-for-me-d3a851fbc694">A user manual for me</a></dt>
<dd>There are lots of ways to build good teams and working relationships. But, before you get to the relational matter of teams, platforms and systems, it’s important for people to know your preferences as an individual.</dd>
<dt><a href="https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/">The Importance Of Manual Accessibility Testing</a></dt>
<dd>Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process.</dd>
<dt><a href="https://accessibility.blog.gov.uk/2018/09/27/assistive-technology-tools-you-can-use-at-no-cost/">Assistive technology tools you can use at no cost</a></dt>
<dd>GDS’s Accessibility Empathy Lab is open to anyone from the public sector. Since we blogged about the lab, we’ve seen a huge increase in visitors coming in to use it as an assistive technology space.</dd>
</dl>How to focus in open plan offices2018-09-26T00:00:00Zhttps://www.benjystanton.co.uk/blog/how-to-focus-in-open-plan-offices/<p>Earlier this week, I asked the Twitter hive mind for tips how to get focussed work done when working in open plan offices.</p>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Designers who work in open plan offices — how do you make space and time for focussed work?</p>— Benjy Stanton (@benjystanton) <a href="https://twitter.com/benjystanton/status/1044599479721218048?ref_src=twsrc%5Etfw">September 25, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>I got some great responses (thanks everyone!) so I've captured them here for prosperity…</p>
<h2>Put on some headphones</h2>
<ul>
<li>Get some headphones</li>
<li>The bigger the better</li>
<li>Noise cancelling ones are good</li>
<li>Listen to white noise</li>
<li>Or don't listen to anything – just wear them to discourage people from interrupting you</li>
</ul>
<h2>Work from home</h2>
<ul>
<li>That's it really, just work from home more</li>
</ul>
<h2>Manage your calendar</h2>
<ul>
<li>Block out slots in your calendar</li>
<li>Decline non-essential meetings</li>
<li>Plan to do focussed work when you're at your most productive – for me that's early in the morning</li>
</ul>
<h2>Stop using distracting apps</h2>
<ul>
<li>Put do not disturb on Slack</li>
<li>Turn your emails off</li>
<li>Use <a href="http://heyfocus.com/">Focus app</a> to help</li>
</ul>
<h2>Get away from your desk</h2>
<ul>
<li>Book yourself a meeting room</li>
<li>Use Skype pods and breakout spaces</li>
<li>Hide in usability labs</li>
<li>Find anywhere that's quiet or tucked away</li>
</ul>
<h2>Be anti-social</h2>
<ul>
<li>Scowl at people</li>
<li>Put a hoodie on</li>
<li>Put up 'do not disturb' signs</li>
<li>Make sure people know you're busy</li>
</ul>
<h2>Look after yourself</h2>
<ul>
<li>Working in distracting environments can be stressful</li>
<li>Don't ignore the problem</li>
</ul>
A plan for accessible charts2018-09-17T00:00:00Zhttps://www.benjystanton.co.uk/blog/a-plan-for-accessible-charts/<p>A list of user research findings, accessibility report findings, best practice, resources and good ideas that I’ve collected. Last updated on 16 April 2021.</p>
<h2>How to make accessible charts</h2>
<ul>
<li>Keep the layout simple and mobile friendly</li>
<li>Present the information in more than one way</li>
<li>Use clear, readable typography</li>
<li>Check the chart is understandable in black and white</li>
<li>Label the data directly</li>
<li>Don't use light shades and colours</li>
<li>Use valid, semantic mark-up</li>
<li>Interactive elements should be controllable with a keyboard</li>
<li>Use vector formats that can be zoomed-in (like SVG)</li>
<li>Consider using patterns or textures to distinguish bars and lines</li>
</ul>
<p>Read on for more detail.</p>
<h2>Colour</h2>
<ul>
<li>Check colour meets contrast standards</li>
<li>Don’t use colour alone to convey meaning</li>
<li>Consider colour blind users (use colour blind simulators to check)</li>
<li>Charts should be readable in black and white</li>
<li>Check design works in high contrast mode</li>
</ul>
<h3>Update on 5 December 2018</h3>
<p>Thanks to <a href="https://twitter.com/henryjameslau">Henry</a> for suggesting these points about how colour is used by data visualisation producers…</p>
<blockquote>
<p>Colour also has semantic meaning. Be careful to check what those colours could mean for people. Meaning also varies culturally so may mean different things outside what you're used to.<br /><br />Be mindful that when using colour to represents your data that it shows the relationships in your data. E.g. if your data is different categories, your colours should be as distinct as possible. If your data is sequential or represents a range, colour should change in a sensible way. Lab and HCL colour spaces calculate colour based on the way the human eye works, rather than how computers calculate colours.</p>
</blockquote>
<h2>Line and bar style</h2>
<ul>
<li>Consider using patterns or textures to distinguish bars and lines</li>
<li><a href="https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)">Increase minimum size of elements in chart</a></li>
<li>Label the data directly (instead of a separate keys or legend)</li>
</ul>
<p>This <a href="https://apps.apple.com/gb/story/id1510045637">game on the Apple app store uses some nice patterns</a> to help make the game usable for people with colour vision deficiency.</p>
<h2>Present data in alternative ways</h2>
<ul>
<li>Use titles and descriptions to support the chart</li>
<li><a href="https://www.gov.uk/government/publications/government-digital-strategy/government-digital-strategy#people-who-are-already-online">Allow users to view data in an html table</a></li>
<li>Allow users to download the data as a spreadsheet</li>
</ul>
<h2>Interactive elements</h2>
<ul>
<li>Interactive elements must have affordance (for example, links should be blue with an underline)</li>
<li>Make sure interactive elements are usable without a mouse</li>
<li>All interactive elements should have a focus style</li>
<li>Tool tips can help some users to read charts, especially users with cognitive conditions</li>
<li>Download links labels must include file format and size</li>
<li>Headings, links and button text must be unique and descriptive</li>
<li>If an experience cannot be made accessible, create another route for users to get that information</li>
</ul>
<h2>Typography</h2>
<ul>
<li>Use a minimum font size</li>
<li>Use consistent font and spacing</li>
<li>Lines are less than 80 characters wide</li>
<li>Avoid italics and block capitals</li>
<li>Use a san-serif font with thick letters</li>
<li>Make sure text can be resized</li>
<li>Test the content doesn't overflow or become truncated when font size is increased</li>
<li>Nest headings in order (for example, H2s only appear after H1s)</li>
<li>Don't skip heading levels</li>
</ul>
<h2>Layout</h2>
<ul>
<li>Design with a mobile-first mindset</li>
<li>Use a consistent design</li>
<li>Use simple, well known chart types that users are more likely to understand</li>
<li>Create a limited number of reusable templates</li>
<li>Strive to use a simple design</li>
<li>Reading and navigation order is logical</li>
</ul>
<h2>SVGs</h2>
<ul>
<li>Use SVG because they are scalable</li>
<li>Users can zoom in and they won't become pixellated</li>
<li>Structure the SVG carefully, so that it makes use of their accessible powers</li>
<li>Use ARIA tags to improve accessibility</li>
<li><a href="https://www.sitepoint.com/tips-accessible-svg/">Tips for Creating Accessible SVG</a></li>
<li><a href="http://decks.tink.uk/2017/lws/index.html#cover">Making SVG accessible</a></li>
<li><a href="https://tink.uk/accessible-svg-line-graphs/">Accessible SVG line graphs</a></li>
<li><a href="https://css-tricks.com/how-to-make-charts-with-svg/">How to Make Charts with SVG</a></li>
<li><a href="https://fizz.studio/blog/reliable-valid-svg-accessibility/">Reliable and Valid SVG Accessibility</a></li>
</ul>
<p><a href="https://www.benjystanton.co.uk/blog/add-svg-icons/">Read more about SVGs in this blog post</a></p>
<h2>HTML mark-up</h2>
<ul>
<li>Use <code>figure</code> element to wrap the chart</li>
<li>Use <code>figcaption</code> for the chart title</li>
<li>Use <code>footer</code> inside the <code>figure</code> element to contain any notes or citation information</li>
<li>Read <a href="https://thoughtbot.com/blog/alt-vs-figcaption">Alt vs Figcaption by Elaina Natario</a></li>
</ul>
<h2>Other resources</h2>
<ul>
<li><a href="https://chartability.fizz.studio/">Chartability from Frank Elavsky</a></li>
<li><a href="https://github.com/dataviza11y/resources">Dataviz Accessibility Resources from DataViz Accessibility</a></li>
<li><a href="https://fossheim.io/writing/posts/apple-health-dataviz-a11y/">What we can learn from Apple's dataviz accessibility from Sarah L. Fossheim</a></li>
<li><a href="https://chartscss.org/">Charts.css</a></li>
<li><a href="https://www.storytellingwithdata.com/blog/2018/6/26/accessible-data-viz-is-better-data-viz">Accessible data viz is better data viz from Storytelling with data</a></li>
<li><a href="https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/">An introduction to accessible data visualizations with D3.js from Sarah L. Fossheim</a></li>
<li><a href="https://fossheim.io/writing/posts/accessible-dataviz-design/">An intro to designing accessible data visualizations from Sarah L. Fossheim</a></li>
<li><a href="https://medium.com/nightingale/accessibility-is-at-the-heart-of-data-visualization-64a38d6c505b">Why Accessibility Is at the Heart of Data Visualization from Doug Schepers</a></li>
<li><a href="https://gss.civilservice.gov.uk/policy-store/making-analytical-publications-accessible/">Making analytical publications accessible</a></li>
<li><a href="https://blog.datawrapper.de/colorblindness-part2/">What to consider when visualizing data for colorblind readers from Lisa Charlotte Rost</a></li>
<li><a href="http://accessibility.psu.edu/images/charts/">Charts & Accessibility</a></li>
<li><a href="https://www.ontario.ca/document/ontario-design-guide/charts">Charts, graphs and infographics</a></li>
<li><a href="http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3">Color brewer</a></li>
<li><a href="https://www.highcharts.com/a11y.html">Highcharts accessibility demos</a></li>
<li><a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a></li>
<li><a href="http://colororacle.org/">Color Oracle</a></li>
<li><a href="https://michelf.ca/projects/sim-daltonism/">Sim Daltonism colour blindness simulator</a></li>
<li><a href="http://littlebigdetails.com/post/35775193711/trello-color-blind-friendly-mode-makes">Trello - Color Blind Friendly Mode</a></li>
<li><a href="https://24ways.org/2012/colour-accessibility">Colour Accessibility</a></li>
<li><a href="https://medium.com/@sidgtl/designing-for-colour-blindness-b74a9d012ef2">Designing for Colour Blindness</a></li>
<li><a href="https://towardsdatascience.com/data-visualization-and-accessibility-three-recommended-reads-and-top-tips-9c5e862b464e">Data Visualization and Accessibility: Three Recommended Reads and Top Tips from Susan Currie Sivek</a></li>
</ul>
<h2>Examples of charts across UK government services</h2>
<ul>
<li><a href="https://www.ethnicity-facts-figures.service.gov.uk/">Ethnicity facts and figures</a></li>
<li><a href="https://gds.blog.gov.uk/2012/11/12/updating-performance-dashboard/">Updating the GOV.UK Performance Dashboard</a></li>
<li><a href="https://www.gov.uk/performance">GOV.UK Performance Dashboards</a></li>
<li><a href="https://github.com/alphagov/magna-charta">Magna Charta repo</a></li>
<li><a href="http://alphagov.github.io/magna-charta/">Magna Charta demo</a></li>
<li><a href="https://www.gov.uk/government/news/uk-export-finance-annual-report-and-accounts-published">UK Export Finance: annual report and accounts published</a></li>
</ul>
How to lead user-centred design2018-09-14T00:00:00Zhttps://www.benjystanton.co.uk/blog/how-to-lead-user-centred-design/<p>My brief notes from the Government Digital Service (GDS) essentials of leadership training, run by <a href="https://twitter.com/rebeccakemp">Rebecca Kemp</a> and <a href="https://twitter.com/Adewunmi">Ade Adewunmi</a>.</p>
<h2>Tell a good story</h2>
<ul>
<li>Learn how to talk about what you and your team do.</li>
<li>Learn how to talk to people who aren't familiar with user-centred design.</li>
<li>Help your team to talk about it too.</li>
<li>Make sure you can talk about your profession, and the product you are working on.</li>
</ul>
<h2>Find common ground</h2>
<ul>
<li>Not everybody cares about user-centred design, so don't be a purist.</li>
<li>You only have to convince people enough to let you do your job, you don't have to convert them.</li>
<li>Acknowledge other peoples' expertise.</li>
<li>Work to find common ground, almost everyone wants to improve the service they're working on in some way. Learn how to talk about things in a way that they can relate to.</li>
<li>Be pragmatic. What concrete steps can you take to improve the service? Making everything better for everyone at the same time is impossible.</li>
<li>Learn how much things cost, and show people what savings can be made.</li>
</ul>
<h2>Look after your team (and yourself)</h2>
<ul>
<li>Protect your team from things that can disrupt their flow.</li>
<li>Make decisions for them (when they need you to).</li>
<li>Leading can be exhausting. It requires a lot of emotional labour. Find things that you can do to recharge. Plan at least one of these things into your schedule every week.</li>
<li>Don't let yourself burn out.</li>
<li>Speak to friends and mentors outside of your organisation.</li>
</ul>
<h2>Further reading</h2>
<p><a href="https://medium.com/@AdeAdewunmi/leadership-skills-when-youre-in-the-business-of-disruption-d42a465fbf6a">Leadership skills when you’re in the business of disruption</a> by <a href="https://twitter.com/Adewunmi">Ade Adewunmi</a></p>
August 2018 bookmarks2018-09-06T00:00:00Zhttps://www.benjystanton.co.uk/blog/aug-2018-links/<dl>
<dt><a href="https://blog.datawrapper.de/colorguide/index.html">Your Friendly Guide to Colors in Data Visualisation</a></dt>
<dd>Once upon a time, I tweeted on an urgent matter. “Can somebody tell me how to get better with color?” I wrote." My color decisions are awful." I got a lot of replies with links to tools. They were awesome, so I collected them in a blog post.</dd>
<dt><a href="https://www.youtube.com/watch?v=2DLK3qK2aw0">Blocked from benefits ... literally</a></dt>
<dd>Jaki has been living without disability benefits for almost a year. When she applied for employment and support allowance, she had to attend a work capability assessment. After an hour's journey, she found she was not able to access the testing centre. Her experience is not unique.</dd>
<dt><a href="https://ethanmarcotte.com/wrote/accessibility-is-not-a-feature/">Accessibility is not a feature. — ethanmarcotte.com</a></dt>
<dd>I care pretty deeply about accessible design. I wouldn’t call myself an accessibility specialist, mind you, but I’ve always felt that “designing for the web” means ensuring our work is accessible as broadly as possible.</dd>
</dl>July 2018 bookmarks2018-09-05T00:00:00Zhttps://www.benjystanton.co.uk/blog/july-2018-links/<dl>
<dt><a href="https://medium.com/@avfletcher/design-backgrounds-are-over-rated-85ed59f7c7df">Design backgrounds are over-rated</a></dt>
<dd>For strategic, systems and service design at least, design backgrounds are over-rated. If you insist on recruiting only “talent” with such backgrounds, you will dramatically reduce your chances of finding candidates with the skills required design and deliver change.</dd>
<dt><a href="http://stevehoneyman.co.uk/blog/blue-notes/">Responsive Blue Note Album sleeves recreated in the browser using HTML and CSS</a></dt>
<dd>Over the last few months I’ve been busying myself trying to re-create some of Reid Miles iconic album sleeves in the browser.</dd>
<dt><a href="https://www.bbc.co.uk/gel/guidelines/how-to-make-accessible-animated-images">How to make Accessible Animated Images</a></dt>
<dd>Animated images can really enhance user experience and understanding, but there are limitations. If they’re not designed in an accessible way, GIFs can be distracting or could even cause seizures. To make sure your animated images are safe and accessible for all, here’s what you need to know.</dd>
<dt><a href="https://medium.com/cbc-digital-labs/planting-the-service-design-seeds-at-cbc-f0ced9a0f225">Planting the Service Design Seeds at CBC</a></dt>
<dd>Hi there ?, thanks for stopping by! My name is Hira and I’m excited to introduce the Service Design practice at CBC. We define Service Design as a human-centred approach to creating and delivering holistic, seamless audience experiences across the CBC ecosystem.</dd>
<dt><a href="https://civilservice.blog.gov.uk/2018/07/06/keeping-in-touch-helps-me-feel-like-me/">Keeping in touch helps me feel like me</a></dt>
<dd>So, how have I used my time, what are the challenges you face as the mother of a young baby away from work, and how have I tackled them? I’ve thought of myself as a member of two minority groups for quite some time - a woman and a member of the LGBT community.</dd>
<dt><a href="http://www.visionofbritain.org.uk/data">Data Access</a></dt>
<dd>The GB1900 project computerised all the place names and other text on the Second Edition County Series six-inch-to-one-mile maps covering the whole of Great Britain, published by the Ordnance Survey between 1888 and 1914 -- 1900 for short.</dd>
<dt><a href="https://larahogan.me/blog/leadership-style-colors/">Leadership Style Colors</a></dt>
<dd>Search for “leadership styles” on Google, and you’ll find lots of different articles describing the various types and numbers of leadership styles. Here are some examples of articles that say there are five, six, seven, eight, nine, and twelve leadership styles.</dd>
<dt><a href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/">What's New in WCAG 2.1</a></dt>
<dd>This page lists the new success criteria in Web Content Accessibility Guidelines (WCAG) 2.1. It includes quotes from personas (fictional people) to help you understand some aspects of the success criteria.</dd>
<dt><a href="https://www.smashingmagazine.com/2018/07/pattern-library-first-css/">Pattern Library First: An Approach For Managing CSS</a></dt>
<dd>Upgrade your inbox and get our editors’ picks twice a month. CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers.</dd>
<dt><a href="https://medium.com/@karenyunqiuli/lifecycle-a-simple-service-design-mapping-technique-69bdec645ad6">Lifecycle: a simple service design mapping technique</a></dt>
<dd>Being a part of an in-house service design team in the BBC comes with a lot of perks. I get to work on many complex and exciting projects, with a wide range of stakeholders. Every project is an opportunity to explore something new.</dd>
<dt><a href="https://medium.com/@sanjaypoyzer/3-questions-everybody-should-know-the-answer-to-e6a91fe572b9">3 questions everybody should know the answer to</a></dt>
<dd>Whatever you’re working on, it probably needs to be delivered quickly. There are always deadlines that need to be met, stakeholders who need to be managed, and meetings that need to be booked. In all the rush of the day-to-day, it’s often hard to work out what really needs to be achieved.</dd>
<dt><a href="https://www.theguardian.com/guardian-masterclasses/2015/aug/07/data-visualisation-a-one-day-workshop-tobias-sturt-adam-frost-digital-course">Data visualisation: A one-day workshop</a></dt>
<dd>Learn how to transform data into beautiful infographics at this hands-on workshop with our data visualisation experts Adam Frost and Tobias SturtDates: Multiple dates availableTimes: Full-day course, 10am-4pm Whether you’re working on a presentation, a website or teaching materia</dd>
<dt><a href="https://contentdesign.london/usability/readability-guidelines/">Readability guidelines</a></dt>
<dd>Not brand or tone of voice just the mechanics of the language that are usually in style guides. So how to write a date or numerals vs numbers. But the term ‘style guide’ seems to mean different things to different people.</dd>
<dt><a href="https://medium.com/@mariecheung/outcome-based-service-mapping-feec7e1937da">Outcome-based service mapping</a></dt>
<dd>At the Department for Work and Pensions in the UK government, I work with many teams who are currently tasked with replacing internal systems and improving the staff experience.</dd>
<dt><a href="https://pudding.cool/process/flexbox-layout/">Making Data Viz Without SVG Using D3 & Flexbox</a></dt>
<dd>Bye bye tricky alignments. A few months ago, my co-worker Matt and I were collaborating on a project. I had been building a stacked bar chart in D3.js, and was seriously struggling to get the bars to stack on top of each other nicely and to animate from the bottom of the graphic instead of the top.</dd>
<dt><a href="https://larahogan.me/blog/feedback-equation/">Feedback Equation</a></dt>
<dd>As I mention in my book Demystifying Public Speaking, humans are mostly bad at giving feedback. We’re also really bad at preparing ourselves to receive feedback. Many of us are paralyzed by the fear of having these awkward conversations.</dd>
<dt><a href="https://tom.loosemore.com/2018/07/17/interview-in-offscreen-magazine/">Interview in Offscreen Magazine</a></dt>
<dd>Last year I was interviewed by the mercurial Kai Brach for his magazine Offscreen, which seeks to highlight the human side of technology, and does so in style. You should subscribe.</dd>
<dt><a href="https://alistapart.com/article/webmentions-enabling-better-communication-on-the-internet">Webmentions: Enabling Better Communication on the Internet</a></dt>
<dd>Over 1 million Webmentions will have been sent across the internet since the specification was made a full Recommendation by the W3C—the standards body that guides the direction of the web—in early January 2017.</dd>
<dt><a href="https://medium.com/bbc-news-labs/beyond-800-words-prototyping-new-story-formats-for-news-e3102e783b5f">Beyond 800 words: prototyping new story formats for news</a></dt>
<dd>News on the internet is largely served up as 500 to 800-word articles — a legacy of newspapers. Although the digital article has been enhanced and improved with new technologies, it still works on the assumption that ‘one size fits all’.</dd>
<dt><a href="https://www.sarasoueidan.com/blog/toggle-switch-design/">Sara Soueidan – Freelance front-end Web developer, author & speaker</a></dt>
<dd>Yesterday I was working on creating the slides and accompanying demos for my upcoming Web Directions Code talk next week. One of the demos I’m creating is a basic proof of concept for a simple switch that is used to switch the theme of a UI from light to dark and vice versa.</dd>
<dt><a href="https://alphagov.github.io/wcag-primer/#wcag-2-0-getting-started">WCAG 2.0 Primer alpha</a></dt>
<dd>This document will help you get up to speed with WCAG 2.0 quickly and avoid common mistakes people make when creating or updating web content. You will find this really helpful if you design, build or create web content.</dd>
<dt><a href="https://blog.marvelapp.com/body-text-small/">Your Body Text Is Too Small</a></dt>
<dd>Body text is the key component in communicating the main bulk of a message or story, and it’s probably the most important element on a website, even if people sometimes read just the headlines.</dd>
</dl>June 2018 bookmarks2018-07-07T00:00:00Zhttps://www.benjystanton.co.uk/blog/June-2018-links/<dl>
<dt><a href="http://emilywebber.co.uk/a-decent-remote-show-and-tell-set-up/">A decent remote show and tell set up</a></dt>
<dd>Many organisations work with dispersed teams or stakeholders, so there must be an easy way to do an engaging remote show and tell, surely… right? I couldn’t find one, this is my ongoing request to find my own and my current set up.</dd>
<dt><a href="https://alistapart.com/article/cult-of-the-complex">The Cult of the Complex</a></dt>
<dd>In an industry that extols innovation over customer satisfaction, and prefers algorithm to human judgement (forgetting that every algorithm has human bias in its DNA), perhaps it should not surprise us that toolchains have replaced know-how</dd>
<dt><a href="https://inclusive-components.design/cards/">Cards</a></dt>
<dd>Some of the components I've explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification.</dd>
<dt><a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1</a></dt>
<dd>Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities.</dd>
<dt><a href="https://hodigital.blog.gov.uk/2018/06/07/creating-a-list-of-services/">Creating a list of services</a></dt>
<dd>The Home Office is developing a list of services it delivers, or delivers a part of, as an end user might know them, or might search for them online. By end user, we mean citizens, visitors, people living here from abroad, employers, universities, airlines, port operators and many more.</dd>
<dt><a href="https://blog.trello.com/how-design-teams-are-using-trello-ultimate-guide">How Design Teams Are Using Trello: The Ultimate Round Up</a></dt>
<dd>Design teams are arguably the most underrated, understaffed, but also one of the most important teams at your company.</dd>
<dt><a href="https://medium.com/@Elijah_Meeks/making-annotations-first-class-citizens-in-data-visualization-21db6383d3fe">Making Annotations First-Class Citizens in Data Visualization</a></dt>
<dd>I’m convinced that annotations are where we’re going to see the next wave of innovation in data visualization.</dd>
<dt><a href="https://blog.mattedgar.com/2018/06/06/look-after-the-water-reflections-1-year-into-my-work-at-nhs-digital/">“Look after the water” – reflections 1 year into my work at NHS Digital</a></dt>
<dd>Other people’s jobs are endlessly fascinating. At a birthday celebration a couple of years ago I got talking to Johnny, a family friend who works as an aquarium curator. He told me a surprising thing about his work: how little of his time he spends actually looking after the fish.</dd>
<dt><a href="https://open.nytimes.com/reimagining-the-new-york-times-digital-story-experience-ff698541ac09">Reimagining The New York Times Digital Story Experience</a></dt>
<dd>The New York Times publishes more than 150 articles a day to our iOS and Android apps, and our desktop and mobile websites. All of these platforms were originally developed by separate teams, so each had its own implementation and user experience.</dd>
<dt><a href="https://www.designbetter.co/designops-handbook">DesignOps Handbook</a></dt>
<dd>DesignOps is the key to scaling digital product design teams with more efficiency.</dd>
<dt><a href="https://blog.louisedowne.com/2018/06/14/15-principles-of-good-service-design/">15 principles of good service design</a></dt>
<dd>What is a good service and why are we so afraid to talk about it? I’ve been asking myself this question a lot recently. In a bid to find out, I tweeted this a few weeks ago and – bar a couple of people also wondering the same thing – got pretty much tumbleweeds in return.</dd>
<dt><a href="https://www.gov.uk/service-manual/measuring-success/measuring-service-benefits">Measuring the benefits of your service</a></dt>
<dd>Building the wrong thing can be very costly. It wastes users’ time, causes frustration and leads to people getting in touch via less cost effective channels.</dd>
<dt><a href="https://medium.com/@loft27design/designers-as-power-brokers-403338d79361">Designers as power brokers</a></dt>
<dd>I put this flag up in work a couple of weeks ago. It caused a bit of a conversation and people had different interpretations of what it meant. I thought it best to explain the way I intended it.</dd>
<dt><a href="https://pds.blog.parliament.uk/2018/06/13/making-the-hours-count-not-counting-the-hours/">Making the hours count, not counting the hours</a></dt>
<dd>I’ve been a content designer for about two years. I started just after my daughter was born. It’s taken some close supervision, support, and some pretty intense onboarding, but we’re both getting used to our roles. We’re taking small steps because getting used to new things takes time.</dd>
<dt><a href="https://cm.engineering/how-to-test-accessibility-of-emails-b68fed03f5f4">How to test accessibility of emails</a></dt>
<dd>Testing for accessibility in your emails doesn’t have to be a chore. Making accessible and inclusive emails will increase your target audience (1, 2, 3) and will have other unintended benefits. These other benefits are known as the Curb-Cut effect. When people first introduced curb cuts (i.e.</dd>
<dt><a href="https://design-system.service.gov.uk/">Design your service using GOV.UK styles, components and patterns</a></dt>
<dd>GOV.UK uses cookies to make the site simpler. Find out more about cookies Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.</dd>
<dt><a href="https://medium.com/leading-service-design/service-mapping-and-different-types-of-maps-604a1a22e22c">Service mapping and different types of maps</a></dt>
<dd>Written by Ben Holliday. Based on work developed with Kirsty Sinclair and feedback from the FutureGov design team. There’s a question of why designers make so many maps. We love maps.</dd>
<dt><a href="https://medium.com/@deanvipond/jelly-flood-the-world-of-design-seen-through-the-lens-of-a-kids-cartoon-f2d854bf4db9">Jelly Flood! The world of design, seen through the lens of a kids’ cartoon</a></dt>
<dd>Maybe it was the sleep deprivation that parenthood brought, but Ben & Holly’s Little Kingdom was one of my favourite TV shows whilst my children were younger. It was funny and smart, and had some wry comments about class and royalty. These are the Fairies. They live in a castle, and can do magic.</dd>
<dt><a href="https://www.gov.uk/service-manual/agile-delivery/working-across-organisational-boundaries">Working across organisational boundaries</a></dt>
<dd>You may need to work with other organisations or teams across your department to build services that make sense to users. This is because separate teams are often responsible for different chunks of a full end-to-end journey like becoming a childminder or setting up a company.</dd>
<dt><a href="https://medium.com/twitter-design-research/all-in-sync-how-our-designers-keep-up-with-the-latest-design-system-assets-98687925d7e">All in Sync: How our designers keep up with the latest design system assets</a></dt>
<dd>Design systems empower designers to focus on the many unique problems that they’re solving while providing a consistent experience.</dd>
</dl>Weeknotes – series 01 episode 062018-06-10T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-01-episode-06/<p>Inflatable bowels, Twitter charts and busy, busy days.</p>
<h2>Monday</h2>
<h3>Sharing charts on Twitter at time of release</h3>
<p>It's difficult to remember back to Monday now, but one meeting in particular stood out. A few of us got together to try and improve the 'sharing charts on Twitter at time of release' workflow.</p>
<p>Because of the unique (it's probably not unique) way ONS handles and publishes sensitive data, creating an image of chart in time for 9:30am publishing is really tricky and it's causing headaches for a few of us.</p>
<h2>Tuesday</h2>
<h3>Show and tell with the publishing team</h3>
<p>On Tuesday I was asked to run a show and tell for the publishing team.</p>
<p>The publishing team are the people who use the ONS website's content management system to upload content so it can be published.</p>
<p>It reminded me that we have made some progress in breaking down the silos in the department. But there is still more that can be done, and I've made a note to remind myself to spend more time observing the work that they do.</p>
<h2>Wednesday</h2>
<h3>Wednesday was intense</h3>
<p>In the morning I finished off my <a href="https://dp-prototype-kit.netlify.com/sprint/25/geography-2/">find data by location</a> prototype, then presented it at our usual end-of-sprint show and tell.</p>
<p><a href="https://twitter.com/SuepremeDesign">Sue</a> (graphic designer from Home Office Digital) visited. She spent some time chatting with the various design teams (thanks everyone who spent time showing her around). She has plans to start a cross-gov graphic design meet-up.</p>
<p>At lunch time, we walked around a giant inflatable bowel. Which was a completely normal thing to do.</p>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">When you get invitied into an inflatable bowel you can’t say no 🤷♀️ <a href="https://twitter.com/mathew_weeks?ref_src=twsrc%5Etfw">@mathew_weeks</a> <a href="https://twitter.com/RachelPricetag?ref_src=twsrc%5Etfw">@RachelPricetag</a> <a href="https://twitter.com/NationJoseph?ref_src=twsrc%5Etfw">@NationJoseph</a> <a href="https://twitter.com/benjystanton?ref_src=twsrc%5Etfw">@benjystanton</a> <a href="https://t.co/cF4l3cgayx">pic.twitter.com/cF4l3cgayx</a></p>— Grace Elizabeth (@designergrace) <a href="https://twitter.com/designergrace/status/1004324407693709313?ref_src=twsrc%5Etfw">June 6, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>Whilst all this was going on we had our usual end-of-sprint ceremonies like retrospective and sprint planning. These are usually exhausting just by themselves. Especially for an introvert like me.</p>
<p>Last of all, <a href="https://twitter.com/SamHallWales">Sam</a> has rebooted the digital services monthly meeting. The team rarely get together, despite all sharing digital job roles, so it was good to be in the same room sharing news and updates.</p>
<h2>Thursday</h2>
<h3>Thursday was also intense</h3>
<p>Looking back — I had too much on on Thursday. My day went a bit like this...</p>
<ul>
<li>3 stand-ups</li>
<li>Usability testing with the publishing team part 1</li>
<li>Follow-up chat about social media workflows</li>
<li>Meeting to discuss UX (user experience) designer progression pathways</li>
<li>Design community of practice</li>
<li>Usability testing with the publishing team part 2</li>
<li>Meeting to finish off sprint planning because we didn't finish everything on Wednesday</li>
</ul>
<p>My head was spinning by the end of the day. Part of me feels proud that I can play an active role in 9 different meetings/discussions and still do some good work. Another part of me was just glad I had booked off Friday.</p>
<h2>Friday</h2>
<p>Day off with the kids — whoop!</p>
What's the best way to mark-up an SVG map?2018-06-03T00:00:00Zhttps://www.benjystanton.co.uk/blog/best-way-mark-up-svg-map/<p>I'm looking for a good solution for marking up semantic, accessible and responsive SVGs (Scalable Vector Graphics). The SVG is a complex diagram, like a chart or a map, that needs to have a title, a subtitle and a source link.</p>
<h2>Example</h2>
<figure>
<figcaption>
<span>Swansea</span>
<span>Unitary Authority W06000011</span>
</figcaption>
<div>
<svg viewBox="0 0 600 470">
<g role="img" aria-labelledby="title">
<title id="title">A boundary map of Swansea that includes the Gower peninsula</title>
<path d="M163.1488338431509,456.4294587358745L163.0650400775612,458.15304390691745L162.00080930544664,456.5128807684814L162.5150365944146,455.7366921260982ZM86.58271202757078,420.2466498926515L86.68973919154632,421.105057888446L86.04518051707964,421.01259502163157ZM436.8070305248939,399.63112186164653L436.9087782709312,400.73558362309996L435.486866325301,400.7034514552215L434.6116456784939,399.3158006668091L435.6583898942008,399.2925349901634ZM432.4965108942979,399.9896525077347L430.8328151584228,400.189283259635L430.69129905838145,397.92321908414306L431.6547817899509,397.8567946970288L432.9678939989062,399.38547958046547ZM25.3904313657913,402.14310400444083L29.909243382639033,403.8086907737743L32.92845852145001,404.3208555952442L36.94705505484126,407.9314222837711L33.28936139520738,408.049299836086L30.89480271768207,407.3089380889578L29.603905971500353,406.49653436364315L28.60163242854287,403.58149776524806L25.36376939420279,402.4648694465577L23.635108763497556,402.75354956593947L22.605908566612925,403.8012127893744L19.715191283016793,403.5910963144561L16.278468138153585,404.39151595605654L15.497029330919759,404.0065624185954L15,403.5016200138052L15.24204605704108,402.9982234105846L18.62958375807375,402.8629932865733L19.060918635089365,403.25244839672814L19.620204441974238,402.6061909161508L22.441786601610147,402.53792387658905L23.935840624557386,401.668635409369ZM41.93000423420199,322.41832043239265L40.28860897839604,323.18680378860154L39.470904621431146,322.52323574887123L39.295734446846836,323.0316371382942L39.45327005901345,321.6459170836606L35.23112608323936,321.324260084104L36.75304080150363,320.7562265917368L35.95652081028493,319.91541094420245L40.051350696970985,318.858702854719L40.40666870910445,319.64629127939406L42.190868403479726,319.9462470217404L42.56051447503614,321.0293735880841ZM148.57282922376817,290.4079703664611L147.6721973744443,291.41957571264356L146.67467344273427,290.39681982308684L147.37060835728062,289.8288453022542ZM158.147307224619,286.1767579234147L157.75681439447726,286.471255963188L156.40719144817922,284.4562639432115ZM119.41181299709115,285.34700933446584L118.01392826640495,286.1673693393386L118.16602956989118,285.3265014851786ZM155.27844886416915,284.477082344878L154.3255036820774,286.81603744426684L152.4119141564206,284.57766210794216L152.66518436385286,282.7427767854242ZM120.61429821011279,282.8030732853658L121.12435065966838,283.85649756062776L120.68226107361625,283.6523288377066ZM153.3651869665764,282.30591457229457L153.37337575773108,282.85416420406546L152.57062757276344,282.50168799143285L151.71307895909285,282.88950773228134L151.24441871880754,279.8802495889686L153.14101164734893,281.441181561182ZM123.69869804713471,280.4973209669988L121.62134957845774,281.43783233886643L123.0904225137765,280.1980232874339L124.8054146187078,279.86430395103525ZM121.76733408983728,279.51858726395585L121.12870194969582,280.475432970954L120.77334493754915,279.941220614186ZM123.84011538970299,278.0431320177595L121.89224644423484,279.98081640008604L122.54448379333007,278.42623172464664ZM122.18667683874537,278.52473510250275L121.056703286431,279.4395035480411L121.84486420703979,277.9396110264788L122.28879208555554,277.96801680228964ZM123.19843182768818,277.0364690447459L122.72106492092644,277.9446225589054L122.45742199646975,277.55563645032817ZM140.8187728526509,277.7061722980434L140.31284817164305,277.9016676881147L137.583213388697,275.55876130537945L137.35430091688886,274.76481682946905L140.01820693467198,276.15905991281033ZM123.97223949123145,275.7237709515175L124.52269103700382,277.6435591252666L123.10375716705857,277.672046295309L123.96648400826416,274.9869429193641L125.10583188456349,274.32091560045956ZM128.79367325674684,272.08576494995214L128.74701388690664,272.86629424252897L129.1157197853836,272.2441537084087L130.16602369807424,272.28765150181425L128.81281793586913,273.8671625869756L130.3685180542534,272.48841441012337L130.73790891017597,273.15353380452143L128.9437064991107,274.36121985528735L130.58474012404713,273.96424158687296L130.26432326156646,275.0139626352757L129.0538546724074,275.33042212076543L128.2430750669855,276.3144169271982L129.00678481315208,275.76767419307726L128.9614236717798,276.97551816049963L129.39855814039674,275.5167156620155L130.07031311999344,275.31101432608557L129.0278911935502,277.3386076551833L126.87865380769745,277.63342512266536L126.52937357457631,276.9677396031475L126.06407674454931,278.21707289687765L123.9550395221031,278.72778181984904L124.68613619031203,277.33566371050256L125.43765867702496,277.0500769739592L124.67243822983164,277.10724805459904L124.37268981217221,275.48261798382737L126.52898290863959,273.0555531403079ZM127.93868656382165,271.0737636139529L128.33046488216132,271.5917988251749L128.96725763525137,271.2845058292878L127.98286060408464,272.4101778340555L125.40049577760601,272.5955089127092L126.29943287187416,272.35418322308396L127.14673540178501,271.13678457107744ZM320.946579601341,238.099059793778L319.559665465571,238.9868986448855L317.8998062958199,238.5947724541038L318.7732697677311,235.64253547904082L318.0142994052194,233.74335229610733L316.5860142298043,232.6981907338777L318.3862825041833,231.40285713794583L318.33848715469594,232.44292011087236L320.01066803052163,233.8599517854891L321.3491720196489,236.7796433536423ZM414.8049833852492,17.835853462689556L416.7214194329845,19.10320107577718L417.371018786479,18.911617737539927L417.7419931411241,19.554602179239737L419.84745463299896,20.099587984368554L420.36689916902924,21.313999153513578L422.4633737574359,22.833023010840407L423.7087666207153,27.171484003949445L425.88747641320424,29.621407899307087L427.40801825454673,30.02044731749629L429.81787410925244,29.759174371123663L430.4958329413712,30.18286003053072L430.82504453255297,29.846553251321893L432.46262898947043,30.654235192225315L440.13073783351956,30.341798890105565L442.80126071514496,31.511526386195328L446.6327520831446,29.975451375707053L448.54751984443556,30.079058498013183L451.4822914504575,28.990908383915666L453.2610781064577,29.295716156309936L453.9594675622393,28.851694421537104L454.34312065705217,29.288552344791242L454.9765262726323,28.994782230933197L458.13830962750853,29.659077544580214L459.3965625628143,28.87608606228605L459.34437967224403,27.677698349987622L462.08010061493223,21.829601825971622L467.7062323083501,19.19822369379108L470.95962822523325,19.05562638300762L471.8425477528817,20.039581783799804L476.01748899405175,17.195976646398776L476.11570810981993,17.15454413439147L479.02197972367594,17.694883638017927L483.5312345667344,19.78420283969899L485.12781422189437,21.920539698228822L486.3940866411722,26.406197942444123L487.42499231118927,27.841923809522996L495.0727842599981,33.53207756341726L494.2631996037562,35.06700088609068L493.18174551515494,34.96564895194024L493.61919518388277,36.177392534023966L492.5137603357807,36.82753126877651L492.40221784860023,38.28153631654277L500.0734434400274,41.31857892862172L499.4600190400606,44.17424931754067L498.12766210785776,45.08836444777262L498.07855126059894,47.06525961268926L503.2493326540516,47.376161342370324L502.6296541896363,50.12380033925001L503.94002829580313,49.78566740266979L505.5139907133289,50.51863671813044L505.64018842760925,50.969126772426534L504.6429294564932,50.92616915349208L504.51498043498395,51.631325200069114L506.6745996828158,54.10840723270667L507.82583976738624,52.89731031397241L508.71448809459434,53.55046016597771L509.1950226473291,55.07128166758048L514.0849248604181,58.185358537506545L520.3169115962464,67.83777112604002L523.0236672296014,70.42869773552229L529.0040628098714,74.26347485068254L531.8582332651331,77.69558054830122L533.0040742753245,85.8532803664857L534.3458332017472,90.0088628847152L534.0227301128762,92.67469767124567L535.5987058246164,93.85294234818139L535.9186296153503,95.30316330773348L534.1708231627299,99.78454276220873L535.543470726213,99.60396371448587L536.350123239974,98.14654686317954L537.0213164122515,100.37329164707626L536.3285245709294,102.52908620348899L536.3636495423607,105.45836292763124L537.6866487275938,108.38116603626986L534.4379538205676,108.18546813417925L535.8968662041862,108.48651947941107L537.7292174700542,109.83832596165303L540.6284992201299,113.38443288092094L543.2405349884366,121.79425770285889L541.8482589610958,122.8331396926078L540.240065846815,125.41145950864302L541.3123329874325,128.66878037749848L548.4361220586025,134.3468651244766L549.2200409616707,138.24166245080414L550.2544449809329,139.25147754253703L546.3556278014357,143.54637880150403L550.5941688265575,147.13947354278935L551.9298687063811,145.4115816429112L557.1098831411773,145.86667300603585L558.5278311891761,144.65577813613345L559.8073523140265,141.5070988121879L560.3363483535813,141.48849340499146L560.5377499994411,142.33436145431187L562.1229839950975,143.53070280491374L561.9804337970718,144.92965797087527L563.8057923326351,144.86442854060442L563.6381798146804,145.4113280621823L564.7173194730858,146.80260809566244L564.033128628932,147.19418940422474L565.5508964050559,147.9237994931609L565.9133561274948,148.95928348849702L568.2274141648659,150.4049514267681L567.84411291593,149.54019725364924L568.5427439983469,148.8567740556755L569.9691233194935,150.29312673490494L569.1961154075734,153.54298422002466L568.2950751711733,153.5339546589239L569.4167975695245,155.5508700310893L569.2236801743866,156.28536599333165L573.1846661804102,154.2905752986553L573.6316925055289,154.555528609897L573.740381810996,154.06918102355849L575.5207823531764,154.4265925399377L575.4956581219758,151.3740475766972L578.1560356986029,150.43865166415344L579.8074347130514,153.2730203211686L580.278177305383,153.0133837137255L582.4443188186387,154.53894469530496L584.6036939252081,154.53141730820062L585,156.12038227327866L584.1850745742595,156.32635754060175L584.2598548588649,157.62688983025146L583.0410323792139,159.67623318625556L582.9446899110853,162.1873716498958L581.7972201890152,166.32894148887135L580.0816983564528,169.92880732975027L580.9528378517334,173.62126733690093L579.7632511306665,175.01930459815776L578.3975765220521,179.82109142419358L579.2510925533434,187.54080005839933L575.3279377324207,197.08545798476553L572.7655267435075,200.304917109097L570.0238802240583,202.54208256516722L567.1917474162119,203.59102187601093L566.4063699956587,203.08903114333225L564.7816766109145,204.1274384585995L563.9502197638913,206.04144643164182L561.754632357949,206.7526333775313L559.6167114218806,208.73710309651506L560.424749347645,211.64632005007297L558.8656660042261,215.44782157543523L560.0800514117409,216.77381604917173L559.7476718275038,217.57030442195537L559.2338072872262,217.30733437469462L557.8587798441313,218.04634877435456L556.685997322893,222.36804968047363L555.1217079711678,223.84596464170318L554.5403733280591,229.0949864636932L552.0929591315489,228.66456909080443L552.1067223517239,229.00596336336457L548.6290935471006,229.5903246053931L547.2616356054741,230.48240768679534L546.881993608753,238.47139008475642L548.3140331516652,241.02508165077597L548.3675396425615,242.26256598612235L547.6715717145789,243.60348176665138L548.2794434245816,245.7725982508855L546.1344119343848,250.9663388892659L539.9741529460907,261.3744037876022L533.5853582726731,274.4478034442727L533.7865362407365,278.99893103372597L530.7137808218758,293.89002927727415L531.6764712451777,297.2580204167898L529.287613015068,297.85489487092127L530.8663545138052,298.3084886265715L534.3581100526544,300.79667643929133L534.4988506358131,305.3496485459036L531.9548592165347,303.95556645565375L526.0860304134012,302.9018580955453L515.2964435109425,313.4107349568221L496.6928187635813,320.56503146365867L490.9269624825265,320.65986494757817L489.6150878756298,321.92885799468786L487.1940552848828,326.23893995347316L489.67625716130806,321.57577336351096L491.9414827695373,318.860568681499L489.8683808472606,315.99240699392976L488.28793309654156,317.001183166969L487.6338294103225,316.68548387622286L487.74548533256893,311.810306063373L488.29072203780197,309.5791652704793L485.6345577305574,308.7916353762557L485.48129367324964,307.6216993349226L484.49032559424813,306.87591338519996L483.57303383087856,307.58980742727L484.10649374800596,308.54447658998834L483.7108620150111,308.1092415193416L483.37429147553667,308.45117983849195L484.67415318899475,310.73442911902384L485.5151772048812,314.3247865265148L485.7022039100166,319.39036429738917L485.1776601060219,322.84833193183294L485.54833356167455,319.2161736851558L485.1459722818963,312.9806847037253L472.0091378416919,312.3303908836533L468.0936380730509,313.5867896505515L455.7031503510225,314.4428733277309L447.36904036851774,316.36706956027774L434.85366835381046,321.4725452871353L429.0933155373368,324.50257120488095L425.2984173981022,327.19863401977636L418.4433093704074,333.00145255195093L411.58483032802906,339.9411190461542L409.43013684837115,340.5649630507396L408.7686059918933,341.64396691044385L410.4721222154576,340.4019578365551L410.8702862026057,340.4902685812849L410.75170539615283,341.371153516724L407.5993203022026,347.59896641390515L405.40647926556267,354.1346779440937L402.88380588651216,362.21030278086255L401.63192331159826,369.7192467285204L401.7152642932542,375.1052547819854L402.90675638289486,377.85733889653056L404.485312693987,383.1279003884265L406.9293656535665,386.0303079516452L411.5110665822667,388.7196574740374L417.4829291334627,391.26373080663325L418.42000618269685,391.27180484871496L418.5951986789787,390.80998510925565L419.198551925273,391.80006188528205L429.337883845481,396.14528311909817L429.0303209020567,397.6658058224566L429.86074751558954,398.3825734737329L428.85179986220555,399.1239978753438L427.4138716115867,398.74800089634664L425.29070101682373,399.7431648375059L424.67959516492647,404.0423563220975L423.1402995030694,404.5630018108932L421.53484415121784,404.06231838304666L420.8966190129868,401.40833673808083L419.8993174760826,401.33803225614247L418.96965896077654,402.8367956357106L416.8627218529873,404.17609711487603L415.97351964526024,403.82736387470504L414.40646402784114,405.42247913073516L414.1572076498169,404.7589421670127L413.4807540753809,405.5804659491987L409.9566818924359,407.05435306881554L409.734323091252,406.5799484078598L408.6290767860328,406.60513386093953L408.23952829088284,405.2213643993018L407.75282405882444,405.62445091831614L406.87215644116895,405.2823055954359L406.83474124998065,404.339139852731L406.29565963276673,405.15696527242835L405.233822045373,405.1154848703154L403.8399405427417,403.8969961259281L402.0332789167551,403.76508985269174L401.7800477932833,403.02104023199354L400.6492321353262,404.07524043053854L399.74828099824117,402.1947559306427L398.92757636725855,401.90311580192065L399.0121036617047,402.35946329837316L398.5219851904194,402.3914085817087L398.3166791002004,401.13360303828085L397.52455484946313,401.6426072277827L396.57436429123663,400.23221733358514L395.4068753152924,399.63931227959984L395.01408923121926,398.574812015373L392.4682183309915,398.3189483078895L391.84260107854516,397.8102851024887L388.16102161721756,398.1235112907598L385.40081441446,399.8261369230313L386.3628163219146,401.65947493845306L386.1248150427664,405.4999946618191L385.10554185094406,405.42231028604147L384.91220438905566,404.7287509719026L384.3032815612987,405.3756002834416L384.54138025553584,404.8935646209284L383.94966386918804,404.88640023946937L383.7049283645565,404.1522584287595L383.5220422555449,404.6310938910465L381.8992218234307,404.29964741189906L377.2064765187897,406.15503765738686L376.31229007397815,405.5094982688606L375.67909677084936,405.881551718252L375.12872140133913,405.5507341444609L374.06786110931534,407.0619662754034L371.6576875337296,404.25267826630443L371.96998498270295,402.4563849622209L371.23297479140274,401.9224312121223L370.7942470180624,400.3586631613289L370.06156326084147,400.345433580369L369.59831780211334,399.41070919948106L368.12456805970396,398.9611066059442L366.31337908150454,397.3414279659628L366.5021757063205,394.84102336903743L365.76055028049086,394.083721318515L364.5234888981995,394.6189181161608L362.71655752188326,393.9434340367734L360.8276564766775,394.2397930262814L359.927051661145,394.9404096708022L360.4374361619739,396.24010608428216L359.514935880401,397.3580153412913L354.8815706793548,398.15293993371597L354.84744634406707,399.2745775725343L352.77198476920967,397.8625339369901L352.8700218318854,399.75671308580786L352.51980253208694,399.9379013962316L352.23298746909677,399.32763683745L352.1586117979123,400.6872892639949L350.029694969463,402.58503178886895L348.6975235027312,402.5266396202205L346.92563606920976,401.1247556001472L346.0146334756555,401.32675944973016L343.2532551185277,403.19370799159515L342.7848975568504,402.9246259120846L341.6079028592494,404.63783254464215L339.3361721465335,404.2381032944977L338.5909839303122,403.29977093994967L336.25959747559136,404.000580457272L334.4280342188049,405.25351870759914L334.1019246714868,406.41019846768177L334.0784797111319,409.9304648584366L335.3426720665884,411.0925897619745L334.32285796714586,411.59175700705964L333.56026832936004,414.32802024579723L332.8114173633294,415.46460431735613L332.3444412543795,415.3030911971291L331.9091540132813,416.5668789027259L327.78432638025606,418.06099480588455L324.6268860371383,416.9594384360971L323.37609652561696,414.7304582711513L322.13599436531786,414.66316366929095L321.6529761237098,413.7562928272964L321.2109768129758,414.0057028195879L318.5949666160186,410.4312021963269L316.26143903841694,408.8528493720223L313.95671794372356,408.9453180843266L312.702214151278,410.14695125367143L311.89427337418783,410.1363712837192L311.3595879991708,409.6576974868949L310.85546088922365,409.90222453078604L310.3583131872201,408.73872994966223L309.3109296570419,409.20707990143273L309.1128963833853,409.96368022140814L308.28916307744566,409.10183490169584L307.46933704365347,410.2071418962587L306.64978649773275,409.49303394831077L305.7798334774525,410.24867164570605L305.27633895043436,409.27691089398286L303.73987710906295,409.63330539477465L301.198344719357,408.41073931114806L300.0664611543534,406.08774696916225L300.2475339460643,405.4441403762321L299.3455954206529,404.312401234376L298.9253339999286,404.6184553311905L298.3067748374442,404.0229486811295L297.9150325919518,404.623886020956L295.8739170625413,404.8554621487565L295.04621868907634,403.9198819512094L294.0891132135084,404.02799749439873L292.6797011521703,402.3816422105738L292.0073083269426,403.42246870623785L291.59907224286053,402.62438544185716L290.50502413654795,402.57350696550566L289.71269691929956,403.34562113798165L288.5157585419447,402.5685583789891L287.9281946676192,403.29279521806166L287.864065178429,402.39913896203507L285.75139950367156,403.17570165442885L285.4372638737523,402.73952107146033L283.94057370858627,403.08171513228444L281.64342345858404,400.5235939301783L281.5950363013144,398.37099381687585L281.05414197864593,398.61847202696663L279.50546360101544,397.61977514301543L279.43046899609817,395.88457528116123L278.0539631893771,395.28080407637754L277.3843686223181,394.0836357344233L276.7522155392953,394.1304769535491L276.60808996373544,394.77147192345L274.7955462451482,394.50801109299937L274.4132340617016,395.02483889157884L272.98553713694855,394.2747599341383L274.2402998460766,393.96622493871837L275.83122547924995,391.41987682961917L275.05680510825187,389.960206125048L275.2830019994117,388.2110974568641L273.57462770348957,387.49595589023374L273.1083900027861,386.08948924684955L274.5371417334045,386.05652735976037L276.0624402398762,384.07817541128315L277.1685886917585,383.55044170732435L279.55769096566564,383.9216906383226L279.6240277829238,385.41371707124927L280.6318338930914,385.02163447499333L281.15297053594077,383.9663741977274L280.7993231718274,381.86586332996376L281.9865888012737,379.7241845503304L280.6573046041485,381.8817271870503L280.9402825278603,384.20610130818386L280.35162577679694,385.0112396720069L279.70299392473953,385.07030216751446L279.9086412753113,384.00230096123414L279.46345604929866,383.4421106178779L276.54584296048324,383.2861249251582L274.40757687287805,385.28222602960886L269.90259801836055,386.2832154466305L269.22972543372543,387.0118747274246L270.21273185354767,387.3312166644755L271.213110393257,386.39310308915447L272.71570556153165,387.17802287741506L272.9003226592022,388.00112250792154L268.9228048954128,389.73463098183856L268.86649842927727,390.6873529499135L267.6713899779561,391.5538036342332L266.5067047718485,393.8207594075793L264.44810285466065,393.1059375244804L263.20115322639776,394.95858189351566L262.3593918729739,395.17461146222195L262.27624120572364,395.83401389642677L260.7759071243545,395.9936031417601L260.107955496499,397.40764683934685L258.8174575213916,396.99996253757854L258.80249208489204,394.5169716611854L256.64298710260937,394.080852851228L255.22304407519005,395.22116537723923L253.88055524849824,395.39139640316716L252.92076912453194,394.77418720017886L245.00148025311137,396.3651078582334L238.99527049739754,396.83024356846L235.6925003171309,396.15604393498506L235.77816802483267,397.53804744385707L234.8890103286567,398.65129472414264L224.3234656250752,405.68995388725307L220.54484018447693,409.3952285712585L216.87834065671632,415.58681404415984L215.3601144536924,421.66067331214435L218.28932369255017,423.5022647432488L226.05708810413944,431.17713487330184L227.3840830777781,430.89949112400063L227.99702293594328,431.40712390960834L231.3084790313569,435.16744041976926L231.29788112047663,436.5785153982433L232.64501412739537,440.76765425236954L230.96865425477336,443.8096072584158L227.7970458567488,445.2632961840136L225.1301828766118,448.33105689488L224.15948049162216,447.78541038894036L223.51995715926478,448.30806730153563L222.15660792451672,448.2509453333041L222.07311003124232,447.8604698619456L221.29857251300928,448.063039738292L219.65358345722052,447.37113039441465L218.804534587518,444.643902851225L218.42282975600028,445.10525181562116L218.09996611263796,444.8343632645556L218.10270179685358,443.73265007021837L217.73884443806674,444.45881082811684L214.38302915823078,441.7587540308741L211.2616465856945,441.90003622797667L208.86503806438668,441.23059490048036L205.00615642230605,439.31828547375335L202.56593286320822,439.0466435127746L200.51199991056274,437.6803171683423L197.1215990253695,437.84861892495246L194.49050086214265,436.5114031005796L193.06590337456328,437.16194668927346L190.21307828326917,434.40054401222733L188.90912353956628,434.4899654802284L187.79607410124936,435.645211328374L185.68781430255513,435.55724062619265L185.27750428439867,436.51509438001085L184.16450426259235,436.93979411391774L183.166156783911,436.60362530844577L181.77354676964296,436.97628731832083L180.92663110482954,436.3265738162154L180.6353914068286,436.7266409488948L179.53977144416058,435.0985467718274L177.54022969822017,435.3417322401219L176.15310042128385,434.83426762593444L167.4530569489416,436.7525216003269L163.28073065308035,439.2701560816786L160.37162454974077,442.2887444403168L159.29260198041175,445.00165438922704L159.55979257505896,448.25473102304386L160.292824197988,449.2367191883677L159.74184328283172,449.73870105296373L163.9419015984722,452.45112576948304L165.04248368558638,453.5731171222724L164.9997901857805,454.21415987632645L163.7201368924234,454.4325108867197L163.62938421309082,455.09011326011387L162.78922826540293,455.44294958154205L162.95412293480695,453.13083308290516L162.0974018029092,452.822597949591L162.14303033177566,452.05719525771565L160.0998706886303,451.89402920498105L159.32590192909902,452.44305100943893L159.51250431739027,454.52290290704696L158.9171090746213,455.43926712917164L154.71903923890477,454.9570286429662L153.7197591841432,451.53669250395615L153.32125278914828,452.0391123846639L152.18556651966992,450.3708961580851L152.1792435813777,448.16625407649553L151.32410764400993,447.58098228863673L150.11309730871017,447.4683332356508L149.1309711364047,448.7761098399351L146.63599844369492,449.23824668480665L144.2111989296227,448.1466966748849L142.31328057936753,449.68395904568024L138.66951694306772,448.1091811938386L137.4232626115827,448.9314550898998L136.8354856178621,448.1635237913142L134.4869045433952,448.09594242062303L133.38750601358606,447.57877474102133L132.4500442928038,446.10954111053434L132.1901458778293,446.9252362901607L131.67916986795353,446.53617126062454L130.18382406416913,447.3174953021953L129.72470715866802,447.0914248241461L129.79454748893204,446.360473539331L128.19192830953762,446.80926461135095L128.12358228126686,446.1060564065847L127.6476968341758,446.4287995916384L126.7242799871292,445.50579592776194L126.90035896539575,444.606995149079L126.53900311766665,444.9505873027083L126.19367730987778,444.1181573225185L125.09983373829346,444.33477495631087L123.7700210740968,443.2420459814748L123.09226146415767,444.24864172750677L123.00190150453909,442.60732904815814L122.26448164000885,442.64845983160194L120.38828151879261,441.3827826033521L120.0648500162215,439.6259870460053L118.12400901716865,439.042479151758L117.56671316261509,437.7463006574835L116.8283471233226,437.42978256056085L115.94765928965171,438.0447221291106L114.41621412118275,438.0314525629219L113.38959653745769,436.61875305838475L113.77750961351649,435.9400316208921L112.51611127047727,436.53988459924585L111.45141999178031,435.5801477146888L111.48426254927017,434.46729022389627L110.69627559253422,435.1550236459443L110.26114611677713,434.02301615686156L109.89729842459383,434.6120109458134L108.64026836065386,433.6095195043745L109.08881322641264,432.124364246396L107.26824583522102,433.49907735524175L106.70167113840216,433.1605256326002L106.61807951140781,430.66052858368494L105.48893924260301,431.7485547972756L104.97021000633958,431.3866928979696L104.28560008005115,431.7857834978786L104.44538129868488,430.82682797985035L103.85186924818936,431.2466202506912L104.15206810916516,430.1690981659631L103.47023686274406,431.0938319034758L102.58504893721329,431.23545009327063L102.05486268218738,429.5235443972779L101.56955404473047,429.97528003377374L100.50767428611653,429.22211355899344L101.66135864293301,425.18033457326237L100.13709581845433,425.84234049778024L98.54784741758976,424.6687807756389L97.8959804679289,426.18394596269354L97.08495358569962,426.5584859770461L96.40699277891599,426.03362505100085L96.68251220122784,424.4847723193816L95.38056813317144,424.96695855229336L95.08364663785596,424.3580384644156L94.33374322266809,424.5963361975155L93.78814482511825,423.4223489101714L93.1987368696,423.7581373633293L93.32019030690208,423.1345336711238L91.68884704275752,423.3129074700846L91.33147570333676,421.1302302461554L89.88912105651343,422.11074363061925L87.09142116527073,421.5780056275544L86.6958936669771,419.4116093869088L87.27454637763367,417.5390250437922L86.16136217822168,418.16669963618915L86.1552543945063,417.1589683817292L85.60637228657652,417.82954516637255L83.99168700709197,417.6295881857659L82.84557944133485,418.22137594179367L81.46105218681168,416.638467954559L81.51886719608137,414.66948866751045L80.38273480856606,415.20558129035635L79.74850669184343,414.8541285678657L79.61398659688803,414.0301234488725L77.78341958101373,415.56566694323556L77.1695373656321,412.58280453190673L78.5520656446397,410.1086308341619L75.63933296021514,410.9557205320016L75.30664626449106,410.3882072818524L74.69760157438759,410.90119073206733L74.40698163745856,409.8552380493056L72.83108718094809,410.58331041129713L72.73640477960726,410.1259517074941L72.13773139106434,411.0250319941406L72.48969592617777,410.1135194297385L70.66077826379296,410.3035528042237L70.3153816681197,409.0073173233686L68.46204572267834,409.91889997459657L68.28540932575379,409.30619025375927L67.09110893987781,409.64271663648833L66.0030481405156,408.98134188078984L65.62767180142782,407.26434745681763L65.3541460836077,407.627434409791L64.02693097878273,407.1432697327691L59.766281065550174,409.8947975530609L59.34661434524514,413.34863574965857L57.47738174260576,413.63933451322373L55.530175468316884,412.88591683405684L55.302749950389625,412.2059763373254L55.10294911325218,412.62051098103984L52.69116219299758,409.98674871183175L48.89520819096742,408.9558075126115L46.573559574175306,408.8763302732841L44.38518164519246,407.28231628217327L44.93341151944969,406.70549240204855L44.74620350121586,405.97553385094216L45.43585775207703,405.57904086502094L45.84835686357383,406.2262708051858L47.270426756665074,405.99311445200874L47.59969377909056,404.1547254945908L48.25801294759549,404.03982303701923L48.4227719014616,403.1508533853921L48.89121029378293,403.4989609819604L49.78078328430547,402.2107230190013L52.23663923139338,400.9015810785204L52.428601488589266,400.0234899867355L53.84579190610384,398.6698633601045L54.47099757533397,398.83328827869263L55.46168517944625,397.5586547549028L56.089961066686556,397.60605844669044L56.60946864120251,396.26898111923947L58.54942478641351,395.81635233991256L59.998462274395024,396.4378076892899L60.3417115078264,395.83889971935423L62.63232894308385,395.55848095411784L64.87167081874577,394.4950242638588L66.07199597327326,389.4094595377246L66.65656896187465,382.3682999956218L66.13971743220372,372.96107228870096L64.76284130578006,366.0793523769389L58.25087257540508,344.9377076923993L54.35028132846401,336.38977860640443L46.76468534797914,322.3257067290979L45.813668278920886,321.1028972058266L43.24491223937912,321.77456883047125L43.276278538932274,320.16242921831144L44.5269327621063,319.39458171524166L44.13578142325514,319.0655649704422L44.935446674945524,318.890551793389L44.61768100444715,317.69642475382716L47.276366438759396,316.62668112743995L48.25706607185748,315.2736958227906L47.952598888866305,314.8208066286752L49.547702166078125,314.17327908502193L50.156291501769374,313.5216366182285L49.94945329091843,313.0791002547048L50.52521137137046,312.9835308020265L51.40921525255362,313.99502414502786L53.51721107170033,314.07981602191285L55.58462922370836,312.28386091177526L55.32242620766101,310.5042036126688L56.73892970167071,309.9347417420795L59.54685209112904,309.7066345514322L60.53179951265065,308.96244217749336L62.3065982660346,310.5650206391583L64.82235962398136,311.66999624502205L66.056485613326,311.5975663056306L67.06530992235548,310.32793911632325L67.71951720801462,311.7219283861923L69.99151724764397,312.3839375808311L73.6585351446156,311.570944481733L77.60095400073897,308.39300887292484L79.21662112581544,306.184412685383L86.03046706657733,291.6072521956521L86.02982780875664,294.344409174897L86.54657069599398,294.55876649566926L88.61750121587193,290.72747528112086L92.49694330910188,286.1163170901127L94.67171553342632,284.92141863924917L97.04341132457648,286.1869537629391L98.5884508664949,285.9539031482127L101.90383274748001,284.19548562608543L106.17610090480593,280.42718136293115L109.5473533717859,273.9255321474484L112.85577797819133,264.92476366816845L115.38210855513807,253.50012989017705L116.8580990251894,249.4083512430807L117.66866998928526,249.1796949015552L126.16667492860051,250.9312047084677L134.4511622302034,248.4418083281489L134.56592647601155,248.84730685318937L134.20488179662243,250.99261071511137L131.8465235710737,252.37940429027367L127.15049790086232,252.47133638936793L122.17040866047955,251.07092420343542L120.78491854690128,251.4384181615169L121.11464856521798,252.77644415781833L123.24049021070186,254.8788368460955L125.40037486713481,255.95690054605075L130.59183299541655,256.428639272126L132.08118877678044,257.8168996259192L132.32416008352993,259.1238672211621L131.84894814633935,261.37508273732965L130.79868118923332,262.10738510239753L128.0861853377719,260.7904208273685L130.05831197318275,262.98333094929694L129.8654861776331,266.6747227743617L129.06091288463267,267.81007077109825L126.07479602648073,267.5853964635753L124.86813662428904,265.99855006126745L124.66760155207703,264.81998428127554L123.74515562891611,264.3502168458508L125.86383651497272,267.6575079943723L125.2661494893191,268.0915284413495L123.65456642915251,267.69849595217966L125.16633499600448,268.34028500894783L126.72775405611173,268.30072316958103L124.94241382039672,268.53732344845776L123.85462133324108,269.6292371429299L125.05870954632519,268.7727052785922L124.4491561129089,269.80615856788063L125.5992933037378,268.83181700909336L127.0766999469497,268.45996793145605L128.39134659502088,268.69389742508065L128.35054164988924,269.501202627318L126.94996210966383,270.13485942431726L124.27117204803835,270.13303881377215L123.7116235514095,270.98993840983894L124.82098599712936,270.1649365647754L126.49003394704232,270.24322129259235L125.48777273160249,270.7838902480289L127.88204332450914,270.31826486253703L125.7588635028751,271.08686799435236L126.44386197070617,271.2038074285956L126.01367337850934,272.23002759183873L122.68240679091832,272.7329297718825L121.01893817240034,274.0410960828158L122.88334350945297,272.93708723044256L124.73999847152663,272.62085756796296L123.17172840259536,273.1469684495969L121.71584816104678,275.04103079052584L123.3143362834644,273.3646988822147L126.12994355222418,273.013965150094L123.57649444369326,275.07633775196155L123.26694951376248,276.69783567480044L121.91311852263698,277.5925750929018L121.41283957631094,278.46441813601996L120.85984234755233,278.2172711784806L120.52901337131607,280.0732526623906L120.98240931503005,280.3015844931506L119.77232729644857,280.7914498322061L120.96455496270846,280.75979001418455L120.1550286216052,282.21823644563847L119.32872200393558,281.8684794968285L120.02942685637572,282.4458795606479L119.6751704128119,285.0697038360231L116.5082356631774,285.2228141780506L115.00429391270882,286.1407128224819L117.85901976166679,285.32923238826334L117.7579664297973,286.9592745863192L118.25121933466926,286.13482067117L119.83629341450523,285.6182726947882L120.1044576328186,284.29263987235026L120.498476961292,284.61027480717166L120.86489036919102,287.31447208976897L120.150440301878,287.93036091576505L118.55185393852389,288.1141893060121L117.99119779899138,288.7102112494322L117.89104928416418,289.49392658440047L118.15980710616532,289.88605106569594L117.49748273677687,290.06628734833794L117.51155532947723,289.4854334516858L116.9877082692401,289.4208260557789L116.31561810954554,290.70500842462934L117.10339184544318,290.12890561216045L117.03240026257936,289.61965185785084L117.37359325090165,289.6377352407435L117.39168292097565,290.2276910335786L118.40196507766996,290.45059539387876L118.03762474009909,289.4036082274688L118.45903650498985,288.5898047827941L120.16795792395624,288.2831275594508L120.72220163869315,289.7785342715215L119.38206661845652,290.6744406923681L120.39555798234869,292.20781289902516L120.07543497056122,293.2607062265015L120.8042440219997,292.84124390290526L121.14419725802964,294.13456565033994L122.60113483043096,294.3151650542568L120.98070521808677,295.371025406479L120.79878655254925,295.7315822232049L121.11178294975798,295.4856026129564L121.5893933858506,296.3448246329208L122.69105760471302,296.1023335267382L123.7562141275248,297.5734981131827L122.68587169959574,298.40041776158614L123.26385083546302,299.6880247881054L122.3138050719881,300.3329203110334L121.39490718697562,299.5285148148105L121.86796944621528,297.93605507240864L120.70257436493193,297.90463061389164L119.76314441319846,299.1699725209328L120.63814830308183,300.29364562086994L119.45557670805647,300.41248133093177L119.4604724226756,301.4485394247604L118.78436155883901,301.61402750376146L118.67618955216767,302.0261195861385L117.06423012338746,303.18767423684767L117.19189195586114,304.5058703102841L117.42515272260698,303.03020628581L118.21857764329525,302.97043316074996L118.91334416839345,301.77154021768365L119.54628462523488,301.62083999258175L119.63103089407014,300.55342678660236L120.82358480845596,300.37709277162503L119.96197171139374,299.19749429669173L120.85322594923946,298.0026086662401L121.6819239651195,297.9972925040056L121.20028656091836,299.4739453665534L122.21991730360696,300.5544900991372L123.37803966771935,299.96543725029915L122.88872099228047,298.4496916413773L123.96424464256415,297.90186405420536L122.73438384453584,295.8183821751445L121.42803774571803,295.89726423211687L121.47723701195082,295.312005444066L122.890804585767,294.62420707584533L122.60575108630928,294.02735153914546L121.43073212151012,293.6833038958721L121.79091064795011,292.78732653093175L120.84838173199569,292.3099540577241L120.15810387445072,290.9197206219105L121.4088426648159,289.7893654993095L120.8713241390351,288.6753450355609L121.21553190138911,287.69568365351006L124.48075588787196,288.7291942177544L124.66837510288042,289.3223583029903L123.14937783320511,289.9679867429513L122.65338362144121,290.86816512314545L124.18742035307332,292.41585040865175L125.1953672002137,292.6187136799708L122.84193385202889,290.6688945802598L124.80951233026008,289.4929882255965L125.40809963554602,289.7521855609957L125.84545194563088,290.5008610104269L125.41395928484326,290.98686055172584L126.97804557395466,293.2452891533612L126.27352180226444,293.9112475779839L127.47273729530752,293.89460830771714L125.79414394811283,289.75546571101586L126.32463176675174,288.8845180251956L125.43457055737053,289.4653677884053L124.31041274674772,288.1523193996836L122.80493955666225,287.92437927077117L121.77018053030224,287.1217327788909L121.43274435945477,285.6919457874028L122.21812099121144,285.144533477549L121.49538214118638,285.1617250316922L121.29212462297892,283.5107342191186L120.76190249839692,282.58148474902555L121.08443151500524,282.0987676909863L121.37218373728047,282.83695016929414L121.93746424131587,282.60924020309176L121.99578772206314,283.5277776905423L123.39654921952479,284.49923048669007L123.38592190542204,285.57802008658473L124.99521378304689,286.346217401835L123.53660443537774,285.29241533925233L123.86481939814621,284.50165618730534L124.48881464679653,284.38320627014036L122.67797053439699,283.77514854320907L122.10594400720493,283.2888381168159L122.1046981703721,282.4257475401246L121.54006331425899,282.6197866492439L121.31105030920298,282.15572864972637L123.17669265607947,280.8784884541674L123.30932997880245,281.9226322098111L123.48563237698454,280.82860610804346L124.67683074757224,280.32423175516305L125.2444886556159,281.1615221521497L124.7324497736472,282.58217278533266L125.63064786907671,282.8691999095463L125.28858126750492,282.16464071982773L125.64868738027963,281.098625227678L126.59440309575712,284.14857698243577L126.14616427163583,286.0096951525629L127.487585844151,287.56849303186755L127.81889860929914,290.06508828779624L127.75019191435058,289.1889962688292L128.18456546038942,289.23622812073154L127.63957837536327,287.21556515547854L128.18591010224281,287.02718612458557L128.65839099545792,287.5527426606277L128.61517939018177,287.12673343399365L128.22672699854866,286.77020366275974L127.19376190403818,286.84902461808815L126.30624257356612,285.53705552882457L126.91661597634811,284.4785424974398L127.7442488856741,284.3791002346552L128.01804298051775,284.8821677493688L128.06919187550284,284.3590299242642L126.85844389773592,284.16738727000484L125.95542734010269,280.7022141990019L127.84964471312014,281.73096303058264L128.28108196210906,282.5051409616135L128.31989779077958,281.68792437115917L128.75928796178596,281.73332724013017L128.6297783371001,282.38339218101464L129.31747665777584,281.8221980858216L129.1652160150743,283.8711209518078L129.66558121524122,285.3649503230263L129.71217588499258,282.1078960379964L129.10169331229736,281.46034409508866L127.24689692484026,281.1723588743189L126.17352824380396,280.20588912884705L131.13735501693463,280.3059283696639L131.69043364548452,281.38262944301823L130.7321192478048,282.48041748844844L131.26219355981266,283.0782808186341L130.35846219538416,284.86419406803907L130.65617237454717,285.3816757260938L132.01112009087046,281.1675293770095L131.1900635931761,279.83319395380386L132.633202881304,279.2236123629409L133.1728694240137,279.7505486366281L134.4302382117794,279.4327277137345L132.90661267298947,283.0177845592407L133.64016991261815,284.1259487761854L132.7068439667628,284.39177282585297L132.2385146126826,285.70835412628367L130.96398555938413,286.61556641921925L131.35061079297066,287.5727904779051L132.7660193317015,284.7365497394785L133.51705822363147,284.4914534042473L134.15549659841963,284.79156900969974L134.28527953057073,287.2338733790675L133.31218674275533,288.2310657424823L132.31654051759233,288.3776581834245L132.64938894932857,288.7274915762973L132.0628390003949,290.1283835331269L130.82754072864827,291.38427736061567L130.96901670919488,292.83178880596824L130.0045459929479,293.77822186272533L130.91894107973167,293.61054974368017L130.59401060626078,294.4549292001029L130.74707914389182,295.40240195856313L131.185161463226,295.57233675953466L130.78181967327964,294.8360943039879L131.32349197999702,293.17588859345415L132.29104212071525,293.43054184905486L131.176468917457,292.5915864091512L131.09997636500157,291.34900665594614L132.2879726094834,290.24766126177565L133.0404113466493,290.7108075790893L132.50049438652604,289.73307295802806L133.5957581398452,288.39566670387285L134.06607198571237,288.74129498809634L133.78387435705645,289.6130014691589L134.44436237940045,290.0873918605357L134.05444815956344,290.6730173583346L134.17852361233327,294.13984746445203L134.19066533692148,292.44539524114225L134.84978415822388,292.1594065573008L134.89132386303663,292.9723769513512L136.19050883543332,294.97154962718196L135.14480423402165,292.920877089593L135.81064277534915,292.46982456863043L136.69082829734452,293.76855047250865L136.2566010586088,292.622727331589L134.5587269912503,291.63838336498884L134.31603624872605,290.7222067525727L134.63538683578463,289.91330593192833L134.09601309992013,289.4486629525927L134.28602357408272,288.8556915082154L134.0099479788396,288.165950755807L134.60920274661748,287.2357315006375L134.43029430056868,286.04499830212444L135.08202753670957,285.68014143721666L134.5503093492398,285.46760700839513L133.91193075458068,283.51697559055174L134.34731474644377,283.43129430933914L133.72485312454137,282.44421840638097L134.5184475965807,280.951062761349L135.12350475471794,280.9258069555799L135.412700519415,282.04593594367907L137.30520899979092,284.346895220835L136.0874090867219,285.74190379351785L135.73146062953583,287.2787679350149L136.72913966702072,285.5994489121513L136.37174451605006,286.3725326759304L137.05692215216277,287.768173106786L136.65255949243692,288.8724220954464L137.2104664666058,288.347271460676L137.50832221604287,290.3603833361267L137.82886239092932,288.9828097700811L136.59607949449492,286.3000534927851L137.57923328890138,284.25270734868536L135.80964812269758,281.79991464652994L136.75796463187544,281.3637223519909L138.36056816375367,282.4100319588324L139.9726262925351,287.52256744263286L139.5848064000602,288.4546952153614L138.48466925332195,288.97285169416864L138.4508203239484,290.2323037794704L137.85552123587786,290.46584815208917L138.0849438127134,292.05032971693436L138.4789738364325,292.42689932217763L138.14808305077077,290.70589094178285L138.86571120253575,291.2946440270607L138.84481425414833,289.0072662914463L139.99786625713932,288.35290598297433L139.88577584553695,289.412871773151L140.46270192392603,290.12034763807605L140.33043043371163,292.3383525454119L138.71510389424748,293.5703800955089L138.76507949543247,294.33092991280137L139.0876659338992,294.95192337849585L138.92909795663763,293.7101985583722L139.3456703452557,293.22810478991596L140.7728215193456,293.091973874878L141.20670556465848,294.3942759527272L140.91023734205828,295.9577438457054L141.41584359353055,295.0372472940071L141.61602425241654,296.9320767811005L142.552659425839,298.93391182065534L143.62765079746805,298.8069044774893L143.87969289554894,299.5376949430938L145.04522829199777,299.6855037936475L144.03098891103855,299.32617125374964L143.86073537459288,298.63662049765117L142.73827996761702,298.6372268196719L141.9872194741938,296.0056049081177L142.60987811728955,296.1766915160988L142.0749980601986,295.30478884356853L141.84594101195762,295.60785975957697L140.91911602185337,292.71571484910965L141.4206407492684,292.87535868583655L141.70556589631178,294.135111406169L142.48427075953896,294.13993722302257L143.88642680826615,295.2814702682372L143.66404300721297,294.58843072052696L142.03777977005575,293.69261975894915L141.54023514125583,292.6143127339892L140.83161613051288,292.2658437304781L140.75501405301384,289.800180080696L141.96601663526053,290.7221444114548L141.74743025269618,291.81224690734234L142.58859967075205,292.6024943191587L141.94091660250433,291.7188579989743L142.13943129536074,290.57553223845025L140.63449686519107,289.0922153405554L145.6897624432977,289.7353893368563L144.44707350008412,290.42267767278827L144.1747068277782,291.51105307896796L144.6511607528828,290.5678649943584L146.617850571055,289.5741919285938L144.92026440727022,291.52868926701194L144.22068607724214,293.6344158710708L144.74881767554507,293.78653682117874L144.7263928618213,292.7155938948272L145.45325121410133,291.8404919667082L145.52283782252653,292.69635449544876L145.93312087365302,292.8907708097395L145.48207896281838,293.5032718114235L145.27518461329691,294.5443365017127L145.32647726504547,296.29064063428086L145.6357603449651,296.032238776912L145.68719792213597,293.50883632352634L146.3670084914138,292.92296771843394L145.67682878381947,292.32982688819175L145.52054292808225,291.1823289265012L146.487777280493,290.43111589243927L147.98208845877343,292.78627748902363L148.13519186696885,294.0181039469753L148.6344558262481,294.1038362397376L148.14903951252472,294.41974779817974L148.39104549922104,295.0970621291199L147.52407108472926,295.22440548808663L148.48346081122054,295.2675209206791L148.47426786588494,294.5763883213658L148.92928080119145,294.64159979336546L148.34950474067045,297.38113108369L148.6858577778903,298.4592782571999L149.15220464330923,294.91070507511904L149.2820520253572,295.8185369249841L150.01755270317972,295.6161477740825L150.70354871618383,298.1573086479766L150.9795476723757,296.1336062595801L151.43413971487098,296.07435662324133L151.15629817117315,295.4317769728077L153.434257883363,294.74511740390153L153.85279687407547,295.3245546045073L152.82647305680348,296.11949278617976L153.1641264042837,295.91072318231454L153.52973058053794,296.5708250376483L153.50163028376028,295.8079408204212L154.2737156992007,295.20578165179177L153.8939904476747,294.7446034018358L155.04947945149252,292.94814023895015L155.52872054417367,293.70407711366715L155.03839287069331,295.0244178537978L155.93833238812203,295.9879352389253L155.5913665779699,296.9438886264252L156.0386666206541,298.3652341310226L154.54792544171414,298.8933004699211L154.25645529277335,299.5195172605163L155.08919946487094,300.9257404124364L156.0450124804811,301.2415541992523L156.0354984177493,302.0374929476093L154.49290856797325,303.01287242349645L155.67068262749945,302.51283618788875L155.47500799811405,303.58859863456746L156.06600609539692,303.0475191554433L156.3442929968678,301.4847889467201L157.20641796431755,302.14324786794896L158.16855578334253,301.390737075606L158.67828164236744,303.49306255306874L160.03315291893796,302.856514274099L160.38853514936818,301.789369853519L160.81592193828055,302.4980477545614L162.13053010493059,303.1411549430486L162.870747555462,302.70662046446523L162.84553305181817,303.9302710425691L163.5670345868657,304.1556927915808L162.7360709408722,304.9747921459202L162.87597669588013,306.2775123920874L163.6725784468381,307.43754443769285L162.96959988465915,305.1527479369106L163.80770461057364,304.06934941522195L163.10673375552233,303.74574246762495L163.14800560740605,302.49805355267017L162.2253859362745,302.892694257127L162.6323057147929,302.31013318747864L161.11729254106922,302.42163034979603L160.57640766943132,301.34295597556047L159.01273268161094,303.067439839695L158.29875523627652,301.146240999311L159.13417079396822,300.53046741720755L157.13197491841856,301.455833158092L154.82877421251578,300.24733126114006L154.86702924435576,299.1258414676995L156.40759933769914,298.63664208183764L156.26782114361595,295.5085829773161L157.34564284904445,297.8074412572896L156.50713975880626,295.26580123176973L157.04534957224223,295.4193720114563L156.92122542274865,294.42050830200606L157.6991943009616,295.0681237930694L157.1878502849704,293.47033537081734L156.4077835400558,294.97610375867225L155.67729019466606,295.178286548442L155.94075922496359,293.6242727599456L155.4067097566467,292.66475568679743L154.56946776494533,292.44457054098893L153.79660407819574,294.24288009556767L152.06468937679347,293.9557102437684L150.43756745200608,294.8026085138554L148.79361043165045,292.60006068716757L149.76440237006955,291.63345100219885L149.22128313137455,291.5406329039397L149.85562800915432,290.490044540682L149.51012371598154,289.60890846049006L150.86580419137954,288.99395795399323L151.3065440284572,289.69555977713026L152.00379789665476,289.50274944357807L152.6203989968135,290.08292259256996L153.720873817344,290.3506120176462L154.3102244423435,290.02987738694355L154.42366329204924,289.17515013503726L155.09323835412943,289.56530826610106L155.45173717585658,290.8784365702013L156.3214553655589,291.06231940827274L156.60353043467057,292.123719359457L158.795969947887,292.5467448165873L158.47645852179994,292.02314176906657L156.78281092798989,291.9483622692933L156.52415450217995,290.9956010530441L155.27160038758575,290.19246041434235L155.40643465651738,289.5457008918165L154.43920838381473,288.96774472067773L153.9632472986159,290.09762147811125L153.2166116583703,290.1016454445926L152.23123278160165,289.2552528641245L151.32558483125922,289.43757734842075L151.2146960506616,288.4904028552555L149.51782430619733,289.253692519429L147.24436757505464,286.9372847264749L146.08241501745306,287.2452495717589L144.4767915471648,286.5909550622164L142.63418337810708,287.3066904977313L141.5191175621403,286.45072950764734L141.63038857637366,284.5343789191393L142.75588035211058,284.57236413618375L143.40816654777427,285.32975633438036L143.8155025114429,285.20460246408766L143.2374049522232,284.9008918558684L143.4116782092051,284.2293139058311L145.1346571877557,284.38033373243525L143.72418420990107,283.854679068565L141.1895442859577,284.16423681526794L140.5083883543948,282.29222992100404L141.38910462952208,283.4969239108177L143.2518173698445,283.2751729781303L144.47868853835553,283.77782137462054L145.67344071066418,282.8900421449798L147.62585952125664,282.748094231647L147.93631636406644,281.8620447159774L147.34991859603088,279.1255704112409L148.06627435173687,280.5019589874137L148.89496135606078,280.71227725940116L148.80300432116746,281.49914161639754L149.76776251965748,281.2157049516536L150.58752303602614,281.96303640019323L150.1950857793836,282.80277721668244L150.75245828429524,282.3113466387149L151.23920604083742,282.81306785554625L151.72445550772045,284.2082355705352L151.13626389899582,285.0118428645219L151.91544567612618,284.5860308061965L153.58946875389393,287.7805596577964L154.3086933892364,288.2028570687253L153.7986230804272,287.48314562634914L155.29093259059846,286.5562146311422L155.07507140348207,285.354776803244L155.70083752176924,285.0716239783651L157.08235739338852,289.365272635594L159.77180964055697,291.5212159510411L159.08183945725887,290.3426269906631L157.39621655638803,289.3120049367426L156.78967779766572,287.61942020311835L158.29859748579838,286.2966681872931L158.5650993187637,287.7876211704861L158.8770229488964,286.9470461204619L158.51823218359823,286.1234435769002L156.7099998750018,284.09206805340364L154.52942295392222,283.2362909848307L153.7502317675826,280.776567437395L151.91117647630745,278.5105392226251L150.474392114882,278.28167295717867L149.52353935789233,277.25225660305296L148.83922010704373,274.8837446115649L149.94513646374799,274.27123451262014L149.29113550307648,269.57952506735455L146.56390719835053,267.2057363166823L146.59793224858004,264.95137982936285L146.09893413481313,264.2160332482599L142.62763367391653,262.0012251332082L153.01107913474152,260.8316117577342L157.45029842610347,261.3110151600995L165.94084669035965,265.1145328061102L169.84318360373072,268.0693995938491L173.77390172001287,271.97927281270677L181.72188482543697,282.72906726272777L182.71064883249983,284.53662058195914L182.95972969566355,286.58171970832336L183.8158746539375,286.76125497941393L182.23966813062543,288.65252800328017L181.69374359161247,288.63360758987255L180.7301032665,287.32844002431375L179.08492434565687,287.1373471151892L173.4611736347988,287.84513976762537L172.56984702445789,288.2270124213683L172.9407401499875,288.5640786517906L172.57191463364688,289.0227193749597L176.96604845304955,288.27451063800254L178.38419760383294,288.72979826436494L177.73230080417488,289.8227776823769L180.54286289015909,288.92225264366425L181.65210402417324,289.3734233497962L184.53114942336924,287.33703100944695L185.94095125390595,288.1880640654126L186.2100299204776,289.2197017689614L184.29311780767148,291.8949775059009L181.17217055124183,292.6263546610717L179.42846408883906,291.8309141404461L178.3182371042385,292.80305656435667L178.1861566785292,294.44389850771404L177.4983231932938,294.2795563630789L175.53763270835134,295.20161814226594L175.1288969876996,296.06347132058L172.67591165401245,296.4015455752815L172.76614976316614,296.7806898151757L174.9423103311483,296.499747312977L175.72249731212742,295.37941367179155L177.9995797599986,294.7083001897845L178.77037867545732,294.1739731337584L179.832225389614,296.29531130987743L181.3599007936,297.3882353387453L182.12863450072655,296.8924245373928L182.53510718656344,297.8609393668303L180.71432924001056,298.9720897596271L180.50818816952142,299.9892742894299L179.56782304176613,300.41118430123606L177.16224627964402,299.7518488333153L177.43427783442166,298.75117295938253L176.9583989273733,299.9480722202861L179.14355762693867,300.64262880755996L179.20298909805024,301.3389297962276L179.38522762823322,300.7009612930269L180.67341926840345,300.18448247609194L180.96777018044304,299.08726811624365L182.7287853957787,298.0536194034212L182.5714394865663,297.05575051244523L183.38584666298084,297.47034011845244L184.66813828166687,296.7538961556129L185.67397541455284,296.9491200001212L185.39851177937908,300.8163150477776L183.63432397907127,304.49422956207127L184.27770604713714,306.43113631491724L183.88033676661144,304.5860830939055L185.17924927716467,302.85658523593156L184.59248185864817,302.5344147223077L185.73805589087897,300.61267735665024L186.17162691622434,297.54482957530126L185.75256528253067,296.6591010860866L184.80977428788447,296.4401137403911L183.52824907465947,297.12625518397545L182.26335850668602,296.4038940188475L181.29183072802425,296.9074852876802L180.0335394499316,295.789630338244L179.33952403662988,293.0078435277246L181.41921885798092,293.2565189864108L184.1434419517891,292.66997178560996L186.82566665250306,290.6749759883678L189.80721849604834,290.10442818532465L191.80606957869804,289.1024311543879L192.8959321420507,287.66501138206513L193.9030424177763,284.85550122313725L194.3995072257385,285.523724304614L194.3082118450593,289.33542304413277L194.96500951332746,290.26126539598044L196.37996333387946,290.5571157765371L198.7131474760963,292.3346097252361L205.57885020339654,292.71532359390403L208.0407380475799,290.74271001608577L208.16125000004467,289.59849206185027L207.21045887759374,287.2394794387801L207.41397770137064,285.4416403580399L208.09208392025175,284.5398592790152L210.13143622994085,285.8605016853835L209.89882970667531,287.30083790513163L211.04684005857325,290.99821191781666L210.23920784669463,292.90976950668846L209.25549285950638,293.23509764471964L209.08167934292305,294.6197316933394L209.9500958796125,295.95653375000984L209.52936281069015,296.76473484122835L207.8675974408652,296.91172520956025L206.99160701500205,295.54658649364137L205.71182427494387,296.46785689578974L203.30966884871395,295.4678333211923L202.96393323519897,297.33195345505374L204.113237732402,298.12366360276064L203.0459033348452,298.34219422638125L204.2681314448946,298.5379139715951L203.8322610029536,299.2860125823354L202.69879124969066,299.7066930811998L202.6273418745086,300.2958958593226L204.1565867771078,301.56743518682197L207.0813745474161,301.69565896870336L205.786638795822,303.6383394570439L204.65261548974195,303.5291335671791L203.950932146171,302.4970445912477L202.70597911951882,303.06064555338526L202.52610146398274,304.51932707960077L203.74987629621955,306.18508936323633L202.25230569406904,306.26168436520675L202.15188854014832,307.344537212819L201.2906860047824,307.3819929841702L201.22655486323674,307.99110994038347L202.64297521606386,307.3854029780341L202.37426169815444,306.5271733716363L203.81825701040543,306.51104805657815L204.04071774292606,305.92243598111963L202.8292130345526,304.3875002461573L202.95704152934468,303.2667877826025L203.82432096219782,302.81032434347435L204.59989022379705,303.7880630419386L206.05900164965988,303.8842251402675L207.35595678476056,301.56301106564933L206.78607724803896,301.0719666875666L206.02345645963487,301.60771694417053L204.928807475133,301.525928405521L203.01658120113734,300.40877203355194L204.60255409078673,298.49935417635425L203.23235165402548,297.33068164339056L203.34559925181838,296.6796532686567L204.30353542533703,295.939525397087L205.59752963400388,296.9708798102365L206.95517073861993,295.7327174886159L206.82602026119184,296.75431043471326L208.04566088773936,297.37240071715496L210.37530867905753,297.002014360216L210.13316329446934,294.03332259978924L211.18540594979368,293.2450258376339L211.89201036743543,290.12856757067493L211.21025279953574,288.3520536696742L211.90760406629397,286.28384968519094L211.51181224549418,285.099395084093L213.17223055712293,284.6715288557607L213.71413910700812,281.4284283418383L214.68978197363322,281.9614325057046L213.7739753668111,281.0110686394328L214.78871061686277,278.2064183726907L218.33052426062113,273.9621393135749L224.8832798683934,271.1297598086967L227.78264343557657,272.24389203260944L226.69539929326038,274.93966339723556L227.58263247160266,276.1199142682599L226.80798021594,276.9437108589191L226.42918230951636,278.2168426785647L226.88583464362728,278.90835524955764L228.0551132638593,278.4363667660655L228.57661730544623,279.8511537221639L229.1646606294271,279.93139091345074L228.77668982889827,279.74934471306915L228.27693705561705,278.332230342814L226.75749775054646,278.5386143628566L226.91363225565146,277.28384183604794L227.82271782317548,276.29454986749624L227.73489527514994,275.13276258112455L228.40873706702496,275.2188797833951L228.27890675822346,276.2272411727463L228.63210081660054,275.2240666352154L227.52696251227826,274.9672714543558L227.252331246822,274.30231931341405L229.03470590296092,273.33097551212995L229.64676407805473,273.4845517678332L229.9642890037194,274.46795757500513L230.39563255047142,273.9538043802895L230.22306099898015,272.762511197594L236.31738578276872,274.20678238011897L241.09520025205438,271.72574921062915L242.25432238579288,271.8196077392349L243.13505469010488,274.04855676997977L245.660005550194,276.5506310121418L246.65927549644402,276.86291973516927L247.00693199497164,277.7933055401809L247.94281400167165,277.37048899436195L247.87637457944948,276.933276580603L247.05373117971794,277.5563725683023L246.7682254559495,276.57031982288754L245.55320162421776,276.1684428537119L243.76834838338345,273.83815614003106L243.24471241985157,271.9403071019915L245.20762803677644,271.62697239055706L244.78965305361817,271.2219138017681L243.4186549553233,271.6895296307339L243.01432423748793,271.349705573346L239.8880488296354,266.14078378057457L240.20509584973206,265.33044606805197L241.48446735061043,264.5961794345494L242.27511774132472,262.98939718799375L244.17359362583375,263.4520218598336L245.83789952812094,262.274015316405L246.9949414950679,262.2922815273341L246.05374005212252,261.7897473449848L246.1532630595275,261.3459098223102L246.88809727068747,261.79390894404787L245.57061146077194,259.9577463376627L244.73677779621903,260.25987598398933L244.74298274402008,259.7245204966166L243.1315542204611,259.6674439898052L242.4752759127732,260.1865348970605L242.74980188933205,259.35552039374306L245.47291616506845,259.5432408837805L246.51722773053552,260.64524917873496L246.69708866493602,260.30844290202367L250.62593401465165,262.13045437805704L252.0906601220895,261.8200405089883L255.6437116875677,259.43588352754887L257.83592763964134,259.0302755724697L258.40651341933426,259.3148828899284L258.4687203278363,260.3598549813905L257.5690106703905,261.6903519732732L256.6182077479816,261.95369775025756L257.2240554095115,261.8922653156478L257.10620875229597,262.2272332281427L258.6102498820401,260.78319016846945L258.8541390100363,258.9484116237727L262.4097378517963,260.2349307646218L266.59066900189464,257.3768289713189L270.7105991119988,256.75733939658676L273.44577375728204,257.0718409602123L272.0662276573403,255.74355672681122L275.9902706319526,255.25453852860664L278.76956906251235,256.80999706890725L280.83476046198757,257.05996652181784L286.17543640660006,253.34790282447648L288.54497379478926,253.08606252772734L289.7550142574264,252.19621543957328L291.8557167293602,253.33242158372013L293.4815162848863,252.7740183602L294.3757647227512,251.58194224894396L295.64404895655116,252.31635781702062L298.37693053617295,250.19631284248317L298.38137788702807,248.88166062068194L298.97242957286744,248.2974843542761L300.4813107737573,248.87361745728413L301.1288357760268,248.3854604598455L301.360881205901,246.80841537786182L301.9981232366881,246.72451342952263L301.32962933506224,246.47772315554903L300.9896094468868,248.38945044034335L300.43515494504936,248.72682383270876L298.9151047078785,248.17120878618152L298.22048751517286,248.83241609451943L298.1114260583108,250.2460083901533L295.7721255309252,251.98111274381517L294.99088778357054,251.1367617493379L294.3323082100669,251.17756523005664L292.3061198323903,252.64624102402013L289.80868636402374,251.84290580792003L287.9899051525299,252.69643433371675L286.0524586060965,252.80613635425107L280.84700218601483,256.37631786687416L279.6419522484057,255.9752494161221L277.9554889751553,254.30397176092083L275.5243669232568,253.70785354844702L268.0707639895454,254.74704016849864L266.98749166924244,254.32240980188362L267.2758691443514,252.39365673238353L266.66897288668224,252.4213920334587L269.075703797178,249.32187695721223L270.6023629223173,245.1571329536091L273.37846193075075,244.49085440320778L274.1846499290268,244.7351236013492L275.81664294733855,243.92365905414044L276.5038535603917,243.47621620478458L275.33663491289917,243.46288389035908L275.6010685013889,242.26852244017937L276.6977143221975,241.5213734657591L278.0914162738045,241.99444306288206L277.73052382803326,241.06392456861795L283.42604446964833,238.04269806918455L287.7831783018082,237.5197498232883L287.7281073468448,238.93703861215909L286.83686246505295,240.23532346052525L287.1574110223346,240.69909371198446L289.4641411753273,236.06401646474842L293.7260925898772,234.7326990575384L293.79750072857223,233.6481984750426L296.11703288341596,233.26169496250805L297.8506977959505,233.29104428620485L298.98914727657393,234.35093176284863L299.63145538013396,233.97057105366548L298.9077436206371,232.91055587078154L300.9117440096916,231.46759349753847L308.13424084417875,230.42418199509848L309.21536363914765,231.53806808128138L310.6132855827791,231.92406778804434L314.2393377204153,230.94689823617227L317.86974476213345,235.75410009389452L317.04787471818236,238.51128967708792L318.073156810794,239.73618691164302L319.5421148554742,239.96877564165334L321.82864914020774,238.65474564950273L322.3057253125098,236.58412508732L320.6832125735482,233.7734918717033L318.79765509109257,232.23288937026518L319.1364045322898,231.5650139276404L325.1502735534905,230.7055991885136L325.7739199510015,231.26534146697668L326.19839059295373,233.51419044278737L328.7645361087061,233.71079363698664L330.6859324645857,235.10075173410587L332.38168083058554,234.62012425910507L334.6278481096324,236.63560448784847L337.40270701879035,235.95793821311963L339.38421257765367,234.71017333390773L340.18939796452287,233.5409040448576L340.2247612067813,233.4895518975536L340.25052699135176,233.48932197377144L340.51823251475525,233.35670264401415L340.91179812821247,233.32035557225754L343.39696463100336,234.40348539309343L345.96981342053186,233.94220172036148L343.5357086563745,234.26153798036103L340.6928255173143,233.11609831151145L340.3492825227595,233.19985587031988L339.63814291089056,234.00607479199243L337.06605726786074,235.74860187560262L334.7348346129211,236.26055366189394L332.68023705237556,234.42986924796423L330.8295763354681,234.716234205378L329.28406528843334,233.37790520240378L326.8625461690972,233.1300476979377L326.1229343142986,232.50626073674357L326.14150115981647,230.9030652163492L325.39768574134723,230.3096903768601L325.08949040431435,229.62314601238177L324.7329892251846,230.14000055029464L318.7657773353576,230.98802181929932L317.2613245143457,232.17560654578847L316.5496403963798,232.06624399080465L314.9851966907854,230.1882668289909L313.3774088067612,229.3300514271832L313.4751647053463,228.86934374272823L313.16031763217416,229.19482615262677L312.5989263675783,228.76133529026993L310.8769211882445,225.2429872034554L310.3049790696714,224.43939622423204L309.48668685031953,224.4812854118063L308.5211367918746,223.65527019686124L308.70814459495796,222.43601491316804L307.9584607969673,222.11565504188184L308.11617467756423,221.57910646361415L309.40371209270506,221.9750225503958L310.188430267488,220.21841167644016L312.4920327756645,218.8410438872961L316.1360338703107,215.0396036295424L319.7062040648916,212.83150705923617L321.71839889138664,209.7483624323213L323.0800553136287,209.0782040649501L322.8908809974246,205.89080156118143L321.5054709836222,202.69349062204128L321.80019479880684,202.008123106556L324.2158648677887,202.01696515233198L326.27541329861015,200.7156647926604L327.1599915354609,201.4669346662995L329.86791966848614,202.19011419496383L326.29238816013003,200.54340621489973L324.0765097263211,201.84072734955407L321.2783204008665,201.1354524627386L320.8806443010526,199.3094086573692L321.56079364429934,198.59116120359977L320.3129025365133,198.1820317650563L316.569065846018,194.52109618434042L316.9650598998742,193.85297204980452L315.69911205019343,194.29156595352106L315.1670390274776,193.53703985926404L312.7613932034428,184.59790623837034L313.072743465912,184.79452049150132L313.2186418355104,182.77241904918628L314.07093034729314,181.07207142518018L317.64007883842896,179.3128183609224L319.14447962137,180.81972793057503L318.9330468923845,180.05761867143156L322.17960598130594,180.5514836452203L321.0475332668175,182.64208309078822L319.9245758429415,182.79698660984286L318.4592171911372,181.30246294359677L320.1370268726596,183.18004801232019L321.97030056988115,182.89378175362071L321.9616264125052,185.26063232903834L320.21505410818645,186.35292712926457L321.88283198766203,185.44478619664733L321.7741995205115,188.732368883444L322.9266918454532,182.49265593056043L323.5347938947725,184.0351636158157L323.05815103895657,185.41980794176925L323.56207462068596,186.4868634313607L323.64197979268465,184.08265146709164L323.0924210569792,181.40147210794385L324.51673682426645,181.74339076103934L323.88430975359825,181.42108880569867L324.96983508289213,181.0702150687721L323.24382319580127,181.28936465035076L322.9175978926978,179.91230294194247L324.76191793547423,176.26680842651695L325.24448829660105,176.755108484198L325.6078647567174,176.47357959706278L324.87952819951533,175.9097089618881L326.2351420216437,173.04109630794846L327.6953230700192,167.1453744344617L329.54637433566586,164.37704017297074L330.2596614870363,164.04682531682192L331.6474335576013,164.57361498801038L332.5236599475584,163.64406862363103L332.9004953549056,164.494340713587L332.880400007336,163.78055131617293L333.1869484638564,163.80557305570983L334.68062521159027,162.78106967573694L333.932194857015,162.6994623347273L333.1602726434576,163.62516307580518L332.4479073332477,163.2216378892772L331.584416378033,164.3647991974285L330.3826433670001,163.81926139004645L332.4989363623281,154.76869320608967L333.9487549619889,152.95672238779662L334.9493705831792,152.62006146683416L341.4992614114599,152.56990647822386L342.68772461429035,151.2591356630146L343.68597706024957,148.91738741357403L343.7195910408773,147.83796640585933L341.534435842289,143.9984050984931L343.0621771959741,139.6764976522827L343.2190130071176,138.19575295630784L340.00399818915866,134.98650837881723L340.4059658016704,134.09539213696553L347.27750722097244,135.8163759559684L347.9109096101829,138.74789216341742L349.55658610539376,139.83076828227786L351.82855581687,139.20573981323105L352.5547145209639,136.85792806242534L350.8414985540303,134.02068680492812L345.96445009524086,130.52741727451212L344.7060228696,128.39362917315157L345.3895281031564,128.0676165810146L346.26275428606914,128.6329610998655L348.99930498926096,127.35757386601472L348.4489392284295,124.87168759336055L349.15354501816637,122.11276528205781L348.3802801328584,118.1512661644083L348.82638948648673,115.40613828343339L348.3094847942757,114.41932492892374L349.9454487085486,113.09380554828385L348.0902193074189,111.8714898515027L346.7109318616385,109.33261954122281L346.8458666113511,108.86688766985026L348.41741831075797,108.42142656771466L348.48805419000837,107.64054882073833L346.57411607821996,107.38925013026164L346.2322430283575,105.2695252103731L343.8713906620251,102.5153568181122L345.65289941300944,101.45692261718796L346.8940263828008,101.69849104073364L347.20982301185086,101.14501155652397L346.79705496404677,99.25643223157385L345.35506799040195,101.21071765164379L344.8156746225459,100.80608445619873L345.56040450442197,99.11589721142082L345.11758624322283,95.49645860944293L347.7658280603018,91.92979342602484L349.28039426893974,90.87881895463215L351.19380179070686,83.1556228025438L353.0822018158069,82.8951540444541L355.8346356817701,84.66451652775868L359.0168128295127,83.87211629058584L359.6453025918172,82.220392735122L360.05298534202757,82.24270737143524L361.14187193211274,83.89526125002885L362.18825937394377,84.20326531471801L361.6194969586477,81.4146802357136L362.7336964144997,79.98713746744033L365.2884263169117,78.70147619805357L366.26037165882553,79.35567082719353L367.87555901502856,78.58034151540778L367.55184051320066,77.46279248603969L365.7391095377843,77.3042710521404L365.8166962225241,75.91915085242363L367.16503732221827,75.6487629985495L365.93174790899593,74.12649776424223L365.9273754545902,73.12141368640005L366.5561017429591,71.83384039367957L367.58155757673285,71.2621222375601L369.83516916805456,71.7238019646611L370.6833317356495,72.46250996792514L371.4563862908726,72.25206776354753L370.3806732166877,70.8905780211935L369.32103454085427,67.01714629668277L371.6036937591034,66.70219807613466L371.7044129753349,66.14783176232595L370.76603578488357,66.04072757331596L370.7191766401893,65.01817841366574L371.6993481917334,64.02266137122933L371.8990527600572,61.21194286024547L373.2457008410902,58.866820881463354L377.1481701681623,60.71670006259228L377.55018143965935,60.40864223988319L376.61954005803636,59.42745810512861L379.0196903501146,58.606729032471776L377.4977206775184,57.415895344820456L378.1706475518722,56.681944583018776L379.57621992692657,57.55720875971019L380.4221276814551,57.0546421877807L379.2666448578775,53.17299903027015L381.58576201404685,53.85933042378747L383.73856327296653,53.580321527129854L386.4918695967881,50.60576363456494L386.96624398902713,49.01186101070198L388.7801349844949,47.785771979994024L388.4892179096896,46.14213889806706L390.1755009023882,43.94439151145343L392.6075004628892,41.99597815448942L392.40083226735624,40.66034553089412L391.1239811205469,39.575290697364835L391.4729194131751,38.49423450118047L394.54794290370955,36.298514240348595L398.05103470121867,35.530363321784534L400.5232648075644,33.56063323766284L398.5056844635583,30.74929731762677L397.35081012359933,24.478343525828677L396.35403610866615,22.07402650034055L396.9861807956722,19.71417439247307L400.00120948948006,17.44894891785225L402.60185712004204,11.907396389942733L406.76676070020767,11.84695609312621L408.9121527273628,12.61172498833912L409.7263561117843,13.948052457912127L412.9443786723559,15.653947232087376Z"></path>
</g>
</svg>
</div>
<footer>
<small>Source: <a href="http://statistics.data.gov.uk/doc/statistical-geography/W06000011">ONS Geography Linked Data</a></small>
</footer>
</figure>
<pre><code><figure>
<figcaption>
<span>Swansea</span>
<span>Unitary Authority W06000011</span>
</figcaption>
<div>
<svg viewBox="0 0 600 470">
<g role="img" aria-labelledby="title">
<title id="title">A boundary map of Swansea that includes the Gower peninsula</title>
<path d="M163.1488338431509,456.4294587358745L163.0650400775612,458.15304390691745L162.00080930544664,456.5128807684814L162.5150365944146,455.7366921260982ZM86.58271202757078,420.2466498926515L86.68973919154632,421.105057888446L86.04518051707964,421.01259502163157ZM436.8070305248939,399.63112186164653L436.9087782709312,400.73558362309996L435.486866325301,400.7034514552215L434.6116456784939,399.3158006668091L435.6583898942008,399.2925349901634ZM432.4965108942979,399.9896525077347L430.8328151584228,400.189283259635L430.69129905838145,397.92321908414306L431.6547817899509,397.8567946970288L432.9678939989062,399.38547958046547ZM25.3904313657913,402.14310400444083L29.909243382639033,403.8086907737743L32.92845852145001,404.3208555952442L36.94705505484126,407.9314222837711L33.28936139520738,408.049299836086L30.89480271768207,407.3089380889578L29.603905971500353,406.49653436364315L28.60163242854287,403.58149776524806L25.36376939420279,402.4648694465577L23.635108763497556,402.75354956593947L22.605908566612925,403.8012127893744L19.715191283016793,403.5910963144561L16.278468138153585,404.39151595605654L15.497029330919759,404.0065624185954L15,403.5016200138052L15.24204605704108,402.9982234105846L18.62958375807375,402.8629932865733L19.060918635089365,403.25244839672814L19.620204441974238,402.6061909161508L22.441786601610147,402.53792387658905L23.935840624557386,401.668635409369ZM41.93000423420199,322.41832043239265L40.28860897839604,323.18680378860154L39.470904621431146,322.52323574887123L39.295734446846836,323.0316371382942L39.45327005901345,321.6459170836606L35.23112608323936,321.324260084104L36.75304080150363,320.7562265917368L35.95652081028493,319.91541094420245L40.051350696970985,318.858702854719L40.40666870910445,319.64629127939406L42.190868403479726,319.9462470217404L42.56051447503614,321.0293735880841ZM148.57282922376817,290.4079703664611L147.6721973744443,291.41957571264356L146.67467344273427,290.39681982308684L147.37060835728062,289.8288453022542ZM158.147307224619,286.1767579234147L157.75681439447726,286.471255963188L156.40719144817922,284.4562639432115ZM119.41181299709115,285.34700933446584L118.01392826640495,286.1673693393386L118.16602956989118,285.3265014851786ZM155.27844886416915,284.477082344878L154.3255036820774,286.81603744426684L152.4119141564206,284.57766210794216L152.66518436385286,282.7427767854242ZM120.61429821011279,282.8030732853658L121.12435065966838,283.85649756062776L120.68226107361625,283.6523288377066ZM153.3651869665764,282.30591457229457L153.37337575773108,282.85416420406546L152.57062757276344,282.50168799143285L151.71307895909285,282.88950773228134L151.24441871880754,279.8802495889686L153.14101164734893,281.441181561182ZM123.69869804713471,280.4973209669988L121.62134957845774,281.43783233886643L123.0904225137765,280.1980232874339L124.8054146187078,279.86430395103525ZM121.76733408983728,279.51858726395585L121.12870194969582,280.475432970954L120.77334493754915,279.941220614186ZM123.84011538970299,278.0431320177595L121.89224644423484,279.98081640008604L122.54448379333007,278.42623172464664ZM122.18667683874537,278.52473510250275L121.056703286431,279.4395035480411L121.84486420703979,277.9396110264788L122.28879208555554,277.96801680228964ZM123.19843182768818,277.0364690447459L122.72106492092644,277.9446225589054L122.45742199646975,277.55563645032817ZM140.8187728526509,277.7061722980434L140.31284817164305,277.9016676881147L137.583213388697,275.55876130537945L137.35430091688886,274.76481682946905L140.01820693467198,276.15905991281033ZM123.97223949123145,275.7237709515175L124.52269103700382,277.6435591252666L123.10375716705857,277.672046295309L123.96648400826416,274.9869429193641L125.10583188456349,274.32091560045956ZM128.79367325674684,272.08576494995214L128.74701388690664,272.86629424252897L129.1157197853836,272.2441537084087L130.16602369807424,272.28765150181425L128.81281793586913,273.8671625869756L130.3685180542534,272.48841441012337L130.73790891017597,273.15353380452143L128.9437064991107,274.36121985528735L130.58474012404713,273.96424158687296L130.26432326156646,275.0139626352757L129.0538546724074,275.33042212076543L128.2430750669855,276.3144169271982L129.00678481315208,275.76767419307726L128.9614236717798,276.97551816049963L129.39855814039674,275.5167156620155L130.07031311999344,275.31101432608557L129.0278911935502,277.3386076551833L126.87865380769745,277.63342512266536L126.52937357457631,276.9677396031475L126.06407674454931,278.21707289687765L123.9550395221031,278.72778181984904L124.68613619031203,277.33566371050256L125.43765867702496,277.0500769739592L124.67243822983164,277.10724805459904L124.37268981217221,275.48261798382737L126.52898290863959,273.0555531403079ZM127.93868656382165,271.0737636139529L128.33046488216132,271.5917988251749L128.96725763525137,271.2845058292878L127.98286060408464,272.4101778340555L125.40049577760601,272.5955089127092L126.29943287187416,272.35418322308396L127.14673540178501,271.13678457107744ZM320.946579601341,238.099059793778L319.559665465571,238.9868986448855L317.8998062958199,238.5947724541038L318.7732697677311,235.64253547904082L318.0142994052194,233.74335229610733L316.5860142298043,232.6981907338777L318.3862825041833,231.40285713794583L318.33848715469594,232.44292011087236L320.01066803052163,233.8599517854891L321.3491720196489,236.7796433536423ZM414.8049833852492,17.835853462689556L416.7214194329845,19.10320107577718L417.371018786479,18.911617737539927L417.7419931411241,19.554602179239737L419.84745463299896,20.099587984368554L420.36689916902924,21.313999153513578L422.4633737574359,22.833023010840407L423.7087666207153,27.171484003949445L425.88747641320424,29.621407899307087L427.40801825454673,30.02044731749629L429.81787410925244,29.759174371123663L430.4958329413712,30.18286003053072L430.82504453255297,29.846553251321893L432.46262898947043,30.654235192225315L440.13073783351956,30.341798890105565L442.80126071514496,31.511526386195328L446.6327520831446,29.975451375707053L448.54751984443556,30.079058498013183L451.4822914504575,28.990908383915666L453.2610781064577,29.295716156309936L453.9594675622393,28.851694421537104L454.34312065705217,29.288552344791242L454.9765262726323,28.994782230933197L458.13830962750853,29.659077544580214L459.3965625628143,28.87608606228605L459.34437967224403,27.677698349987622L462.08010061493223,21.829601825971622L467.7062323083501,19.19822369379108L470.95962822523325,19.05562638300762L471.8425477528817,20.039581783799804L476.01748899405175,17.195976646398776L476.11570810981993,17.15454413439147L479.02197972367594,17.694883638017927L483.5312345667344,19.78420283969899L485.12781422189437,21.920539698228822L486.3940866411722,26.406197942444123L487.42499231118927,27.841923809522996L495.0727842599981,33.53207756341726L494.2631996037562,35.06700088609068L493.18174551515494,34.96564895194024L493.61919518388277,36.177392534023966L492.5137603357807,36.82753126877651L492.40221784860023,38.28153631654277L500.0734434400274,41.31857892862172L499.4600190400606,44.17424931754067L498.12766210785776,45.08836444777262L498.07855126059894,47.06525961268926L503.2493326540516,47.376161342370324L502.6296541896363,50.12380033925001L503.94002829580313,49.78566740266979L505.5139907133289,50.51863671813044L505.64018842760925,50.969126772426534L504.6429294564932,50.92616915349208L504.51498043498395,51.631325200069114L506.6745996828158,54.10840723270667L507.82583976738624,52.89731031397241L508.71448809459434,53.55046016597771L509.1950226473291,55.07128166758048L514.0849248604181,58.185358537506545L520.3169115962464,67.83777112604002L523.0236672296014,70.42869773552229L529.0040628098714,74.26347485068254L531.8582332651331,77.69558054830122L533.0040742753245,85.8532803664857L534.3458332017472,90.0088628847152L534.0227301128762,92.67469767124567L535.5987058246164,93.85294234818139L535.9186296153503,95.30316330773348L534.1708231627299,99.78454276220873L535.543470726213,99.60396371448587L536.350123239974,98.14654686317954L537.0213164122515,100.37329164707626L536.3285245709294,102.52908620348899L536.3636495423607,105.45836292763124L537.6866487275938,108.38116603626986L534.4379538205676,108.18546813417925L535.8968662041862,108.48651947941107L537.7292174700542,109.83832596165303L540.6284992201299,113.38443288092094L543.2405349884366,121.79425770285889L541.8482589610958,122.8331396926078L540.240065846815,125.41145950864302L541.3123329874325,128.66878037749848L548.4361220586025,134.3468651244766L549.2200409616707,138.24166245080414L550.2544449809329,139.25147754253703L546.3556278014357,143.54637880150403L550.5941688265575,147.13947354278935L551.9298687063811,145.4115816429112L557.1098831411773,145.86667300603585L558.5278311891761,144.65577813613345L559.8073523140265,141.5070988121879L560.3363483535813,141.48849340499146L560.5377499994411,142.33436145431187L562.1229839950975,143.53070280491374L561.9804337970718,144.92965797087527L563.8057923326351,144.86442854060442L563.6381798146804,145.4113280621823L564.7173194730858,146.80260809566244L564.033128628932,147.19418940422474L565.5508964050559,147.9237994931609L565.9133561274948,148.95928348849702L568.2274141648659,150.4049514267681L567.84411291593,149.54019725364924L568.5427439983469,148.8567740556755L569.9691233194935,150.29312673490494L569.1961154075734,153.54298422002466L568.2950751711733,153.5339546589239L569.4167975695245,155.5508700310893L569.2236801743866,156.28536599333165L573.1846661804102,154.2905752986553L573.6316925055289,154.555528609897L573.740381810996,154.06918102355849L575.5207823531764,154.4265925399377L575.4956581219758,151.3740475766972L578.1560356986029,150.43865166415344L579.8074347130514,153.2730203211686L580.278177305383,153.0133837137255L582.4443188186387,154.53894469530496L584.6036939252081,154.53141730820062L585,156.12038227327866L584.1850745742595,156.32635754060175L584.2598548588649,157.62688983025146L583.0410323792139,159.67623318625556L582.9446899110853,162.1873716498958L581.7972201890152,166.32894148887135L580.0816983564528,169.92880732975027L580.9528378517334,173.62126733690093L579.7632511306665,175.01930459815776L578.3975765220521,179.82109142419358L579.2510925533434,187.54080005839933L575.3279377324207,197.08545798476553L572.7655267435075,200.304917109097L570.0238802240583,202.54208256516722L567.1917474162119,203.59102187601093L566.4063699956587,203.08903114333225L564.7816766109145,204.1274384585995L563.9502197638913,206.04144643164182L561.754632357949,206.7526333775313L559.6167114218806,208.73710309651506L560.424749347645,211.64632005007297L558.8656660042261,215.44782157543523L560.0800514117409,216.77381604917173L559.7476718275038,217.57030442195537L559.2338072872262,217.30733437469462L557.8587798441313,218.04634877435456L556.685997322893,222.36804968047363L555.1217079711678,223.84596464170318L554.5403733280591,229.0949864636932L552.0929591315489,228.66456909080443L552.1067223517239,229.00596336336457L548.6290935471006,229.5903246053931L547.2616356054741,230.48240768679534L546.881993608753,238.47139008475642L548.3140331516652,241.02508165077597L548.3675396425615,242.26256598612235L547.6715717145789,243.60348176665138L548.2794434245816,245.7725982508855L546.1344119343848,250.9663388892659L539.9741529460907,261.3744037876022L533.5853582726731,274.4478034442727L533.7865362407365,278.99893103372597L530.7137808218758,293.89002927727415L531.6764712451777,297.2580204167898L529.287613015068,297.85489487092127L530.8663545138052,298.3084886265715L534.3581100526544,300.79667643929133L534.4988506358131,305.3496485459036L531.9548592165347,303.95556645565375L526.0860304134012,302.9018580955453L515.2964435109425,313.4107349568221L496.6928187635813,320.56503146365867L490.9269624825265,320.65986494757817L489.6150878756298,321.92885799468786L487.1940552848828,326.23893995347316L489.67625716130806,321.57577336351096L491.9414827695373,318.860568681499L489.8683808472606,315.99240699392976L488.28793309654156,317.001183166969L487.6338294103225,316.68548387622286L487.74548533256893,311.810306063373L488.29072203780197,309.5791652704793L485.6345577305574,308.7916353762557L485.48129367324964,307.6216993349226L484.49032559424813,306.87591338519996L483.57303383087856,307.58980742727L484.10649374800596,308.54447658998834L483.7108620150111,308.1092415193416L483.37429147553667,308.45117983849195L484.67415318899475,310.73442911902384L485.5151772048812,314.3247865265148L485.7022039100166,319.39036429738917L485.1776601060219,322.84833193183294L485.54833356167455,319.2161736851558L485.1459722818963,312.9806847037253L472.0091378416919,312.3303908836533L468.0936380730509,313.5867896505515L455.7031503510225,314.4428733277309L447.36904036851774,316.36706956027774L434.85366835381046,321.4725452871353L429.0933155373368,324.50257120488095L425.2984173981022,327.19863401977636L418.4433093704074,333.00145255195093L411.58483032802906,339.9411190461542L409.43013684837115,340.5649630507396L408.7686059918933,341.64396691044385L410.4721222154576,340.4019578365551L410.8702862026057,340.4902685812849L410.75170539615283,341.371153516724L407.5993203022026,347.59896641390515L405.40647926556267,354.1346779440937L402.88380588651216,362.21030278086255L401.63192331159826,369.7192467285204L401.7152642932542,375.1052547819854L402.90675638289486,377.85733889653056L404.485312693987,383.1279003884265L406.9293656535665,386.0303079516452L411.5110665822667,388.7196574740374L417.4829291334627,391.26373080663325L418.42000618269685,391.27180484871496L418.5951986789787,390.80998510925565L419.198551925273,391.80006188528205L429.337883845481,396.14528311909817L429.0303209020567,397.6658058224566L429.86074751558954,398.3825734737329L428.85179986220555,399.1239978753438L427.4138716115867,398.74800089634664L425.29070101682373,399.7431648375059L424.67959516492647,404.0423563220975L423.1402995030694,404.5630018108932L421.53484415121784,404.06231838304666L420.8966190129868,401.40833673808083L419.8993174760826,401.33803225614247L418.96965896077654,402.8367956357106L416.8627218529873,404.17609711487603L415.97351964526024,403.82736387470504L414.40646402784114,405.42247913073516L414.1572076498169,404.7589421670127L413.4807540753809,405.5804659491987L409.9566818924359,407.05435306881554L409.734323091252,406.5799484078598L408.6290767860328,406.60513386093953L408.23952829088284,405.2213643993018L407.75282405882444,405.62445091831614L406.87215644116895,405.2823055954359L406.83474124998065,404.339139852731L406.29565963276673,405.15696527242835L405.233822045373,405.1154848703154L403.8399405427417,403.8969961259281L402.0332789167551,403.76508985269174L401.7800477932833,403.02104023199354L400.6492321353262,404.07524043053854L399.74828099824117,402.1947559306427L398.92757636725855,401.90311580192065L399.0121036617047,402.35946329837316L398.5219851904194,402.3914085817087L398.3166791002004,401.13360303828085L397.52455484946313,401.6426072277827L396.57436429123663,400.23221733358514L395.4068753152924,399.63931227959984L395.01408923121926,398.574812015373L392.4682183309915,398.3189483078895L391.84260107854516,397.8102851024887L388.16102161721756,398.1235112907598L385.40081441446,399.8261369230313L386.3628163219146,401.65947493845306L386.1248150427664,405.4999946618191L385.10554185094406,405.42231028604147L384.91220438905566,404.7287509719026L384.3032815612987,405.3756002834416L384.54138025553584,404.8935646209284L383.94966386918804,404.88640023946937L383.7049283645565,404.1522584287595L383.5220422555449,404.6310938910465L381.8992218234307,404.29964741189906L377.2064765187897,406.15503765738686L376.31229007397815,405.5094982688606L375.67909677084936,405.881551718252L375.12872140133913,405.5507341444609L374.06786110931534,407.0619662754034L371.6576875337296,404.25267826630443L371.96998498270295,402.4563849622209L371.23297479140274,401.9224312121223L370.7942470180624,400.3586631613289L370.06156326084147,400.345433580369L369.59831780211334,399.41070919948106L368.12456805970396,398.9611066059442L366.31337908150454,397.3414279659628L366.5021757063205,394.84102336903743L365.76055028049086,394.083721318515L364.5234888981995,394.6189181161608L362.71655752188326,393.9434340367734L360.8276564766775,394.2397930262814L359.927051661145,394.9404096708022L360.4374361619739,396.24010608428216L359.514935880401,397.3580153412913L354.8815706793548,398.15293993371597L354.84744634406707,399.2745775725343L352.77198476920967,397.8625339369901L352.8700218318854,399.75671308580786L352.51980253208694,399.9379013962316L352.23298746909677,399.32763683745L352.1586117979123,400.6872892639949L350.029694969463,402.58503178886895L348.6975235027312,402.5266396202205L346.92563606920976,401.1247556001472L346.0146334756555,401.32675944973016L343.2532551185277,403.19370799159515L342.7848975568504,402.9246259120846L341.6079028592494,404.63783254464215L339.3361721465335,404.2381032944977L338.5909839303122,403.29977093994967L336.25959747559136,404.000580457272L334.4280342188049,405.25351870759914L334.1019246714868,406.41019846768177L334.0784797111319,409.9304648584366L335.3426720665884,411.0925897619745L334.32285796714586,411.59175700705964L333.56026832936004,414.32802024579723L332.8114173633294,415.46460431735613L332.3444412543795,415.3030911971291L331.9091540132813,416.5668789027259L327.78432638025606,418.06099480588455L324.6268860371383,416.9594384360971L323.37609652561696,414.7304582711513L322.13599436531786,414.66316366929095L321.6529761237098,413.7562928272964L321.2109768129758,414.0057028195879L318.5949666160186,410.4312021963269L316.26143903841694,408.8528493720223L313.95671794372356,408.9453180843266L312.702214151278,410.14695125367143L311.89427337418783,410.1363712837192L311.3595879991708,409.6576974868949L310.85546088922365,409.90222453078604L310.3583131872201,408.73872994966223L309.3109296570419,409.20707990143273L309.1128963833853,409.96368022140814L308.28916307744566,409.10183490169584L307.46933704365347,410.2071418962587L306.64978649773275,409.49303394831077L305.7798334774525,410.24867164570605L305.27633895043436,409.27691089398286L303.73987710906295,409.63330539477465L301.198344719357,408.41073931114806L300.0664611543534,406.08774696916225L300.2475339460643,405.4441403762321L299.3455954206529,404.312401234376L298.9253339999286,404.6184553311905L298.3067748374442,404.0229486811295L297.9150325919518,404.623886020956L295.8739170625413,404.8554621487565L295.04621868907634,403.9198819512094L294.0891132135084,404.02799749439873L292.6797011521703,402.3816422105738L292.0073083269426,403.42246870623785L291.59907224286053,402.62438544185716L290.50502413654795,402.57350696550566L289.71269691929956,403.34562113798165L288.5157585419447,402.5685583789891L287.9281946676192,403.29279521806166L287.864065178429,402.39913896203507L285.75139950367156,403.17570165442885L285.4372638737523,402.73952107146033L283.94057370858627,403.08171513228444L281.64342345858404,400.5235939301783L281.5950363013144,398.37099381687585L281.05414197864593,398.61847202696663L279.50546360101544,397.61977514301543L279.43046899609817,395.88457528116123L278.0539631893771,395.28080407637754L277.3843686223181,394.0836357344233L276.7522155392953,394.1304769535491L276.60808996373544,394.77147192345L274.7955462451482,394.50801109299937L274.4132340617016,395.02483889157884L272.98553713694855,394.2747599341383L274.2402998460766,393.96622493871837L275.83122547924995,391.41987682961917L275.05680510825187,389.960206125048L275.2830019994117,388.2110974568641L273.57462770348957,387.49595589023374L273.1083900027861,386.08948924684955L274.5371417334045,386.05652735976037L276.0624402398762,384.07817541128315L277.1685886917585,383.55044170732435L279.55769096566564,383.9216906383226L279.6240277829238,385.41371707124927L280.6318338930914,385.02163447499333L281.15297053594077,383.9663741977274L280.7993231718274,381.86586332996376L281.9865888012737,379.7241845503304L280.6573046041485,381.8817271870503L280.9402825278603,384.20610130818386L280.35162577679694,385.0112396720069L279.70299392473953,385.07030216751446L279.9086412753113,384.00230096123414L279.46345604929866,383.4421106178779L276.54584296048324,383.2861249251582L274.40757687287805,385.28222602960886L269.90259801836055,386.2832154466305L269.22972543372543,387.0118747274246L270.21273185354767,387.3312166644755L271.213110393257,386.39310308915447L272.71570556153165,387.17802287741506L272.9003226592022,388.00112250792154L268.9228048954128,389.73463098183856L268.86649842927727,390.6873529499135L267.6713899779561,391.5538036342332L266.5067047718485,393.8207594075793L264.44810285466065,393.1059375244804L263.20115322639776,394.95858189351566L262.3593918729739,395.17461146222195L262.27624120572364,395.83401389642677L260.7759071243545,395.9936031417601L260.107955496499,397.40764683934685L258.8174575213916,396.99996253757854L258.80249208489204,394.5169716611854L256.64298710260937,394.080852851228L255.22304407519005,395.22116537723923L253.88055524849824,395.39139640316716L252.92076912453194,394.77418720017886L245.00148025311137,396.3651078582334L238.99527049739754,396.83024356846L235.6925003171309,396.15604393498506L235.77816802483267,397.53804744385707L234.8890103286567,398.65129472414264L224.3234656250752,405.68995388725307L220.54484018447693,409.3952285712585L216.87834065671632,415.58681404415984L215.3601144536924,421.66067331214435L218.28932369255017,423.5022647432488L226.05708810413944,431.17713487330184L227.3840830777781,430.89949112400063L227.99702293594328,431.40712390960834L231.3084790313569,435.16744041976926L231.29788112047663,436.5785153982433L232.64501412739537,440.76765425236954L230.96865425477336,443.8096072584158L227.7970458567488,445.2632961840136L225.1301828766118,448.33105689488L224.15948049162216,447.78541038894036L223.51995715926478,448.30806730153563L222.15660792451672,448.2509453333041L222.07311003124232,447.8604698619456L221.29857251300928,448.063039738292L219.65358345722052,447.37113039441465L218.804534587518,444.643902851225L218.42282975600028,445.10525181562116L218.09996611263796,444.8343632645556L218.10270179685358,443.73265007021837L217.73884443806674,444.45881082811684L214.38302915823078,441.7587540308741L211.2616465856945,441.90003622797667L208.86503806438668,441.23059490048036L205.00615642230605,439.31828547375335L202.56593286320822,439.0466435127746L200.51199991056274,437.6803171683423L197.1215990253695,437.84861892495246L194.49050086214265,436.5114031005796L193.06590337456328,437.16194668927346L190.21307828326917,434.40054401222733L188.90912353956628,434.4899654802284L187.79607410124936,435.645211328374L185.68781430255513,435.55724062619265L185.27750428439867,436.51509438001085L184.16450426259235,436.93979411391774L183.166156783911,436.60362530844577L181.77354676964296,436.97628731832083L180.92663110482954,436.3265738162154L180.6353914068286,436.7266409488948L179.53977144416058,435.0985467718274L177.54022969822017,435.3417322401219L176.15310042128385,434.83426762593444L167.4530569489416,436.7525216003269L163.28073065308035,439.2701560816786L160.37162454974077,442.2887444403168L159.29260198041175,445.00165438922704L159.55979257505896,448.25473102304386L160.292824197988,449.2367191883677L159.74184328283172,449.73870105296373L163.9419015984722,452.45112576948304L165.04248368558638,453.5731171222724L164.9997901857805,454.21415987632645L163.7201368924234,454.4325108867197L163.62938421309082,455.09011326011387L162.78922826540293,455.44294958154205L162.95412293480695,453.13083308290516L162.0974018029092,452.822597949591L162.14303033177566,452.05719525771565L160.0998706886303,451.89402920498105L159.32590192909902,452.44305100943893L159.51250431739027,454.52290290704696L158.9171090746213,455.43926712917164L154.71903923890477,454.9570286429662L153.7197591841432,451.53669250395615L153.32125278914828,452.0391123846639L152.18556651966992,450.3708961580851L152.1792435813777,448.16625407649553L151.32410764400993,447.58098228863673L150.11309730871017,447.4683332356508L149.1309711364047,448.7761098399351L146.63599844369492,449.23824668480665L144.2111989296227,448.1466966748849L142.31328057936753,449.68395904568024L138.66951694306772,448.1091811938386L137.4232626115827,448.9314550898998L136.8354856178621,448.1635237913142L134.4869045433952,448.09594242062303L133.38750601358606,447.57877474102133L132.4500442928038,446.10954111053434L132.1901458778293,446.9252362901607L131.67916986795353,446.53617126062454L130.18382406416913,447.3174953021953L129.72470715866802,447.0914248241461L129.79454748893204,446.360473539331L128.19192830953762,446.80926461135095L128.12358228126686,446.1060564065847L127.6476968341758,446.4287995916384L126.7242799871292,445.50579592776194L126.90035896539575,444.606995149079L126.53900311766665,444.9505873027083L126.19367730987778,444.1181573225185L125.09983373829346,444.33477495631087L123.7700210740968,443.2420459814748L123.09226146415767,444.24864172750677L123.00190150453909,442.60732904815814L122.26448164000885,442.64845983160194L120.38828151879261,441.3827826033521L120.0648500162215,439.6259870460053L118.12400901716865,439.042479151758L117.56671316261509,437.7463006574835L116.8283471233226,437.42978256056085L115.94765928965171,438.0447221291106L114.41621412118275,438.0314525629219L113.38959653745769,436.61875305838475L113.77750961351649,435.9400316208921L112.51611127047727,436.53988459924585L111.45141999178031,435.5801477146888L111.48426254927017,434.46729022389627L110.69627559253422,435.1550236459443L110.26114611677713,434.02301615686156L109.89729842459383,434.6120109458134L108.64026836065386,433.6095195043745L109.08881322641264,432.124364246396L107.26824583522102,433.49907735524175L106.70167113840216,433.1605256326002L106.61807951140781,430.66052858368494L105.48893924260301,431.7485547972756L104.97021000633958,431.3866928979696L104.28560008005115,431.7857834978786L104.44538129868488,430.82682797985035L103.85186924818936,431.2466202506912L104.15206810916516,430.1690981659631L103.47023686274406,431.0938319034758L102.58504893721329,431.23545009327063L102.05486268218738,429.5235443972779L101.56955404473047,429.97528003377374L100.50767428611653,429.22211355899344L101.66135864293301,425.18033457326237L100.13709581845433,425.84234049778024L98.54784741758976,424.6687807756389L97.8959804679289,426.18394596269354L97.08495358569962,426.5584859770461L96.40699277891599,426.03362505100085L96.68251220122784,424.4847723193816L95.38056813317144,424.96695855229336L95.08364663785596,424.3580384644156L94.33374322266809,424.5963361975155L93.78814482511825,423.4223489101714L93.1987368696,423.7581373633293L93.32019030690208,423.1345336711238L91.68884704275752,423.3129074700846L91.33147570333676,421.1302302461554L89.88912105651343,422.11074363061925L87.09142116527073,421.5780056275544L86.6958936669771,419.4116093869088L87.27454637763367,417.5390250437922L86.16136217822168,418.16669963618915L86.1552543945063,417.1589683817292L85.60637228657652,417.82954516637255L83.99168700709197,417.6295881857659L82.84557944133485,418.22137594179367L81.46105218681168,416.638467954559L81.51886719608137,414.66948866751045L80.38273480856606,415.20558129035635L79.74850669184343,414.8541285678657L79.61398659688803,414.0301234488725L77.78341958101373,415.56566694323556L77.1695373656321,412.58280453190673L78.5520656446397,410.1086308341619L75.63933296021514,410.9557205320016L75.30664626449106,410.3882072818524L74.69760157438759,410.90119073206733L74.40698163745856,409.8552380493056L72.83108718094809,410.58331041129713L72.73640477960726,410.1259517074941L72.13773139106434,411.0250319941406L72.48969592617777,410.1135194297385L70.66077826379296,410.3035528042237L70.3153816681197,409.0073173233686L68.46204572267834,409.91889997459657L68.28540932575379,409.30619025375927L67.09110893987781,409.64271663648833L66.0030481405156,408.98134188078984L65.62767180142782,407.26434745681763L65.3541460836077,407.627434409791L64.02693097878273,407.1432697327691L59.766281065550174,409.8947975530609L59.34661434524514,413.34863574965857L57.47738174260576,413.63933451322373L55.530175468316884,412.88591683405684L55.302749950389625,412.2059763373254L55.10294911325218,412.62051098103984L52.69116219299758,409.98674871183175L48.89520819096742,408.9558075126115L46.573559574175306,408.8763302732841L44.38518164519246,407.28231628217327L44.93341151944969,406.70549240204855L44.74620350121586,405.97553385094216L45.43585775207703,405.57904086502094L45.84835686357383,406.2262708051858L47.270426756665074,405.99311445200874L47.59969377909056,404.1547254945908L48.25801294759549,404.03982303701923L48.4227719014616,403.1508533853921L48.89121029378293,403.4989609819604L49.78078328430547,402.2107230190013L52.23663923139338,400.9015810785204L52.428601488589266,400.0234899867355L53.84579190610384,398.6698633601045L54.47099757533397,398.83328827869263L55.46168517944625,397.5586547549028L56.089961066686556,397.60605844669044L56.60946864120251,396.26898111923947L58.54942478641351,395.81635233991256L59.998462274395024,396.4378076892899L60.3417115078264,395.83889971935423L62.63232894308385,395.55848095411784L64.87167081874577,394.4950242638588L66.07199597327326,389.4094595377246L66.65656896187465,382.3682999956218L66.13971743220372,372.96107228870096L64.76284130578006,366.0793523769389L58.25087257540508,344.9377076923993L54.35028132846401,336.38977860640443L46.76468534797914,322.3257067290979L45.813668278920886,321.1028972058266L43.24491223937912,321.77456883047125L43.276278538932274,320.16242921831144L44.5269327621063,319.39458171524166L44.13578142325514,319.0655649704422L44.935446674945524,318.890551793389L44.61768100444715,317.69642475382716L47.276366438759396,316.62668112743995L48.25706607185748,315.2736958227906L47.952598888866305,314.8208066286752L49.547702166078125,314.17327908502193L50.156291501769374,313.5216366182285L49.94945329091843,313.0791002547048L50.52521137137046,312.9835308020265L51.40921525255362,313.99502414502786L53.51721107170033,314.07981602191285L55.58462922370836,312.28386091177526L55.32242620766101,310.5042036126688L56.73892970167071,309.9347417420795L59.54685209112904,309.7066345514322L60.53179951265065,308.96244217749336L62.3065982660346,310.5650206391583L64.82235962398136,311.66999624502205L66.056485613326,311.5975663056306L67.06530992235548,310.32793911632325L67.71951720801462,311.7219283861923L69.99151724764397,312.3839375808311L73.6585351446156,311.570944481733L77.60095400073897,308.39300887292484L79.21662112581544,306.184412685383L86.03046706657733,291.6072521956521L86.02982780875664,294.344409174897L86.54657069599398,294.55876649566926L88.61750121587193,290.72747528112086L92.49694330910188,286.1163170901127L94.67171553342632,284.92141863924917L97.04341132457648,286.1869537629391L98.5884508664949,285.9539031482127L101.90383274748001,284.19548562608543L106.17610090480593,280.42718136293115L109.5473533717859,273.9255321474484L112.85577797819133,264.92476366816845L115.38210855513807,253.50012989017705L116.8580990251894,249.4083512430807L117.66866998928526,249.1796949015552L126.16667492860051,250.9312047084677L134.4511622302034,248.4418083281489L134.56592647601155,248.84730685318937L134.20488179662243,250.99261071511137L131.8465235710737,252.37940429027367L127.15049790086232,252.47133638936793L122.17040866047955,251.07092420343542L120.78491854690128,251.4384181615169L121.11464856521798,252.77644415781833L123.24049021070186,254.8788368460955L125.40037486713481,255.95690054605075L130.59183299541655,256.428639272126L132.08118877678044,257.8168996259192L132.32416008352993,259.1238672211621L131.84894814633935,261.37508273732965L130.79868118923332,262.10738510239753L128.0861853377719,260.7904208273685L130.05831197318275,262.98333094929694L129.8654861776331,266.6747227743617L129.06091288463267,267.81007077109825L126.07479602648073,267.5853964635753L124.86813662428904,265.99855006126745L124.66760155207703,264.81998428127554L123.74515562891611,264.3502168458508L125.86383651497272,267.6575079943723L125.2661494893191,268.0915284413495L123.65456642915251,267.69849595217966L125.16633499600448,268.34028500894783L126.72775405611173,268.30072316958103L124.94241382039672,268.53732344845776L123.85462133324108,269.6292371429299L125.05870954632519,268.7727052785922L124.4491561129089,269.80615856788063L125.5992933037378,268.83181700909336L127.0766999469497,268.45996793145605L128.39134659502088,268.69389742508065L128.35054164988924,269.501202627318L126.94996210966383,270.13485942431726L124.27117204803835,270.13303881377215L123.7116235514095,270.98993840983894L124.82098599712936,270.1649365647754L126.49003394704232,270.24322129259235L125.48777273160249,270.7838902480289L127.88204332450914,270.31826486253703L125.7588635028751,271.08686799435236L126.44386197070617,271.2038074285956L126.01367337850934,272.23002759183873L122.68240679091832,272.7329297718825L121.01893817240034,274.0410960828158L122.88334350945297,272.93708723044256L124.73999847152663,272.62085756796296L123.17172840259536,273.1469684495969L121.71584816104678,275.04103079052584L123.3143362834644,273.3646988822147L126.12994355222418,273.013965150094L123.57649444369326,275.07633775196155L123.26694951376248,276.69783567480044L121.91311852263698,277.5925750929018L121.41283957631094,278.46441813601996L120.85984234755233,278.2172711784806L120.52901337131607,280.0732526623906L120.98240931503005,280.3015844931506L119.77232729644857,280.7914498322061L120.96455496270846,280.75979001418455L120.1550286216052,282.21823644563847L119.32872200393558,281.8684794968285L120.02942685637572,282.4458795606479L119.6751704128119,285.0697038360231L116.5082356631774,285.2228141780506L115.00429391270882,286.1407128224819L117.85901976166679,285.32923238826334L117.7579664297973,286.9592745863192L118.25121933466926,286.13482067117L119.83629341450523,285.6182726947882L120.1044576328186,284.29263987235026L120.498476961292,284.61027480717166L120.86489036919102,287.31447208976897L120.150440301878,287.93036091576505L118.55185393852389,288.1141893060121L117.99119779899138,288.7102112494322L117.89104928416418,289.49392658440047L118.15980710616532,289.88605106569594L117.49748273677687,290.06628734833794L117.51155532947723,289.4854334516858L116.9877082692401,289.4208260557789L116.31561810954554,290.70500842462934L117.10339184544318,290.12890561216045L117.03240026257936,289.61965185785084L117.37359325090165,289.6377352407435L117.39168292097565,290.2276910335786L118.40196507766996,290.45059539387876L118.03762474009909,289.4036082274688L118.45903650498985,288.5898047827941L120.16795792395624,288.2831275594508L120.72220163869315,289.7785342715215L119.38206661845652,290.6744406923681L120.39555798234869,292.20781289902516L120.07543497056122,293.2607062265015L120.8042440219997,292.84124390290526L121.14419725802964,294.13456565033994L122.60113483043096,294.3151650542568L120.98070521808677,295.371025406479L120.79878655254925,295.7315822232049L121.11178294975798,295.4856026129564L121.5893933858506,296.3448246329208L122.69105760471302,296.1023335267382L123.7562141275248,297.5734981131827L122.68587169959574,298.40041776158614L123.26385083546302,299.6880247881054L122.3138050719881,300.3329203110334L121.39490718697562,299.5285148148105L121.86796944621528,297.93605507240864L120.70257436493193,297.90463061389164L119.76314441319846,299.1699725209328L120.63814830308183,300.29364562086994L119.45557670805647,300.41248133093177L119.4604724226756,301.4485394247604L118.78436155883901,301.61402750376146L118.67618955216767,302.0261195861385L117.06423012338746,303.18767423684767L117.19189195586114,304.5058703102841L117.42515272260698,303.03020628581L118.21857764329525,302.97043316074996L118.91334416839345,301.77154021768365L119.54628462523488,301.62083999258175L119.63103089407014,300.55342678660236L120.82358480845596,300.37709277162503L119.96197171139374,299.19749429669173L120.85322594923946,298.0026086662401L121.6819239651195,297.9972925040056L121.20028656091836,299.4739453665534L122.21991730360696,300.5544900991372L123.37803966771935,299.96543725029915L122.88872099228047,298.4496916413773L123.96424464256415,297.90186405420536L122.73438384453584,295.8183821751445L121.42803774571803,295.89726423211687L121.47723701195082,295.312005444066L122.890804585767,294.62420707584533L122.60575108630928,294.02735153914546L121.43073212151012,293.6833038958721L121.79091064795011,292.78732653093175L120.84838173199569,292.3099540577241L120.15810387445072,290.9197206219105L121.4088426648159,289.7893654993095L120.8713241390351,288.6753450355609L121.21553190138911,287.69568365351006L124.48075588787196,288.7291942177544L124.66837510288042,289.3223583029903L123.14937783320511,289.9679867429513L122.65338362144121,290.86816512314545L124.18742035307332,292.41585040865175L125.1953672002137,292.6187136799708L122.84193385202889,290.6688945802598L124.80951233026008,289.4929882255965L125.40809963554602,289.7521855609957L125.84545194563088,290.5008610104269L125.41395928484326,290.98686055172584L126.97804557395466,293.2452891533612L126.27352180226444,293.9112475779839L127.47273729530752,293.89460830771714L125.79414394811283,289.75546571101586L126.32463176675174,288.8845180251956L125.43457055737053,289.4653677884053L124.31041274674772,288.1523193996836L122.80493955666225,287.92437927077117L121.77018053030224,287.1217327788909L121.43274435945477,285.6919457874028L122.21812099121144,285.144533477549L121.49538214118638,285.1617250316922L121.29212462297892,283.5107342191186L120.76190249839692,282.58148474902555L121.08443151500524,282.0987676909863L121.37218373728047,282.83695016929414L121.93746424131587,282.60924020309176L121.99578772206314,283.5277776905423L123.39654921952479,284.49923048669007L123.38592190542204,285.57802008658473L124.99521378304689,286.346217401835L123.53660443537774,285.29241533925233L123.86481939814621,284.50165618730534L124.48881464679653,284.38320627014036L122.67797053439699,283.77514854320907L122.10594400720493,283.2888381168159L122.1046981703721,282.4257475401246L121.54006331425899,282.6197866492439L121.31105030920298,282.15572864972637L123.17669265607947,280.8784884541674L123.30932997880245,281.9226322098111L123.48563237698454,280.82860610804346L124.67683074757224,280.32423175516305L125.2444886556159,281.1615221521497L124.7324497736472,282.58217278533266L125.63064786907671,282.8691999095463L125.28858126750492,282.16464071982773L125.64868738027963,281.098625227678L126.59440309575712,284.14857698243577L126.14616427163583,286.0096951525629L127.487585844151,287.56849303186755L127.81889860929914,290.06508828779624L127.75019191435058,289.1889962688292L128.18456546038942,289.23622812073154L127.63957837536327,287.21556515547854L128.18591010224281,287.02718612458557L128.65839099545792,287.5527426606277L128.61517939018177,287.12673343399365L128.22672699854866,286.77020366275974L127.19376190403818,286.84902461808815L126.30624257356612,285.53705552882457L126.91661597634811,284.4785424974398L127.7442488856741,284.3791002346552L128.01804298051775,284.8821677493688L128.06919187550284,284.3590299242642L126.85844389773592,284.16738727000484L125.95542734010269,280.7022141990019L127.84964471312014,281.73096303058264L128.28108196210906,282.5051409616135L128.31989779077958,281.68792437115917L128.75928796178596,281.73332724013017L128.6297783371001,282.38339218101464L129.31747665777584,281.8221980858216L129.1652160150743,283.8711209518078L129.66558121524122,285.3649503230263L129.71217588499258,282.1078960379964L129.10169331229736,281.46034409508866L127.24689692484026,281.1723588743189L126.17352824380396,280.20588912884705L131.13735501693463,280.3059283696639L131.69043364548452,281.38262944301823L130.7321192478048,282.48041748844844L131.26219355981266,283.0782808186341L130.35846219538416,284.86419406803907L130.65617237454717,285.3816757260938L132.01112009087046,281.1675293770095L131.1900635931761,279.83319395380386L132.633202881304,279.2236123629409L133.1728694240137,279.7505486366281L134.4302382117794,279.4327277137345L132.90661267298947,283.0177845592407L133.64016991261815,284.1259487761854L132.7068439667628,284.39177282585297L132.2385146126826,285.70835412628367L130.96398555938413,286.61556641921925L131.35061079297066,287.5727904779051L132.7660193317015,284.7365497394785L133.51705822363147,284.4914534042473L134.15549659841963,284.79156900969974L134.28527953057073,287.2338733790675L133.31218674275533,288.2310657424823L132.31654051759233,288.3776581834245L132.64938894932857,288.7274915762973L132.0628390003949,290.1283835331269L130.82754072864827,291.38427736061567L130.96901670919488,292.83178880596824L130.0045459929479,293.77822186272533L130.91894107973167,293.61054974368017L130.59401060626078,294.4549292001029L130.74707914389182,295.40240195856313L131.185161463226,295.57233675953466L130.78181967327964,294.8360943039879L131.32349197999702,293.17588859345415L132.29104212071525,293.43054184905486L131.176468917457,292.5915864091512L131.09997636500157,291.34900665594614L132.2879726094834,290.24766126177565L133.0404113466493,290.7108075790893L132.50049438652604,289.73307295802806L133.5957581398452,288.39566670387285L134.06607198571237,288.74129498809634L133.78387435705645,289.6130014691589L134.44436237940045,290.0873918605357L134.05444815956344,290.6730173583346L134.17852361233327,294.13984746445203L134.19066533692148,292.44539524114225L134.84978415822388,292.1594065573008L134.89132386303663,292.9723769513512L136.19050883543332,294.97154962718196L135.14480423402165,292.920877089593L135.81064277534915,292.46982456863043L136.69082829734452,293.76855047250865L136.2566010586088,292.622727331589L134.5587269912503,291.63838336498884L134.31603624872605,290.7222067525727L134.63538683578463,289.91330593192833L134.09601309992013,289.4486629525927L134.28602357408272,288.8556915082154L134.0099479788396,288.165950755807L134.60920274661748,287.2357315006375L134.43029430056868,286.04499830212444L135.08202753670957,285.68014143721666L134.5503093492398,285.46760700839513L133.91193075458068,283.51697559055174L134.34731474644377,283.43129430933914L133.72485312454137,282.44421840638097L134.5184475965807,280.951062761349L135.12350475471794,280.9258069555799L135.412700519415,282.04593594367907L137.30520899979092,284.346895220835L136.0874090867219,285.74190379351785L135.73146062953583,287.2787679350149L136.72913966702072,285.5994489121513L136.37174451605006,286.3725326759304L137.05692215216277,287.768173106786L136.65255949243692,288.8724220954464L137.2104664666058,288.347271460676L137.50832221604287,290.3603833361267L137.82886239092932,288.9828097700811L136.59607949449492,286.3000534927851L137.57923328890138,284.25270734868536L135.80964812269758,281.79991464652994L136.75796463187544,281.3637223519909L138.36056816375367,282.4100319588324L139.9726262925351,287.52256744263286L139.5848064000602,288.4546952153614L138.48466925332195,288.97285169416864L138.4508203239484,290.2323037794704L137.85552123587786,290.46584815208917L138.0849438127134,292.05032971693436L138.4789738364325,292.42689932217763L138.14808305077077,290.70589094178285L138.86571120253575,291.2946440270607L138.84481425414833,289.0072662914463L139.99786625713932,288.35290598297433L139.88577584553695,289.412871773151L140.46270192392603,290.12034763807605L140.33043043371163,292.3383525454119L138.71510389424748,293.5703800955089L138.76507949543247,294.33092991280137L139.0876659338992,294.95192337849585L138.92909795663763,293.7101985583722L139.3456703452557,293.22810478991596L140.7728215193456,293.091973874878L141.20670556465848,294.3942759527272L140.91023734205828,295.9577438457054L141.41584359353055,295.0372472940071L141.61602425241654,296.9320767811005L142.552659425839,298.93391182065534L143.62765079746805,298.8069044774893L143.87969289554894,299.5376949430938L145.04522829199777,299.6855037936475L144.03098891103855,299.32617125374964L143.86073537459288,298.63662049765117L142.73827996761702,298.6372268196719L141.9872194741938,296.0056049081177L142.60987811728955,296.1766915160988L142.0749980601986,295.30478884356853L141.84594101195762,295.60785975957697L140.91911602185337,292.71571484910965L141.4206407492684,292.87535868583655L141.70556589631178,294.135111406169L142.48427075953896,294.13993722302257L143.88642680826615,295.2814702682372L143.66404300721297,294.58843072052696L142.03777977005575,293.69261975894915L141.54023514125583,292.6143127339892L140.83161613051288,292.2658437304781L140.75501405301384,289.800180080696L141.96601663526053,290.7221444114548L141.74743025269618,291.81224690734234L142.58859967075205,292.6024943191587L141.94091660250433,291.7188579989743L142.13943129536074,290.57553223845025L140.63449686519107,289.0922153405554L145.6897624432977,289.7353893368563L144.44707350008412,290.42267767278827L144.1747068277782,291.51105307896796L144.6511607528828,290.5678649943584L146.617850571055,289.5741919285938L144.92026440727022,291.52868926701194L144.22068607724214,293.6344158710708L144.74881767554507,293.78653682117874L144.7263928618213,292.7155938948272L145.45325121410133,291.8404919667082L145.52283782252653,292.69635449544876L145.93312087365302,292.8907708097395L145.48207896281838,293.5032718114235L145.27518461329691,294.5443365017127L145.32647726504547,296.29064063428086L145.6357603449651,296.032238776912L145.68719792213597,293.50883632352634L146.3670084914138,292.92296771843394L145.67682878381947,292.32982688819175L145.52054292808225,291.1823289265012L146.487777280493,290.43111589243927L147.98208845877343,292.78627748902363L148.13519186696885,294.0181039469753L148.6344558262481,294.1038362397376L148.14903951252472,294.41974779817974L148.39104549922104,295.0970621291199L147.52407108472926,295.22440548808663L148.48346081122054,295.2675209206791L148.47426786588494,294.5763883213658L148.92928080119145,294.64159979336546L148.34950474067045,297.38113108369L148.6858577778903,298.4592782571999L149.15220464330923,294.91070507511904L149.2820520253572,295.8185369249841L150.01755270317972,295.6161477740825L150.70354871618383,298.1573086479766L150.9795476723757,296.1336062595801L151.43413971487098,296.07435662324133L151.15629817117315,295.4317769728077L153.434257883363,294.74511740390153L153.85279687407547,295.3245546045073L152.82647305680348,296.11949278617976L153.1641264042837,295.91072318231454L153.52973058053794,296.5708250376483L153.50163028376028,295.8079408204212L154.2737156992007,295.20578165179177L153.8939904476747,294.7446034018358L155.04947945149252,292.94814023895015L155.52872054417367,293.70407711366715L155.03839287069331,295.0244178537978L155.93833238812203,295.9879352389253L155.5913665779699,296.9438886264252L156.0386666206541,298.3652341310226L154.54792544171414,298.8933004699211L154.25645529277335,299.5195172605163L155.08919946487094,300.9257404124364L156.0450124804811,301.2415541992523L156.0354984177493,302.0374929476093L154.49290856797325,303.01287242349645L155.67068262749945,302.51283618788875L155.47500799811405,303.58859863456746L156.06600609539692,303.0475191554433L156.3442929968678,301.4847889467201L157.20641796431755,302.14324786794896L158.16855578334253,301.390737075606L158.67828164236744,303.49306255306874L160.03315291893796,302.856514274099L160.38853514936818,301.789369853519L160.81592193828055,302.4980477545614L162.13053010493059,303.1411549430486L162.870747555462,302.70662046446523L162.84553305181817,303.9302710425691L163.5670345868657,304.1556927915808L162.7360709408722,304.9747921459202L162.87597669588013,306.2775123920874L163.6725784468381,307.43754443769285L162.96959988465915,305.1527479369106L163.80770461057364,304.06934941522195L163.10673375552233,303.74574246762495L163.14800560740605,302.49805355267017L162.2253859362745,302.892694257127L162.6323057147929,302.31013318747864L161.11729254106922,302.42163034979603L160.57640766943132,301.34295597556047L159.01273268161094,303.067439839695L158.29875523627652,301.146240999311L159.13417079396822,300.53046741720755L157.13197491841856,301.455833158092L154.82877421251578,300.24733126114006L154.86702924435576,299.1258414676995L156.40759933769914,298.63664208183764L156.26782114361595,295.5085829773161L157.34564284904445,297.8074412572896L156.50713975880626,295.26580123176973L157.04534957224223,295.4193720114563L156.92122542274865,294.42050830200606L157.6991943009616,295.0681237930694L157.1878502849704,293.47033537081734L156.4077835400558,294.97610375867225L155.67729019466606,295.178286548442L155.94075922496359,293.6242727599456L155.4067097566467,292.66475568679743L154.56946776494533,292.44457054098893L153.79660407819574,294.24288009556767L152.06468937679347,293.9557102437684L150.43756745200608,294.8026085138554L148.79361043165045,292.60006068716757L149.76440237006955,291.63345100219885L149.22128313137455,291.5406329039397L149.85562800915432,290.490044540682L149.51012371598154,289.60890846049006L150.86580419137954,288.99395795399323L151.3065440284572,289.69555977713026L152.00379789665476,289.50274944357807L152.6203989968135,290.08292259256996L153.720873817344,290.3506120176462L154.3102244423435,290.02987738694355L154.42366329204924,289.17515013503726L155.09323835412943,289.56530826610106L155.45173717585658,290.8784365702013L156.3214553655589,291.06231940827274L156.60353043467057,292.123719359457L158.795969947887,292.5467448165873L158.47645852179994,292.02314176906657L156.78281092798989,291.9483622692933L156.52415450217995,290.9956010530441L155.27160038758575,290.19246041434235L155.40643465651738,289.5457008918165L154.43920838381473,288.96774472067773L153.9632472986159,290.09762147811125L153.2166116583703,290.1016454445926L152.23123278160165,289.2552528641245L151.32558483125922,289.43757734842075L151.2146960506616,288.4904028552555L149.51782430619733,289.253692519429L147.24436757505464,286.9372847264749L146.08241501745306,287.2452495717589L144.4767915471648,286.5909550622164L142.63418337810708,287.3066904977313L141.5191175621403,286.45072950764734L141.63038857637366,284.5343789191393L142.75588035211058,284.57236413618375L143.40816654777427,285.32975633438036L143.8155025114429,285.20460246408766L143.2374049522232,284.9008918558684L143.4116782092051,284.2293139058311L145.1346571877557,284.38033373243525L143.72418420990107,283.854679068565L141.1895442859577,284.16423681526794L140.5083883543948,282.29222992100404L141.38910462952208,283.4969239108177L143.2518173698445,283.2751729781303L144.47868853835553,283.77782137462054L145.67344071066418,282.8900421449798L147.62585952125664,282.748094231647L147.93631636406644,281.8620447159774L147.34991859603088,279.1255704112409L148.06627435173687,280.5019589874137L148.89496135606078,280.71227725940116L148.80300432116746,281.49914161639754L149.76776251965748,281.2157049516536L150.58752303602614,281.96303640019323L150.1950857793836,282.80277721668244L150.75245828429524,282.3113466387149L151.23920604083742,282.81306785554625L151.72445550772045,284.2082355705352L151.13626389899582,285.0118428645219L151.91544567612618,284.5860308061965L153.58946875389393,287.7805596577964L154.3086933892364,288.2028570687253L153.7986230804272,287.48314562634914L155.29093259059846,286.5562146311422L155.07507140348207,285.354776803244L155.70083752176924,285.0716239783651L157.08235739338852,289.365272635594L159.77180964055697,291.5212159510411L159.08183945725887,290.3426269906631L157.39621655638803,289.3120049367426L156.78967779766572,287.61942020311835L158.29859748579838,286.2966681872931L158.5650993187637,287.7876211704861L158.8770229488964,286.9470461204619L158.51823218359823,286.1234435769002L156.7099998750018,284.09206805340364L154.52942295392222,283.2362909848307L153.7502317675826,280.776567437395L151.91117647630745,278.5105392226251L150.474392114882,278.28167295717867L149.52353935789233,277.25225660305296L148.83922010704373,274.8837446115649L149.94513646374799,274.27123451262014L149.29113550307648,269.57952506735455L146.56390719835053,267.2057363166823L146.59793224858004,264.95137982936285L146.09893413481313,264.2160332482599L142.62763367391653,262.0012251332082L153.01107913474152,260.8316117577342L157.45029842610347,261.3110151600995L165.94084669035965,265.1145328061102L169.84318360373072,268.0693995938491L173.77390172001287,271.97927281270677L181.72188482543697,282.72906726272777L182.71064883249983,284.53662058195914L182.95972969566355,286.58171970832336L183.8158746539375,286.76125497941393L182.23966813062543,288.65252800328017L181.69374359161247,288.63360758987255L180.7301032665,287.32844002431375L179.08492434565687,287.1373471151892L173.4611736347988,287.84513976762537L172.56984702445789,288.2270124213683L172.9407401499875,288.5640786517906L172.57191463364688,289.0227193749597L176.96604845304955,288.27451063800254L178.38419760383294,288.72979826436494L177.73230080417488,289.8227776823769L180.54286289015909,288.92225264366425L181.65210402417324,289.3734233497962L184.53114942336924,287.33703100944695L185.94095125390595,288.1880640654126L186.2100299204776,289.2197017689614L184.29311780767148,291.8949775059009L181.17217055124183,292.6263546610717L179.42846408883906,291.8309141404461L178.3182371042385,292.80305656435667L178.1861566785292,294.44389850771404L177.4983231932938,294.2795563630789L175.53763270835134,295.20161814226594L175.1288969876996,296.06347132058L172.67591165401245,296.4015455752815L172.76614976316614,296.7806898151757L174.9423103311483,296.499747312977L175.72249731212742,295.37941367179155L177.9995797599986,294.7083001897845L178.77037867545732,294.1739731337584L179.832225389614,296.29531130987743L181.3599007936,297.3882353387453L182.12863450072655,296.8924245373928L182.53510718656344,297.8609393668303L180.71432924001056,298.9720897596271L180.50818816952142,299.9892742894299L179.56782304176613,300.41118430123606L177.16224627964402,299.7518488333153L177.43427783442166,298.75117295938253L176.9583989273733,299.9480722202861L179.14355762693867,300.64262880755996L179.20298909805024,301.3389297962276L179.38522762823322,300.7009612930269L180.67341926840345,300.18448247609194L180.96777018044304,299.08726811624365L182.7287853957787,298.0536194034212L182.5714394865663,297.05575051244523L183.38584666298084,297.47034011845244L184.66813828166687,296.7538961556129L185.67397541455284,296.9491200001212L185.39851177937908,300.8163150477776L183.63432397907127,304.49422956207127L184.27770604713714,306.43113631491724L183.88033676661144,304.5860830939055L185.17924927716467,302.85658523593156L184.59248185864817,302.5344147223077L185.73805589087897,300.61267735665024L186.17162691622434,297.54482957530126L185.75256528253067,296.6591010860866L184.80977428788447,296.4401137403911L183.52824907465947,297.12625518397545L182.26335850668602,296.4038940188475L181.29183072802425,296.9074852876802L180.0335394499316,295.789630338244L179.33952403662988,293.0078435277246L181.41921885798092,293.2565189864108L184.1434419517891,292.66997178560996L186.82566665250306,290.6749759883678L189.80721849604834,290.10442818532465L191.80606957869804,289.1024311543879L192.8959321420507,287.66501138206513L193.9030424177763,284.85550122313725L194.3995072257385,285.523724304614L194.3082118450593,289.33542304413277L194.96500951332746,290.26126539598044L196.37996333387946,290.5571157765371L198.7131474760963,292.3346097252361L205.57885020339654,292.71532359390403L208.0407380475799,290.74271001608577L208.16125000004467,289.59849206185027L207.21045887759374,287.2394794387801L207.41397770137064,285.4416403580399L208.09208392025175,284.5398592790152L210.13143622994085,285.8605016853835L209.89882970667531,287.30083790513163L211.04684005857325,290.99821191781666L210.23920784669463,292.90976950668846L209.25549285950638,293.23509764471964L209.08167934292305,294.6197316933394L209.9500958796125,295.95653375000984L209.52936281069015,296.76473484122835L207.8675974408652,296.91172520956025L206.99160701500205,295.54658649364137L205.71182427494387,296.46785689578974L203.30966884871395,295.4678333211923L202.96393323519897,297.33195345505374L204.113237732402,298.12366360276064L203.0459033348452,298.34219422638125L204.2681314448946,298.5379139715951L203.8322610029536,299.2860125823354L202.69879124969066,299.7066930811998L202.6273418745086,300.2958958593226L204.1565867771078,301.56743518682197L207.0813745474161,301.69565896870336L205.786638795822,303.6383394570439L204.65261548974195,303.5291335671791L203.950932146171,302.4970445912477L202.70597911951882,303.06064555338526L202.52610146398274,304.51932707960077L203.74987629621955,306.18508936323633L202.25230569406904,306.26168436520675L202.15188854014832,307.344537212819L201.2906860047824,307.3819929841702L201.22655486323674,307.99110994038347L202.64297521606386,307.3854029780341L202.37426169815444,306.5271733716363L203.81825701040543,306.51104805657815L204.04071774292606,305.92243598111963L202.8292130345526,304.3875002461573L202.95704152934468,303.2667877826025L203.82432096219782,302.81032434347435L204.59989022379705,303.7880630419386L206.05900164965988,303.8842251402675L207.35595678476056,301.56301106564933L206.78607724803896,301.0719666875666L206.02345645963487,301.60771694417053L204.928807475133,301.525928405521L203.01658120113734,300.40877203355194L204.60255409078673,298.49935417635425L203.23235165402548,297.33068164339056L203.34559925181838,296.6796532686567L204.30353542533703,295.939525397087L205.59752963400388,296.9708798102365L206.95517073861993,295.7327174886159L206.82602026119184,296.75431043471326L208.04566088773936,297.37240071715496L210.37530867905753,297.002014360216L210.13316329446934,294.03332259978924L211.18540594979368,293.2450258376339L211.89201036743543,290.12856757067493L211.21025279953574,288.3520536696742L211.90760406629397,286.28384968519094L211.51181224549418,285.099395084093L213.17223055712293,284.6715288557607L213.71413910700812,281.4284283418383L214.68978197363322,281.9614325057046L213.7739753668111,281.0110686394328L214.78871061686277,278.2064183726907L218.33052426062113,273.9621393135749L224.8832798683934,271.1297598086967L227.78264343557657,272.24389203260944L226.69539929326038,274.93966339723556L227.58263247160266,276.1199142682599L226.80798021594,276.9437108589191L226.42918230951636,278.2168426785647L226.88583464362728,278.90835524955764L228.0551132638593,278.4363667660655L228.57661730544623,279.8511537221639L229.1646606294271,279.93139091345074L228.77668982889827,279.74934471306915L228.27693705561705,278.332230342814L226.75749775054646,278.5386143628566L226.91363225565146,277.28384183604794L227.82271782317548,276.29454986749624L227.73489527514994,275.13276258112455L228.40873706702496,275.2188797833951L228.27890675822346,276.2272411727463L228.63210081660054,275.2240666352154L227.52696251227826,274.9672714543558L227.252331246822,274.30231931341405L229.03470590296092,273.33097551212995L229.64676407805473,273.4845517678332L229.9642890037194,274.46795757500513L230.39563255047142,273.9538043802895L230.22306099898015,272.762511197594L236.31738578276872,274.20678238011897L241.09520025205438,271.72574921062915L242.25432238579288,271.8196077392349L243.13505469010488,274.04855676997977L245.660005550194,276.5506310121418L246.65927549644402,276.86291973516927L247.00693199497164,277.7933055401809L247.94281400167165,277.37048899436195L247.87637457944948,276.933276580603L247.05373117971794,277.5563725683023L246.7682254559495,276.57031982288754L245.55320162421776,276.1684428537119L243.76834838338345,273.83815614003106L243.24471241985157,271.9403071019915L245.20762803677644,271.62697239055706L244.78965305361817,271.2219138017681L243.4186549553233,271.6895296307339L243.01432423748793,271.349705573346L239.8880488296354,266.14078378057457L240.20509584973206,265.33044606805197L241.48446735061043,264.5961794345494L242.27511774132472,262.98939718799375L244.17359362583375,263.4520218598336L245.83789952812094,262.274015316405L246.9949414950679,262.2922815273341L246.05374005212252,261.7897473449848L246.1532630595275,261.3459098223102L246.88809727068747,261.79390894404787L245.57061146077194,259.9577463376627L244.73677779621903,260.25987598398933L244.74298274402008,259.7245204966166L243.1315542204611,259.6674439898052L242.4752759127732,260.1865348970605L242.74980188933205,259.35552039374306L245.47291616506845,259.5432408837805L246.51722773053552,260.64524917873496L246.69708866493602,260.30844290202367L250.62593401465165,262.13045437805704L252.0906601220895,261.8200405089883L255.6437116875677,259.43588352754887L257.83592763964134,259.0302755724697L258.40651341933426,259.3148828899284L258.4687203278363,260.3598549813905L257.5690106703905,261.6903519732732L256.6182077479816,261.95369775025756L257.2240554095115,261.8922653156478L257.10620875229597,262.2272332281427L258.6102498820401,260.78319016846945L258.8541390100363,258.9484116237727L262.4097378517963,260.2349307646218L266.59066900189464,257.3768289713189L270.7105991119988,256.75733939658676L273.44577375728204,257.0718409602123L272.0662276573403,255.74355672681122L275.9902706319526,255.25453852860664L278.76956906251235,256.80999706890725L280.83476046198757,257.05996652181784L286.17543640660006,253.34790282447648L288.54497379478926,253.08606252772734L289.7550142574264,252.19621543957328L291.8557167293602,253.33242158372013L293.4815162848863,252.7740183602L294.3757647227512,251.58194224894396L295.64404895655116,252.31635781702062L298.37693053617295,250.19631284248317L298.38137788702807,248.88166062068194L298.97242957286744,248.2974843542761L300.4813107737573,248.87361745728413L301.1288357760268,248.3854604598455L301.360881205901,246.80841537786182L301.9981232366881,246.72451342952263L301.32962933506224,246.47772315554903L300.9896094468868,248.38945044034335L300.43515494504936,248.72682383270876L298.9151047078785,248.17120878618152L298.22048751517286,248.83241609451943L298.1114260583108,250.2460083901533L295.7721255309252,251.98111274381517L294.99088778357054,251.1367617493379L294.3323082100669,251.17756523005664L292.3061198323903,252.64624102402013L289.80868636402374,251.84290580792003L287.9899051525299,252.69643433371675L286.0524586060965,252.80613635425107L280.84700218601483,256.37631786687416L279.6419522484057,255.9752494161221L277.9554889751553,254.30397176092083L275.5243669232568,253.70785354844702L268.0707639895454,254.74704016849864L266.98749166924244,254.32240980188362L267.2758691443514,252.39365673238353L266.66897288668224,252.4213920334587L269.075703797178,249.32187695721223L270.6023629223173,245.1571329536091L273.37846193075075,244.49085440320778L274.1846499290268,244.7351236013492L275.81664294733855,243.92365905414044L276.5038535603917,243.47621620478458L275.33663491289917,243.46288389035908L275.6010685013889,242.26852244017937L276.6977143221975,241.5213734657591L278.0914162738045,241.99444306288206L277.73052382803326,241.06392456861795L283.42604446964833,238.04269806918455L287.7831783018082,237.5197498232883L287.7281073468448,238.93703861215909L286.83686246505295,240.23532346052525L287.1574110223346,240.69909371198446L289.4641411753273,236.06401646474842L293.7260925898772,234.7326990575384L293.79750072857223,233.6481984750426L296.11703288341596,233.26169496250805L297.8506977959505,233.29104428620485L298.98914727657393,234.35093176284863L299.63145538013396,233.97057105366548L298.9077436206371,232.91055587078154L300.9117440096916,231.46759349753847L308.13424084417875,230.42418199509848L309.21536363914765,231.53806808128138L310.6132855827791,231.92406778804434L314.2393377204153,230.94689823617227L317.86974476213345,235.75410009389452L317.04787471818236,238.51128967708792L318.073156810794,239.73618691164302L319.5421148554742,239.96877564165334L321.82864914020774,238.65474564950273L322.3057253125098,236.58412508732L320.6832125735482,233.7734918717033L318.79765509109257,232.23288937026518L319.1364045322898,231.5650139276404L325.1502735534905,230.7055991885136L325.7739199510015,231.26534146697668L326.19839059295373,233.51419044278737L328.7645361087061,233.71079363698664L330.6859324645857,235.10075173410587L332.38168083058554,234.62012425910507L334.6278481096324,236.63560448784847L337.40270701879035,235.95793821311963L339.38421257765367,234.71017333390773L340.18939796452287,233.5409040448576L340.2247612067813,233.4895518975536L340.25052699135176,233.48932197377144L340.51823251475525,233.35670264401415L340.91179812821247,233.32035557225754L343.39696463100336,234.40348539309343L345.96981342053186,233.94220172036148L343.5357086563745,234.26153798036103L340.6928255173143,233.11609831151145L340.3492825227595,233.19985587031988L339.63814291089056,234.00607479199243L337.06605726786074,235.74860187560262L334.7348346129211,236.26055366189394L332.68023705237556,234.42986924796423L330.8295763354681,234.716234205378L329.28406528843334,233.37790520240378L326.8625461690972,233.1300476979377L326.1229343142986,232.50626073674357L326.14150115981647,230.9030652163492L325.39768574134723,230.3096903768601L325.08949040431435,229.62314601238177L324.7329892251846,230.14000055029464L318.7657773353576,230.98802181929932L317.2613245143457,232.17560654578847L316.5496403963798,232.06624399080465L314.9851966907854,230.1882668289909L313.3774088067612,229.3300514271832L313.4751647053463,228.86934374272823L313.16031763217416,229.19482615262677L312.5989263675783,228.76133529026993L310.8769211882445,225.2429872034554L310.3049790696714,224.43939622423204L309.48668685031953,224.4812854118063L308.5211367918746,223.65527019686124L308.70814459495796,222.43601491316804L307.9584607969673,222.11565504188184L308.11617467756423,221.57910646361415L309.40371209270506,221.9750225503958L310.188430267488,220.21841167644016L312.4920327756645,218.8410438872961L316.1360338703107,215.0396036295424L319.7062040648916,212.83150705923617L321.71839889138664,209.7483624323213L323.0800553136287,209.0782040649501L322.8908809974246,205.89080156118143L321.5054709836222,202.69349062204128L321.80019479880684,202.008123106556L324.2158648677887,202.01696515233198L326.27541329861015,200.7156647926604L327.1599915354609,201.4669346662995L329.86791966848614,202.19011419496383L326.29238816013003,200.54340621489973L324.0765097263211,201.84072734955407L321.2783204008665,201.1354524627386L320.8806443010526,199.3094086573692L321.56079364429934,198.59116120359977L320.3129025365133,198.1820317650563L316.569065846018,194.52109618434042L316.9650598998742,193.85297204980452L315.69911205019343,194.29156595352106L315.1670390274776,193.53703985926404L312.7613932034428,184.59790623837034L313.072743465912,184.79452049150132L313.2186418355104,182.77241904918628L314.07093034729314,181.07207142518018L317.64007883842896,179.3128183609224L319.14447962137,180.81972793057503L318.9330468923845,180.05761867143156L322.17960598130594,180.5514836452203L321.0475332668175,182.64208309078822L319.9245758429415,182.79698660984286L318.4592171911372,181.30246294359677L320.1370268726596,183.18004801232019L321.97030056988115,182.89378175362071L321.9616264125052,185.26063232903834L320.21505410818645,186.35292712926457L321.88283198766203,185.44478619664733L321.7741995205115,188.732368883444L322.9266918454532,182.49265593056043L323.5347938947725,184.0351636158157L323.05815103895657,185.41980794176925L323.56207462068596,186.4868634313607L323.64197979268465,184.08265146709164L323.0924210569792,181.40147210794385L324.51673682426645,181.74339076103934L323.88430975359825,181.42108880569867L324.96983508289213,181.0702150687721L323.24382319580127,181.28936465035076L322.9175978926978,179.91230294194247L324.76191793547423,176.26680842651695L325.24448829660105,176.755108484198L325.6078647567174,176.47357959706278L324.87952819951533,175.9097089618881L326.2351420216437,173.04109630794846L327.6953230700192,167.1453744344617L329.54637433566586,164.37704017297074L330.2596614870363,164.04682531682192L331.6474335576013,164.57361498801038L332.5236599475584,163.64406862363103L332.9004953549056,164.494340713587L332.880400007336,163.78055131617293L333.1869484638564,163.80557305570983L334.68062521159027,162.78106967573694L333.932194857015,162.6994623347273L333.1602726434576,163.62516307580518L332.4479073332477,163.2216378892772L331.584416378033,164.3647991974285L330.3826433670001,163.81926139004645L332.4989363623281,154.76869320608967L333.9487549619889,152.95672238779662L334.9493705831792,152.62006146683416L341.4992614114599,152.56990647822386L342.68772461429035,151.2591356630146L343.68597706024957,148.91738741357403L343.7195910408773,147.83796640585933L341.534435842289,143.9984050984931L343.0621771959741,139.6764976522827L343.2190130071176,138.19575295630784L340.00399818915866,134.98650837881723L340.4059658016704,134.09539213696553L347.27750722097244,135.8163759559684L347.9109096101829,138.74789216341742L349.55658610539376,139.83076828227786L351.82855581687,139.20573981323105L352.5547145209639,136.85792806242534L350.8414985540303,134.02068680492812L345.96445009524086,130.52741727451212L344.7060228696,128.39362917315157L345.3895281031564,128.0676165810146L346.26275428606914,128.6329610998655L348.99930498926096,127.35757386601472L348.4489392284295,124.87168759336055L349.15354501816637,122.11276528205781L348.3802801328584,118.1512661644083L348.82638948648673,115.40613828343339L348.3094847942757,114.41932492892374L349.9454487085486,113.09380554828385L348.0902193074189,111.8714898515027L346.7109318616385,109.33261954122281L346.8458666113511,108.86688766985026L348.41741831075797,108.42142656771466L348.48805419000837,107.64054882073833L346.57411607821996,107.38925013026164L346.2322430283575,105.2695252103731L343.8713906620251,102.5153568181122L345.65289941300944,101.45692261718796L346.8940263828008,101.69849104073364L347.20982301185086,101.14501155652397L346.79705496404677,99.25643223157385L345.35506799040195,101.21071765164379L344.8156746225459,100.80608445619873L345.56040450442197,99.11589721142082L345.11758624322283,95.49645860944293L347.7658280603018,91.92979342602484L349.28039426893974,90.87881895463215L351.19380179070686,83.1556228025438L353.0822018158069,82.8951540444541L355.8346356817701,84.66451652775868L359.0168128295127,83.87211629058584L359.6453025918172,82.220392735122L360.05298534202757,82.24270737143524L361.14187193211274,83.89526125002885L362.18825937394377,84.20326531471801L361.6194969586477,81.4146802357136L362.7336964144997,79.98713746744033L365.2884263169117,78.70147619805357L366.26037165882553,79.35567082719353L367.87555901502856,78.58034151540778L367.55184051320066,77.46279248603969L365.7391095377843,77.3042710521404L365.8166962225241,75.91915085242363L367.16503732221827,75.6487629985495L365.93174790899593,74.12649776424223L365.9273754545902,73.12141368640005L366.5561017429591,71.83384039367957L367.58155757673285,71.2621222375601L369.83516916805456,71.7238019646611L370.6833317356495,72.46250996792514L371.4563862908726,72.25206776354753L370.3806732166877,70.8905780211935L369.32103454085427,67.01714629668277L371.6036937591034,66.70219807613466L371.7044129753349,66.14783176232595L370.76603578488357,66.04072757331596L370.7191766401893,65.01817841366574L371.6993481917334,64.02266137122933L371.8990527600572,61.21194286024547L373.2457008410902,58.866820881463354L377.1481701681623,60.71670006259228L377.55018143965935,60.40864223988319L376.61954005803636,59.42745810512861L379.0196903501146,58.606729032471776L377.4977206775184,57.415895344820456L378.1706475518722,56.681944583018776L379.57621992692657,57.55720875971019L380.4221276814551,57.0546421877807L379.2666448578775,53.17299903027015L381.58576201404685,53.85933042378747L383.73856327296653,53.580321527129854L386.4918695967881,50.60576363456494L386.96624398902713,49.01186101070198L388.7801349844949,47.785771979994024L388.4892179096896,46.14213889806706L390.1755009023882,43.94439151145343L392.6075004628892,41.99597815448942L392.40083226735624,40.66034553089412L391.1239811205469,39.575290697364835L391.4729194131751,38.49423450118047L394.54794290370955,36.298514240348595L398.05103470121867,35.530363321784534L400.5232648075644,33.56063323766284L398.5056844635583,30.74929731762677L397.35081012359933,24.478343525828677L396.35403610866615,22.07402650034055L396.9861807956722,19.71417439247307L400.00120948948006,17.44894891785225L402.60185712004204,11.907396389942733L406.76676070020767,11.84695609312621L408.9121527273628,12.61172498833912L409.7263561117843,13.948052457912127L412.9443786723559,15.653947232087376Z" />
</g>
</svg>
</div>
<footer>
<small>Source: <a href="http://statistics.data.gov.uk/doc/statistical-geography/W06000011">ONS Geography Linked Data</a></small>
</footer>
</figure>
</code></pre>
<h2>Further reading</h2>
<ul>
<li><a href="https://www.sitepoint.com/tips-accessible-svg/">Tips for Creating Accessible SVG</a></li>
<li><a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Making SVGs Responsive with CSS</a></li>
<li><a href="https://css-tricks.com/how-to-make-charts-with-svg/">How to Make Charts with SVG</a></li>
</ul>
Weeknotes – series 01 episode 052018-06-02T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-01-episode-05/<p>This week included a trip to GDS to discuss service design and graphic design. Plus location page prototypes, pattern audits and moaning.</p>
<h2>Monday</h2>
<p>Monday was a bank holiday. I needed a day to recover because I went to The Biggest Weekend in Swansea on Sunday.</p>
<h2>Tuesday</h2>
<h3>Challenge meeting!</h3>
<p><img src="https://www.benjystanton.co.uk/images/bulletin-new-and-old.png" alt="The very long bulletin page on the right and the new very short page on the left" /></p>
<p>On Tuesday I had a meeting with <a href="https://twitter.com/mr_dudders">Andy</a>, <a href="https://twitter.com/lauradee">Laura</a> and <a href="https://twitter.com/iankent">Ian</a> to review progress on the <a href="http://www.benjystanton.co.uk/dp-prototype-kit/sprint/25/crime-overview/">bulletin page redesign</a>. Andy wrote in his <a href="http://mrdudders.posthaven.com/week-notes-spring-special">weeknotes</a> that I seemed nervous. I was nervous. It was called a "challenge" meeting. With my boss and my boss's boss. Who wouldn't be nervous? Anyway, it went well I think and the feedback was basically "keep going but make you sure consider a few things". I made lots of notes.</p>
<h2>Wednesday</h2>
<h3>GDS</h3>
<p>On Wednesday I went to GDS (Government Digital Service) in London to chat to some of the service designers and graphic designers. I blogged about my <a href="https://www.benjystanton.co.uk/blog/how-to-start-a-service-design-community">chats with Martin</a> and my <a href="https://www.benjystanton.co.uk/blog/kicking-things-off-with-the-graphic-design-team">chat with Mark</a> separately so I won't go into that here.</p>
<h3>Prototyping on the train</h3>
<p>On the train to Paddington from Swansea I started creating a prototype for the <a href="http://www.benjystanton.co.uk/dp-prototype-kit/sprint/25/geography/local-authorities/bristol/">find data by location</a> journey that we're working on. I think I do some of my best work in 'Coach A' (the quiet carriage on the Great Western Railway between Swansea and Paddington).</p>
<h2>Thursday</h2>
<h3>Moaning</h3>
<p>On Thursday I turned up late. I needed a lie in after getting back late from London. Then I had a day of meetings and catch-ups. The biggest one was out monthly managers meeting in Digital Publishing. I really enjoy the retrospective we have in that group. But I think I may have moaned too much about emails, workflow pressures and tools. I got the impression people thought I was moaning too much.</p>
<p>It's hard to know sometimes, if something is hard because the work is hard, or whether it's hard because the work is inefficient. There's lots of inefficiencies in the civil service, but you'll wear yourself out complaining about them all.</p>
<h2>Friday</h2>
<p>I had zero meetings on Friday (apart from stand-ups). This is rare so I managed to do lots of work.</p>
<h3>Pattern audit</h3>
<p><img src="https://www.benjystanton.co.uk/images/audit.jpg" alt="Annotated print outs of the ONS website" /></p>
<p>I spent a good hour reviewing a pattern audit that our contract UX (user experience) designer had done. We're looking at all the new pages and components that I've been designing for the ONS website and making sure they are heading in the same direction.</p>
<p>I'm trying to introduce visually simpler components and larger typography, as well as more consistency with <a href="https://govuk-elements.herokuapp.com/">GOV.UK elements</a>.</p>
<h3>'Find data by location' prototype 2</h3>
<p><img src="https://www.benjystanton.co.uk/images/location-prototype.jpg" alt="A prototype website page showing Bristol city and a map" /></p>
<p>I also spent a few hours working on the 'Find data by location' prototype that I started on the train earlier in the week. After demoing it to the team, we decided that we should add in a map, a link to download some mapping data and flesh out the journey to include multiple areas (for example Manchester) and area types (for example regions or local authorities).</p>
<p>I was able to populate the pages using <a href="https://jekyllrb.com/">Jekyll</a> and a <a href="http://geoportal.statistics.gov.uk/datasets/local-authority-districts-december-2017-names-and-codes-in-the-united-kingdom">CSV file</a> that I downloaded from the ONS Geoportal. Then I installed a <a href="https://github.com/avillafiorita/jekyll-datapage_gen/">plugin</a> that allowed me to automatically generate 100s of area pages filled with realistic content. I am super proud of myself.</p>
Kicking things off with the graphic design team2018-05-30T00:00:00Zhttps://www.benjystanton.co.uk/blog/kicking-things-off-with-the-graphic-design-team/<p>I went up to GDS to talk to <a href="https://twitter.com/markhurrell">Mark</a> about how graphic design works on his team. And we chatted about what first steps I should take with the new graphic design team in ONS Digital Publishing.</p>
<figure>
<img src="https://www.benjystanton.co.uk/images/keep-britain-tidy.jpg" alt="A blue man leans down to pick up litter. Large red text says keep Britain tidy" />
<figcaption>
Keep Britain Tidy, 1963, Tom Eckersley
</figcaption>
</figure>
<h2>Make your work visible</h2>
<ul>
<li>Share patterns offline</li>
<li>Pattern libraries don't have to be code based</li>
<li>Create posters</li>
<li>Especially key things like typographic scale and colours</li>
<li>Print out work and stick it on the wall</li>
<li>Print black ink on coloured paper to add colour (but keep costs down)</li>
<li>Cover the environment in "good design"</li>
<li>Graphic design and data visualisations might need a more extensive pattern library that is difficult to maintain – that's okay</li>
<li>Maybe we do need <a href="http://onsdigital.github.io/ons-pattern-library-starter/colour/#greys">50 shades of grey</a>?</li>
</ul>
<h2>British public service design</h2>
<ul>
<li>British public service design has a strong history of great graphic design</li>
<li>Look at designers like <a href="https://en.wikipedia.org/wiki/Tom_Eckersley">Tom Eckersley</a></li>
<li>ONS is in a position to create some great information and editorial design</li>
</ul>
<h2>Zoom out</h2>
<ul>
<li>Step back and look at your work</li>
<li>Does it work at a distance?</li>
<li>Does it work at a angle?</li>
<li>Does it work on smaller screens?</li>
<li>Graphic design needs to be strong enough that the hierarchy still works under pressure</li>
</ul>
How to start a service design community2018-05-30T00:00:00Zhttps://www.benjystanton.co.uk/blog/how-to-start-a-service-design-community/<p>Here are my notes from today’s cross-gov service design call. Thanks to <a href="https://twitter.com/martin_jordan">Martin</a> for inviting me along and letting me ask lots of questions.</p>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Today, we ran the first cross-gov service design peer support call – with folks from DWP, HMCTS, Home Office, NHS, and ONS. Great questions and discussions! <br /><br />We’ll do another one in a month from now. <a href="https://t.co/EaaLPEfDX2">pic.twitter.com/EaaLPEfDX2</a></p>— Martin Jordan 🌈 (@Martin_Jordan) <a href="https://twitter.com/Martin_Jordan/status/1001824939496869888?ref_src=twsrc%5Etfw">May 30, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<h2>How to start a service design community</h2>
<p><a href="https://twitter.com/mariecheungsays">Marie</a> and <a href="https://twitter.com/tsmz">Tom</a> at DWP gave some tips on how to grow your own service design community. Warning: this will create demand for service design.</p>
<ul>
<li>Extend the invite beyond user-centred design roles</li>
<li>Include policy makers, business architects and business analysts</li>
<li>Find allies to help</li>
<li>Try an "intro to service design" workshop</li>
<li>Start lunch time meet-ups</li>
<li>Start user-centred design show and tells (designers, researchers, performance analysts)</li>
<li>Allow people to join remotely, use quick and easy tools like Google Meet</li>
<li>Spread the word using offline channels too (for example; posters in the kitchen)</li>
</ul>
<p>Marie has written about <a href="https://dwpdigital.blog.gov.uk/2018/05/01/building-up-our-service-design-community/">building up the service design community</a> in DWP.</p>
<h2>Why to start doing service design</h2>
<p>Sanjay talked about how the <a href="https://www.gov.uk/service-manual/service-standard">digital service standard</a> is changing to become the <a href="https://gds.blog.gov.uk/2018/03/07/what-we-need-to-do-to-support-end-to-end-services-across-government/">service standard</a>.</p>
<blockquote>
<p>service designers help organisations <a href="https://gds.blog.gov.uk/2016/04/18/what-we-mean-by-service-design/">design services</a> that work end-to-end, front to back and across every channel</p>
</blockquote>
<h2>How to do service design</h2>
<p>The hard bit. You need service designers. But it's not just work for one person. Everyone helps to design services. Try to structure the whole organisation around users. A key theme that keeps coming up when I talk to people about design recently is:</p>
<blockquote>
<p>zoom in and zoom out – you need to consider the details and the big picture.</p>
</blockquote>
<h2>Next steps</h2>
<ul>
<li>Go to a service design conference (like <a href="http://serviceexperiencecamp.de/">Service
Experience
Camp</a>)</li>
<li>Create a business case to hire service designers (in the open)</li>
<li>Go to the next cross-gov service design meet-up (maybe host it in South Wales)</li>
</ul>
Weeknotes – series 01 episode 042018-05-26T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-01-episode-04/<p>This week, we got a new graphic designer and a new user experience designer. Ryan Dunn popped in too.</p>
<h2>Monday</h2>
<h3>Lead graphic designer starts</h3>
<p>Monday was <a href="https://twitter.com/NationJoseph">Joe</a>'s first day. Joe's the lead graphic designer in the digital content team. It's great to finally complete the graphic design team, hiring them has been my main focus for the past few months.</p>
<h2>Tuesday</h2>
<p>Tuesday was my usual non-work day, to look after the kids.</p>
<h2>Wednesday</h2>
<h3>Contract user experience (UX) designer starts</h3>
<p>Another new starter this week. We've hired a temporary UX designer to help while we hire a permanent replacement. Did I mention we're <a href="https://www.civilservicejobs.service.gov.uk/csr/jobs.cgi?jcode=1581727">hiring a UX designer</a>?</p>
<h3>End of sprint 24</h3>
<p>Wednesday was a good day for the new starters as we had our fortnightly show and tell, covering <a href="https://onsdigital.github.io/dp-prototypes/#sprint-24">things we'd done to improve the ONS website</a>.</p>
<h3>Publish a dataset prototype</h3>
<p>My main focus has been working on the '<a href="http://www.benjystanton.co.uk/dp-prototype-kit/sprint/24/publish-a-dataset/">publish a dataset</a>' prototype. The next step is to test the second iteration with the publishing team, to see if we've solved some of the problems we found last time.</p>
<h2>Thursday</h2>
<h3>Ryan Dunn pops in</h3>
<p><img src="https://www.benjystanton.co.uk/images/data-design-community-idea.jpg" alt="Post its with that say things like GDS, data design principles and user needs" /></p>
<p><a href="https://twitter.com/drryandunn">Ryan from DWP</a> visited on Thursday. At lunch time, he demo'd some of the things he's been working on, like <a href="https://dwpdigital.blog.gov.uk/2017/02/24/data-for-people-who-dont-like-data/">Churchill</a>. And afterwards we had a chat about starting a cross-gov data design community. <a href="https://twitter.com/benjystanton">Let me know if you're up for joining that</a>.</p>
<h3>Bulletin design workshop</h3>
<p><img src="https://www.benjystanton.co.uk/images/bulletin-workshop-plan.jpg" alt="Our plan for the bulletin workshop" /></p>
<p>We also had an all-day workshop to continue the <a href="https://digitalblog.ons.gov.uk/2018/05/17/making-better-bulletins-lets-start-with-what-we-know/">bulletin</a> work we'd started in the design sprint a few weeks ago. We wanted to get together and <a href="http://www.benjystanton.co.uk/dp-prototype-kit/sprint/25/crime-overview/">iterate on the prototype</a>, following the first round of user research.</p>
<p>It was great to get product manager, UX design, content design, graphic design and editorial back together, working on the prototype at the same time. We also managed to book the <a href="https://twitter.com/darrenwaters/status/999683035489554432">best room in the house</a>.</p>
<h2>Friday</h2>
<h3>Catch-up with Joe</h3>
<p>On Friday morning I had a quick catch-up with Joe after his first week. I'm excited to work with him and <a href="https://twitter.com/mrandybudd">Andy</a> to start taking control of the design workflow and plan out the things we want to achieve now we have a full team.</p>
<h3>UX designer promotions</h3>
<p>We also had a meeting to discuss promotion opportunities for the UX designers. The plan is to get UX design signed up to the 'variable grade' thing so that we can promote people when they reach the next level in experience and skill.</p>
<p>This will help us to reward good people, and hang on to them for longer.</p>
May 2018 bookmarks2018-05-25T00:00:00Zhttps://www.benjystanton.co.uk/blog/may-2018-links/<dl>
<dt><a href="https://digitalblog.coop.co.uk/2018/05/02/introducing-our-user-research-principles/">Introducing our user research principles</a></dt>
<dd>Our user research community of practice has been thinking about how we should approach our work. We decided to produce a set of principles that we believe underpin our purpose and our ways of working.</dd>
<dt><a href="http://www.craigabbott.co.uk/designing-the-impossible-makes-it-possible">Designing the impossible makes it possible</a></dt>
<dd>As an interaction designer, I hear a sentence at least once on every project I work on. "We can't do that because [insert mediocre excuse here]." A lot of the time this is because of technology restrictions. We can't integrate with legacy systems.</dd>
<dt><a href="https://markboulton.co.uk/journal/the-fast-and-slow-of-design">The Fast and Slow of Design</a></dt>
<dd>Move fast, break things. Fail forward. Fail fast. Always be shipping. These idioms are all around us in the tech industry. Establishing themselves in small, garage-band startups, they are now deeply entrenched in working cultures of even the most traditional publicly listed companies.</dd>
<dt><a href="https://ethanmarcotte.com/wrote/whats-in-a-pattern-name/">What's in a pattern name?</a></dt>
<dd>Some time ago, I worked with a large client, helping them to catalog their existing design patterns, and to understand how they could establish a broader design system.</dd>
<dt><a href="https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html/">Where Lines Break is Complicated. Here's all the Related CSS and HTML.</a></dt>
<dd>Say you have a really long word within some text inside an element that isn't wide enough to hold it. A common cause of that is a long URL finding it's way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do.</dd>
<dt><a href="https://blog.marvelapp.com/the-veil-of-ignorance/">The Veil of Ignorance</a></dt>
<dd>You are in your mid-twenties and your vision is 20/20 or better. You are not color blind and all the devices you own have a retina screen. You are standing in a major city and your internet is fast. Your vision isn't 20/20 anymore, just like 65% of the population, it's worse than that.</dd>
<dt><a href="https://medium.com/mule-design/design-sprints-are-snake-oil-fd6f8e385a27">Design Sprints Are Snake Oil</a></dt>
<dd>Design sprints are snake oil, and I'll tell you why. Their creator, Jake Knapp, (formerly) a designer with Google Ventures, promises fast, tangible results for virtually any problem of any size, in any organization.</dd>
<dt><a href="https://accessibility.blog.gov.uk/2018/05/15/what-we-learned-from-getting-our-autocomplete-tested-for-accessibility/">What we learned from getting our autocomplete tested for accessibility</a></dt>
<dd>We've been working on an autocomplete/location picker for use across government. I blogged last year about what an autocomplete is and why we are building one. While we were building it, we had our autocomplete/location picker tested for accessibility.</dd>
<dt><a href="https://larahogan.me/meeting-facilitation/">Facilitating Awesome Meetings</a></dt>
<dd>Meeting facilitation is a critical leadership skill that's often overlooked. Excellent meeting facilitation means that the attendees know why they're there, they get equal participation time, and your meeting's goal or deliverable is achieved in a timely and productive way.</dd>
<dt><a href="https://digitalblog.ons.gov.uk/2018/05/14/how-were-using-data-dashboards-for-content-design-at-ons/">How we're using data dashboards for content design at ONS</a></dt>
<dd>This is the final post in our short series on using data for content design at ONS. My first blog looked at why we're taking this approach, and the previous post covered the data we're using and how we're presenting it using dashboards.</dd>
<dt><a href="https://designnotes.blog.gov.uk/2018/05/17/10-principles-for-service-patterns/">10 principles for service patterns</a></dt>
<dd>Design patterns are reusable solutions for common problems. In government at the moment there are a number of interaction and content design patterns that are used by service teams across departments.</dd>
<dt><a href="http://lea.verou.me/2018/05/responsive-tables-revisited/">Responsive tables, revisited</a></dt>
<dd>Many people have explored responsive tables. The usual idea is turning the table into key-value pairs so that cells become rows and there are only 2 columns total, which fit in any screen. However, this means table headers need to now be repeated for every row. The current ways to do that are:</dd>
<dt><a href="http://www.defra.net/home/a-guide-to-agile-communication">A guide to agile communication</a></dt>
<dd>The government service standard encourages teams to work in the open as much as possible, echoing item 10 in the government design principles, 'make things open, it makes them better'. This short guide was written to help teams do just that.</dd>
<dt><a href="https://www.gov.uk/service-manual/technology/how-to-test-frontend-performance">How to test frontend performance</a></dt>
<dd>Websites that perform badly can frustrate users and drain their data plans and battery life. You can address this by making sure your service frontend is as fast and lightweight as possible. This will also mean your service works well on a range of devices.</dd>
<dt><a href="https://medium.com/@Elijah_Meeks/what-charts-do-48ed96f70a74">What charts do</a></dt>
<dd>The most important thing about a chart is not its aesthetics, the technology used to create it, the kind of data visualization layout or even the data it represents. The most important thing about a chart is its impact. Impact is what a chart does.</dd>
<dt><a href="https://medium.com/confrere/automatically-creating-an-accessible-color-palette-from-any-color-sure-e735c3f2f45e">Automatically creating an accessible color palette from any color? Sure!</a></dt>
<dd>The natural way to let users configure their Confrere, so it looks more like their own brand, is to let them pick their own brand color. To have buttons, links and so on in the brand color seems like a no-brainer. But it's easier said than done.</dd>
<dt><a href="https://wearecitizensadvice.org.uk/why-were-removing-the-most-visited-advice-page-on-our-website-d1664076dd56">Why we removed the most visited advice page on our website</a></dt>
<dd>Using data to investigate how people use content can challenge our assumptions in surprising ways. We've recently decided to remove Basic rights at work, the most visited advice page on our website.</dd>
<dt><a href="https://designnotes.blog.gov.uk/2018/05/23/how-i-used-wget-to-make-a-copy-of-the-service-manual-for-user-research/">How I used Wget to make a copy of the Service Manual for user research</a></dt>
<dd>Last year I made a complete copy of the Service Manual for some user research. One of my teams was planning some research to test some new content for the Service Manual with users.</dd>
<dt><a href="https://medium.com/researchops-community/whatisresearchops-a-starting-point-aa7174eb9759">#WhatisResearchOps? A starting point</a></dt>
<dd>Next week, the first #WhatisResearchOps global workshops kick off. Are you attending one or would you like to? You can find out more in Kate’s post here.</dd>
<dt><a href="https://medium.com/design-ibm/card-sorting-a-powerful-simple-research-method-9d1566be9b62">Card sorting: a powerful, simple research method</a></dt>
<dd>As someone who studied Information Science, I’ve always been drawn to grouping and categorizing things. Imagine my glee when I first learned there was a UX research method that was all about grouping and categorizing.</dd>
<dt><a href="https://uxplanet.org/search-interface-20-things-to-consider-4b1466e98881">Search interface: 20 things to consider</a></dt>
<dd>What questions to ask users? What to consider while prototyping? And what are the best practices in search interface design? Depending on the project, search may be one of the most complex features.</dd>
<dt><a href="https://blog.ldodds.com/2018/05/29/observations-on-the-web/">Observations on the web</a></dt>
<dd>About seven years ago I was invited to a workshop. The Office for National Statistics were gathering together people from the statistics and linked data communities to talk about publishing statistics on the web.</dd>
<dt><a href="https://wearecitizensadvice.org.uk/to-take-the-next-step-on-digital-we-dropped-the-word-digital-14b09ec2f25f">To take the next step on digital, we dropped the word ‘digital’</a></dt>
<dd>Last year, Citizens Advice helped over 2.6 million people directly and our digital advice had 41 million hits.</dd>
<dt><a href="https://medium.com/@leemunroe/enterprise-design-stack-the-tools-we-use-to-design-the-datacenter-operating-system-6865ed73ff04">Enterprise Design Stack: The Tools We Use To Design The Datacenter Operating System</a></dt>
<dd>I love reading about how other Design teams are working together and what tools they’re using. It’s reassuring to know teams you admire and respect use the same tools you do.</dd>
<dt><a href="https://developer.paciellogroup.com/blog/2013/11/short-note-aria-dragon-accessibility/">Short Note on ARIA, Dragon and Standards</a></dt>
<dd>There has been ongoing discussion, mainly on twitter, about Dragon naturally speaking, ARIA and Accessibility APIs. A recent tweet informs these notes. #dragon doesn’t support #aria & according to @ewaccess, it probably never will. It’s definitely an AT solution nonetheless. #a11yCampTO</dd>
</dl>Service walkthrough2018-05-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/service-walkthrough/<p>Service walkthroughs are a service design tool. Observe a service by going through the stages of the user journey.</p>
<h2>How to use service walkthroughs…</h2>
<ul>
<li>facilitator creates and acts out a scenario</li>
<li>participant pretends to be a user</li>
<li>walkthrough each touchpoint</li>
<li>put equal emphasis on digital and human interactions</li>
</ul>
<h2>Use service walkthroughs to find out…</h2>
<ul>
<li>key touch points of the service</li>
<li>gaps in the end-to-end journey</li>
<li>how users become aware of a service</li>
</ul>
Weeknotes – series 01 episode 032018-05-18T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-01-episode-03/<p>Featuring service design, accessible maths symbols and pizza. If you only read one bit, read the bit on <a href="https://www.benjystanton.co.uk/blog/weeknotes-series-01-episode-03/#service-design-training">service design training</a>.</p>
<h2>Monday</h2>
<h3>Review user research</h3>
<p>We got together after morning stand-up to review the user research findings from <a href="https://twitter.com/AldaviesAlison">Alison</a>'s recent trips. It's always a popular slot, but it was good to involve people from the editorial team and graphic design team. (Breaking down silos!)</p>
<h3>Future of research and design</h3>
<p>The lead user-centred design people met with <a href="https://twitter.com/SamHallWales">Sam</a> in her new role as Chief Digital Officer to talk about plans for the future of our teams. It was good to see Sam is open to new ideas but also pushing back on us to gather evidence for the changes we want to make.</p>
<h3>Stickers!</h3>
<p><img src="https://www.benjystanton.co.uk/images/coop-sticker.jpg" alt="sticker that reads: we design for everyone" /></p>
<p><a href="https://twitter.com/mr_dudders">Andy</a> brought back <a href="http://coop-design-manual.herokuapp.com/principles.html">co-op design principle</a> stickers from his conference in Manchester.</p>
<h3>Hiring a user experience designer</h3>
<p>The advert to <a href="https://www.civilservicejobs.service.gov.uk/csr/jobs.cgi?jcode=1581727">hire a user experience designer</a> to replace Tom went live! No-one can replace Tom obviously – but we have to try.</p>
<h2>Tuesday</h2>
<h3>Design sprint next steps</h3>
<p>We got together to chat about next steps for the bulletin prototype. We're planning a one day workshop to create iteration 3 of the prototype ready for the next round of usability testing. It should contain more realistic content thanks to the work of <a href="https://twitter.com/kieran_forde">Kieran</a> and a more flexible "at a glance" section at the top thanks to <a href="https://twitter.com/RachelPricetag">Rachel</a>.</p>
<h3>User experience design lead catch-up</h3>
<p>Me and <a href="https://twitter.com/wiredimage">Ben</a> chatted about whether we'll use <a href="https://fractal.build/">Fractal</a> for the next iteration of the pattern library or not. Hint: probably will.</p>
<h3>Prototypin’</h3>
<p>I spent most of the day doing some prototyping for the "publish a dataset" task that our publishing team will be using. The exercise was useful, but made me realise I had to take a step back and understand user needs and technical processes in more detail.</p>
<h2>Wednesday</h2>
<h3>Cross site working</h3>
<p>Wednesday I had a couple of meetings with the Census team based in Titchfield. We need to figure out how the designers there can work with the team here in Newport and support each other with consistency, accessibility and ways of working.</p>
<h3>Accessible maths symbols</h3>
<p>I had a quick meeting with the website publishing team to check if we can add minuses (not hyphens) to website content (we can). Using a minus is supported by the <a href="https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#maths-content">GDS content style</a> guide.</p>
<p>It's more likely than a hyphen to be read out as "minus" by screen readers. It's wider so it might be easier to read (hypothesis). The drawback is it's more difficult to type and will require manual checking. Seems like a lot of effort, but if anyone should be getting maths symbols right it should be us.</p>
<p>Related: we noticed that our equations are inserted as outlined SVG shapes, so they are effectively invisible to assistive technology.</p>
<pre><code><g role="img" aria-labelledby="title">
<title id="title">FISML=(r−Rt)SL</title>
...
</g>
</code></pre>
<p>But this is just a proof of concept and doesn't consider how we'd turn this into a functioning tool that could be used by the publishing team.</p>
<h2>Thursday</h2>
<p>Thursday was a loooong day. I got the train in because I needed to get the train straight to London after work.</p>
<h3>Interactive calculators pattern library</h3>
<p>Me and <a href="https://twitter.com/mathew_weeks">Matt</a> got together in the morning to review progress he's made mocking up the pattern library for our interactive calculators. This should lead to more consistent, usable and accessible content for our website and I'm really excited by the progress being made.</p>
<h3>Design review</h3>
<p>We had our regular design review (my fav meeting of the week). <a href="https://twitter.com/Carlie_Edge">Carlie</a> showed this neat data viz thing that Go Compare have made called <a href="http://www.gocompare.com/life-insurance/you-and-planet-earth/">You and planet earth</a>.</p>
<h3>Front-end dev and user experience (UX) design reviews</h3>
<p>We decided to introduce twice weekly slots for the front-end devs to get together with ux designers to review work-in-progress. This will help us to have more opportunities to chat and also reduce the distraction of ad-hoc meetings that break us out of our workflow.</p>
<p>This is in addition to the regular demo slots we have after morning stand-up and sprint show and tells.</p>
<h3>Card sorting with the publishing team</h3>
<p><img src="https://www.benjystanton.co.uk/images/card-sorting.jpg" alt="index cards randomly arranged on a table, ready to be sorted" /></p>
<p>We did a card-sorting exercise to help us figure out how to:</p>
<ol>
<li>help the publishing team find pieces of content</li>
<li>prioritise the elements on the page</li>
<li>name the pages and sections</li>
</ol>
<h3>London</h3>
<p><img src="https://www.benjystanton.co.uk/images/pizza-union.jpg" alt="a pizza with an egg and spinach topping" /></p>
<p>After work I went straight to Newport station and caught the train to London ready for my training on Friday. Went for a lovely dinner in Pizza Union thanks to <a href="https://twitter.com/tomten2two">Tom</a>'s recommendation.</p>
<h2>Friday</h2>
<h3>Service design training</h3>
<p><img src="https://www.benjystanton.co.uk/images/service-design.jpg" alt="service design is end-to-end, front-to-back and cross-channel" /></p>
<p>I was in London for my 'intro to <a href="https://gds.blog.gov.uk/2016/04/18/what-we-mean-by-service-design/">service design</a> training' at GDS with <a href="https://twitter.com/claragt">Clara</a> and <a href="https://twitter.com/Martin_Jordan">Martin</a>. It was really, really good.</p>
<p>The key takeaways were:</p>
<ul>
<li>service design tools are easy to pick-up (like this one: <a href="https://twitter.com/benjystanton/status/997486239451316225">service walkthroughs</a>)</li>
<li>you don't have to be an expert to start doing it</li>
<li>service design helps you to ask 'why?'</li>
<li>service design helps us to rephrase problem statements so we're meeting user needs</li>
<li>design the end-to-end process (and think about what happens before and after the service)</li>
<li>design the things the user can't see (not just the front-end touch-points)</li>
<li>design across channel (digital, face-to-face, phone, letter, email)</li>
<li>service design is great for facilitating discussions and creating shared understanding with stakeholders</li>
<li>service design can help you make sure you are building the right thing</li>
</ul>
<p>You can <a href="https://twitter.com/Martin_Jordan/status/997427134258909184">see me being trained in the art of service design</a> in this tweet.</p>
Hiring a user experience (UX) designer at ONS2018-05-14T00:00:00Zhttps://www.benjystanton.co.uk/blog/hiring-ux-designer-ons/<ul>
<li>Closing date: 11 Jun 2018</li>
<li>Salary: £28,450 to £33,249</li>
<li>Location: Newport</li>
</ul>
<!-- ## Applying for the post
You CV and suitability statement together should show that you have the right experience and skills and that you meet the competencies.
> Your CV should cover details of education, professional qualifications, employment history, as well as giving details of relevant experience.
> Your suitability statement should contain details explaining why this post interests you and how you meet the criteria as detailed in the vacancy description. Your statement should detail skills, talents, experiences and your suitability for the role, giving evidence of examples of experience to the specialist skills listed in the role profile attached.
> Successful candidates will need to demonstrate broad competencies providing clear examples in their statement of suitability
You have to meet all competencies when you apply, and at the interview. [Read this if you are unfamiliar with competencies](https://www.gov.uk/government/publications/civil-service-competency-framework).
-->
<h2>Working at ONS</h2>
<p>To learn what it's like to work at ONS, check out our <a href="https://digitalblog.ons.gov.uk/">Digital Blog</a> or you can read some of my <a href="https://www.benjystanton.co.uk/blog/category/ons/">ONS posts</a> and <a href="https://www.benjystanton.co.uk/blog/category/weeknotes/">weeknotes</a>.</p>
<p>Or, feel free to <a href="https://twitter.com/benjystanton">ask me on Twitter</a>.</p>
Weeknotes – series 01 episode 022018-05-12T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-01-episode-02/<p><img src="https://www.benjystanton.co.uk/images/sisters-beach.jpg" alt="2 girls standing together, looking down at the beach on a sunny day" /></p>
<p>It was the super hot bank holiday weekend – so I was down the beach with the family, along with most of the country. Related: <a href="https://twitter.com/awen_j/status/994220526171312128">Awen</a> noticed that Saturday 5th May had the lowest number of sessions on the ONS website since Boxing Day 2017.</p>
<h2>Monday & Tuesday</h2>
<p>Days off. <span role="img" aria-label=""></span></p>
<!-- Accessible emojis, inspired by https://tink.uk/accessible-emoji/ -->
<h2>Wednesday</h2>
<h3>Stats New Zealand</h3>
<p>Me and <a href="https://twitter.com/rachelpricetag">Rachel</a> started the day early by chatting to Blair and Arna from the <a href="https://www.stats.govt.nz/">Stats.NZ website</a>. 8am for us was 6pm for them I think. It was reassuring to hear their research and findings were inline with what we learn from users of the ONS website. They're also doing some great work to measure and learn how well individual releases are doing, so they can benchmark their performance.</p>
<h3>Show and tell</h3>
<p>We had the show and tell for <a href="https://onsdigital.github.io/dp-prototypes/#sprint-23">sprint 23</a>. Everyone was excited by <a href="https://twitter.com/robchamberspfc/status/992301199155085312">observation level endpoints</a> being added to the API for some reason. More importantly I showed the <a href="https://onsdigital.github.io/dp-design-manual/sprint/23/bulletin/">prototype</a> we made during the recent design sprint.</p>
<h3>Culture and service design</h3>
<p><a href="https://twitter.com/reinikainen">Esko</a> and <a href="https://twitter.com/likeaword">Ben</a> popped in to give a <a href="https://twitter.com/mr_dudders/status/993832910435299330">lunch time talk</a> about service design and culture. I really liked what Ben said about culture...</p>
<blockquote>
<p>"culture is: what is okay here and what is not okay"</p>
</blockquote>
<p>… it reminded me of the <a href="https://gds.blog.gov.uk/2016/05/25/its-ok-to-say-whats-ok/">GDS it's okay to poster</a>.</p>
<h2>Thursday</h2>
<h3>Usability testing</h3>
<p>On Thursday I went to Birmingham with <a href="https://twitter.com/AldaviesAlison">Al</a> to observe some user research sessions. We did the first round of usability testing on the new bulletin prototype and I even managed to create a <a href="https://onsdigital.github.io/dp-design-manual/sprint/24/bulletin/">second iteration</a> whilst I was up there fixing some of the obvious issues (like missing links).</p>
<h3>Prototyping on the train</h3>
<p>Whilst on the train back I began to split the <a href="https://github.com/benjystanton/dp-prototype-kit">ONS website prototype kit</a> out of the <a href="https://github.com/ONSdigital/dp-design-manual">design manual</a> repo. It no longer makes sense to keep them together and having them separate should make it easier to update both.</p>
<h2>Friday</h2>
<h3>Hiring a user experience designer</h3>
<p>The <a href="https://www.civilservicejobs.service.gov.uk/csr/jobs.cgi?jcode=1581727">job ad went live</a> on Friday to replace <a href="https://twitter.com/tomten2two">Tom</a>. I'm pretty pleased with the job description:</p>
<blockquote>
<p>"As a user experience designer in the Digital Publishing department, you’ll help us to improve the usability, interaction and accessibility of the ONS website and the content management systems that the publishing team use. You’ll help our users to find, understand and use our content. You’ll work with the design community across ONS to create a consistent design system that meets user needs. You’ll love the web and working in the open."</p>
</blockquote>
<h3>Future of research and design at ONS</h3>
<p>Then, just a little 3 hour meeting to round the week off. Me and the user-centred design leads at ONS got together to talk about future plans for our teams. More news on that soon.</p>
Weeknotes – series 01 episode 012018-05-05T00:00:00Zhttps://www.benjystanton.co.uk/blog/weeknotes-series-01-episode-01/<p>My first ever weeknotes! Thanks to <a href="https://twitter.com/dasbarrett">Dan Barret</a> for finally pushing me over the edge and convincing me to start. This <a href="https://weeknot.es/what-on-earth-are-weeknotes-a81874c5cef9">intro to weeknotes</a> by <a href="https://twitter.com/JennyVass">Jenny Vas</a> helped too.</p>
<h2>Monday</h2>
<p>I was off on Monday to look after the kids. I needed a 3 day weekend to recover from the <a href="https://twitter.com/i/moments/990913328003338241">Design Sprint</a> and <a href="https://twitter.com/tomten2two">Tom's</a> leaving do.</p>
<h2>Tuesday</h2>
<p>Tuesday I was busy catching up with all the emails I'd ignored last week. The most important was reviewing CVs for contract user experience designers to replace Tom while we hire a permanent replacement.</p>
<p>I also had to fill out the recruitment template on SharePoint for the permanent replacement. I think SharePoint is terrible and I predict that moaning about it will be a recurring theme in my weeknotes.</p>
<p><a href="https://twitter.com/Carlie_Edge">Carlie</a> also showed us the <a href="https://www.nationaltrust.org.uk/tredegar-house/features/brewhouse-tearooms">National Trust tea rooms</a> which are just a 15 minute walk from the office. There is a lovely coartyard too which feels a million miles away from the lovingly named 'Government Buildings', where ONS is based.</p>
<p>I started doing 1-to-1s with some of the new designers (<a href="https://twitter.com/mrandybudd">Andy</a> and <a href="https://twitter.com/mathew_weeks">Matt</a>). They seem to be doing really well and I'm impressed with their progress despite me being too busy to really help them out much.</p>
<p>Lastly on Tuesday we had a chat about how to improve the maps we publish on the ONS website. There were some difficult conversations about how we balance rich interactive content with accessibility and progressive enhancement.</p>
<h2>Wednesday</h2>
<p>I was meant to be going to the <a href="http://digitalaccessibilitycentre.org/">Digital Accessibility Centre</a> in Neath to observe them auditing the "filter a dataset" part of <a href="https://digitalblog.ons.gov.uk/2018/01/15/customise-my-data-public-beta/">Customise My Data</a>. But, I caught a stomach bug off the kids so I couldn't go.</p>
<h2>Thursday</h2>
<p>I was off again on Thursday to look after the kids, but managed to do some prepping for the contractor interviews during nap time.</p>
<h2>Friday</h2>
<p>We (the designers in digital publishing) held a second design review/critique session because I'd missed the usual Thursday slot.</p>
<p>Matt has started mocking up design patterns for the interactive content that we publish on the website, so we can begin to formalise the designs and be more consistent across releases.</p>
<p>Andy and <a href="https://twitter.com/designergrace">Grace</a> have started working on the UKSA Annual Report – it's shaping up nicely after just one week. I showed the new <a href="https://onsdigital.github.io/dp-design-manual/sprint/23/bulletin/">bulletin</a> prototype.</p>
<p>I was a bit late leaving work, but managed to catch an interview with with <a href="https://twitter.com/MonaChalabi">Mona Chalabi</a> on <a href="https://www.bbc.co.uk/programmes/b0b0xll3">Radio 4's More or Less</a> programme. It's worth a listen if you're interested in Data Journalism.</p>
April 2018 bookmarks2018-04-30T00:00:00Zhttps://www.benjystanton.co.uk/blog/april-2018-links/<dl>
<dt><a href="https://medium.com/@drryandunn/dash-bored-f0c460a240e6">Dash-bored</a></dt>
<dd></dd>
<dt><a href="https://medium.muz.li/design-docs-6bb34589f7a9">Designing Better Design Documentation</a></dt>
<dd></dd>
<dt><a href="https://abookapart.com/products/going-offline">Going Offline</a></dt>
<dd></dd>
<dt><a href="https://speakerdeck.com/jensimmons/everything-about-web-design-just-changed">Everything About Web Design Just Changed</a></dt>
<dd></dd>
<dt><a href="http://bradfrost.com/blog/post/creating-themeable-design-systems/">Creating Themeable Design Systems</a></dt>
<dd></dd>
<dt><a href="https://gds.blog.gov.uk/2018/04/04/what-do-we-mean-when-we-talk-about-services/">What do we mean when we talk about services?</a></dt>
<dd></dd>
<dt><a href="https://daverupert.com/2018/04/pitfalls-of-card-uis/">Pitfalls of Card UIs</a></dt>
<dd></dd>
<dt><a href="https://medium.com/sketch-app-sources/smarter-tables-with-sketch-paddy-3214f6594611">Smarter Tables with Sketch + Paddy</a></dt>
<dd></dd>
<dt><a href="https://dwpdigital.blog.gov.uk/2018/03/27/using-a-design-challenge-to-bring-policy-and-design-closer-together/">Using a design challenge to bring policy and design closer together</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@BenHolliday/the-strange-becoming-familiar-218df65c9a4c">The strange becoming familiar</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@acuity_design/the-problem-of-looks-good-inclusive-design-741022b4ac44">The problem of ‘Looks good’ inclusive design</a></dt>
<dd></dd>
<dt><a href="https://www.aaron-gustafson.com/notebook/enabling-webmentions-in-jekyll/">Enabling Webmentions in Jekyll</a></dt>
<dd></dd>
<dt><a href="http://uxmovement.com/content/how-you-can-aid-user-scanning-with-eyebrow-headlines/">How You Can Aid User Scanning with Eyebrow Headlines</a></dt>
<dd></dd>
<dt><a href="https://neiltamplin.me/why-work-out-loud-a432de7b6883">Why Work Out Loud?</a></dt>
<dd></dd>
<dt><a href="https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications">Introducing Second: a framework for mostly-static React applications</a></dt>
<dd></dd>
<dt><a href="https://aneventapart.com/news/post/resilience-building-a-robust-web-that-lasts-jeremy-keith-an-event-apart">Resilience: Building a Robust Web That Lasts by Jeremy Keith—An Event Apart video</a></dt>
<dd></dd>
<dt><a href="https://medium.com/dsconf/takeaways-from-the-dsconf-part-1-2-90730393ee3d">Takeaways from the DSConf (part 1/2)</a></dt>
<dd></dd>
<dt><a href="http://datavizproject.com/">Data Viz Project | Collection of data visualizations to get inspired and finding the right type.</a></dt>
<dd></dd>
<dt><a href="http://www.purple.pm/">Project boards that build team harmony ?</a></dt>
<dd></dd>
<dt><a href="https://pinthemall.net/pin/561cdc9481edb/">It's Nice That | An insight into The Guardian’s newly released brand guidelines #branding</a></dt>
<dd></dd>
<dt><a href="https://www.nngroup.com/articles/scrolling-and-attention/">Scrolling and Attention</a></dt>
<dd></dd>
<dt><a href="https://www.youtube.com/watch?v=O_OJfY4Jax4&amp=&t=0s&amp=&index=11">Common ways we break accessibility and how to avoid them - Laura Carvajal | Render Conf 2018</a></dt>
<dd></dd>
<dt><a href="https://www.youtube.com/watch?v=ZqoqBfwULbQ&amp=&t=0s&amp=&index=13">Data Sketches | A year of exotic data visualizations - Nadieh Bremer | Render Conf 2018</a></dt>
<dd></dd>
<dt><a href="https://standards.theodi.org/useful-tools/how-to-use-the-open-standards-for-data-canvas/">How to use the open standards for data canvas</a></dt>
<dd></dd>
<dt><a href="https://www.spectacleapp.com/">If you enjoy Spectacle please consider donating</a></dt>
<dd></dd>
<dt><a href="https://hackernoon.com/we-cant-do-that-in-one-sprint-a6780d67480">We Can’t Do That In One Sprint</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3">Managing Heading Levels In Design Systems</a></dt>
<dd></dd>
<dt><a href="https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations">Scroll to the future</a></dt>
<dd></dd>
<dt><a href="https://www.interaction-design.org/literature/article/empathy-map-why-and-how-to-use-it">Empathy Map – Why and How to Use It</a></dt>
<dd></dd>
<dt><a href="https://alistapart.com/article/the-core-model-designing-inside-out-for-better-results">The Core Model: Designing Inside Out for Better Results</a></dt>
<dd></dd>
<dt><a href="https://articles.uie.com/users-dont-hate-change-they-hate-our-design-choices/">Users don’t hate change. They hate our design choices.</a></dt>
<dd></dd>
<dt><a href="https://pds.blog.parliament.uk/2018/04/23/a-new-typeface-for-parliament/">A new typeface for Parliament</a></dt>
<dd></dd>
<dt><a href="https://medium.com/leading-service-design/comparing-service-design-and-business-analysis-aed52d8ea8fb">Comparing service design and business analysis</a></dt>
<dd></dd>
<dt><a href="http://alistapart.com/article/the-illusion-of-control-in-web-design">The Illusion of Control in Web Design</a></dt>
<dd></dd>
<dt><a href="https://v-fonts.com/">Variable Fonts (beta)</a></dt>
<dd></dd>
<dt><a href="http://shortcuts.design/">Shortcuts.design</a></dt>
<dd></dd>
<dt><a href="https://articles.uie.com/despicable-design-when-going-evil-is-the-perfect-technique/">Despicable Design – When “Going Evil” is the Perfect Technique</a></dt>
<dd></dd>
<dt><a href="https://gds.blog.gov.uk/2018/04/30/consultation-launch-accessibility-of-public-sector-websites-and-apps/">Consultation launch: accessibility of public sector websites and apps</a></dt>
<dd></dd>
</dl>
March 2018 bookmarks2018-03-25T00:00:00Zhttps://www.benjystanton.co.uk/blog/march-2018-links/<dl>
<dt><a href="https://medium.com/@warrenof/understanding-policy-better-5139512c6770">Understanding Policy Better</a></dt>
<dd></dd>
<dt><a href="https://gilest.org/blogging-stickers.html">Strategic thinking with blog posts and stickers Cheap, quick, better than strategy documents</a></dt>
<dd></dd>
<dt><a href="https://drive.google.com/drive/folders/1grX-dKcUtJi7Fknn-tFysR546_u3M2Ty?usp=sharing">Digital government: reasons to be cheerful - SDInGov - Google Drive</a></dt>
<dd></dd>
<dt><a href="https://www.fs.blog/2018/01/complexity-bias/">Complexity Bias: Why We Prefer Complicated to Simple</a></dt>
<dd></dd>
<dt><a href="https://18f.gsa.gov/2018/02/06/getting-partners-on-board-with-research-findings/">Getting partners on board with research findings</a></dt>
<dd></dd>
<dt><a href="http://alistapart.com/article/diy-web-accessibility-blueprint">A DIY Web Accessibility Blueprint</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@emmaboulton/the-reseach-funnel-617b8333ad7f">The Reseach Funnel</a></dt>
<dd></dd>
<dt><a href="http://www.craigabbott.co.uk/one-page-applications-are-not-accessible">One-page-applications are not accessible</a></dt>
<dd></dd>
<dt><a href="http://5by5.tv/bigwebshow/171">The Big Web Show #171 : Art Directing the News – with ProPublica Design Director David Sleight</a></dt>
<dd></dd>
<dt><a href="https://www.smashingmagazine.com/2018/03/static-site-with-nunjucks/">Building A Static Site With Components Using Nunjucks</a></dt>
<dd></dd>
<dt><a href="https://hodigital.blog.gov.uk/2018/03/16/where-do-service-designers-fit-within-an-organisation/">Where do service designers fit within an organisation?</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@kaurisalonen/design-operations-139125b7869d">Design Operations</a></dt>
<dd></dd>
<dt><a href="https://medium.muz.li/icon-set-3b4fc87dc6b5">Hopefully, the Ultimate Guide to a Flat Icon Set</a></dt>
<dd></dd>
<dt><a href="https://viljamis.com/2018/vue-design-system/">Vue Design System</a></dt>
<dd></dd>
<dt><a href="https://medium.com/dropbox-design/how-do-you-design-a-design-doc-d7b2f1fa4a0c">How do you design a design doc?</a></dt>
<dd></dd>
<dt><a href="https://www.creativebloq.com/news/uk-parliament-shells-out-for-almost-identical-new-logo">UK Parliament shells out for almost identical new logo</a></dt>
<dd></dd>
<dt><a href="http://alexjs.com/">Alex - Catch insensitive, inconsiderate writing</a></dt>
<dd></dd>
<dt><a href="https://airbnb.design/building-a-visual-language/">Building a Visual Language</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@jchyip/why-t-shaped-people-e8706198e437">Why T-shaped people?</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@kayelesss/in-defence-of-ux-research-30e836fe0768">In defence of UX research</a></dt>
<dd></dd>
<dt><a href="https://www.fastcodesign.com/90145057/try-this-time-obsessed-designers-approach-to-to-do-lists">Try This Time-Obsessed Designer’s Approach To To-Do Lists</a></dt>
<dd></dd>
<dt><a href="https://css-tricks.com/consistent-design-systems-in-sketch-with-atomic-design-and-the-auto-layout-plugin/">Consistent Design Systems in Sketch With Atomic Design and the Auto-Layout Plugin</a></dt>
<dd></dd>
<dt><a href="https://interplayapp.com/">Design with code, without knowing how to code</a></dt>
<dd></dd>
<dt><a href="https://www.amazon.co.uk/UX-Leadership-Skills-short-people-ebook/dp/B07BHV7B69/ref=as_li_ss_tl?ie=UTF8&qid=1522059202&sr=8-1&keywords=ux+leadership+skills&linkCode=sl1&tag=nevpics-21&linkId=bfbb4c23de6334dbfef674a1f5a0f9f6">UX Leadership Skills: A short guide for busy people</a></dt>
<dd></dd>
<dt><a href="https://digitalblog.coop.co.uk/2018/03/28/how-to-run-a-design-crit-and-why-theyre-important/">How to run a design crit and why they’re important</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@stephen.gill/four-ways-to-make-the-case-for-simplicity-f2c2a87ac9f6">Four ways to make the case for simplicity</a></dt>
<dd></dd>
<dt><a href="https://pds.blog.parliament.uk/2018/03/23/why-uk-parliament-needed-a-new-identity/">Why UK Parliament needed a new identity</a></dt>
<dd></dd>
<dt><a href="https://www.citylab.com/design/2018/03/britains-beautiful-garbage-bins/556217/">Britain's Beautiful Garbage Bins</a></dt>
<dd></dd>
<dt><a href="http://alistapart.com/article/meeting-design">Meeting Design</a></dt>
<dd></dd>
</dl>
February 2018 bookmarks2018-02-16T00:00:00Zhttps://www.benjystanton.co.uk/blog/february-2018-links/<dl>
<dt><a href="https://insidegovuk.blog.gov.uk/2018/01/24/improving-accessibility-with-accessibility-acceptance-criteria/">Improving accessibility with accessibility acceptance criteria</a></dt>
<dd></dd>
<dt><a href="https://getkap.co/">Capture your screen</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@vihra.rogacheva/guerrilla-research-in-university-setting-what-worked-and-what-didnt-259924b190be">Studying students’ experience using guerrilla research. What worked and what didn’t.</a></dt>
<dd></dd>
<dt><a href="http://alistapart.com/article/my-accessibility-journey-what-ive-learned-so-far">My Accessibility Journey: What I’ve Learned So Far</a></dt>
<dd></dd>
<dt><a href="https://meowni.ca/posts/2017-puppeteer-tests/">Automatic visual diffing with Puppeteer</a></dt>
<dd></dd>
<dt><a href="https://blog.usejournal.com/net-promoter-score-considered-harmful-and-what-ux-professionals-can-do-about-it-fe7a132f4430">Net Promoter Score Considered Harmful (and What UX Professionals Can Do About It)</a></dt>
<dd></dd>
<dt><a href="https://2018.ampersandconf.com/">AMPERSAND</a></dt>
<dd></dd>
<dt><a href="https://www.amazon.com/Org-Design-Orgs-Building-House/dp/1491938404">Org Design for Design Orgs: Building and Managing In-House Design Teams 1st Edition</a></dt>
<dd></dd>
<dt><a href="https://github.com/buzzfeed/design/blob/master/tech-leadership-principles.md">buzzfeed/design</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@nathangitter/why-your-app-looks-better-in-sketch-3a01b22c43d7">Why Your App Looks Better in Sketch</a></dt>
<dd></dd>
<dt><a href="https://blog.prototypr.io/we-need-to-talk-about-patterns-8dcc73aff318">We need to talk about design patterns</a></dt>
<dd></dd>
<dt><a href="http://www.hollidazed.co.uk/2015/07/28/frame-the-problem/">Asking the right questions to frame the problem</a></dt>
<dd></dd>
<dt><a href="https://medium.com/mixed-methods/five-user-research-rules-of-thumb-to-follow-a738d5c78957">Five User Research Rules of Thumb to Follow</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@rossferg/the-principles-that-make-me-a-better-product-manager-9e50814d184f">The principles that make me a better product manager</a></dt>
<dd></dd>
<dt><a href="http://boingboing.net/2017/02/08/lies-arrow-stickers-for-the-er.html">LIES arrow-stickers for the era of the Alternate Fact</a></dt>
<dd></dd>
<dt><a href="https://github.com/giving-a-fuck-about-climate-change/carbondoomsday">giving-a-fuck-about-climate-change/carbondoomsday</a></dt>
<dd></dd>
<dt><a href="https://www.designweek.co.uk/issues/5-11-february-2018/the-most-influential-female-designers-of-the-last-century/">The most influential female designers of the last century</a></dt>
<dd></dd>
<dt><a href="https://spectrum.chat/thread/1021be59-2738-4511-aceb-c66921050b9a">.mdx proposal · Frontend Cafe</a></dt>
<dd></dd>
<dt><a href="http://emilywebber.co.uk/what-is-an-agile-delivery-manager/">Explaining the role of a Delivery Manager</a></dt>
<dd></dd>
<dt><a href="https://medium.com/hubspot-product/how-to-gain-widespread-adoption-of-your-design-system-29d1b142b158">How to gain widespread adoption of your design system</a></dt>
<dd></dd>
<dt><a href="https://articles.uie.com/user_exposure_hours/">Fast Path to a Great UX – Increased Exposure Hours</a></dt>
<dd></dd>
<dt><a href="https://www.fastcompany.com/40524955/i-accidentally-built-a-brogrammer-culture-now-were-undoing-it">I Accidentally Built A Brogrammer Culture. Now We’re Undoing It</a></dt>
<dd></dd>
<dt>Everything Easy is Hard Again</dt>
<dd></dd>
<dt><a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag">Layout Land</a></dt>
<dd></dd>
<dt><a href="https://clearleft.com/posts/scaling-design-the-case-for-narrative-transformation">Scaling design: the case for narrative transformation</a></dt>
<dd></dd>
<dt><a href="https://css-tricks.com/using-conic-gradients-css-variables-create-doughnut-chart-output-range-input/">Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input</a></dt>
<dd></dd>
<dt><a href="https://publication.design.systems/the-musicality-of-design-systems-f090b2ec0213">The musicality of design systems</a></dt>
<dd></dd>
<dt><a href="https://medium.com/no-you-go/thriving-in-a-toxic-culture-3aa0d78820ed">Work culture is toxic to women. I’m finding joy anyway.</a></dt>
<dd></dd>
<dt><a href="http://contentdesign.london/content-design/content-crits/">Content crits</a></dt>
<dd></dd>
<dt><a href="https://pds.blog.parliament.uk/2018/02/16/creating-accessible-and-responsive-search/">Creating accessible and responsive search</a></dt>
<dd></dd>
<dt><a href="https://getpixelsnap.com/">PixelSnap</a></dt>
<dd></dd>
<dt><a href="https://medium.com/sketch-app-sources/sketch-plugins-i-cant-live-without-1ed2b09dcc5c">Sketch Plugins I Can’t Live Without</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@monteiro/designs-lost-generation-ac7289549017">Design’s Lost Generation</a></dt>
<dd></dd>
<dt><a href="https://designnotes.blog.gov.uk/2018/02/19/developing-new-typography-and-spacing-for-gov-uk-frontend/">Developing new typography and spacing for GOV.UK Frontend</a></dt>
<dd></dd>
<dt><a href="https://github.com/audreyr/favicon-cheat-sheet">audreyr/favicon-cheat-sheet</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@catherineehope/no-more-data-pukes-no-more-jargon-ed3eb18b1609">No more data pukes, no more jargon</a></dt>
<dd></dd>
</dl>
My link sharing workflow2018-02-10T08:01:00Zhttps://www.benjystanton.co.uk/blog/link-sharing-workflow/<p><img src="https://www.benjystanton.co.uk/images/link-sharing-workflow.png" alt="A sketch of this workflow: me, pocket, IFTTT, sheets, Jekyll, share" /></p>
<p>I’m a big fan of bookmarking links. I won’t always read everything, but I like having them saved somewhere. And although it’s easy to bookmark things in your browser and build up a useful resource for yourself, it annoys me that these links aren’t easily shared.</p>
<p>So, I’ve come up with a workflow that lets me collect and publish <a href="https://www.benjystanton.co.uk/blog/category/links/">my bookmarked links</a> on this blog.</p>
<h2>1. Save links to Pocket</h2>
<p><a href="https://getpocket.com/">Pocket</a> is a neat service that lets you save articles and read them later. It has <a href="https://getpocket.com/add/">plugins</a> for Chrome on Mac and Safari on iOS, so with one click or a couple of taps I can save things to my account.</p>
<h2>2. IFTTT (if this, then that) and Google Sheets</h2>
<p><a href="https://ifttt.com/">IFTTT</a> is another handy service that lets you connect up lots of popular web apps and internet connected things.</p>
<p>I’ve set it up to check my Pocket account and add any links that I bookmark to a <a href="https://www.google.com/sheets/about/">Google Sheet</a>. Each article I bookmark gets saved to the spreadsheet as a new row.</p>
<h2>3. Copy the data into Jekyll</h2>
<p>Next, I need to copy the links from Google Sheets and add them as a CSV to Jekyll’s <code>_data</code> folder. Now that I’ve got my links stored as structured data I can make use of <a href="https://jekyllrb.com/docs/datafiles/">Jekyll’s handy templating features</a>.</p>
<h2>4. Create a list of links component</h2>
<p>I’ve created a little reusable component that will check the data folder my links and output that as a list.</p>
<h3>Include the component and point it at the data</h3>
<p>Insert the component into the blog post and point it to the right month, for example January 2018.</p>
<p>{% include 'partials/list-o-links.html' list=site.data.links-2018-january %}</p>
<h3>The list component itself</h3>
<p>The list component automatically creates an unordered list of links.</p>
<pre><code><ul>
{% for item in include.list %}
<li><a href="{{ item.url }}">{{ item.label }}</a></li>
{% endfor %}
</ul>
</code></pre>
<h3>Example of the generated html</h3>
<pre><code><ul>
<li><a href="https://lawsofux.com/">Laws of UX</a></li>
<li><a href="https://www.mearso.co.uk/blog/todo-system.html">Todo list system</a></li>
<li><a href="https://www.sarasoueidan.com/blog/svg-coordinate-systems/">Understanding SVG Coordinate Systems and Transformations</a></li>
</ul>
</code></pre>
<h2>5. Steps each month</h2>
<p>Now that I’ve set all this up, it’s almost effortless to keep it maintained.</p>
<p>There are a couple of manual steps each month, but this forces me to review anything I’ve saved and prompts me to read a few more articles.</p>
<p><a href="https://www.benjystanton.co.uk/blog/january-2018-links/">Check out last month's links</a></p>
Use fewer layouts2018-02-03T21:08:00Zhttps://www.benjystanton.co.uk/blog/use-fewer-layouts/<p>Jekyll uses templates stored in the <code>_layouts</code> folder to apply reusable designs to its pages. In a previous release, I created a list of <a href="https://www.benjystanton.co.uk/blog/add-a-list-of-page-layouts">page layouts in use on this site</a> to help me spot inconsistencies.</p>
<p>For this release I've started to reduce the inconsistencies and duplicate code. The user story is the same though…</p>
<h2>User story</h2>
<p>As a user, I need the website pages to be consistent, so that I can read and browse them easily.</p>
<h2>Acceptance criteria</h2>
<ul>
<li>Combine the <code>page</code> and <code>post</code> layout into one</li>
<li>Update the <code>index.md</code> to use the page layout</li>
<li>Update the <a href="https://www.benjystanton.co.uk/style-guide/">style guide</a> to reflect the changes</li>
</ul>
<h2>What's changed</h2>
<p>The biggest change was combining the <code>page</code> and <code>post</code> layouts. They are very similar, so it makes sense to merge them. But I do need to check if a page is a blog post, so that I can show the post date.</p>
<p>The <code>if</code> statement looks something like this…</p>
<pre><code>
{% if page.is_post %}
<small>{{ page.date | date: "%e %B %Y" }}</small>
{% endif %}
</code></pre>
<p>So that posts know they are posts, I had to add the following snippet to the <code>_config.yml</code> file.</p>
<pre><code>
defaults:
-
scope:
path: "" # empty string for all files
type: posts # limit to posts
values:
is_post: true # automatically set is_post=true for all posts
</code></pre>
Add a list of page layouts2018-01-28T08:13:00Zhttps://www.benjystanton.co.uk/blog/add-a-list-of-page-layouts/<p>I've made a lot of changes to the site recently, and some small inconsistencies are creeping in to the page templates. Some very similar pages use different templates. And some layout stuff is stored in individual pages, making it more difficult to manage.</p>
<p>By adding a list of different page types I can start to make them more consistent.</p>
<h2>User story</h2>
<p>As a user, I need the website pages to be consistent, so that I can read and browse them easily.</p>
<h2>Acceptance criteria</h2>
<ul>
<li>Add a list of different page types to the style guide</li>
<li>Include a link to an example for each</li>
</ul>
January 2018 bookmarks2018-01-28T00:00:00Zhttps://www.benjystanton.co.uk/blog/january-2018-links/<dl>
<dt><a href="https://lawsofux.com/">Laws of UX</a></dt>
<dd></dd>
<dt><a href="https://www.mearso.co.uk/blog/todo-system.html">Todo list system</a></dt>
<dd></dd>
<dt><a href="https://www.sarasoueidan.com/blog/svg-coordinate-systems/">Understanding SVG Coordinate Systems and Transformations</a></dt>
<dd></dd>
<dt><a href="http://quotesandaccents.com/">Quotes & Accents</a></dt>
<dd></dd>
<dt><a href="https://medium.com/@BenHolliday/seniority-in-design-5169a39465c8">Seniority in design</a></dt>
<dd></dd>
<dt><a href="https://uxdesign.cc/designing-tables-for-reusability-490a3760533">Designing Tables for Reusability</a></dt>
<dd></dd>
<dt><a href="https://w3c.github.io/using-aria/#checklist">Custom Control Accessible Development Checklist</a></dt>
<dd></dd>
<dt><a href="https://blog.asana.com/2017/12/things-welcome-new-employees-managers-do/">You’re hired: 6 ways to welcome your new employee on their first day</a></dt>
<dd></dd>
<dt><a href="http://thecooperreview.com/meeting-achievement-stickers/">Meeting Achievement Stickers</a></dt>
<dd></dd>
<dt><a href="https://hodigital.blog.gov.uk/2017/07/31/types-and-stages-of-services/">Types and stages of services</a></dt>
<dd></dd>
<dt><a href="https://hodigital.blog.gov.uk/2017/08/04/what-we-mean-by-service-outcomes-and-measurement/">What we mean by service outcomes and measurement</a></dt>
<dd></dd>
<dt><a href="https://hodigital.blog.gov.uk/2016/12/21/creating-a-common-language-to-describe-services/">Creating a common language to describe services</a></dt>
<dd></dd>
<dt><a href="https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form">Making password managers play ball with your login form</a></dt>
<dd></dd>
<dt><a href="http://bradfrost.com/blog/post/style-guide-driven-design-systems/">Style guide-driven design systems</a></dt>
<dd></dd>
<dt><a href="https://www.peopleforresearch.co.uk/blog/2018/01/user-centred-research-holistic-profiling/">Holistic user profiling: making research more user-centred</a></dt>
<dd></dd>
<dt><a href="http://charlesrt.co.uk/2018/01/drafts-zero-challenge/">Drafts Zero challenge</a></dt>
<dd></dd>
<dt><a href="https://storyneedle.com/structural-metadata-key-to-structured-content/">Structural Metadata: Key to Structured Content</a></dt>
<dd></dd>
</dl>
Change date format2018-01-27T22:16:00Zhttps://www.benjystanton.co.uk/blog/change-date-format/<p>The "published on" date sometimes appeared below the post-title and sometimes it appeared above it. I wanted to fix this small inconsistency. I also wanted to take this opportunity to make the date format a bit more natural by removing the leading zero from the date and writing out months in full.</p>
<h2>User story</h2>
<p>As a user, I need to know when an article was written, to help me decide if the content is still relevant.</p>
<h2>Acceptance criteria</h2>
<ul>
<li>Date format is changed from <code>01 Jan 2018</code> to <code>1 January 2018</code> to match the <a href="https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#dates">GDS content style guide</a></li>
<li>Use the <a href="https://shopify.github.io/liquid/filters/date/">Shopify Liquid</a> and <a href="http://strftime.net/">STRFTIME</a> resources to control the date format</li>
<li>Date is moved below the title on post pages</li>
</ul>
Add SVG icons2018-01-19T00:00:00Zhttps://www.benjystanton.co.uk/blog/add-svg-icons/<p>Switching from PNGs (Portable Network Graphics) or icon fonts, to SVG (Scalable Vector Graphics) icons.</p>
<figure>
<img src="https://www.benjystanton.co.uk/images/svg-icon.png" alt="Screenshot of the Twitter bird being edited in a vector drawing application" />
<figcaption>
The Twitter icon being edited in Figma
</figcaption>
</figure>
<h2>SVGs are best for icons</h2>
<ul>
<li>SVGs are vector images</li>
<li>They can be zoomed without pixelating</li>
<li>Inline SVGs can be styled with CSS</li>
<li>Inline SVGs are good for performance</li>
<li>SVGs have accessibility advantages</li>
<li>They are better than icon fonts</li>
<li><a href="https://caniuse.com/#feat=svg-html5">Browser support is good</a></li>
<li>Editable using code or vector drawing applications</li>
</ul>
<h2>Useful SVG attributes</h2>
<ul>
<li><code>height=""</code></li>
<li><code>width=""</code></li>
<li><code>viewBox=""</code></li>
<li><code>aria-hidden="true"</code></li>
<li><code>xmlns="http://www.w3.org/2000/svg"</code></li>
<li><code>focusable="false"</code></li>
<li><code>aria-labelledby=""</code></li>
<li><code>fill="currentColor"</code></li>
</ul>
<h2>Add <code>focusable="false"</code> to SVGs</h2>
<p><a href="https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html#svgs-that-are-decorative">Scott O'Hara explains why and when to use <code>focusable="false"</code></a></p>
<blockquote>
<p><code>focusable="false"</code> is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.</p>
</blockquote>
<h2>Inline SVG performance benefits</h2>
<ul>
<li>There is one less http request because we don't need to load an external image file</li>
<li>File size is often smaller (unless the icon very complex)</li>
<li>Only load what you need (instead of a whole icon font)</li>
</ul>
<h2>Related links</h2>
<ul>
<li><a href="https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/">Using ARIA to enhance SVG accessibility from The Paciello Group</a></li>
<li><a href="https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/">Seriously, Don’t Use Icon Fonts from Tyler Sticka</a></li>
<li><a href="https://www.sitepoint.com/tips-accessible-svg/">Tips for Creating Accessible SVG from SitePoint</a></li>
<li><a href="https://jakearchibald.github.io/svgomg/">SVGOMG from Jake Archibald</a></li>
<li><a href="https://svg-path-visualizer.netlify.app/">SVG Path Visualizer from Mathieu Dutour</a></li>
<li><a href="https://svgexport.io/">SVG Export: Download SVGs from any site with ease</a></li>
<li><a href="https://gomakethings.com/icon-accessibility-and-aria-label/">Icon accessibility and aria label from Go Make Things</a></li>
<li><a href="https://mailchi.mp/smashingmagazine/smashing-newsletter-294-svg-generators-and-tools">Smashing Newsletter: SVG generators and tools</a></li>
<li><a href="https://www.cassie.codes/posts/swipey-image-grids/">Swipey image grids</a></li>
</ul>
<h2>What I changed on the blog</h2>
<h3>Old HTML</h3>
<pre><code><i class="icon icon-social icon-instagram">
<span class="visuallyhidden">Instagram</span>
</i>
</code></pre>
<h3>New HTML</h3>
<pre><code><span class="icon">
<svg height="25" width="25" viewBox="0 0 25 25" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-labelledby="iconTwitterTitle">
<title id="iconTwitterTitle">Twitter icon</title>
<path d="M7.8 22.6c8 .1 14.6-6.3 14.6-14.3v-.9c1-.7 1.8-1.6 2.5-2.7-.9.4-1.9.7-3 .8a4.7 4.7 0 0 0 2.2-2.8c-1 .6-2.1 1.1-3.2 1.3a5.1 5.1 0 0 0-7.3-.2c-1 1-1.6 2.3-1.6 3.7l.1 1.1C8.2 8.4 4.4 6.5 1.7 3.3a5 5 0 0 0 1.5 6.8c-.7 0-1.5-.2-2.2-.6v.1c0 2.4 1.7 4.6 4.1 5.1-.7.2-1.5.2-2.3.1a5 5 0 0 0 4.8 3.5 10.5 10.5 0 0 1-6.4 2.2H0c2.3 1.4 5.1 2.1 7.8 2.1"/>
</svg></span>
</code></pre>
Add aria-current to the site nav2018-01-13T21:32:00Zhttps://www.benjystanton.co.uk/blog/add-aria-current/<p>When browsing the main pages of this site (home, about, blog) the current page link changes style. This helps sighted users to tell which page they're on. But this feature is invisible to screen reader users. So I'm adding the <code>aria-current</code> attribute to fix this.</p>
<h2>User story</h2>
<p>As a screen reader user, I need to know which page I'm on when I'm using the navigation, so that I can find my way around the site.</p>
<h2>Acceptance criteria</h2>
<p>The screen reader will announce "current page" when it reads out the label of the current page in the site navigation.</p>
<h2>What's changed</h2>
<p>I've added the <code>aria-current="page"</code> attribute to the current page link in the site nav.</p>
<pre><code><nav role="navigation">
<a aria-current="page" href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
</nav>
</code></pre>
<p><a href="https://www.benjystanton.co.uk/">Visit the home page to test this out</a></p>
<h2>Resources</h2>
<ul>
<li><a href="https://tink.uk/using-the-aria-current-attribute/">Using the aria-current attribute by Léonie Watson</a></li>
<li><a href="http://design-patterns.tink.uk/aria-current/">aria-current design patterns by Léonie Watson</a></li>
</ul>
December 2017 bookmarks2017-12-31T00:00:00Zhttps://www.benjystanton.co.uk/blog/december-2017-links/<dl>
<dt><a href="https://designnotes.blog.gov.uk/2017/12/01/design-in-the-parliamentary-digital-service/">Design in: the Parliamentary Digital Service</a></dt>
<dd></dd>
<dt><a href="https://24ways.org/2017/wcag-for-people-who-havent-read-them/">Web Content Accessibility Guidelines—for People Who Haven't Read Them</a></dt>
<dd></dd>
<dt><a href="https://joemc.gr/2017/12/03/getting-remote-friendly/">Getting remote-friendly</a></dt>
<dd></dd>
<dt><a href="https://userresearch.blog.gov.uk/2017/12/05/understanding-the-needs-of-service-data-users/">Understanding the needs of service data users</a></dt>
<dd></dd>
<dt><a href="https://www.24a11y.com/2017/wcag-2-1-silver-ag-next-accessibility-guidelines/">WCAG 2.1 and Silver (AG): What is Next for Accessibility Guidelines</a></dt>
<dd></dd>
<dt><a href="https://www.smashingmagazine.com/2017/12/design-workouts-world-class-teams/">Using Design Workouts To Build World-Class Design Teams</a></dt>
<dd></dd>
<dt><a href="https://www.w3.org/TR/svg-aam-1.0/">SVG Accessibility API Mappings</a></dt>
<dd></dd>
<dt><a href="https://alistapart.com/article/web-typography-numerals">Web Typography: Numerals</a></dt>
<dd></dd>
<dt><a href="https://www.w3.org/TR/csvw-html/">Embedding Tabular Metadata in HTML</a></dt>
<dd></dd>
</dl>
Accessibility for designers2017-12-19T23:20:00Zhttps://www.benjystanton.co.uk/blog/accessibility-for-designers/<p>A guide to web accessibility best practices for graphic, visual and UI (user interface) designers.</p>
<h2>Images</h2>
<h3>Images of text</h3>
<p>Avoid having images of text, especially when it makes up part of the interface. Recreate simple graphical elements (like buttons) using HTML and CSS. Diagrams and charts should be created using SVG.</p>
<p>In some cases, images that contain text are appropriate. For example a photo of a building or a screenshot of an app might contain some text. If the text is important to the meaning of the image, be sure to include it as alt text somewhere.</p>
<h3>Images should have alternative text</h3>
<p>Alt text is one of those web jobs that falls through the cracks. Whose responsibility is it? Designers? Developers? Content editors? I suggest that you do everyone a favour and write alt text for any image that you create or supply.</p>
<p>Images that add meaning to the content need to have alternative text. Imagine you are explaining the image down the phone to someone who can’t see it.</p>
<p><a href="http://www.webcredible.com/blog/writing-effective-alt-text-images/">Writing effective ALT text for images</a></p>
<h2>Typography</h2>
<h3>Measure</h3>
<p>Long lines of text are hard to read. So are very short lines. As a rule of thumb, I try to keep line length within 45 to 75 characters per line. This is extra tricky when it comes to responsive web design.</p>
<p>Luckily Trent Walton has a <a href="http://trentwalton.com/2012/06/19/fluid-type/">neat trick for managing fluid type</a>.</p>
<h3>Justified text</h3>
<p>Don’t use fully justified text. Having ragged lines on the right edge helps our eyes to read. Fully justified text is harder to read, and these effects can be exaggerated for users who have visual or cognitive access needs.</p>
<p><a href="http://designforhackers.com/blog/never-justify-type-on-the-web/">Never Justify Type on the Web</a></p>
<h3>Line spacing</h3>
<p>Make sure the vertical white space between lines of text is enough so that the taller letters don’t bump into each other. It’s also possible to have too much space. If you’re eye is more drawn the gaps than the text then you probably need to reduce your line spacing a little.</p>
<p><a href="http://practicaltypography.com/line-spacing.html">Line Spacing</a></p>
<h2>Colour</h2>
<h3>Don’t use colour alone to give meaning</h3>
<p>Users who are colour blind can miss out on important information if you don’t consider their needs when designing. For example if you highlight a required form field with a red outline, this could be invisible to them.</p>
<p><a href="https://24ways.org/2012/colour-accessibility/">Colour accessibility</a></p>
<h3>Colour contrast</h3>
<p>Text must have contrast ratio of at least 4.5:1. Larger text doesn’t need as much contrast. A contrast ratio of at least 3:1 is enough for anything over 18 point.</p>
<p>Watch out: good displays like those on Macbook Pros have much higher contrast than most monitors. Test your design on an average, low-res PC display, whilst squinting. That should give you a better idea of how some users struggle to read low contrast interface text.</p>
<p>Very light text is overused by designers. We rely on it, because contrast can balance a design. But, if you have to add very light text to a design in order for it to feel balanced then you probably have too much stuff on the page.</p>
<p><a href="http://webaim.org/resources/contrastchecker/">Colour Contrast Checker</a></p>
<h2>Interaction</h2>
<h3>Design a style for keyboard focus</h3>
<p>Some users will navigate a website using only a keyboard. But often it’s impossible to tell which elements are currently in focus. Be sure to to give links, buttons and form elements a high contrast focus style.</p>
<p><a href="https://www.gov.uk/">Tip: go to GOV.UK</a> and press the tab key a few times to see a good example of this in practice.</p>
<h2>Forms</h2>
<h3>Labels</h3>
<p>Form elements should always have labels. It’s not enough to use placeholder text as it’s usually very light. It also disappears when users select the form field.</p>
<h3>Help text</h3>
<p>Add useful instructions to help users to complete the form. If a certain date format or password length is required, let users know. If a field is optional consider removing it, if that’s not possible, mark it as optional.</p>
<h3>Validation errors</h3>
<p>Design errors that are easily understood (this includes writing good content too). Make sure they allow users to navigate to the problem and fix it easily.</p>
<p><a href="http://mono.company/journal/design-practice/the-10-commandments-of-good-form-design-on-the-web/">The 10 Commandments of Good Form Design on the Web</a></p>
<h2>Content</h2>
<h3>Avoid technical terms, abbreviations and jargon</h3>
<p>Technical terms, abbreviations and jargon can be off putting to all sorts of users:</p>
<ul>
<li>users who don’t speak English as a first language (English is a second language for British Sign Language users)</li>
<li>users who have a low reading age</li>
<li>newcomers to the topic you are writing about</li>
</ul>
<p>You can help everyone understand your content better if you use common and simple words.</p>
<p>If you absolutely have to use these words then explain them by using the <code><abbr></code> element or by adding a glossary.</p>
<p><a href="http://www.disambiguity.com/stop-your-team-using-technical-terms-and-jargon/">Stop your team using technical terms and jargon</a></p>
<h3>Readable page titles and hackable urls</h3>
<p>Page titles should be descriptive and should match the <code><h1></code> (main heading) on the page. This helps users to orientate themselves.</p>
<p>URLs should be designed so that users could navigate their way through a site by editing the website url in the browser address bar.</p>
<p><a href="http://simplyaccessible.com/article/web-accessibility-and-urls/">Web accessibility & URLs</a></p>
<h3>Buttons and links should have descriptive labels</h3>
<p>Users often scan pages quickly to look for links on a page. This can be done visually or by using screen readers. Don’t use repetitive or vague link labels like “read more” or “click here”. They don’t offer any information to the user when taken out of context.</p>
<p>Make sure link and button labels describe what will happen when someone selects them. For example, if they link to a download tell the user the file type and file size.</p>
<p><a href="https://gds.blog.gov.uk/2016/02/23/writing-content-for-everyone/">Writing content for everyone</a></p>
<h2>Conclusion</h2>
<p>Everyone benefits from good accessible design. Think about it all of the time. It’s not a separate thing that can be added at the end of a project.</p>
<p>Designers often put up barriers to users with access needs without really meaning to. Don’t be one of those designers.</p>
<h2>Further reading on accessibility</h2>
<ul>
<li><a href="https://accessibility.blog.gov.uk/">Government Digital Service Accessibility</a></li>
<li><a href="http://webaim.org/standards/wcag/checklist">WebAIM's WCAG 2.0 Checklist</a></li>
<li><a href="http://accessibility.voxmedia.com/">Vox Media’s Accessibility Guidelines</a></li>
<li><a href="https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.tu5t4zg4m">7 Things Every Designer Needs to Know about Accessibility</a></li>
</ul>
We’re hiring 5 graphic designers at Office for National Statistics (ONS)2017-12-16T07:41:00Zhttps://www.benjystanton.co.uk/blog/hiring-5-graphic-designers-at-ONS/<p>We're looking for 3 digital designers and 2 brand and print designers in Newport. The closing date is 22 January 2018.</p>
<h2>Graphic Designers (Digital)</h2>
<p>These roles are based in the Digital Publishing department. We're looking for designers who are experienced working in digital.</p>
<p>You'll be helping us to improve our charts, interactive tools and the typography on the website. You'll help the other designers to develop a consistent design system across ONS.</p>
<ul>
<li>Lead Graphic Designer (Digital) £35,200 to £40,249</li>
<li>Graphic Designer (Digital) £28,450 to 33,249</li>
<li>Graphic Designer (Digital) £21,950 to £27,249</li>
</ul>
<h2>Graphic Designers (Brand and Print)</h2>
<p>These roles will be based in the Comms department. We're looking for designers who are experienced working in print and communications.</p>
<p>You'll be helping us to improve our brand identity, reports and exhibition materials. You'll help the other designers to develop a consistent design system across ONS. These roles will include some digital things too.</p>
<ul>
<li>Lead Graphic Designer (Brand and Print) £35,200 to £40,249</li>
<li>Graphic Designer (Brand and Print) £28,450 to 33,249</li>
</ul>
<h2>Bonus role: Front End Developer</h2>
<p>We're also looking for a front end developer to join digital publishing. This person will be working closely with the designers.</p>
<p>Front End Developer £21,950 (Closing date 7 January 2018)</p>
<h2>Websites you'll be working on</h2>
<ul>
<li><a href="http://www.ons.gov.uk/">ONS website</a></li>
</ul>
<h2>What's it like to work at ONS?</h2>
<p>Here are some blog posts I've written about life and work at ONS:</p>
<ul>
<li><a href="https://github.com/ONSdigital/design/blob/master/principles.md">ONS design community principles</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/my-first-12ish-months/">My first 12ish months</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/my-12-year-quest/">My 12 year quest to get a public service design job</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/retrospective-my-first-2-months/">Retrospective (my first 2 months)</a></li>
<li><a href="https://www.benjystanton.co.uk/blog/work-with-me-at-office-for-national-statistics-ons/">Work with me at Office for National Statistics (ONS)</a></li>
</ul>
November 2017 bookmarks2017-11-30T00:00:00Zhttps://www.benjystanton.co.uk/blog/november-2017-links/<dl>
<dt><a href="https://gds.blog.gov.uk/2014/09/03/vertical-campfires-our-user-research-walls/">Vertical campfires: our user research walls</a></dt>
<dd></dd>
<dt><a href="https://designnotes.blog.gov.uk/2017/11/27/using-design-crits-to-improve-collaboration/">Using design crits to improve collaboration</a></dt>
<dd></dd>
</dl>
My first 12ish months2017-11-28T09:39:00Zhttps://www.benjystanton.co.uk/blog/my-first-12ish-months/<p><img src="https://www.benjystanton.co.uk/images/make-data-part-of-the-web-landscape.png" alt="Stickers that read - make data part of the web" /></p>
<p>It's been just over one year since I started at the Office for National Statistics (ONS). It's my first time being a civil servant. First time working for a big organisation. First time being a line-manager.</p>
<p>I've been meaning to write a round-up for weeks, and reading <a href="https://medium.com/@sophiewarnes/the-first-six-months-90a17b38121f">Sophie's first six months</a> finally gave me the kick I needed.</p>
<h2>The commute</h2>
<p>The thing friends and family always ask about is the commute. I live in Swansea and the drive to Newport takes at least one hour. To avoid traffic, I leave the house at 6am and work from 7am to 3pm.</p>
<p>The drive is actually okay. As long as there is something good on <a href="https://www.bbc.co.uk/radio4">Radio 4</a> I'm happy. The most surprising thing is that driving is mentally tiring. An extra 2 hours concentration on top of my job can be exhausting some days.</p>
<p>I drive a diesel car, so the whole environmental issue plays on my mind too. I'm kind of hoping the car the will break down soon so that I can get something a bit more eco-friendly (electric? hybrid?) with a digital radio too so I can listen to <a href="https://www.bbc.co.uk/6music">6 music</a>.</p>
<p>Or, for the most hipster points, I could catch the train and cycle in-between.</p>
<h2>Choosing my own hours</h2>
<p>Luckily the job is very flexible. I can always shuffle things around if I need to be at home for the kids or work remotely to get some space.</p>
<p>Every now and then I need to stay late (as in 5pm or 6pm) for a meeting. But, I can take back any hours I build up whenever I need to.</p>
<h2>Travel</h2>
<p>One of my favourite things about the job is that I get to travel. I've been all over the country (London, Wrexham, Manchester).</p>
<p>I've attended or spoken at;</p>
<ul>
<li>conferences</li>
<li>cross-government design meet-ups</li>
<li>user research trips</li>
</ul>
<p>Although traveling can be a big strain on family life, I enjoy the time away to focus on things. I usually manage to get loads of admin done when I'm stuck on train. And I love wandering around new cities. It's a good chance for me to be alone with my thoughts and recharge my batteries.</p>
<p>The contrast in wealth has also been striking (between South Wales and London for example). This feels relevant to an organisation that publishes data about employment and house prices.</p>
<h2>Meetings and admin-y things</h2>
<p>In the past, I've worked as a freelancer working remotely or employed at small design agencies. The amount of meetings and admin-y things at ONS has come as a shock. It's one of the most difficult thing about the job.</p>
<p>As an introvert, I find meetings very tiring. There are very few opportunities during the day that let me recharge. I can almost feel myself getting better at meetings. But more importantly, I need to be better at saying no sometimes. Or planning time in my schedule to recharge.</p>
<p>The admin-y things are usually okay in principle. But to complete each admin-y thing I need to:</p>
<ul>
<li>dig out an email from a some mysterious new department</li>
<li>login to a different system with a different password</li>
<li>read the massive PDF guide</li>
<li>navigate a poor interface</li>
<li>give up and ask for help</li>
</ul>
<p>I'm pretty sure this is an issue across civil service and other large organisations. But as a designer whose job it is to help fix interfaces, it can be tiring to use bad ones. Especially if there seems like there is no way to improve them.</p>
<h2>Open data community</h2>
<p>One exciting thing for me was discovering the open data community. Perhaps surprisingly for someone who wanted to join ONS, I was sceptical about data. I wrongly (?) thought it was about dashboards, big data and corporations spying on people.</p>
<p>But, I've discovered a grass-roots community of geeks. People who are passionate about the web, open standards and doing work that matters.</p>
<h2>The Digital Publishing department</h2>
<p>Joining Digital Publishing has been the stand-out highlight of my first year. Digital Publishing handles the ONS website and things like social media.</p>
<p>I didn't know when I applied for the job that I would end up here. Luckily it was <a href="https://twitter.com/jukesie">Jukesie's</a> old department. Without realising it, I'd been drawn to ONS because of the way he described the culture when he spoke at meet-ups and conferences.</p>
<p>I count myself lucky to be assigned to this team. They're obsessed with users, telling the truth and working in the open. They are focussed on doing work that matters.</p>
<h2>Highchair at the table</h2>
<p>It's clichéd, but (like many designers) I always wanted a "seat at the table". In Digital Publishing I actually have a seat. I'm expected to contribute to big plan-y meetings. I'm expected to have an opinion on important decisions. This is both amazing and terrifying.</p>
<p>It made me realise that for much of my working life I've been able to hide behind the opinions of bosses and clients. Happy to let them have the last say as they were paying the bills. Now, I'm in a position where the team rely on me to bring the skills of a designer to the team. And help the team meet user needs.</p>
<p>There is nothing holding me back. Again, terrifying. Except my own ability to do a good job (and my ability to say no to things). My plan for the next year is to try and make privileged position count for something. To try and help <a href="https://twitter.com/mr_dudders">Andy</a> save the world.</p>
Disney data2017-09-22T11:51:00Zhttps://www.benjystanton.co.uk/blog/disney-data/<p>Back in March we took a family trip to Disneyland Paris.</p>
<p>I collected some data, mainly so that I could play around with styling up key figures and data tables like this…</p>
<h2 id="key-figures">Key figures</h2>
<p><span>979</span>
<span>miles driven</span></p>
<p><span>27</span>
<span>miles walked</span></p>
<p><span>7.8</span>
<span>hours spent queueing</span></p>
<p><span>6</span>
<span>buffets</span></p>
<p><span>50,720</span>
<span>steps</span></p>
<h2 id="walking">Walking</h2>
<table>
<caption><h3>How far we walked each day</h3></caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Steps</th>
<th scope="col">Miles</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>15065</td>
<td>6.94</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td>19831</td>
<td>9.14</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td>14818</td>
<td>6.80</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td>10006</td>
<td>4.60</td>
</tr>
</tbody>
</table>
<h2 id="queue-time">Queue time</h2>
<table>
<caption><h3>How long we waited for each attraction</h3></caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Attraction</th>
<th scope="col">Queue time (minutes)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/its-a-small-world/">it's a small world</a></td>
<td>0</td>
</tr>
<tr>
<th scope="row">Monday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/mad-hatters-tea-cups/">Mad Hatter's Tea Cups</a></td>
<td>5</td>
</tr>
<tr>
<th scope="row">Monday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/dumbo-the-flying-elephant/">Dumbo the Flying Elephant</a></td>
<td>15</td>
</tr>
<tr>
<th scope="row">Monday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/peter-pans-flight/">Peter Pan's Flight</a></td>
<td>10</td>
</tr>
<tr>
<th scope="row">Monday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/big-thunder-mountain/">Big Thunder Mountain</a></td>
<td>20</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/big-thunder-mountain/">Big Thunder Mountain</a></td>
<td>30</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/les-voyages-de-pinocchio/">Les Voyages de Pinocchio</a></td>
<td>30</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/blanche-neige-et-les-sept-nains/">Blanche-Neige et les Sept Nains</a></td>
<td>25</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/phantom-manor/">Phantom Manor</a></td>
<td>20</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/star-tours-the-aventures-continue/">Star Tours: The Adventures Continue</a></td>
<td>20</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/buzz-lightyear-laser-blast/">Buzz Lightyear Laser Blast</a></td>
<td>15</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/walt-disney-studios-park/flying-carpets-over-agrabah/">Les Tapis Volants - Flying Carpets Over Agrabah</a></td>
<td>15</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/walt-disney-studios-park/slinky-dog-zigzag-spin/">Slinky Dog Zigzag Spin</a></td>
<td>10</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/walt-disney-studios-park/ratatouille-the-adventure/">Ratatouille: The Adventure</a></td>
<td>30</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/walt-disney-studios-park/toy-soldiers-parachute-drop/">Toy Soldiers Parachute Drop</a></td>
<td>30</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/walt-disney-studios-park/cars-quatre-roues-rallye/">Cars Quatre Roues Rallye</a></td>
<td>10</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/walt-disney-studios-park/crushs-coaster/">Crush's Coaster</a></td>
<td>60</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/walt-disney-studios-park/flying-carpets-over-agrabah/">Les Tapis Volants - Flying Carpets Over Agrabah</a></td>
<td>5</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/le-carrousel-de-lancelot/">Le Carrousel de Lancelot</a></td>
<td>0</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/mad-hatters-tea-cups/">Mad Hatter's Tea Cups</a></td>
<td>5</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/princess-pavilion/">Princess Pavilion</a></td>
<td>60</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/disneyland-park/its-a-small-world/">it's a small world</a></td>
<td>10</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td><a href="http://www.disneylandparis.co.uk/attractions/walt-disney-studios-park/twilight-zone-tower-of-terror/">The Twilight Zone Tower of Terror</a></td>
<td>45</td>
</tr>
</tbody>
</table>
My 12 year quest to get a public service design job2017-02-17T22:38:00Zhttps://www.benjystanton.co.uk/blog/my-12-year-quest/<p><img src="https://www.benjystanton.co.uk/images/walter-and-muppets.png" alt="Walter and The Muppets" /></p>
<p>There have been a lot of "I'm leaving government posts" recently.</p>
<p>It feels a bit weird because I've been trying for years to get in.</p>
<p>I don't think I ever had a master plan, but looking back there were some interesting moments that lead me here. So here goes…</p>
<h2>My first design job</h2>
<p>When I first started in design, back in 2004, I remember worrying that being a designer was a soulless profession.</p>
<p>My parents were both in healthcare. And there I was; designing little websites and putting client's logos on promotional mugs.</p>
<p>I failed to see how I was helping to make the world a better place.</p>
<p>There was something about web design that drew me in though. I started to get excited about the open source movement, and how the web enabled anybody to publish and share content.</p>
<h2>Public services designed without designers (gasp!)</h2>
<p>Fast forward a couple of jobs and I was working at a branding agency. We were conducting stakeholder interviews with a Welsh public sector organisation.</p>
<p>They were showing us their latest software and it was painfully obvious that there were no designers working with their teams.</p>
<p>They just didn't see design as something that should be integrated into the software development process.</p>
<p>It freaked me out.</p>
<p>These were services that I might need to use one day. I could see that they weren't following any kind of usability or web standards.</p>
<p>I knew I had the skills to help, but I had no idea how to get involved.</p>
<h2>Government Digital Service (GDS)</h2>
<p>Luckily there were a bunch of people who were figuring it out for me.</p>
<p>GDS was starting to make a real buzz in the web design community and I instantly fell in love with their world of design principles, service standards and laptop stickers.</p>
<p>Something clicked, and I realised that I could be a "web" designer and still do work that matters. I just needed a way for a massive public sector organisation to hire me.</p>
<p>Also, I didn't want to move out of Swansea. Hmm.</p>
<h2>Comrade Paul Pod</h2>
<p>A while later I was freelancing and I came across a tweet by <a href="https://twitter.com/paulpod">Paul Pod</a>. He was looking for user experience (UX) people in South Wales to join him at DVLA. We met a couple of times and chatted about the possibility of me working with him. For one reason or another it didn't really go anywhere.</p>
<p>I think often, the easiest way to get into these types of roles is to be contracted in as part of a big external software agency.</p>
<h2>Leadin and DVLA</h2>
<p>As luck would have it, Leadin (a Finnish service design company) were establishing themselves in the UK with Swansea as their base. They'd won a contract with DVLA and hired me to work with their other UX designers.</p>
<p>For about a year I worked at DVLA as a Leadin employee. With the support of Leadin and Paul Pod, I got to grips with working in government on digital service design.</p>
<p>I became hooked on the ways of working that GDS helped introduce:</p>
<ul>
<li>user needs</li>
<li>designers working in agile teams</li>
<li>rapid prototyping</li>
<li>design patterns</li>
<li>laptop stickers</li>
</ul>
<p>It was addictive. I realised that somehow, I needed to keep working in this way.</p>
<h2>Matt Jukes' talk at Design Swansea</h2>
<p>I'd seen <a href="https://twitter.com/jukesie">Matt Jukes</a> speak at Port80 back in 2014. Little did I know back then that I'd end up working on the new website he'd helped to launch.</p>
<p>In 2016 I asked him to speak at Design Swansea (a meetup that I help organise). He gave his <a href="https://productforthepeople.xyz/product-is-a-team-sport-c50d234745e#.g3eauj6qu">product is a team sport</a> talk.</p>
<p>He painted a picture of the culture at ONS, especially within the digital publishing department.</p>
<p>He spoke about:</p>
<ul>
<li>the digital publishing department's principles</li>
<li>taking time to hire the right people</li>
<li>posters on walls</li>
<li>blogging and working in the open</li>
<li>also, he brought laptop stickers</li>
</ul>
<p>All this stuff rang true for me, and I remember thinking that I really wanted to work there.</p>
<p>A few months later they posted a job, I had to try applying.</p>
<h2>Joining ONS</h2>
<p>So, I've been at ONS for about 4 months now.</p>
<p>Working with service manager <a href="https://twitter.com/mr_dudders">Andy Dudfield</a> and his team in the digital publishing department.</p>
<p>Why is it so great? It combines the best bits of all my previous jobs and more:</p>
<ul>
<li>I get to work with a talented, engaged team … on stuff that matters</li>
<li>the work is constantly challenging and the standard is high</li>
<li>we are encouraged to work in the open and share what we do</li>
<li>nobody is micromanaged or forced to do overtime</li>
</ul>
<p>… and there are loads of laptop stickers.</p>
Retrospective (my first 2 months)2016-12-17T13:16:00Zhttps://www.benjystanton.co.uk/blog/retrospective-my-first-2-months/<p>It's been 2 months since I started at ONS (Office for National Statistics). Generally speaking, I'm pleased with how I'm doing. I'm excited by the work and the team are great.</p>
<p>Here's a quick retrospective that I'm going to turn into my New Year’s resolutions.</p>
<h2>Keep doing</h2>
<ul>
<li>Feeding research findings back into the design process</li>
<li>Working with the team to design and iterate together</li>
<li>Met with lots of people and teams</li>
<li>Blogging (although this has slowed down)</li>
<li>Designing in the open (again, could do more)</li>
<li>Getting design evidence from a range of sources (analytics, surveys, usability testing, subject matter experts and lessons learned from previous projects)</li>
<li>Show and tells, stand-ups and team walls are working well</li>
</ul>
<h2>Need to improve</h2>
<ul>
<li>Need an improved research rhythm</li>
<li>Need to recruit more users</li>
<li>I'm getting stressed out by the competing priorities</li>
<li>Need to be better at switching contexts, focus on one task at a time</li>
<li>Need to accept criticism without taking it personally</li>
<li>Need to break for lunch and eat properly</li>
<li>Need more exercise</li>
<li>Falling behind with training</li>
</ul>
<h2>Actions</h2>
<h3>Research rhythm</h3>
<p>Work even more closely with researcher to make sure we get more momentum in our research schedule. Try more varied research techniques.</p>
<h3>Work from home more</h3>
<p>Try working from home on the first Monday of every sprint. This way I can do the school run. Plus catch up on emails, training and writing blog posts. Anything that requires peace and quiet.</p>
<h3>Prototype in code</h3>
<p>Iterating designs on paper and in Sketch app is working well, but InVision prototypes are too limited to test everything. Easier to re-use code than clickable prototypes. It's hard to design for accessibility and control things like URL names in InVision and these things are important to the overall user experience. This work should all contribute to the elements and patterns library.</p>
<h3>Manage "business as usual" work better</h3>
<p>There are lots of small projects that fall outside of the main work I'm doing. I could facilitate meetings with business areas so that we quickly sketch design solutions there and then. I need to come away from meetings with a clearer idea of what I need to design. The team need a clearer idea of what I'm planning to do. I need to keep track of this work somehow on the "business as usual" board.</p>
<h3>Go for walks</h3>
<p>Try going for walks at lunchtime. Find out how to get into grounds of Tredegar House.</p>
User experience (UX) designer objectives2016-11-18T22:22:00Zhttps://www.benjystanton.co.uk/blog/user-experience-ux-designer-objectives/<p>We're working on some objectives for the UX design role at Office for National Statistics (ONS). These are pretty high level, and soon they'll have specific tasks under each. The tasks will help guide me and the other UX designers, and will be used as a way to monitor performance.</p>
<p>A well timed visit to the Government Digital Service (GDS) to discuss the role of designers in government has really helped to sharpen up our thinking.</p>
<p>Does this look like a UX designer to you?</p>
<h2>UX designer objectives</h2>
<ol>
<li>Follow a user centered design approach</li>
<li>Use evidence to inform design</li>
<li>Create prototypes and iterate designs</li>
<li>Work as part of an agile team</li>
<li>Be part of the community</li>
<li>Communicate effectively</li>
<li>Learn new skills and improve existing ones</li>
</ol>
<h3>Further reading</h3>
<p>You might be interested in this <a href="https://www.benjystanton.co.uk/blog/user-experience-ux-designer-skills/">post about UX designer skills</a>.</p>
User research activity cards2016-11-09T19:15:00Zhttps://www.benjystanton.co.uk/blog/user-research-activity-cards/<p><img src="https://www.benjystanton.co.uk/images/paper-prototyping.png" alt="Paper prototyping" /></p>
<p>GDS (Government Digital Service) have created this lovely set of user research activity cards. I spotted them stuck up on the wall at ONS (Office for National Statistics).</p>
<p>After a little bit of poking around online, I found the original file. So here’s the link and a round-up of the activities.</p>
<p><a href="https://github.com/alphagov/govdesign/blob/master/Cards_User_Research_Activities.pdf">Download the GDS user research activity cards</a></p>
<h2>Activities</h2>
<ul>
<li>Guided tour</li>
<li>Pop-up research</li>
<li>Sketch your idea</li>
<li>Conversation cards</li>
<li>Social network mapping</li>
<li>Affinity mapping</li>
<li>Card sorting</li>
<li>Think aloud</li>
<li>Write a diary</li>
<li>In their environment</li>
<li>Map your use</li>
<li>A day in the life</li>
<li>User persona</li>
<li>Paper prototyping</li>
<li>My user journey</li>
<li>Remote research</li>
</ul>
Work with me at Office for National Statistics (ONS)2016-10-29T01:14:00Zhttps://www.benjystanton.co.uk/blog/work-with-me-at-office-for-national-statistics-ons/<p>I’ve just finished my second week at ONS. You can <a href="https://digitalblog.ons.gov.uk/2016/10/21/my-first-week/">read about my first week on the ONS Digital blog</a>. My second week was spent kicking off a big new project, more about that soon.</p>
<h2>We’re hiring designers and researchers</h2>
<p>ONS are currently on the look out for 2 user experience (UX) designers and a few user researchers. The roles are based in either Newport or Titchfield.</p>
<h2>What do UX designers do?</h2>
<p>The role has different meanings to different people. I really like this <a href="https://www.benjystanton.co.uk/blog/user-experience-ux-designer-skills/">list of UX designer skills</a>.</p>
<p>I don’t think you need to be an expert in all of those things. But, if you are good at a few (and have an appreciation for why the rest are important) then I think you’ll make a good UX designer.</p>
<h2>Open days</h2>
<p>If you’re interested, but would like to know more, we have 2 open days coming up:</p>
<ul>
<li>Newport on Tuesday 1 November from 2pm to 7pm</li>
<li>Titchfield on Thursday 3 November from 2pm to 7pm</li>
</ul>
<p><a href="https://www.ons.gov.uk/aboutus/contactus/officelocations">View map and contact details on ONS website</a></p>
<h2>What’s it like at ONS?</h2>
<p>The main thing that convinced me to work at ONS was this: <a href="https://productforthepeople.xyz/product-is-a-team-sport-c50d234745e#.uk86uylv5">Product is a team sport, a talk/blog post by Matt Jukes</a>.</p>
<p>If you want to get an insight into the culture here at ONS, then I recommend that you take 10 minutes to read that.</p>
<p>Apart from the working culture and good pay (£35k) there are some great benefits, like:</p>
<ul>
<li>flexible working</li>
<li>a Civil Service pension</li>
<li>an on-site nursery at our Newport site</li>
<li>an on-site gym</li>
<li>free car-parking</li>
<li>a training/conference budget</li>
</ul>
<p>I have 3 young kids and I commute from Swansea to Newport each day (50 miles each way). I don’t think I could do this job if it wasn’t for the (actually) flexible working arrangements and support from my managers.</p>
<h2>Apply</h2>
<p>The closing date for applications is Tuesday 15 November 2016. If you have any questions, feel free to <a href="https://twitter.com/benjystanton">direct message (DM) me on Twitter</a>. My DMs are open.</p>
Creating a digital delivery culture2016-10-21T20:50:00Zhttps://www.benjystanton.co.uk/blog/creating-a-digital-delivery-culture/<p>I’m a big fan of this <a href="https://twitter.com/BenHolliday/status/657085783250227200">digital delivery culture poster</a>, from <a href="https://twitter.com/BenHolliday">Ben Holliday</a> and his team at <a href="https://twitter.com/DWPDigital">DWP Digital</a> (Department for Work and Pensions).</p>
<p>Here are the points from the poster:</p>
<ol>
<li>Work in the open</li>
<li>Share, not send</li>
<li>Right people, same room</li>
<li>Less process, more progress</li>
<li>Don’t wait for permission</li>
<li>Show the thing</li>
<li>People, not resources</li>
<li>Build strong communities</li>
<li>Fail fast and learn</li>
</ol>
<h2>My thoughts</h2>
<p>I like to look back over design principles like these every now and then. They help me to focus on what’s important. Creating a good culture is really hard, but it’s essential if you need individuals to work together as a team.</p>
Visual note-taking with Eleanor Beer2016-08-30T13:23:00Zhttps://www.benjystanton.co.uk/blog/visual-note-taking-workshop-with-eleanor-beer/<p>My notes from the Visual Notetaking Made Easy event on Thursday 11th August at Innovation House, Magor.</p>
<p><img src="https://www.benjystanton.co.uk/images/sketchnote-elements.png" alt="A drawing of a star and some lines from my sketchbook." /></p>
<h2>Intro</h2>
<ul>
<li>Visual note-taking is basically notes with doodles</li>
<li>It’s also known as sketchnoting</li>
<li>The basic processes is; listen, filter, draw</li>
<li>It’s useful for creating user journeys, meeting facilitation and conference recording</li>
<li>Listening is a key skill!</li>
</ul>
<h2>Benefits</h2>
<ul>
<li>Improves memory recall</li>
<li>Captures emotion</li>
<li>It’s fun!</li>
<li>People who are usually quiet in meetings feel included</li>
<li>Can help people with low literacy</li>
</ul>
<h2>Elements</h2>
<ul>
<li>Basics: layout, words, objects, containers, lines and arrows</li>
<li>Pictographs are drawings of things; like a book, dog, mobile phone or aeroplane</li>
<li>Ideographs are pictures that represent an idea; like balance, collaboration, education or digital</li>
<li>People (stick figures and smiley faces)</li>
<li>Layouts: linear, circular, random, path or grid</li>
</ul>
<h2>Shopping list</h2>
<h3>Pens</h3>
<ul>
<li><a href="https://www.penandpaper.co.uk/">Pen & Paper, Cardiff</a></li>
</ul>
<h3>Books</h3>
<ul>
<li><a href="http://rohdesign.com/handbook">The Sketchnote Handbook</a></li>
<li><a href="http://www.sketchnotesbook.com/">Sketchnotes</a></li>
<li><a href="https://payhip.com/b/uvS3">A Pocket Guide to Sketchnoting</a></li>
</ul>
<h2>Follow Eleanor Beer</h2>
<ul>
<li><a href="https://twitter.com/eleanorbeer">Eleanor on Twitter</a></li>
<li><a href="https://www.instagram.com/eleanorbeer/">Eleanor on Instagram</a></li>
</ul>
Things my little girls have taught me about feminism2016-08-26T11:12:00Zhttps://www.benjystanton.co.uk/blog/things-my-little-girls-have-taught-me-about-feminism/<p>A rough transcript of my talk on feminism at Ignite Swansea.</p>
<p><img src="https://www.benjystanton.co.uk/images/my-little-girls.png" alt="My 2 little girls, smiling in a phone box." /></p>
<p>Here are my 2 little girls. Don’t be taken in by their cuteness, they are quite evil. Their favourite things are having meltdowns in the supermarket and making fun of my receding hair.</p>
<p>I want to start off with the definition of feminism. According to Google, feminism is:</p>
<blockquote>
<p>“the advocacy of women’s rights on the ground of the equality of the sexes”.</p>
</blockquote>
<p>For me it’s about wanting to live in a equal society, and I just don’t think we are there yet.</p>
<p>Apparently, gendered listening starts at the age of four. My eldest is 5. She’s had one year of listening to adults talk about men and women in different ways, usually to the detriment of women.</p>
<p>A good example of this: once when I was crossing the road I told her to wait for the green man. She asked “why is it always a man?”. This really hit home. It made me realise just how the world is weighted in favour of men.</p>
<p>My girls love Disney Princesses. Initially I was worried that these were too girly, too clichéd. Are they good role models for my kids? But I quickly learnt why they love them. They are exciting, strong, positive role models.</p>
<p>So together, we’re exploring different films and characters. Like My Little Pony: Equestrian Girls. This is an alternative universe where the ponies are human girls who form a rock band, have magical powers and work together to defeat evil dragons.</p>
<p>They enjoy “boy stuff” too, like Marvel and Transformers. But it feels very segregated still. Boys toys and girls toys.</p>
<p>I think companies like Disney and Marvel are slowly creating more diverse role models for kids to look up to though. Apparently, the next Iron Man film will star a 15-year-old black girl.</p>
<p>Star Wars is another good example of franchise that’s being updated. Princess Leia is pretty strong characted in the early films, but in one of them she’s tied up as Jabba’s sex slave, so I’m not going to watch that with my kids.</p>
<p>But in the new star wars, Leia is a General. And one of the lead characters, Rey, is 😮 a woman! I can’t wait to watch these films with my kids when they’re a bit older.</p>
<p>There is a new Star Wars film coming out too. It’s called Rogue One, and it also stars 😱 a woman! Apparently this is a genuine YouTube comment about the trailer:</p>
<blockquote>
<p>“I’m not sexist but Star Wars is about men, men fighting to save the universe. If women can do the same as men, what’s the point? I won’t be seeing this. If you need me I’ll be watching anime.”</p>
</blockquote>
<p>It’s a typical example of the way men react online when gender roles are reversed.</p>
<p>The trolls have been out in force over the new Ghostbusters film too. But look how happy these 2 girls are. This is what representation in the media can do:</p>
<p><img src="https://www.benjystanton.co.uk/images/ghostbusters-representation.jpg" alt="Kristen Wiig meeting 2 girls dressed in Ghostbusters fancy dress." /></p>
<p>The olympics have been full of men saying embarrassing things too.</p>
<p>Such as John Inverdale, saying that Andy Murray was “the first person ever to win two Olympic tennis gold medals”, completely forgetting that Venus and Serena Williams have won four each.</p>
<p>And this <a href="https://twitter.com/beggie_smalls/status/762545510930677760">bloke on Twitter, mansplaining to olympic athlete</a> Annemiek van Vleuten after her horrendous crash by saying: “the first lesson in bicycling, keep your bike steady… whether fast or slow”.</p>
<p>Nearly as bad as mansplaining is manspreading. Guys have a look down at your legs now and if you’re manspreading then do the people either side of you a favour and close them up a little. You’re not that big.</p>
<p><img src="https://www.benjystanton.co.uk/images/manspreading.jpg" alt="Man on a train sitting with his legs very far apart." /></p>
<p>Credit: WNYC New York Public Radio (CC BY-NC 2.0)</p>
<p>So, if like me, you’re keen to be a better man then I recommend following <a href="https://twitter.com/manwhohasitall">@manwhohasitall on twitter</a>. It’s an account that takes headlines from trashy women’s magazines then aims them at men.</p>
<p>Like this one:</p>
<blockquote>
<p>“Men! Is having it all really possible? Kids, relationship, beach hair, imaginative picnic ideas AND a PH balanced intimate area?”</p>
</blockquote>
<p>It highlights the absurd way that women are treated by the media sometimes.</p>
<p>So I’m hear today as a sign of solidarity to say: “My name is Benjy and I’m a feminist”.</p>
<p>…and guys, it’s okay if you want to watch pink, sparkly things sometimes. It doesn’t mean you’re any less of a man. It doesn’t mean you’re gay. It doesn’t mean anything. Unless you want it to. Just relax and enjoy it.</p>
<p><img src="https://www.benjystanton.co.uk/images/glitter-force.gif" alt="A pink super hero draws a huge heart in the sky." /></p>
<p>Thanks.</p>
<h2>Update</h2>
<p>I’ll probably look back on this and cringe. Being a feminist is hard and I’ve probably revealed some of inner prejudices here without realising it. If you have any feedback, <a href="https://twitter.com/benjystanton">let me know over on twitter</a>.</p>
User experience (UX) designer skills2016-08-18T16:06:00Zhttps://www.benjystanton.co.uk/blog/user-experience-ux-designer-skills/<p>A list of skills needed to be a user experience designer, from <a href="http://centercentre.com/">Centre Centre</a>.</p>
<p>(<a href="https://twitter.com/uxward/status/763797497307246592/photo/1">Brandon Ward shared this list on twitter</a>. It was shared as an image so I decided to write it up as text here for prosperity.)</p>
<h2>Technical skills</h2>
<ul>
<li><strong>Front-end development</strong>: coding valid HTML, CSS, JavaScript</li>
<li><strong>Visual design</strong>: understanding the use of colour, grid, layout and typography</li>
<li><strong>Mobile integration</strong>: creating consistent experiences through responsive layouts, touch interactions and input techniques</li>
<li><strong>Project management</strong>: incorporating iterative design, agile practices and software development life cycles</li>
<li><strong>Information architecture</strong>: planning experiences through site mapping, modelling and wireframes</li>
<li><strong>Interaction design</strong>: building flow, form design, micro-interactions and transition animations</li>
<li><strong>Copywriting and content strategy</strong>: writing microcopy, content modelling and content inventories</li>
<li><strong>User research</strong>: conducting field research, usability studies, research synthesis and data analysis</li>
</ul>
<h2>Soft skills</h2>
<ul>
<li><strong>Presenting</strong>: sharing thoughts an design concepts with peers and stakeholders</li>
<li><strong>Facilitating</strong>: extracting design requirements and project direction from peers and stakeholders, while prompting a shared understanding</li>
<li><strong>Critiquing</strong>: receiving, giving and training peers and stakeholders with constructive feedback</li>
<li><strong>Storytelling</strong>: communicating and affirming to peers and stakeholders how decisions were made, how principles were arrived at, and how the design will improve the lives of the users</li>
<li><strong>Sketching</strong>: communicating emerging ideas quickly and exploring problem space with peers and stakeholders</li>
<li><strong>Leadership</strong>: providing vision, direction and passion to peers and stakeholders</li>
</ul>
Should designers design content?2016-07-28T15:07:00Zhttps://www.benjystanton.co.uk/blog/should-designers-design-content/<p>In my experience, interaction and visual designers are often relied upon to write the words used in an interface (also known as microcopy).</p>
<p>Designers are also in a good position to improve longer types of content like blog articles. Remember, this content might have been written by someone who is not experienced at writing for the web.</p>
<p>For these reasons, I think it’s the responsibility of designers to improve a website’s content (unless you are lucky enough to work with a great content designer).</p>
<p><a href="https://www.gov.uk/guidance/content-design/what-is-content-design">What is content design?</a></p>
The first UK Government accessibility meet-up2016-07-22T18:25:00Zhttps://www.benjystanton.co.uk/blog/uk-government-accessibility-meet-up/<p>Earlier this year, I attended a government meet-up at the Mozilla offices in London. There were speakers from UK Government, the National Health Service (NHS) and the British Broadcasting Corporation (BBC), all brought together to talk about how they design accessible services. Here is my quick round-up of the talks and topics covered.</p>
<h2>Accessible design works better for everybody</h2>
<p>Alistair Duggin, head of accessibility at Government Digital Service (GDS) was the meet-up host and first speaker.</p>
<p>He reminded us that, in government, everything needs to work for everybody. We should never exclude anyone on the basis of disability.</p>
<p>When designing for accessibility, it’s important to think about access needs rather that disabilities. Access needs include vision, hearing, motor and cognitive issues. An accessible service or product must be perceivable, operable, understandable and robust to everyone, no matter what their access needs are. He argued that, if something works well in extreme cases, then it’s better for everyone.</p>
<p>Accessibility should always be considered throughout a project. It’s common for accessibility to decrease over time, so don’t forgot about it after it’s gone live.</p>
<h2>Accessibility research at the Home Office</h2>
<p>Emily Ball and James Buller are user researchers at Home Office Digital.</p>
<p>They spoke how about how difficult it can be to organise user research with people who have access needs. The lead time can be up to 6 weeks.</p>
<p>They recommend that you should discover every participant’s digital skill level, reading age and access needs whenever doing research.</p>
<p>At their organisation, they are experimenting with ways to encourage more people to think about accessibility. One of the designers there has created a set of beautifully designed <a href="https://a11ywins.tumblr.com/post/146760045428/uk-home-office-posters">accessibility dos and don’ts posters</a>.</p>
<h2>Writing content for everyone</h2>
<p>Roz Strachan is a content designer at GDS, she is also a teaching assistance in adult literacy classes. She has written a great blog post on <a href="https://gds.blog.gov.uk/2016/02/23/writing-content-for-everyone/">how to write content for everyone</a>.</p>
<p>Her talk included lots of good tips on how to write simple content that can be understood by everybody:</p>
<ul>
<li>keep content short, clear and simple</li>
<li>organise information into manageable chunks</li>
<li>use bullet points to break up long lists</li>
<li>don’t use acronyms</li>
<li>avoid using all capital letters</li>
<li>use words that users use</li>
<li>be direct</li>
</ul>
<h2>Accessible healthcare design</h2>
<p>Mat Johnson is a designer and front end developer at NHS Beta. His team are designing new ways for patients to interact with the NHS digitally.</p>
<p>Everything they do is accessible, because the NHS constitution says that it must provide a “…comprehensive service, available to all”.</p>
<p>He reminded us that accessibility must never be seen as a separate thing. We should always be thinking about it.</p>
<p>He recommended that designers should:</p>
<ul>
<li>challenge overly complex interfaces</li>
<li>use simple, action focused language</li>
<li>design clear and intuitive layouts</li>
<li>pick colours with enough contrast</li>
<li>use clear and legible typefaces</li>
</ul>
<h2>Creating a positive environment at the BBC</h2>
<p>Leena Haque works at the BCC and has autism. Her talk was full of brilliant insight into how people with autism deal with work and life.</p>
<p>For Leena, everything is amplified and sometimes she can feel allergic to her environment. Her autism can cause her brain to overload with anxiety. She compared herself to Godzilla. Godzilla was a misunderstood creature not a monster. He just struggled as the environment (downtown Tokyo) didn’t cater to his needs.</p>
<p>Leena finds it easier to communicate with visual metaphors (her slides were full of illustrations and gifs). But, she stressed how important it is to remember that no two autistic people are the same.</p>
<h2>Further reading</h2>
<p>If you’d like to learn more about accessibility, check out these great resources:</p>
<ul>
<li><a href="https://accessibility.blog.gov.uk/">GDS accessibility blog</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">The four principles of accessibility</a></li>
<li><a href="http://webaim.org/standards/wcag/checklist">WebAIM's WCAG 2.0 checklist</a></li>
</ul>
The New ABCs of Research by Ben Schneiderman2016-06-21T16:30:00Zhttps://www.benjystanton.co.uk/blog/the-new-abcs-of-research/<p>Working at Swansea University has its benefits. I was invited along to a lecture by <a href="https://twitter.com/benbendc">Ben Schneiderman</a> recently, one of the authors of <a href="https://www.amazon.co.uk/Designing-User-Interface-Human-Computer-Interaction/dp/0321537351">Designing the User Interface</a>. Here are my rough notes from his talk.</p>
<h2>New Book: The New ABCs of Research</h2>
<p>Ben was promoting his new book <a href="https://global.oup.com/academic/product/the-new-abcs-of-research-9780198758839?cc=gb&lang=en&">The New ABCs of Research</a>.</p>
<h3>New research context</h3>
<p>The old model of research needs to be updated, because we are facing new challenges:</p>
<ol>
<li>Immense challenges in the 21st Century (e.g. healthcare)</li>
<li>New tools like the web, social media, visual communication</li>
<li>Raised ambitions and expectations about what can be accomplished in a short period of time</li>
</ol>
<h3>Research strategies</h3>
<p>Some of the principles and tips from his talk:</p>
<ul>
<li>work on real world problems</li>
<li>work with actual practitioners</li>
<li>we are witnessing a growing movement in design</li>
<li>design is as important as science and engineering</li>
<li>talk to real users and have empathy</li>
<li>the best way to promote your ideas is to write well</li>
<li>publish in open, accessible, free ways</li>
<li>form teams with diverse individuals and organisations</li>
<li>do something small soon… it’s the path to larger things</li>
<li>be social and be engaged with the wider community</li>
</ul>
<blockquote>
<p>“do something small soon… it’s the path to larger things”<br />
Ben Schneiderman</p>
</blockquote>
Port80 20162016-05-20T10:46:00Zhttps://www.benjystanton.co.uk/blog/port-80-2016/<p>My notes from the brilliant Port80 web design conference, including talks from Gavin Davies, <a href="http://www.digitalaccessibilitycentre.org/">Digital Accessibility Centre</a>, Helen Clark and Ash Nolan.</p>
<h2>Louise Howells</h2>
<h3>Why so serious? Running a team hack day</h3>
<ul>
<li>Louise is a Professional Services Manager at Zengenti</li>
<li>happy working environments are good for staff</li>
<li>good offices need breakout zones</li>
<li>Zengenti call their annual hackathon “Lockdown”</li>
<li>step away from the day job and do something different</li>
<li>teams created digital and physical products like:
<ul>
<li>a games room in the basement</li>
<li>a BBQ area</li>
<li>a website that listed design conferences</li>
</ul>
</li>
<li>helps to foster a community</li>
<li>staff started up book clubs and pool clubs afterwards</li>
<li>it encouraged staff to do job swaps and learn about different areas of the business</li>
</ul>
<h2>Gavin Davies</h2>
<h3>Using build tools</h3>
<ul>
<li>Gavin is an automation engineer/coder at Radify</li>
<li>software is advancing at a scary pace</li>
<li>it’s important to understand things conceptually first</li>
<li>it’s about workflow not particular tools</li>
<li>improve your workflow</li>
<li>reduce tedious, manual tasks</li>
<li>get feedback sooner</li>
<li>use Grunt or Gulp (it doesn’t matter which) to automate your asset pipeline</li>
<li>use linters to highlight bad code</li>
<li>optimise images and minify code</li>
<li>use gulp-rsync to deploy automatically</li>
<li>use source maps to debug your Sass</li>
<li>Yeoman can help get up and running quickly</li>
<li><a href="http://radify.io/blog/using-build-tools/">Blog post about using front-end build tools</a></li>
</ul>
<h2><a href="https://twitter.com/FredAtBootstrap">Fred Heath</a></h2>
<h3>The uncertainty principle</h3>
<ul>
<li>how do we deal with uncertainty?</li>
<li>why do projects fail?</li>
<li>it’s hard (impossible) to estimate project time and cost</li>
<li>cushioning is when you give a client the worst case estimate and double it, this is bad</li>
<li>telling a client you don’t know how long things will take is not much better</li>
<li>Enter SCRUM</li>
<li>2 week sprints, then show client</li>
<li>product backlog > sprint planning > sprint backlog > sprint</li>
<li>behaviour driven development (BDD) is “outside in” development</li>
<li>stakeholders define features</li>
<li>features are like user stories</li>
<li>tools: <a href="https://cucumber.io/">cucumber</a></li>
<li>write scenarios for features</li>
<li>scenarios are like examples e.g. show special offers</li>
<li>these should be in plain English</li>
<li>then write a step definition</li>
<li>sprint planning > define steps (flesh out plan) > do the work > show and tell > retrospective</li>
</ul>
<h2><a href="https://twitter.com/gavinaevans">Gavin Evans</a> and Jaime Purvis</h2>
<h3>Designing accessible websites</h3>
<ul>
<li>accessibility is about not creating barriers right from the design stage</li>
<li>developers need to use the right mark-up</li>
<li>follow web standards and WCAG 2.0</li>
<li>user testing with actual users with disabilities</li>
<li>tips for better mark-up
<ul>
<li>provide alternative text for visual content</li>
<li>consider users who don’t use a mouse</li>
<li>use structure and logical hierarchy</li>
<li>don’t suppress zoom</li>
<li><code>display:none</code> hides it from everyone, so be careful</li>
<li>always style up hover, active, focus</li>
<li>Use tools to check understanding level of your content</li>
<li>html <code><track></code> element to add text or captions to videos (webVTT)</li>
<li>bad error handling is bad</li>
<li>don’t rely on placeholder text only in forms inputs</li>
</ul>
</li>
<li><a href="http://www.html5accessibility.com/">www.html5accessibility.com</a></li>
<li>Use ARIA roles for sectioning</li>
<li>How to use iOS Voiceover
<ul>
<li>two finger tap stops speech</li>
<li>swipe left and right to go to next item</li>
<li>twist hand to choose different elements</li>
<li>swipe down with 2 fingers to read on</li>
</ul>
</li>
<li><code><details></code> and <code><summary></code> in Firefox with <a href="http://www.nvaccess.org/">NVDA</a> skips over it completely</li>
<li>avoid cluttered designs</li>
<li>mobile versions of sites are generally better</li>
<li>the less content the better</li>
<li>label properly, be descriptive but concise</li>
<li>dynamic sites are hard to navigate, if something changes make sure focus changes too</li>
</ul>
<h2><a href="https://twitter.com/malarkey">Andy Clarke</a></h2>
<h3>Designing imaginative grid systems</h3>
<ul>
<li>web design is boring right now</li>
<li><a href="http://everyfuckingwebsite.com/">everyfuckingwebsite.com</a></li>
<li><a href="http://www.bland.ly/#blandly">bland.ly</a></li>
<li>(too busy listening to make proper notes sorry)</li>
<li><a href="https://speakerdeck.com/malarkey/designing-imaginative-grid-systems-port-80-newport">Slides for Andy’s talk: Designing imaginative grid systems</a></li>
</ul>
<h2><a href="https://twitter.com/littlehelli">Helen Clark</a></h2>
<h3>Open and inclusive design</h3>
<ul>
<li>beware stealth stakeholders, these are senior staff who pop up at the end of projects and try to change things</li>
<li>work in the open</li>
<li>document everything done on the project (on Tumblr for example)</li>
<li>speak to customers (end users) to discover user stories</li>
<li>get honest, impartial feedback (users might lie if staff are running the research sessions)</li>
<li>speak to staff (at their place of work) especially front line staff</li>
<li>create a list of priories based on this research</li>
<li>create <a href="http://www.clarkcx.com/advice/paper-prototypes-what-are-they-and-why-use-them">paper prototypes</a></li>
<li>feedback can be applied beyond the website, so share your research</li>
<li>risks of working openly?
<ul>
<li>research should uncover problems not solutions</li>
<li>working in the open can make some people uncomfortable (it shows the behind the scenes, messy, ugly bits)</li>
</ul>
</li>
<li>good research means you can justify design decisions</li>
<li><a href="https://www.codeforamerica.org/">Code for America</a>
<ul>
<li>build iteratively</li>
<li>people’s needs first</li>
<li>design with data</li>
<li>open by default</li>
<li>ensure everyone can participate</li>
</ul>
</li>
<li><a href="http://www.growthdrivendesign.com/">Growth Driven Design</a>
<ul>
<li>launching the website shouldn’t be the end</li>
<li>launch a basic site first</li>
<li>build the must-haves, and leave the nice-to-haves until later</li>
<li>then do continuous improvement</li>
</ul>
</li>
<li>beware: clients might block access to users if they feel left out of research</li>
<li>immerse the client in the design team, then both can communicate with the audience</li>
</ul>
<h2>Ashley Nolan</h2>
<h3>Developing for the unknown</h3>
<ul>
<li>Ash is front end dev at Just Eat</li>
<li>no docs or commenting leads to legacy code straight away</li>
<li>put the right things in place from the start: structure and workflow</li>
<li>workflow
<ul>
<li>grunt and gulp can act as self documentation to show new devs what workflows exists</li>
<li>grunt or gulp, it doesn’t matter</li>
<li>create common workflows: e.g. Sass, linting, minifying</li>
</ul>
</li>
<li>documentation
<ul>
<li>good commenting</li>
<li>style guides</li>
<li>“programs should be written for people to read and incidentally for machines to understand”</li>
<li>describe what components do and where they’re used</li>
</ul>
</li>
<li>style guide and component library
<ul>
<li>look for patterns</li>
<li>reuse them across website</li>
<li>organise CSS</li>
<li>start small and extend</li>
<li>components only worry about themselves</li>
<li>Read <a href="http://smacss.com/">SMACSS</a> by Snook</li>
</ul>
</li>
<li>Naming schemes: BEM or SUIT
<ul>
<li>be consistent</li>
<li>show relationship between class names</li>
<li>BEM: Block, elements, modifier</li>
<li><a href="http://trykickoff.com/learn/css.html#namingscheme">BEM naming scheme</a></li>
<li><a href="http://trykickoff.com/statix/">Statix, a reusable snippets tool</a></li>
<li>Static site generators <a href="http://assemble.io/">Assemble</a> or <a href="https://jekyllrb.com/">Jekyll</a></li>
</ul>
</li>
<li>Separate your concerns
<ul>
<li>decouple CSS classes from JS</li>
<li>hook JS into data attributes or IDs</li>
</ul>
</li>
<li>look into <a href="http://postcss.org/">PostCSS</a></li>
<li>whatever we create should be built to last</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://www.flickr.com/photos/seanuk">Photos from Port80 2016 by Sean Johnson</a></li>
<li><a href="http://www.mearso.co.uk/sketchnotes/port80-2016/">Sketch notes from Port80 2016 by Kevin Mears</a></li>
</ul>
The last ten percent2016-04-17T20:47:00Zhttps://www.benjystanton.co.uk/blog/the-last-ten-percent/<p>At my first design job, we used to talk about the last 10%. This was the time that we’d set aside at the end of a project, to sit down and review the website together.</p>
<p>We’d compare the (almost) finished website against the mock-ups, the navigation diagrams and the content plan. We’d stop <em>making</em> the site and try to <em>experience</em> the site. We solved content issues, white space issues, typography issues, interaction issues. We were designing in the browser, although we didn’t call it that.</p>
<blockquote>
<p>We were designing in the browser, although we didn’t call it that.</p>
</blockquote>
<p>Sometimes we’d even be shifting pixels about. Yeah I know pixel perfection is an unrealistic goal, but if every element is 5 pixels out, then the overall effect can be a design that feels <a href="http://us5.campaign-archive2.com/?u=7e093c5cf4&id=564702bd96">disjointed and unbalanced</a>.</p>
<p>It would always take longer than 10% of the project budget to get this done. But the effect was usually huge. It turned a site from an average one into a great one.</p>
<p>Part of the downfall of that business was that later on, we tried to cut out this process. We tried to compartmentalise our individual skills. We tried to force a waterfall approach and to become more streamlined. We stopped allowing for the final 10%. This meant that we shipped websites that weren’t finished, even though we had ticked every box in “our process”.</p>
<p>For a long time I held on the the crazy idea that better planning, better skills and more experience would lead to projects that didn’t need this review process.</p>
<p>Whatever you call it — the last 10%, testing, proofing, quality assurance — this is when the real work starts. It’s much more agile and much more realistic. It’s how really good products and services are designed.</p>
<p>Now, the last 10% usually takes up about 90% of the budget.</p>
Research findings over the long term2016-04-16T17:57:00Zhttps://www.benjystanton.co.uk/blog/research-findings-long-term/<p>My rough and patchy notes from the Cross Government Research meet-up that happened on Tuesday 12 April 2016 at DVLA in Swansea.</p>
<h2><a href="https://twitter.com/daveellender">Dave Ellender</a></h2>
<h3>Stop important stories from being forgotten</h3>
<ul>
<li>create a spreadsheet of user stories</li>
<li>give each story a star rating</li>
<li>star rating = how many times this problem was seen</li>
<li>use this rating to help prioritise backlog</li>
<li>product owners can really relate to the star rating</li>
<li>if design fixes don’t meet the user need, this method helps to push issues back to the top of the agenda</li>
</ul>
<h3>Example user story spreadsheet</h3>
<table>
<thead>
<tr>
<th>ID</th>
<th>Story</th>
<th>Status</th>
<th>Source</th>
<th>Star Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>Story number</td>
<td>User story</td>
<td>Fixed or not?</td>
<td>Date & time</td>
<td>*****</td>
</tr>
</tbody>
</table>
<h2><a href="https://twitter.com/jwaterworth">John Waterworth</a></h2>
<h3>Make research data traceable</h3>
<ul>
<li>create one folder per round</li>
<li>e.g. date - R12 - name of study</li>
<li>keep all materials in there</li>
<li>participant naming: R12-P3-name-of-file.jpg</li>
<li>prune video files (keep key recordings, delete everything else)</li>
<li>watch out for accidental deletion (especially when using shared folders on Google Drive or Dropbox)</li>
</ul>
<h3>Sharing and keeping findings</h3>
<ul>
<li>show and tell what you’ve learnt (this builds up a “corporate memory”)</li>
<li>show 5 to 10 findings per showcase</li>
<li>each slide should have: a heading, 3 points and an image</li>
<li>share the slides around afterwards</li>
<li>build up a library of slides overtime</li>
<li>helps you to understand and remember</li>
<li>create a summary slide at the end of each phase to round-up important findings</li>
</ul>
<h3>Share at every opportunity</h3>
<ul>
<li>blog posts</li>
<li>make a comic</li>
<li>make posters</li>
<li>create “big picture” journey maps</li>
<li>create things that stay after you’ve gone (this is tricky)</li>
</ul>
<h2><a href="https://twitter.com/vickytnz">Vicky Teinaki</a></h2>
<h3>Documenting changes in agile teams</h3>
<ul>
<li>things get buried in confluence</li>
<li>create living documents</li>
<li>Google Drive FTW</li>
<li>spreadsheets don’t work too well</li>
<li>try Google presentations (these are visual, malleable, trackable)</li>
<li>in Google videos, you can link to timestamps</li>
<li>create a stack of successes as you go</li>
<li>use them for decision making</li>
<li>these will help bring new staff up to speed</li>
<li>it’s a hub, it doesn’t have to include everything</li>
<li><strong>everything must be shareable</strong></li>
</ul>
<h2>Tara Land</h2>
<h3>User needs</h3>
<ul>
<li>user needs should not become too granular</li>
<li>real user needs are stable (they don’t change much overtime)</li>
<li>they come from the lived experience of real people</li>
<li>read <a href="http://rosenfeldmedia.com/books/mental-models/">Indy Young’s Mental Models book</a></li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://userresearch.blog.gov.uk/2016/05/20/cross-government-meetup-research-findings-over-the-long-term/">GDS blog post: Research findings over the long term</a></li>
</ul>
Training for the Welsh 3 Peaks2016-03-29T16:20:00Zhttps://www.benjystanton.co.uk/blog/training-welsh-three-peaks/<p>I’m currently in training for the Welsh 3 Peaks Challenge. Together with Hapo, Liam and Sami from Leadin, I’m going to be walking up the three tallest peaks in Wales (Snowdon, Cadair Idris and Pen y Fan) in 15 hours.</p>
<p>Our aim is to raise £1000 for <a href="http://www.tyhafan.org/">Tŷ Hafan</a>. You can <a href="https://www.justgiving.com/leadin-uk">sponsor us here</a>.</p>
<h2>Training walks</h2>
<p>In effort to get fit and make sure we can complete the challenge on the day, we’ve been doing some training walks around South Wales.</p>
<h3>Brecon waterfalls</h3>
<p><img src="https://www.benjystanton.co.uk/images/brecon-waterfalls.jpg" alt="One of the many waterfalls we saw" /></p>
<p><span>7.7</span>
<span>miles</span></p>
<p><span>2:38</span>
<span>hours</span></p>
<h3>Port Eynon to Llanmadoc (Gower)</h3>
<p><img src="https://www.benjystanton.co.uk/images/rhossili-bay.jpg" alt="Panorama of Rhossili Bay" /></p>
<p><span>13.5</span>
<span>miles</span></p>
<p><span>4:08</span>
<span>hours</span></p>
<h3>Brecon Beacons</h3>
<p><img src="https://www.benjystanton.co.uk/images/brecon-beacons.jpg" alt="Panorama of the ridges on the way to Pen y Fan" /></p>
<p><span>12.6</span>
<span>miles</span></p>
<p><span>4:39</span>
<span>hours</span></p>
<h2>What’s next?</h2>
<p>More training coming soon, watch this space.</p>
Speaking at Design Swansea in April2016-03-27T20:50:00Zhttps://www.benjystanton.co.uk/blog/speaking-design-swansea-april/<p>I’ve been meaning to speak at Design Swansea for a little while now and I've finally got a half-decent idea for a talk. (Design Swansea is a monthly meetup that I organise).</p>
<h2>Talk title</h2>
<p>“How to be a user experience designer without losing your soul”.</p>
<h2>Slides</h2>
<p><a href="https://speakerdeck.com/benjystanton/how-to-be-a-user-experience-designer-without-losing-your-soul">View my slides over on Speaker Deck</a></p>
<h2>Talk blurb</h2>
<p>Every designer worries about being a slave to the corporate fat cats, but if you focus on helping people with their problems, you can avoid eternal damnation and sleep a little better at night.</p>
<h2>Event information</h2>
<p>Thursday 7th April, from 7pm at <a href="https://swansea.techhub.com/">TechHub</a>.</p>
<p><a href="https://twitter.com/matthewbeta">Matthew Jackson</a>, front end developer at <a href="http://bluegg.co.uk/">Bluegg</a>, is also speaking.</p>
Great service design at Premier Inn2016-03-26T20:50:00Zhttps://www.benjystanton.co.uk/blog/great-service-design-premier-inn/<p>I’m always impressed by the good service that me and my family get at Premier Inn.</p>
<p>We stayed at one in Portsmouth last summer. I made a list of all the little things that helped make the stay that little bit better.</p>
<h2>The little touches…</h2>
<ul>
<li>nicely decorated lobby and rooms</li>
<li>clean and free of clutter</li>
<li>friendly, happy, helpful staff</li>
<li>staff that made polite conversation (“good morning” or “how did you sleep?”) for some reason this is tricky to get right in the UK</li>
<li>well designed posters, flyers and menus</li>
<li>working air conditioning in the room</li>
<li>no quick and dirty posters made by staff</li>
<li>comfy bed</li>
<li>12 o’clock checkout</li>
<li>nice food at breakfast</li>
<li>kids eat free</li>
<li>staff sat us down quickly in the restaurant and said we could settle up the bill on way the out (handy when you have kids)</li>
<li>2 for 1 drinks at the bar (handy when you have kids)</li>
</ul>
<h2>This ain’t The Ritz</h2>
<p>All the little touches add up to make a pleasant experience. We don’t need (or expect) five star treatment.</p>
<p>Premier Inn know they ain’t The Ritz, and they’re okay with that. They specialise in not being The Ritz.</p>
<p>They understand their customers well, and give them just what they need.</p>
Usability research labs in the UK2016-03-13T20:34:00Zhttps://www.benjystanton.co.uk/blog/usability-research-labs-uk/<p>I’ve started a list of research labs in the UK. These locations are great for running usability tests. Perfect if you’re a UX designer or researcher.</p>
<p>This list is hosted on GitHub, so please get stuck in and make some improvements if you can…</p>
<ul>
<li><a href="http://benjystanton.github.io/usability-labs/">A list of usability research labs in the UK</a></li>
<li><a href="https://github.com/benjystanton/usability-labs">The repo on GitHub</a></li>
</ul>
Tools for recording usability tests2016-01-22T20:53:00Zhttps://www.benjystanton.co.uk/blog/tools-for-recording-usability-tests/<p>Good old Twitter… I asked my friends to <a href="https://twitter.com/benjystanton/status/690206840827834368">recommend screen recording software</a> (specifically for recording usability tests), and I got a list of great looking apps to try. Silverback was the clear favourite, although the latest version appears to be in private beta.</p>
<ul>
<li>Silverback</li>
<li><a href="https://support.apple.com/en-gb/HT201066">Quicktime</a></li>
<li>Viewport</li>
<li><a href="https://lookback.io/">Lookback</a></li>
<li><a href="https://validately.com/">Validately</a></li>
<li><a href="https://obsproject.com/">Open Broadcaster Software</a></li>
<li><a href="http://www.telestream.net/screenflow/overview.htm">Screenflow</a></li>
</ul>
<p>Did I miss anything?</p>
Baby guerrillas2016-01-20T00:00:00Zhttps://www.benjystanton.co.uk/blog/baby-guerrillas/<p><img src="https://www.benjystanton.co.uk/images/baby-playing-mario-wide.jpg" alt="A baby pointing to Super Mario on a screen" /></p>
<p>I love watching my kids playing with technology. Sometimes they struggle, but more often than not, they know exactly what to do. They are only two and four years old, but I’m sure that in a few years they’ll be showing me what to do.</p>
<p>They remember my passcode and can use it to unlock my phone, and they are even budding photographers (their specialities are selfies).</p>
<p>Even when they make mistakes, they are intelligent ones. For example, they assume that all screens are touch enabled. So naturally they slap the TV when they want to change the channel.</p>
<p>Now they’ve learnt that the TV doesn’t respond to touch, they stand in front of it making big gestures with their arms like an orchestra conductor, commanding me to navigate to the content they want. (Interestingly; when they say “go up” that means I should scroll down).</p>
<h2>Button pushing</h2>
<p>It’s also fascinating to see what shapes they recognise as buttons when they play with my iPhone. They can navigate forward and backward through well designed apps, even though they can’t read.</p>
<p>They are beginning to understand basic interface patterns. Naturals at swiping, tapping and dragging; they quickly get frustrated with slow, unresponsive interactions. Unfortunately for me this means that they prefer using only the newest, most expensive devices. (Top tip for new parents; get some good insurance).</p>
<h2>An error occurred</h2>
<p>More recently, my eldest who is four, has been learning to read. We were watching Netflix together on the Apple TV when something went wrong. An error message popped up and she began to read…</p>
<blockquote>
<p>“An error occurred loading this content. Try again later.”</p>
</blockquote>
<p>The words were a bit too difficult for her so I had to read them out and then explain to her what had happened. I don’t always pay much attention to these messages, but this made me realise how cold and unnatural the language was. It was shame that our family time was interrupted with such a thoughtless message.</p>
<h2>Empathy</h2>
<p>When I play with my kids like this, I often think of it as a guerrilla usability test. Watching them can often point out some glaring problems with the way something has been designed and you begin to see the world through their naïve eyes.</p>
<p>It also reminds me how important it is for designers to observe users and work closely with researchers. Having empathy for people is difficult to achieve when you are stuck in an office. On the other hand, witnessing people interact with something you’ve designed can profoundly change how you prioritise what needs to be improved.</p>
When things get tedious2015-11-12T14:20:00Zhttps://www.benjystanton.co.uk/blog/when-things-get-tedious/<p>There is an on-going debate around whether or not designers should know how to code.</p>
<p>My feeling is that we should know enough to be able to tweak things in DevTools and create simple prototypes in HTML, but that we shouldn’t worry about writing production ready stuff.</p>
<h2>Design tools are for sketching</h2>
<p>I try to remember that design tools (like Photoshop or Sketch) are for lo-fi sketching. Even highly detailed mock-ups can never really be considered high fidelity, because they lack the responsiveness and interactivity of HTML and CSS. They can never be truly finished.</p>
<p>Designing mock-ups is an incredibly useful part of most projects for me. But there is usually a point where they become tedious to maintain. Pixel perfection is impossible, but that doesn’t mean that visual finish isn’t important. Typographic hierarchy, measure, whitespace and grid ratios are. These are very tricky to control if you don’t know at least a little CSS.</p>
<h2>When things get tedious, switch to code</h2>
<p>Certain tasks become very repetitive or even difficult when using traditional design tools. Things like…</p>
<ul>
<li>mocking up the same page at different sizes</li>
<li>styling up generic pages that could be built from existing components</li>
<li>making small changes to existing pages</li>
<li>explaining interactions and animation</li>
</ul>
<p>I think it’s a designers duty to recognise this and make sure they aren’t spending too much time on things that could be done better in the browser.</p>
<h2>Not Photoshop, not Sketch either</h2>
<p>I know a lot of designers hope that one day a tool like Photoshop will be able to automatically export good HTML & CSS. I can’t see that happening, but tools like <a href="http://www.invisionapp.com/">InVision</a>, <a href="http://sass-lang.com/">Sass</a> and <a href="https://developer.chrome.com/devtools">DevTools</a> are getting closer and closer to becoming what we need. Even if they don’t look like traditional design tools at first glance.</p>
Goodbye WordPress2015-11-05T15:53:00Zhttps://www.benjystanton.co.uk/blog/goodbye-wordpress/<p>Today marks the day that I’ve finally switched my blog over from WordPress to <a href="https://jekyllrb.com/" title="Jekyll’s Website">Jekyll</a>.</p>
<p>WordPress has served me very well over the years but I wanted something a little simpler.</p>
<p>The main reasons I prefer Jekyll are…</p>
<ul>
<li>I can write in MarkDown</li>
<li>it uses Sass by default</li>
<li>I can do everything locally first</li>
<li>it’s easy to sync everything with GitHub</li>
<li>the templating system is simpler</li>
<li>…which allows me to design more complex layouts</li>
</ul>
What’s the best way to learn UX?2015-03-28T20:06:06Zhttps://www.benjystanton.co.uk/blog/whats-the-best-way-to-learn-ux/<p>A friend of mine asked for ideas on learning UX, so <a href="https://twitter.com/benjystanton/status/581882786790928385">I turned to Twitter</a> and got a couple of really great responses.</p>
<p>As Leisa Reichelt hinted at on Twitter; UX is a broad term and it can mean slightly different things to different people (usability, wireframes, user research, interaction design, HCI etc). Nevertheless, these resources should help you if you are just starting out (or even if you’re not)…</p>
<h2>Leisa Reichelt</h2>
<p><a href="https://twitter.com/leisa">Leisa</a> <s>is</s> was the Head of User Research at <a href="https://www.gov.uk/">GOV.UK</a> at the time, and she gave me a list of resources to look at…</p>
<ul>
<li><a href="https://userresearch.blog.gov.uk/2015/03/18/so-youre-going-to-be-a-user-researcher-top-tips-to-get-you-going/">So, you’re going to be a user researcher: top tips to get you going</a></li>
</ul>
<h2>Andy Budd</h2>
<p><a href="https://twitter.com/andybudd">Andy</a> is a User Experience Designer, partner at <a href="http://clearleft.com/">Clearleft</a> and curator of <a href="http://2014.dconstruct.org/">dConstruct</a> and <a href="http://2015.uxlondon.com/">UX London</a>.</p>
<p>Andy recommend this <a href="https://generalassemb.ly/education/user-experience-design">User Experience Design Course</a> by General Assembly in London.</p>
<p><em>P.S. Thanks to <a href="https://twitter.com/zachinglis">Zach Inglis</a> too for pointing me in the right direction.</em></p>
Finding work and managing money as a freelancer2015-03-09T22:05:22Zhttps://www.benjystanton.co.uk/blog/finding-work-and-managing-money-as-a-freelancer/<p>I’ve been freelancing this time around for just over a year, but in total, I’ve been self employed for over 4. I think that having been self employed on 2 separate occasions has given me an interesting perspective on what works and what doesn’t. This is a round-up of how I find new work and how I manage the money side of things.</p>
<h2>Finding work</h2>
<p>I have 3 regular clients that give me 90% of my work. All of these clients are people that have I have worked with closely in the past. Luckily, this has meant that I haven’t had to ‘go out’ and find more work.</p>
<p>However this tells me that I need to build up more long-term relationships with people, if I want a hope of getting new clients in the future.</p>
<h3>Networking with a small ‘n’</h3>
<p>I don’t like the term networking. I went to some proper Networking things when I first started out. The organiser actually said the word “Synergy” so I never went back.</p>
<p>Even though Networking (with a capital N) sucks, in reality though, you do need to network.</p>
<p>Blog, speak at meet-ups, help people on Twitter who ask for help. Doing all these things can help grow your network of contacts, and people will then help you in return. Just share what you know, don’t worry about being an expert.</p>
<blockquote>
<p>Work hard. Don’t be an asshole. Share what you know.
<br />— <a href="https://twitter.com/brad_frost/status/450619808795885569" title="Brad on Twitter">Brad Frost</a></p>
</blockquote>
<p>When you first go self employed, tell as many people as you can. Tweet about it, share it on Facebook, tell your Nan. You never know where work will come from… and in my experience, people like to help you out when you are just starting.</p>
<h3>Love thy client</h3>
<p>I try to work really hard for my clients. Not only do I want to do a good job for them. But I want them to recommend me to other potential clients. Given that it can be hard to get new clients… hang on to the good ones that you have. Find ways to show them that you care about their business.</p>
<h3>Go out and find work</h3>
<ul>
<li>Tweet that you are looking for work</li>
<li>Ask local agencies if you can pop in for a coffee (don’t give them the hard sell)</li>
<li><a href="http://www.workingnomads.co/" title="A curated list of remote jobs">Working Nomads</a></li>
<li><a href="https://needhq.com/" title="Apply as a freelancer to receive job notifications">Need</a></li>
</ul>
<h2>Money, business, tax etc.</h2>
<h3>Being self employed</h3>
<p>Registering as self employed is very easy and you can do it via The HMRC website. One day, I intend to go VAT registered and become a Limited Company, but for now self employment suits me fine.</p>
<h3>Hang on to paperwork</h3>
<p>If you have just left your job, hang on to your pay slips and P45. In fact, just keep every bit of paper from now on.</p>
<h3>Saving for your tax bill</h3>
<p>Every month, I aim to ‘pay myself’ a regular amount of money. In reality this means transferring money from my business account into my personal account. I then keep a portion of this aside in a savings account, ready for my tax bill.</p>
<h3>Banking</h3>
<p>Having a separate bank account is a really good idea. I found that using Lloyds (because I do my personal banking with them) was the quickest and easiest was to setup a business account.</p>
<p>Most business accounts tend to have a ‘free banking’ period (around 12 months) where they won’t charge you for transactions.</p>
<h3>Use FreeAgent</h3>
<p>FreeAgent is a simple accounting tool that helps you to track your time, send invoices, log expenses and fill out your tax return. I can’t recommend it enough.</p>
<h3>What to charge</h3>
<p>I used the handy UK Freelance Rates Calculator by <a href="https://twitter.com/cole007" title="Cole on Twitter">Cole Henley</a>.</p>
<h3>Get business insurance</h3>
<p>Having business insurance helps me to sleep at night. I used <a href="http://insurancebyjack.co.uk/">Insurance by Jack</a> to sort my policy.</p>
<h3>Expenses</h3>
<p>Record all your expenses. In most cases, I receive invoices via email (for Adobe Creative Cloud, FreeAgent, hosting etc.) which are easy to save for later. If you are buying things when out and about, make sure you keep the receipt (you can claim expenses on things you pay for using cash and personal cards too). Keep a note of mileage, travel costs and house bills too.</p>
<h2>Conclusion</h2>
<p>I hope this helps with some of the questions that you may have about going freelance. If you have questions… feel free to <a href="https://twitter.com/benjystanton" title="Benjy on Twitter">tweet me</a>.</p>
Reasons London2015-02-22T21:26:01Zhttps://www.benjystanton.co.uk/blog/reasonslondon/<p>This a quick write up of my experience at <a href="http://reasons.to/">Reasons:London</a> this weekend (Friday 20th February).</p>
<p>The venue was beautiful and at lunch time we went to <a href="https://www.yelp.co.uk/biz/whitecross-market-london">Whitecross Market</a> for some great street food (it’s worth a trip in itself).</p>
<p>We drove from Swansea, so we parked in <a href="http://www.ncp.co.uk/find-a-car-park/car-parks/hounslow-west-stn-lul/">Hounslow West NCP</a>. It’s really cheap and easy to drive to, but beware… some of the car park becomes a market on Saturday morning. We found this out the hard way.</p>
<h2>Harry Roberts</h2>
<p>Harry opened with a fairly technical look at Sass techniques for building modular CSS. Specifically for when building websites that allow certain levels of customisation and theming. He looked at ways to balance performance with pragmatism.</p>
<ul>
<li><a href="https://twitter.com/csswizardry">@csswizardry</a></li>
<li><a href="http://csswizardry.com/">csswizardry.com</a></li>
<li><a href="https://speakerdeck.com/csswizardry/4half-methods-for-theming-in-s-css" title=" 4½ Methods for Theming in (S)CSS">Slides</a></li>
</ul>
<h2>Stefanie Posavec</h2>
<p>Stef is a data designer who has worked on some really beautiful projects for clients like Facebook and the Southbank Centre. She opened by talking about an old episode of Newsnight where they covered infographics. Weirdly I remembered this exact episode… I even <a href="https://www.benjystanton.co.uk/blog/bbc-newsnight-talks-graphic-design-info-graphics/">blogged about it at the time</a>.</p>
<p>She called for designers to move on from infographics… using her amazing work as an example of what is possible when you push yourself to come up with original work based on data.</p>
<ul>
<li><a href="https://twitter.com/stefpos">@stefpos</a></li>
<li><a href="http://www.stefanieposavec.co.uk/">stefanieposavec.co.uk</a></li>
</ul>
<h2>James Hall</h2>
<p>James Hall had a rather sobering (but really entertaining) round-up of security issues. TLDR:</p>
<ul>
<li>Don’t use public wifi</li>
<li>Don’t use internet banking</li>
<li>Don’t build websites</li>
</ul>
<p>… all these things are just too insecure.</p>
<ul>
<li><a href="https://twitter.com/mrrio">@MrRio</a></li>
<li><a href="https://parall.ax/">parall.ax</a></li>
</ul>
<h2>Anna Dahlström</h2>
<p>Anna had a really good round-up of thoughts regarding designing for new devices, especially when looking ahead to wearable tech and internet of things things like the Apple Watch. She introduced me to the idea of <a href="http://globalmoxie.com/blog/index.shtml">data rash</a> — a kind of eruption of notifications that is becoming more visible and distracting, the more devices we have.</p>
<ul>
<li><a href="https://twitter.com/annadahlstrom">@annadahlstrom</a></li>
<li><a href="http://www.annadahlstrom.com/">annadahlstrom.com</a></li>
<li><a href="http://www.slideshare.net/annadahlstrom/reasons-london-beyondthehamburgermenu20feb2015" title="Beyond the hamburger menu">Slides</a></li>
</ul>
<h2>Andrew Clarke</h2>
<p>Andy called for web designers to take inspiration from advertising, by reviving the role of the art director. He argued that the recent focus on process and tools had lead teams to overlook the kind of creativity that can often lead to truly original designs. Oh yeah, there were apes too.</p>
<ul>
<li><a href="https://twitter.com/Malarkey">@Malarkey</a></li>
<li><a href="http://stuffandnonsense.co.uk/">stuffandnonsense.co.uk</a></li>
</ul>
<h2>Elliot Jay Stocks</h2>
<p>Elliot’s talk was a bit of a retrospective of his work, mixed with tips on designing with grids and running an ethical business. It was a lot to cover, but very entertaining and one of my favourite talks. He recommended the experience of working with friends (and even loved ones) and the virtues of always <a href="https://elliotjaystocks.com/blog/pay-your-contributors/">paying your contributors</a>.</p>
<ul>
<li><a href="https://twitter.com/elliotjaystocks">@elliotjaystocks</a></li>
<li><a href="https://www.elliotjaystocks.com/">elliotjaystocks.com</a></li>
</ul>
My top albums 20142014-12-12T13:57:11Zhttps://www.benjystanton.co.uk/blog/my-top-albums-2014/<p>I love music and I love having the time to explore weird and wonderful new albums. Being a freelancer, music helps to keep me company, keeps me focused and lifts my mood.</p>
<p>According to <a href="http://www.last.fm/user/benjystanton" title="Benjy Stanton on Last.fm">my Last.fm profile</a>, these are my top albums for 2014 (with Spotify links)…</p>
<ol>
<li><a href="http://open.spotify.com/album/0bfdoENsRuAz86QNfSaMOx" title="At Best Cuckold on Spotify">At Best Cuckold</a> by Avi Buffalo</li>
<li><a href="http://open.spotify.com/album/6TbkWAqqY4nhQnYim61IU8" title="This Is All Yours on Spotify">This Is All Yours</a> by Alt-J</li>
<li><a href="http://open.spotify.com/album/30zCWpQv7uwfBlQ9UjkqLb" title="The Night Is Young on Spotify">The Night Is Young</a> by The 2 Bears</li>
<li><a href="http://open.spotify.com/album/1iVB81BMYrXZiNtzYY3vTg" title="The Scenic Route on Spotify">The Scenic Route</a> by Panacea</li>
<li><a href="http://open.spotify.com/album/1dKh4z5Aayt8FFDWjO5FDh" title="Singles on Spotify">Singles</a> by Future Islands</li>
<li><a href="http://open.spotify.com/album/3TQE2fU2KcyjCFutQ2dq2i" title="Wooden Aquarium on Spotify">Wooden Aquarium</a> by Mazes</li>
<li><a href="http://open.spotify.com/album/5LOVEXnGFLMChzdUNRWRpB" title="They Want My Soul on Spotify">They Want My Soul</a> by Spoon</li>
<li><a href="http://open.spotify.com/album/4jLLt8pqzGxWZ8waNX8ylJ" title="Our Love on Spotify">Our Love</a> by Caribou</li>
<li><a href="http://open.spotify.com/album/6IH6co1QUS7uXoyPDv0rIr" title="Jungle on Spotify">Jungle</a> by Jungle</li>
<li><a href="http://open.spotify.com/album/44ErjiiG1YiiRFMZQL7De2" title="Keep Moving on Spotify">Keep Moving</a> by Hyde & Beast</li>
</ol>
Responsive HTML email talk at Winter LocalHost 20142014-11-25T21:10:07Zhttps://www.benjystanton.co.uk/blog/responsive-html-email-talk-at-winter-localhost-2014/<p>This talk was an a overview of the way I create responsive HTML emails, covering design, build and most importability testing (at Port80 Winter Localhost 2014).</p>
<p><a href="https://www.slideshare.net/benjystanton/responsive-html-email" title="My slides on SlideShare">Check out my slides</a>.</p>
Swansea design meet-up2014-11-25T09:16:32Zhttps://www.benjystanton.co.uk/blog/swansea-design-meet-up/<p>I’m planning a design meet-up in Swansea. This is a timeline of my notes (expect them to change a lot).</p>
<h2>10th February 2015</h2>
<ul>
<li>Booked 2 speakers for the first event (Tim Morgan and Paul Pod)</li>
<li>Got TechHub Swansea onboard as the second sponsors</li>
<li>Using Get Invited for ticketing</li>
<li>Working on v2 of the website</li>
<li>Created information for potential sponsors</li>
</ul>
<h2>26th January 2015</h2>
<ul>
<li>Launched a basic holding page</li>
<li>Create a <a href="https://confirmsubscription.com/h/t/CF92D10C90D42536" title="Email newsletter subscribe form">subscribe form for our email newsletter</a></li>
</ul>
<h2>21st January 2015</h2>
<ul>
<li>Designed a <a href="https://dribbble.com/shots/1899347-Early-logo-for-Design-Swansea" title="Early Design Swansea logo">basic logo</a> to get things going</li>
<li>Signed up for a Twitter account: <a href="https://twitter.com/DesignSwansea" title="Design Swansea on Twitter">@DesignSwansea</a></li>
<li>Got <a href="https://www.campaignmonitor.com/" title="Campaign Monitor">Campaign Monitor</a> onboard as sponsors</li>
</ul>
<h2>19th January 2015</h2>
<ul>
<li>Email Techhub Swansea to get the ball rolling with the first event.</li>
</ul>
<h2>15th December 2014</h2>
<ul>
<li>Contact Design Stuff Cardiff and Second Wednesday for advice.</li>
</ul>
<h2>11th December 2014</h2>
<ul>
<li>Went to Design Stuff Cardiff to check it out and have a chat with the organisers.</li>
</ul>
<h2>5th December 2014</h2>
<ul>
<li>Continue to share and promote the survey</li>
<li>Getting lots of interest and offers of help</li>
</ul>
<h2>1st December 2014</h2>
<ul>
<li>Published a survey</li>
</ul>
<h2>26th November 2014</h2>
<ul>
<li>Draft a survey aimed at designers in Swansea and run it past Paul, Jade and Gareth</li>
</ul>
<h2>25th November 2014</h2>
<ul>
<li>Start this blog post (I like to design in the open whenever I get the chance)</li>
</ul>
<h2>24th November 2014</h2>
<ul>
<li>Announced the <a href="https://twitter.com/benjystanton/status/536831454991618049" title="My initial tweet about the design meet-up">idea on Twitter</a> (I have to do it now)</li>
<li>Went to the Swansea Software Development Meet-up to chat about it with Viv, Paul and Nic</li>
</ul>
My BlogConf slides2014-10-11T21:01:51Zhttps://www.benjystanton.co.uk/blog/my-blogconf-slides/<p>Last Saturday (4th October) I spoke at BlogConf, an event aimed at bloggers of all levels. The speakers were a mix of bloggers, journalists, photographers and even poets.</p>
<p>My talk was an introduction to web design and I really wondered how best to pitch it – should it be practical or just a general overview?</p>
<p>In the end I decided to base the talk around 3 ideas that have helped me to become a better web designer…</p>
<ol>
<li>Release things early, get <strong>feedback</strong> and improve</li>
<li>Learn as much as you can about <strong>typography</strong></li>
<li>Get familiar with <strong>code</strong></li>
</ol>
<p><a href="https://www.slideshare.net/benjystanton/blog-design-at-blogconf" title="My slides on SlideShare">Check out my slides</a>.</p>
Who inspired me2014-10-08T13:09:08Zhttps://www.benjystanton.co.uk/blog/who-inspired-me/<p>There are plenty of well known people out there that inspire me, but I thought I’d take this opportunity to thank the two guys who gave me my first break.</p>
<p>I’d just finished uni and my sister’s boyfriend Tariq was completing his computer science degree. He’d met Anthony on his course and they had decided to form a web design agency. They’d lined up some clients and even worked on a few projects together, but they needed a designer, so after giving me some freelance work (where I was asked to illustrate an astrology board game) they offered me a job.</p>
<p>I learnt so much in those first 3 or 4 years. Including designing with Photoshop, slicing and optimising images, organising content and working with clients. I was even encouraged to try a bit of CSS and HTML. They were pushing table-less design too, before most of our competitors.</p>
<p>At the time I remember being resistant to web design, I thought that print was more interesting, so I pushed to do more branding and brochure work. But eventually I came back round, and now I love the web.</p>
<p>We still keep in touch but they have their own things going on these days, <a href="http://www.discountfiresupplies.co.uk/">Tariq</a> runs a bunch of ecommerce websites and <a href="http://www.ballyhoo.co.uk/">Anthony</a> runs a web development agency in Birmingham.</p>
<blockquote>
<p>Looking back, I really feel like this was the best introduction to working in the industry. So… thanks guys.</p>
</blockquote>
Making responsive HTML emails2014-09-28T20:04:40Zhttps://www.benjystanton.co.uk/blog/making-responsive-html-emails/<p>This is a run down of my process for designing, building and testing responsive HTML emails. I’ve also included lots of links to articles and resources for further reading.</p>
<h2>Starting with the Client Brief</h2>
<p>If you are lucky like me, you’ll have a client who will supply you with an initial brief.</p>
<p>These usually include…</p>
<ul>
<li>the main objective of the email</li>
<li>the target audience</li>
<li>an early draft of the content</li>
<li>guidance on potential photography</li>
<li>ideas about potential design style</li>
</ul>
<p>(Hopefully it goes without saying that writing the content and defining a marketing strategy for an email is a whole other task that won’t be covered in this article).</p>
<h3>The Content</h3>
<p>This is an example of the kind of content that a typical email might include…</p>
<ul>
<li>Logo</li>
<li>Main image</li>
<li>Heading 1</li>
<li>Paragraph (or two) of body copy</li>
<li>A main call to action (CTA) button</li>
<li>Contact details</li>
<li>Social media icons</li>
<li>Small print</li>
<li>Unsubscribe link</li>
<li>View in a browser link</li>
</ul>
<h2>What Email Clients Are Your Users Using?</h2>
<p>It’s worth trying to find out as much information as you can about the recipients early on, as this will effect the design as well as the build.</p>
<p>If your audience are using modern email clients you might want to try some cutting edge techniques like <a href="http://createsend.com/t/y-92882CC1798554A3">moving images</a> or <a href="http://www.emaildesignreview.com/html-email-coding/web-fonts-in-email-1482/">web fonts</a>.</p>
<p>The bad news is, despite <a href="http://www.email-standards.org/">community efforts</a> the state of email standards is a lot worse than the state of web standards. And many very popular email clients (like Gmail) are reluctant to get on board with a consistent approach.</p>
<p>The reality is you will probably need to support a range of web, mobile and desktop clients, including the notorious Outlook (which incase you don’t know, is like the Internet Explorer of email clients).</p>
<p>Once you know what email clients you need to support, this guide from Campaign Monitor is really useful for checking what CSS is supported by various email clients: <a href="https://www.campaignmonitor.com/css/">The Ultimate Guide to CSS</a>.</p>
<p><img src="https://www.benjystanton.co.uk/images/email-css-support-table.png" alt="CSS Support in Emails" /></p>
<p>If you can’t get any information about what email clients your users have, then this website from Litmus lists the top 10 clients according to their analytics: <a href="http://emailclientmarketshare.com/">Email Client Market Share</a>. You’ll notice that ‘mobile’ makes up a big chunk of users.</p>
<p><img src="https://www.benjystanton.co.uk/images/email-client-market-share.png" alt="Email Client Market Share" /></p>
<h2>Sketching</h2>
<p>Once I’ve got the brief, I like to scribble all the elements I need on a piece of paper. First I’ll just list them, marking them up as h1, paragraph, call to action, small print etc.</p>
<p>This helps me to develop a hierarchy and a source order. And, by initially limiting myself to a single column, it forces me to think in a mobile-first kind of way.</p>
<p>Next, I’ll begin to sketch a layout, slowly grouping the elements together into a very rough design.</p>
<p><img src="https://www.benjystanton.co.uk/images/email-design-sketch.png" alt="Sketching an Email Design" /></p>
<h2>Designing</h2>
<p>If this is the first ever campaign, or the design is a big departure from previous campaigns, then I’ll jump into Photoshop (or whatever) at this point to mock-up a concept. This is useful for me as it helps to experiment with and gather any fonts, colours and imagery etc that I’ll be using.</p>
<p><img src="https://www.benjystanton.co.uk/images/designing-an-email.jpg" alt="Designing an Email in Illustrator" /></p>
<p>If you are comfortable working directly in the browser than do that, I think that whatever is the fastest and most comfortable way for you to begin iterating on the design is the best route to take.</p>
<h3>How Big Should an Email Be?</h3>
<p>Although it’s becoming less clear cut with responsive design, I still like to design my emails at <a href="https://www.campaignmonitor.com/blog/post/2094/maximum-width-for-html-emails/">around 600px wide</a>.</p>
<p>Because I’ve already sketched out my source order, I have a good idea how things will look on mobile too, so I don’t spend any time mocking things up at different widths.</p>
<p>In terms of email height (and file weight) I think the smaller the better is a good rule of thumb. Your content should be <a href="http://mailchimp.com/resources/email-design-guide/">focused and concise</a> and this in-turn should result in a small email.</p>
<h3>Keep Things Simple</h3>
<p>My advice would be to keep things simple, just because we might be working with a 12 column grid, doesn’t mean we should use every one.</p>
<p>Complicated designs take a very long time to test once built. And <em>more importantly</em>, at 600px wide, any more than 2 or 3 columns of text is unlikely to give a comfortable read and is going to start to feel very cramped.</p>
<h3>The Inbox</h3>
<p>Don’t forget how cluttered many email clients can be, don’t let your complicated design contribute to the noise. Your users probably don’t want to waste time and effort reading your email. So my recommendation would be to design with 1 column and plenty of space between elements to make things as easy as possible.</p>
<p><img src="https://www.benjystanton.co.uk/images/busy-email-inbox-interface.jpg" alt="A Busy Email Inbox" /></p>
<p>Consider also how the email copy will read in the inbox view too. The user may be presented with just the name of the sender, the subject line, and just a few words from the beginning of the email, before they decide whether to read it, swipe it straight to archive, or even worse, mark it as spam.</p>
<p><img src="https://www.benjystanton.co.uk/images/email-preview-pane.png" alt="The iPhone’s Mail Inbox Preview Pane" /></p>
<h3>Spam</h3>
<p>On the note of spam, I’d urge you take it seriously and please don’t bombard people. If you’re interested in learning more about the rules and regulations this is a good starting point: <a href="http://mailchimp.com/resources/guides/spam-lawsuits/html/">Spam Lawsuits (by MailChimp)</a>.</p>
<h2>Build</h2>
<h3>Choosing a Framework</h3>
<p>Personally, I’m not a huge fan of using frameworks to build websites, but when it comes to emails, there are so many hacks and gotchas that trying to build something from scratch, even if you are familiar with HTML and CSS will probably send you crazy.</p>
<p>As I’m sure most of you know, HTML emails are built with tables instead of divs for layout. And for fine-grained control over things like spacing, you may even need to put each heading and paragraph in their own table cells too.</p>
<p><img src="https://www.benjystanton.co.uk/images/email-bloated-code.jpg" alt="Bloated Email Code" /></p>
<p>This results in horribly bloated code. And that’s before you’ve added all the CSS inline (we need to do this because Outlook and Gmail strip out CSS from the head).</p>
<h3>Ink</h3>
<p>The framework I currently use is called Ink, which was created by Zurb, the people behind the <a href="http://foundation.zurb.com/">Foundation</a> framework.</p>
<p>Ink has a 12 column grid, that drops to a single column below 600px. They have an inliner on their website which lets you build your email in a more traditional way (i.e. keeping the HTML and CSS separate). Then the inliner can be used to process your code, and inject the relevant CSS around each element.</p>
<p>Once you’ve learnt how to use Ink’s grids, buttons and panels etc, then the actual build is fairly straightforward. If you get stuck then they have some great documentation available.</p>
<h3>Other Tools, Frameworks and Approaches</h3>
<ul>
<li><a href="http://internations.github.io/antwort/">Antwort Responsive Layouts for Email</a></li>
<li><a href="http://blog.mailgun.com/transactional-html-email-templates/">Transactional HTML Email Templates</a></li>
<li><a href="https://www.campaignmonitor.com/canvas/">Canvas</a></li>
<li><a href="http://buttons.cm/">Bulletproof email buttons</a></li>
</ul>
<h2>Testing</h2>
<p>Testing is the most difficult and tedious part about building an email. Even when using the Ink framework, I find that three quarters of my entire time on a project is spent debugging layout issues. Luckily there are lots of tools and resources out there to help.</p>
<p>Once my email has been designed, built and processed with Ink’s inliner (to bring the CSS inline), I’m nearly ready to begin testing.</p>
<h3>Before Testing, Don’t Forget to…</h3>
<ul>
<li>Proof read of the copy</li>
<li>Double check phone numbers and email addresses (in the markup too)</li>
<li>Check you’ve included alt text and titles attributes where appropriate</li>
<li>Remove any unused CSS (frameworks are notorious for adding bloat)</li>
<li>Optimize images</li>
<li>Check your email with images turned-off</li>
<li>Update images to have absolute paths</li>
</ul>
<p>I usually stick the images in my Dropbox public folder while testing. Many ESPs (Email Service Providers) will have the ability to host your images too.</p>
<p>Note: I’ve noticed that certain imageproxys (like Outlook.com’s) will refuse to load images from certain sources. I don’t pretend to understand why this happens, but if it does, try hosting your images somewhere else.</p>
<h3>Using MailChimp to Send Test Campaigns</h3>
<p>This is where MailChimp comes in for me, you can sign up for a free account and use it to send tests to a few personal accounts.</p>
<h3>Currently, I Test on the Following Email Clients…</h3>
<ul>
<li>Gmail.com (Chrome, Firefox & Internet Explorer)</li>
<li>Outlook.com (Chrome, Firefox & Internet Explorer)</li>
<li>Yahoo.com (Chrome, Firefox & Internet Explorer)</li>
<li>AOL.com (Chrome, Firefox & Internet Explorer)</li>
<li>iPhone 5c</li>
<li>iPad</li>
<li>Mail (OSX)</li>
<li>Thunderbird (OSX)</li>
<li>Outlook (Windows)</li>
<li>Windows Live Mail (Windows)</li>
</ul>
<p>The last email I did took about 15 tests before I was happy with it. Testing the same design 15 times on multiple email clients can get pretty demoralising, so to help ease the pain I created this handy <a href="https://www.benjystanton.co.uk/images/email-client-testing.pdf" title="Email Testing PDF">PDF for testing email clients</a>.</p>
<h3>Debugging Common Problems</h3>
<p>In my experience, inspecting the code is rarely useful (and not always even possible). So the best route when you find a problem is to search the web.</p>
<p>Here are a few common ones…</p>
<ul>
<li><a href="https://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/">Use CSS Attribute Selectors to stop Yahoo rendering your media query styles</a></li>
<li><a href="https://www.campaignmonitor.com/guides/mobile/coding/">Use <code>!important</code> in your mobile media queries, to make sure the styles override the inline desktop styles</a></li>
<li><a href="https://litmus.com/blog/update-banning-blue-links-on-ios-devices">Use <code><span></code> to style blue links on iOS</a></li>
<li>Use <code><td></code> and padding to get reliable spacing around chunks of text</li>
<li><a href="http://www.sparkemaildesign.com/17-must-know-tricks-for-outlook-2007-2010-and-2013/#outlook07-13_tip1">Use <code>vspace="10" hspace="10”</code> to get padding around images in Outlook</a></li>
</ul>
<p>The <a href="https://litmus.com/blog/">Litmus</a> and <a href="https://www.emailonacid.com/blog">Email on Acid</a> blogs are usually the best place to find solutions to problems.</p>
<h3>Virtual Testing with Litmus (via MailChimp)</h3>
<p>Once I’m happy with the design in the email clients that I have direct access to (it doesn’t need to be pixel perfect), I will run some virtual tests for good measure. These services allow you test in a whole raft of Email Clients (40+) which is pretty difficult to achieve without access to a comprehensive Device Lab.</p>
<p>There are two email testing services that I would recommend…</p>
<ol>
<li><a href="https://litmus.com/">Litmus</a></li>
<li><a href="http://www.emailonacid.com/">Email on Acid</a></li>
</ol>
<p>Rather than use these services directly, I use a feature via MailChimp called Inbox Inspection. This is powered by Litmus, and if you have a free MailChimp account, it only costs $3 per test which can work out cheaper than a monthly subscription.</p>
<p><img src="https://www.benjystanton.co.uk/images/email-design-testing.png" alt="Email Design Testing with Litmus" /></p>
<h2>Conclusion</h2>
<p>I hope you found this write-up of my email design process useful. It’s worth reiterating that you should keep the design as simple as possible and leave plenty of time for testing. If you have an further questions, please feel free to <a href="https://twitter.com/benjystanton">ask me on Twitter</a>.</p>
<p>Lastly here are some further resources to keep you busy…</p>
<h3>Design Inspiration and Further Reading</h3>
<ul>
<li><a href="http://reallygoodemails.com/">Really Good Emails</a></li>
<li><a href="https://www.campaignmonitor.com/gallery/">Email Inspiration</a></li>
<li><a href="http://mailchimp.com/resources/email-design-guide/">MailChimp’s Email Design Guide</a></li>
</ul>
<h3>Subscribe to Some Emails</h3>
<p>Last of all, I find the best way to stay up-to-date with techniques and best practices is to subscribe to newsletters from the experts. These guys (as you might expect) have consistently great emails…</p>
<ul>
<li><a href="https://www.campaignmonitor.com/our-story/newsletter/">Campaign Monitor</a></li>
<li><a href="https://litmus.com/subscribe">Litmus</a></li>
<li><a href="http://emailweekly.co/">#emailweekly</a></li>
<li><a href="http://www.theuxnewsletter.com/">MailChimp UX Newsletter</a></li>
</ul>
Freelancing and switching off2014-06-02T23:48:20Zhttps://www.benjystanton.co.uk/blog/freelancing-and-switching-off/<p>Since going freelance last February I’ve found it incredibly difficult to switch off when I’m not “in work” (hence writing this blog post at 11:30 on a Monday night). I work from home now, and even though I have freelanced before, I’m finding it harder this time to a draw a line between work life and family life.</p>
<p>Hanging out on Twitter and reading blog posts used to be my hobby, and I’d quite happily spend an evening glued to my iPad chatting with friends or catching up with new techniques and tools. But now that I am working for myself that all feels too much like work. I’ve tried ignoring my iDevices <em>and</em> I’ve tried letting myself use them as much as I want. Both methods seem to me leave me stressed, and I don’t feel like I’m achieving anything useful in return.</p>
<p>So last Friday afternoon I decided to <a href="https://twitter.com/benjystanton/status/472389216782262272">ask people on Twitter</a> for some tips…</p>
<blockquote>
<p>Guys, what are your tips for switching off from work in the evenings and over the weekend?</p>
</blockquote>
<p>It got a great response (mainly because <a href="https://twitter.com/StuRobson">Stu Robson</a> retweeted it) and loads of people replied with their tips for switching off.</p>
<p>Here is a round-up of what people said…</p>
<h2>Watch the telly</h2>
<p>Stu suggested “crap telly”, which of course I watch a lot of, but I’m finding that unless I’m really enjoying something my mind starts to wander and I begin thinking about business issues like cash flow, difficult projects and tax returns.</p>
<p><a href="https://twitter.com/MarcDrummond">Marc Drummond</a> suggested Netflix, which is probably a better idea as I still haven’t watched any Breaking Bad, Game of Thrones or Orange Is the New Black. There is a whole load of distraction waiting for me right there.</p>
<p><a href="https://twitter.com/liamjay66">Liam Jay</a> suggested (amongst other things): console gaming. This was my favourite screen based suggestion. Most of my life I have been massively into gaming, especially Nintendo consoles, and I’ve been thinking it’s a hobby that’s worth rediscovering. There are a whole load of Mario games on the Wii U that have completely passed me by, my teenage self would not be impressed.</p>
<p>The problem with these suggestions is that I should probably be looking for something that doesn’t involve sitting down, staring at a screen. My poor body is craving a different kind of activity.</p>
<h2>Turn off notifications</h2>
<p><a href="https://twitter.com/AdamWhitcroft">Adam Whitcroft</a>, <a href="https://twitter.com/bevan7">Bevan Stephens</a> and <a href="https://twitter.com/patrickfulton">Patrick Fulton</a> all suggested variations on the theme of turning off notifications (and emails and social networks etc). This is something I am trying (is it just me or are the Notification Settings on iOS a pain in arse to figure out?). It helps, but I think I am actually addicted to those little pings of happiness and I don’t have the will power to stop checking for them every 10 minutes.</p>
<h2>Get outside and exercise</h2>
<p><a href="https://twitter.com/GaryLake">Gary Lake</a> replied simply “bikes innit” and others suggested outdoor activities and sports too. My personal favourite was from <a href="https://twitter.com/AndyDavies">Andy Davies</a> who grows vegetables — that’s something I can see myself getting into.</p>
<h2>Have a drink</h2>
<p><a href="https://twitter.com/richlybaked">Richard Baker</a>, <a href="https://twitter.com/Keiron">Keiron Skillet</a> and <a href="https://twitter.com/aoimedia">John Coyne</a> all suggested having a drink, which is exactly what I did on Friday evening and it definitely helped. Again, the health implications of this one are slightly dubious, but they say a glass of red wine every night does you good right? Plus a night out every now and then blows away the cobwebs and helps you to reset yourself back to zero, I think.</p>
<h2>Spend time with friends and family</h2>
<p><a href="https://twitter.com/sanjaypoyzer">Sanjay Poyzer</a> came up with probably my favourite…</p>
<blockquote>
<p>hang out with friends who don’t understand what you do</p>
</blockquote>
<p>This was backed up Bevan Stephens who also suggested “non-work friends” and “babies”. I have two little girls who I love spending time with and they definitely distract me from work, but part of the problem is how my home life and work life have merged, so I need to do more things with them away from the house.</p>
<p>It’s probably cheating but I have been trying to hang out with non-work friends by going on Facebook more in the evenings and leaving Twitter for ‘work’ friends during the day. These seems to be helping create more of a separation and still allows me to feed my addiction for notifications.</p>
<h2>Conclusion</h2>
<p>Watching more telly and having a drink are easy solutions, but they probably don’t do much to address the actual problem. I think that combining the other three main points (turning off notifications, hanging out with non-work friends and getting some exercise) are the way to go.</p>
<p>Time to dust off the surfboard I think.</p>
<p><img src="https://www.benjystanton.co.uk/images/surfboard.jpg" alt="My lonely surfboard" /></p>
Notes on creating Twitter, Google+ and Facebook profile page images2014-04-22T14:09:05Zhttps://www.benjystanton.co.uk/blog/notes-on-creating-twitter-google-and-facebook-profile-page-images/<p>I’ve been creating a lot of images for Twitter, Google+ and Facebook profile pages recently. Here are my notes on how to create and upload those images for good results. (Pssst, these things change all the time, so this may be out of date already.)</p>
<h2>Twitter</h2>
<h3>Profile Photo: 512 x 512, PNG</h3>
<p>A 24 bit PNG does the trick here (even though it appears Twitter’s servers do save it as a JPEG on upload for you). 512 pixels seems to be the biggest that it’s ever displayed (when a user clicks on your Profile Photo is gets enlarged).</p>
<h3>Header Photo: 1500 x 500, PNG</h3>
<p>Again, I’ve used a large 24 bit PNG (JPEGs suffer from some ugly compression artefacts when they get uploaded to Twitter’s servers). 1500 x 500 pixels seems to be the magic number, but as the new Twitter profile pages are responsive, the ratio of the image changes quite a lot (sometimes it is wider, sometimes it is taller) so make sure you leave a generous ‘safe zone’ around the edges.</p>
<h2>Google+</h2>
<h3>Profile Photo: 869 x 869, PNG</h3>
<p>When a user clicks your Profile Photo, a large version is loaded up in a modal, the size seems to be capped at 869 x 869 pixels. Note that Google+ crops Profile Photos into circles, so bear that in mind if you don’t have a face/logo that fits neatly into a circle.</p>
<h3>Cover Photo: 1177 x 661, PNG</h3>
<p>Similarly to the Profile Photos, Cover Photos seem to be capped at 1177 x 661 pixels when viewed in the Google+ modal. But this size is more than big enough when viewing the Profile page, it’s the ratio which is more important here. On larger viewports The Cover Photo is duplicated and blurred and then used as a background for your Profile Photo, this can have strange effects, so it’s worth testing out. Note that on smaller viewports the layout changes, the Profile Photo appears centrally aligned at the bottom of the Cover Photo, obscuring part of it.</p>
<h2>Facebook</h2>
<h3>Profile Picture: 520 x 520, PNG</h3>
<p>I found that uploading a 24 bit PNG at a larger resolution than the recommended 180 x 180 pixels gave better results. I upped it to 520 x 520 pixels, so that when a user clicks your Profile Picture, it fills the modal window (smaller photos have big black borders).</p>
<h3>Cover Photo: 851 x 520, JPEG (will require cropping on upload)</h3>
<p><a href="https://www.facebook.com/help/www/125379114252045" title="Cover Photo tips">Facebook’s own tips</a> were actually pretty good for this one. If you can save out your image as a JPEG (with sRGB ticked) and keep the file size below 100KB you should get a good quality image that loads quickly. I saved out my image at 520 pixels in height (which is taller than recommended) so that when a user clicks it, it will fill the modal window. Alternatively, Facebook suggest that PNGs will probably look better if you have text in the image.</p>
<h2>General Notes</h2>
<ul>
<li>More often than not, creating a 24 bit PNG that is bigger than required will offer you the best results.</li>
<li>The uploaders seem to like files with their filename extension (eg .png or .jpg) so make sure you add one on if it’s missing.</li>
<li>Profile page layouts are updated regularly and they are designed to be viewed on multiple devices, so keep things simple.</li>
</ul>
Responsive email design2014-04-03T12:26:27Zhttps://www.benjystanton.co.uk/blog/responsive-email-design/<p>Email design a tricky beast. Patchy support for web standards means that we still need to use tables for layout, and strange bugs in mobile, desktop and web email clients means that we can’t rely on having the same support for CSS that we have come to expect from web browsers.</p>
<p>Making sure that your email looks good in Outlook is still a huge part of the task at hand. The good news is <a href="http://emailclientmarketshare.com/" title="The top ten email clients">mobile email has taken the lead</a>, so it is certainly time to start playing with responsive layouts.</p>
<h2>Progressive enhancement</h2>
<p>Emails, just like websites, won’t look the same in every client. By using progressive enhancement we can make sure that the design is solid, usable and accessible in all clients, and then sprinkle in newer features like responsive layouts, background images and rounded corners for users with more capable devices.</p>
<h2>Keeping things simple</h2>
<p>Remember that people are bombarded with many emails a day, and reading them isn’t high on their priority list. Add cluttered interfaces to the mix (I’m looking at you Outlook) and we are left with a less than ideal reading experience.</p>
<p>So (like with most types of design) I think it’s best to keep things simple. The recommended maximum width for an email is 600px, so even when viewed on a desktop email client, this doesn’t give us much room for complex multi-column layouts. For mobile email clients, the design will need to work at around 300px wide.</p>
<p>Either way, the design should have a clear hierarchy and structure, with headings used to help guide users.</p>
<h2>Testing on devices</h2>
<p>I test my designs in as many email clients and real devices as possible (iPhone, iPad, Android, Mac and PC). I also test my designs using a screen reader. For everything else, I use <a href="https://litmus.com/" title="Litmus – Test and track your emails">Litmus</a> to get screenshots of how the email will look across a range email clients and devices.</p>
<h2>Accessibility</h2>
<h3>A good reading experience</h3>
<p>I like using big font sizes. The browser default of 16px is a good starting point for a comfortable paragraph size. Line length should be monitored too, with 45–75 characters per line being considered a good rule of thumb.</p>
<h3>Plain text email</h3>
<p>It’s good practice when sending HTML emails to send a plain text version too, a good Email Service Provider will create and send these automatically for you.</p>
<h3>Images off by default</h3>
<p>Many email clients turn off images by default, so you need to make sure that the email still makes sense and looks okay when this happens. Including alt-text for images can help here.</p>
<h3>Colours</h3>
<p>It’s important to use a colour palette with enough contrast to make reading easy. I also test my designs using a colour-blindness simulator, which can help me to avoid unsuitable colour palettes.</p>
<h2>Further reading</h2>
<ul>
<li><a href="http://www.campaignmonitor.com/resources/" title="Campaign Monitor’s email design resources">Campaign Monitor</a></li>
<li><a href="https://litmus.com/blog/" title="Litmus email design blog">Litmus</a></li>
<li><a href="http://mailchimp.com/" title="MailChimp have a great blog and resources section">MailChimp</a></li>
<li><a href="http://emailclientmarketshare.com/" title="Top 10 email clients (from Litmus)">Email Market Share</a></li>
<li><a href="http://reallygoodemails.com/" title="A collection of inspiring email designs ">Really Good Emails</a></li>
</ul>
Worrying about health2014-03-27T15:55:51Zhttps://www.benjystanton.co.uk/blog/worrying-about-health/<p>I wrote an article for <a href="https://www.everydaydesigner.net/" title="Everyday Designer">Everyday Designer</a> about being a freelancer, working from home and trying to stay healthy.</p>
<blockquote>
<p>I worry about straining my eyes, bad posture, getting enough fresh air and even putting on weight.</p>
</blockquote>
<p>Read the whole article: <a href="https://www.everydaydesigner.net/freelancing/tips-for-healthy-freelancing" title="My article about health on Everyday Designer">Tips for health freelancing</a>.</p>
User experience design2014-02-17T12:08:30Zhttps://www.benjystanton.co.uk/blog/user-experience-design/<p>For me, good user experience design is fundamental to good web design. You can cram in all the features and functionality you want, but unless the experience has been designed well, the user will look elsewhere.</p>
<p>Likewise, good aesthetics can only take you so far and if they’ve been used to paint over the cracks it will become obvious pretty quickly.</p>
<blockquote>
<p>Designers shooting for usable is like a chef shooting for edible.
<br />— Aarron Walter</p>
</blockquote>
<h2>Client interviews</h2>
<p>Meeting with the client and discovering business goals is how I like to kick things off. Doing a workshop with the team is the best way to get all the ideas out in the open. Once we have a good understanding of what everybody wants, then we can start to organise and prioritise the best ideas.</p>
<h2>User research</h2>
<p>A little bit of user research goes a long way. I like to take a look at my client’s current website analytics. Observing users can often uncover gaping usability holes which aren’t immediately apparent and, where appropriate user questionnaires can help us understand what users want to achieve (and why). Creating rough personas are useful at this stage, so the team can start to think about who will be using the site.</p>
<h2>Content, structure and journeys</h2>
<p>Once the goals of the user (and the business) are understood, we can begin to structure the website by making a list of content and how it will be organised. I like to plan out important user journeys at the same time as a way to cross-reference the structure of the site.</p>
<h2>Sketching, planning and wireframes</h2>
<p>I try to keep my designs lo-fi for as long as possible, that way, nobody gets attached to time-consuming visual enhancements, and we can iterate quickly and cheaply. Once sketching has been exhausted, creating digital wireframes can be really useful to help gain a more solid understanding of how a design will look and feel, without getting bogged down with time-consuming aesthetics.</p>
<h2>Prototyping</h2>
<p>Whether walking a client through your sketches or using a framework to create html/css prototypes, nothing quite beats the feeling of <em>experiencing</em> a website. That’s why I think prototyping should happen before or at least alongside the visual design stage.</p>
My name is Benjy and I’m a web designer2014-02-04T10:03:02Zhttps://www.benjystanton.co.uk/blog/my-name-is-benjy-and-im-a-web-designer/<p>These words have been sitting in my ‘finish up and publish’ pile for almost two years and <em>finally</em> I’ve been inspired to do just that this week, after listening to <a href="http://unfinished.bz/" title="Unfinished Business podcast">Unfinished Business</a> and then The Freelance Web. The idea of reclaiming the role of web design has been spoken about on both shows recently and I think they were inspired by <a href="http://danrubin.is/" title="Dan Rubin’s website">Dan Rubin</a>’s talk at the recent MK Geek Night All Dayer (although I didn’t attend).</p>
<h2>Living A Lie</h2>
<p>I’ve actually been a web designer ever since my first real job, <em>way</em> back in 2004. But, for one reason or another, I’ve always been in denial. I’ve preferred to call myself a graphic designer or a designer-who-works-on-the-web or even a UI and UX designer. Nothing wrong with those terms of course, but I think it hints at the underlying fact that web design still isn’t regarded as a respectable design medium by many.</p>
<p>I was given my first break by two friends who were setting up a web design agency in Wales called Web Media Works. They planted the seed of web design by introducing me to CSS, the importance of web standards and the open source movement.</p>
<p>We tried our hands at everything, from building ecommerce sites to designing board games to recording podcasts. Then, I got hooked on blogging, and it was whilst fumbling my way through WordPress templates that I got my first taste of CSS.</p>
<p>It was also at Web Media Works that I discovered <a href="https://www.zeldman.com/" title="Jeffrey Zeldman’s website">Jeffrey Zeldman</a>’s article Style Versus Design. At the time, I found it very challenging, but it has come to form the basis of my views on design. After following Jeffrey, I soon discovered <a href="http://stuffandnonsense.co.uk/" title="Andy Clarke’s Stuff & Nonsense">Andy Clarke</a>, and I was pretty excited to find out that he was local(ish). I think that I even emailed Andy, congratulating him on being a great web standards evangelist here in Wales (cringe).</p>
<p>After a few years at Web Media Works, I fell into freelancing. I felt that offering print design services alongside web stuff would help strengthen my ability as a graphic designer (something I had never formally trained in). I soon realised however that the web design skills that I’d developed were often more effective (and more in demand). I began building the sites that I was mocking up, first in flat HTML/CSS and then by building WordPress themes (based on Starkers).</p>
<h2>My Peoples</h2>
<p>Fast forward a few years and I had joined <a href="http://www.jamesgood.co.uk/" title="James Good">James Good</a>, based in Swansea.</p>
<p>Late during 2011, James won two tickets to New Adventures in Nottingham. Knowing my passion for web design, he offered me first dibs on the other ticket. I gratefully accepted, even though the previous year’s conference had completely passed me by. We made our way up to Nottingham (driving part of the way along the tram lines) without knowing what to expect.</p>
<p>When we arrived, I remember saying to James (only half-jokingly) <q>“these are my people”</q>. They were <em>designers</em>, the shaggy haircuts, scruffy trainers and button badges confirmed that much, but they were <em>web</em> too. Web designers. People who cared about good typography <em>and</em> good semantic HTML <em>and</em> good content. Web designers. I felt like I belonged.</p>
<p>This experience refreshed my passion for all things web. And here we are today. I can’t live in denial any more. I am a web designer, I love the medium of web design and I find the passion of the people working in this industry inspiring and addictive.</p>
<blockquote>
<p>My name is Benjy and I’m a web designer.</p>
</blockquote>
Readable, guessable and hackable urls2013-11-29T11:41:00Zhttps://www.benjystanton.co.uk/blog/readable-guessable-hackable-urls/<p>The stand-out talk at Handheld 2013 was from Jeremy Keith, Founder & Web Stuff Do-er(?) at Clearleft in Brighton. Among other things, he talked about the importance of designing urls.</p>
<h2>Designing the url</h2>
<p>In some cases the url may be the first point of contact between you and the user. It makes sense to give them proper consideration. They should be human readable, guessable and even hackable.</p>
<h2>Examples from HuffDuffer</h2>
<ul>
<li><code>/new</code></li>
<li><code>/username</code></li>
<li><code>/tags/tag</code></li>
<li><code>/username/tags/tag</code></li>
<li><code>/username/collective</code></li>
<li><code>/username/collective/tags/tag</code></li>
<li><code>/search?q=query</code></li>
</ul>
<h2>Urls work anywhere</h2>
<ul>
<li>If it isn’t human readable, then it is probably more likely to be forgotten.</li>
<li>Make it guessable, users should be able to look at your url and figure out how to navigate your site.</li>
<li>Urls work anywhere, they can be written down, sent as a text, read out loud.</li>
<li>They are much better than QR codes (but they need to be designed purposefully).</li>
</ul>
Web design tools2013-11-26T10:31:25Zhttps://www.benjystanton.co.uk/blog/web-design-tools/<p>Check out my <a href="https://www.benjystanton.co.uk/uses">uses</a> page for an up-to-date list of hardware and software that I use for interaction design.</p>
<p>Here is a run down of the tools that make up my web design process. Hopefully it goes without saying that scribbling on paper happens a lot too. I use an iMac, iPad and iPhone, so some of the following will be iOS/OSX only.</p>
<h2><a href="http://www.iawriter.com/">iA Writer</a></h2>
<p>iA Writer is my text editor of choice. Most projects start here and it’s especially suited to long-form writing. The stripped back interface and large type make it easy to use. It supports <a href="http://daringfireball.net/projects/markdown/">Markdown</a>, so I get just enough formatting options, without the distraction of a fully blown word processor. Markdown is a great way to write basic html too.</p>
<h3>Alternatives</h3>
<ul>
<li>I use Apple’s Notes app a lot for when I want to scribble something down quickly. I rely on the fact that it gets synced with all my devices.</li>
<li><a href="http://editorially.com/">Editorially</a> is a great web based alternative to iA Writer. Currently still in beta, it has some really neat features such as versioning and multiple editors.</li>
</ul>
<h2><a href="http://mizage.com/divvy/">Divvy</a></h2>
<p>Divvy is little menu bar application that allows you to quickly snap your application windows to a grid. I like to have my applications fill the screen neatly, and if you have 2 or more apps open together at the same time, Divvy can help you to line everything up nicely. I’ve customised my Divvy grid to have 6 columns and just 1 row.</p>
<h2><a href="http://www.dropbox.com/">Dropbox</a></h2>
<p>I use Dropbox for all sorts of things. It’s a quick and dirty way to share websites in development, and a good place to stick images temporarily when you want to test them out on a live site (stick them in your public folder, then use web inspector to pull them in).</p>
<p>I also use it a lot when design checking sites. First I’ll run through a site on my iPhone and iPad taking screenshots as I go. Then when I plug my device into the computer, all the screenshots get downloaded, ready for annotation.</p>
<h2><a href="http://www.alfredapp.com/">Alfred</a></h2>
<p>Alfred is another little menu bar app that lets you launch apps by typing their name. When you get used to it, it’s much quicker than clicking on the dock or even using Spotlight search. I’m only just scratching the surface with Alfred and there are loads of ways you can use it to be more productive.</p>
<p>The calculator is especially handy, just type your sum and press enter to copy the result to your clipboard. Perfect for handling those pesky responsive web design numbers that have a hundred decimal places.</p>
<h2><a href="http://www.adobe.com/uk/products/illustrator.html">Illustrator</a></h2>
<p>At <a href="http://www.jamesgood.co.uk/">James Good</a> we use Adobe Illustrator to mock-up our website designs and create assets. It has some nice features that suit a modern web design work flow, like multiple pages (shown side-by-side in one document), global colour swatches and text styles. Plus it is resolution independent, just like the web.</p>
<h3>Alternatives</h3>
<ul>
<li><a href="http://www.adobe.com/uk/products/photoshop.html">Photoshop</a>, despite coming under some criticism recently, Photoshop is receiving some nice updates, such as better text rendering and an asset generation tool.</li>
<li><a href="http://www.bohemiancoding.com/sketch/">Sketch</a> is fast gaining a reputation as a lightweight and affordable alternative to Adobe’s big fatties, although I haven’t had a chance to really play with it yet.</li>
</ul>
<h2>LiveView</h2>
<p>LiveView is a free app that you run on OSX and iOS simultaneously. It mirrors a portion of you Mac’s screen in realtime to your iPhone screen, so you can quickly preview how your design will look. In my experience, seeing a design on your phone feels <em>completely different</em> to seeing it mocked up on a desktop computer.</p>
<h2><a href="http://imageoptim.com/">ImageOptim</a></h2>
<p>ImageOptim compresses images for the web much better than Illustrator or Photoshop can. Simply drag and drop a load of files onto the app and it will churn through them, automatically saving over the originals, and giving you a report on how many KBs have been saved. This is a no-brainer really, I always run my images through this before uploading.</p>
<h2><a href="http://pngmini.com/">ImageAlpha</a></h2>
<p>ImageAlpha allows you to create 8bit PNGs with 24bit alpha transparencies. 24bit PNGs with alpha are probably the heaviest image type on the web, so it’s worth trying to crunch them down a bit. Depending on the image, I have found that ImageAlpha can give huge savings in file weight. Watch out for images with subtle gradients and shadows though as it can cause banding. Use with care.</p>
<h2><a href="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a></h2>
<p>I use developer tools to try out HTML and CSS changes on the fly, before feeding back to the developers. It’s perfect for adjusting things like typography and animation, as well as trying out new content in place.</p>
<p>I learnt recently that you should dock your inspector to the right, so you can adjust the width of the viewport quickly when testing responsive designs. (Remember kids: nothing beats testing on real devices.)</p>
<p>It’s also possible to use developer Tools on Safari on your iOS device (via a Mac).</p>
<h3>Alternatives / Extras</h3>
<ul>
<li><a href="http://chengyinliu.com/whatfont.html">WhatFont</a> is a quick way to check a site’s typography.</li>
<li><a href="http://chrispederick.com/work/web-developer/">Web Developer Toolbar</a> is a collection of very helpful tools. A modern classic.</li>
</ul>
<h2><a href="http://vanamco.com/ghostlab/">Ghostlab</a></h2>
<p>Ghostlab lets you test websites on multiple devices at the same time. If you update the HTML or CSS, all devices will refresh to show your changes. If you scroll down or visit a different page, each device will stay in sync too. Definitely worth purchasing in my opinion.</p>
<h2><a href="https://trello.com/">Trello</a></h2>
<p>I’ve found Trello is a great tool for design checking and bug tracking, and we use it at James Good to keep on top of big web projects. It’s especially useful when a team is spread out and managing a wall of post-its becomes unwieldy.</p>
<h2>Honourable Mentions</h2>
<p>Although not strictly part of my web design workflow, these apps help me stay organised and/or up to date with what’s going on in the world.</p>
<ul>
<li>Mailbox</li>
<li><a href="http://flexibits.com/fantastical-iphone">Fantastical</a></li>
<li>Readmill</li>
<li><a href="http://getpocket.com/">Pocket</a></li>
<li>Tweetdeck</li>
</ul>
Why I like to use “smart quotes”2013-11-17T09:54:16Zhttps://www.benjystanton.co.uk/blog/why-i-like-to-use-smart-quotes/<p>Smart quotes are double or single inverted commas, used for marking quotes and apostrophes when writing. They slant or curl to the right or left, unlike dumb quotes which are straight.</p>
<blockquote>
<p>Don’t use dumb quotes for quotations or apostrophes — the nerds will revolt.
<br />— Jessica Hische</p>
</blockquote>
<p>I’ve recently started forcing myself to type smart quotes wherever possible (yes, even when texting my Mum).</p>
<p>It may sound over the top, but I think that the best way to make fewer errors is to keep a high standard whenever I write. As a designer it’s my job to spot punctuation errors, typos and any other mistakes in a body of text. Even though I may not be the copywriter, I would consider it to be my fault if something was published with an error.</p>
<p>Asking someone to change the kind of quote mark that they use in a piece of text often raises a few eyebrows. It can seem pedantic to even the most experienced designers, developers and copywriters.</p>
<p>Still, my view is that using the right mark is as important as having punctuation marks there in the first place.</p>
<p>As a minimum, I think it’s worth keeping an eye out for which quotes are being used. Some programs will automatically update dumb quotes to smart quote and others will not. When lots of people are working on the same piece of text together, inconsistencies can creep in that will undermine the overall quality of a project.</p>
<p>(The nerds are watching.)</p>
<p><em>Disclaimer: I don’t see a massive problem with choosing to use dumb quotes for stylistic reasons, as long as it’s considered and consistent.</em></p>
<h2>Further Reading</h2>
<p>If you’d like to read more about smart quotes and how to use them, check out these resources…</p>
<p><a href="http://smartquotesforsmartpeople.com/">Smart Quotes for Smart People by Jason Santa Maria</a></p>
<p><a href="http://quotesandaccents.com/">Quotes and Accents by Jessica Hische</a></p>
<p><a href="http://practicaltypography.com/straight-and-curly-quotes.html">Practical Typography by Matthew Butterick</a></p>
30 things done before I'm 302013-06-10T11:05:56Zhttps://www.benjystanton.co.uk/blog/30-things-done-before-im-30/<p>Bucket lists are fine, but with my 30th birthday just around the corner, I thought I'd make a list of things that I've already achieved.</p>
<p>In no particular order, here are thirty things that have shaped me in one way or another.</p>
<ol>
<li>Married Michelle</li>
<li>Had two beautiful girls</li>
<li>Bought our second (and hopefully last) home</li>
<li>Bought our second (and doubtfully last) car</li>
<li>Rescued a dog from the dog's home</li>
<li>Owned one snowboard</li>
<li>Owned two surfboards</li>
<li>Owned five skateboards</li>
<li>Broken my arm twice</li>
<li>Played bass guitar in a band</li>
<li>Been Dan's best man</li>
<li>Spoken at a web design conference</li>
<li>Started a club night</li>
<li>Started a blog</li>
<li>Been one third of GeekThree (a podcast)</li>
<li>Lived in London</li>
<li>Started my own business</li>
<li>Worked for the Royal Mail</li>
<li>Worked for a well known pizza restaurant chain</li>
<li>Worked for an independent “Latin fusion” restaurant where I got a reputation for baking the best bread, before I quit one day by just not turning up</li>
<li>Went to Glastonbury</li>
<li>Went to All Tomorrow's Parties</li>
<li>Went to Camp Bestival</li>
<li>Went to Disney World</li>
<li>Went to the Grand Canyon</li>
<li>Went on a business trip to LA</li>
<li>Flown over Las Vegas at night time</li>
<li>Nearly capsized a Swan Pedalo in Prague</li>
<li>Been thrown out of a camp site in Hossegor and consequently…</li>
<li>Visited Roxy Jam surf festival</li>
</ol>
Stickiness and lumpy bits2013-05-19T05:50:14Zhttps://www.benjystanton.co.uk/blog/stickiness-and-lumpy-bits/<p>I really enjoyed Andy Davies' talk on mobile site performance at Port80 2013, but one fact in particular stood out for me…</p>
<blockquote>
<p>Facebook artificially slowed down scrolling from 60fps to 30fps. User engagement collapsed.</p>
</blockquote>
<p>This is a great example of why animation (or movement) should be considered when designing websites, even if, as designers we aren't in complete control of the results.</p>
<p>A lot of the ways in which a user might experience movement is embedded into the browser and we should try our best not to interfere with the way it moves, by creating pages that render poorly. This is true whether we are adding new animation or not.</p>
<p>Stickiness and lumpy bits are a massive turn off, so it's important that we don't end up scaring people away.</p>
<h2>Further Reading</h2>
<p><a href="http://www.slideshare.net/AndyDavies/making-mobile-sites-faster" title="Making Mobile Sites Faster by Andy Davies">Check out the rest of Andy's slides</a></p>
Crafting animation on the web2013-05-14T00:53:00Zhttps://www.benjystanton.co.uk/blog/crafting-animation-on-the-web/<p>Notes from my talk at Port80 2013, covering animation principles, CSS and workflow plus a link to my infamous Mario Part animation.</p>
<ul>
<li><a href="http://www.slideshare.net/benjystanton/crafting-animation-on-the-web" title="My slides on Slideshare">My slides on Slideshare</a></li>
</ul>
<h2>About Me</h2>
<h3>Mario Paint</h3>
<p>I grew up on a diet of Disney and Nintendo and ever since I first played Mario Land on my Gameboy I became fascinated by digital things. I think the first ever digital animation that I created was actually on Mario Paint for SNES.</p>
<p><a href="https://vimeo.com/66002457" title="The Nativity (on Vimeo)">The Nativity (by me, aged 10) animated using Mario Paint on the SNES</a></p>
<h3>University</h3>
<p>So believe it or not, I actually ended up studying animation at University. I became became pretty handy at 3D Studio Max, Macromedia Flash and Adobe After Effects. Back then, I dreamt of becoming an animator and working for Pixar or Aardman, but after Uni, a friend of mine was starting a web design agency and offered me a job, and I’ve been a web designer ever since.</p>
<p>The only piece of software I still use these days is Adobe After Effects. But the time I spent learning animation has stuck with me and often comes in useful when designing sites.</p>
<h3>James Good</h3>
<p>These days I work at James Good. James Good is a Corporate Branding & Communications Consultancy and we are made up of a team of designers, developers, photographers and copy writers. Whatever we do, we always try to focus on delivering strong conceptual designs, I think this is what makes our work successful.</p>
<p>Things are going well, we have 2 offices (one in Swansea and one in London), 10 members of staff and a dog called Bailey (who is our HR and finance manager, so be sure to pay your invoices on time).</p>
<p>My main role as a designer is producing mock-ups for the websites that we create. I like to get involved early on to help plan content, structure and the overall user experience, I'll then work closely with the developers to get our sites built. Even though I'm not a front-end developer, I like to think that I know my way around CSS and I use this skill mainly to annoy the developers at James Good.</p>
<h2>Crafting Animation on the Web</h2>
<p>So I'm hear today to talk about 'Crafting Animation on the Web' and just in case your worried, I'm not going to be talking about making cartoons or even rotating home page banners. I'm interested in how animation can support and enhance our designs – how we can use it to improve navigation, registration processes and contact forms, animating between breakpoints and for progressively loading content.</p>
<h3>F***h</h3>
<p>So, firstly a little disclaimer: when I first contacted Joel to propose this talk I promised him that I wouldn't mention the F-word. But I'm afraid, that was a bit of a white lie, I am probably going to mention it a couple times. Flash <em>was</em> a big part of animation on the web, but, luckily we all know that it’s days are numbered.</p>
<h3>Animation is Immature</h3>
<p>Partly due to Flash, animation on the web still feels like a bit of a dirty phrase. It's associated with annoying and down-right evil design patterns, like take-over adverts. Saying that, there are plenty of great examples of site's out there that use animation really well, but as a community I don't think we talk about it enough.</p>
<p>As a sub-discipline of web design, animation still quite immature. Even though there are plenty of great articles explaining the technical specs or examples that show off experimental ideas, I don't feel there are enough resources out there to help people like us understand why, how and when we should be using animation.</p>
<h3>Animation as a Design Material</h3>
<p>I love this idea, that animation is a design material (like typography or colour). Not a type of content, that sits on our homepage, where users just click play, sit back and watch. But as something that can be used throughout our sites to improve the way we interact with them.</p>
<p><a href="https://www.benjystanton.co.uk/blog/animation-as-a-design-material/" title="Animation as a Design Material">Read more about this idea in another blog post</a>.</p>
<h3>Clean <em>and</em> Simple</h3>
<p>Movement can help keep our interfaces looking clean and simple. We can reveal things with animation, so we don't need to show everything all at once. We can also communicate and feedback to users, without having to add extra elements. (e.g. the way that the OSX Lion sign-in form shakes from side to side when the password is wrong. This is just like somebody shaking their head from side-to-side to say no. It's less cluttered and probably more universally understood than a bright red 'error' message box.</p>
<h3>The Time is Right</h3>
<p>There are a few factors which make me think that the time is right to take animation more seriously. With relatively recent advances in web design like responsive design, mobile first design and touch interfaces, there are new patterns emerging on the web and many of them include movement. We've also got native apps which are raising the bar on what user's expect from their devices. And lastly we have CSS animation, which is gaining support and allowing us to do more without javascript. A major benefit of CSS animation is that it can take advantage of hardware acceleration.</p>
<h2>Animation Principles</h2>
<p>I'm going to run through some important animation principles and also a brief history of the medium.</p>
<p>According to Wikipedia, the definition of animation is:</p>
<blockquote>
<p>'Animation is the rapid display of a sequence of images to create an illusion of movement.'</p>
</blockquote>
<p>The origin of the word has a deeper meaning though, and it means to bestow life. And that's what animation is all about really: bringing inanimate things to life. I think anything that we can do to make our stuff seem more alive, more human is definitely worth our effort.</p>
<blockquote>
<p>':a bestowing of life.'</p>
</blockquote>
<p>Human beings have been have long been trying to convey motion in their artwork. To bring them to life and to tell a story. Some cave paintings are known to depict animals with multiple legs, giving them the feeling of movement. Ancient Egyptians and Greeks decorated pots and temples with figures in various states of movement.</p>
<p>I like to think of these as the pre-cursor to animated gifs.</p>
<h3>Gertie the Dinosaur and Winsor McCay</h3>
<p>Gertie the Dinosaur was animated by Winsor McCay who used to perform live in front the film, pretending to interact with Gertie. This special effect really astounding audiences back in 1914. McCay pioneered many animation techniques that later became standard at Disney and elsewhere. Many of the rules of classical animation were forged during this time, and are still relevant today.</p>
<h3>Timing and Spacing</h3>
<p>Timing and spacing in animation is incredibly important. Movement should have a beat or a rhythm. When a bouncing ball hits the floor, that’s our timing, we can think of these beats as keyframes. The bits in between, that’s our spacing.</p>
<h3>Easing</h3>
<p>In 'real life' spacing is rarely is uniform, so in order to express believable movement we need to speed things up and slow them down.</p>
<h3>Ease Out</h3>
<p>‘Ease out’ means the animation will have a slow finish. The frames will bunch up at the end, cushioning the movement before stopping. So the animation will appear to slow down over time.</p>
<h3>Ease In</h3>
<p>‘Ease in’ is the opposite. The animation will have a slow start before speeding up.</p>
<p>Even though these ideas are just the basics, it’s worth getting your head around what each one feels like so you can communicate and describe animations to your team.</p>
<h3>Anticipation and Reaction</h3>
<p>Anticipation is another important part of animation. If the movement is going to the right, then we can start off by moving to the left slightly. For example if Bugs Bunny is about to do a runner, his body will ‘coil up’ (in the opposite direction to his imminent escape). It gives the audience an idea of what's coming next. It it also creates contrast between the stages of the movement for greater impact.</p>
<p>Reactions are the like the follow through from anticipation. When Bugs Bunny runs away, perhaps he leaves a puff of smoke or some dust. This kind of visual gag is used in cartoons all the time for comedic effect, but it’s basically a natural form of movement. If I jump up, I need to bend my knees first and crouch down. I move down before moving up.</p>
<p>There's a great little quote in one of my animation books and apparently it's from Charlie Chaplin…</p>
<ol>
<li>Tell them what you’re going to do.</li>
<li>Do it.</li>
<li>Tell them that you’ve done it.</li>
</ol>
<h3>Testing</h3>
<p>Test, preview, iterate. It's a familiar mantra for web designers and it's the same for animators. I find when I'm animating that I'll keep watching the same half-second clip over and over again tweaking and refining until it just feels right. It's pretty difficult to get an animation right first time.</p>
<h3>Animade Lernz</h3>
<p><a href="http://vimeo.com/41558459" title="The Complete Animade Lernz">Watch Animade Lernz on Vimeo</a> (01:46)</p>
<p>Animade are a London based Animation studio. This short clip is a great example of how animation, when done properly, can communicate so much. It shows a series of brief scenes, each animated twice, the first animated poorly, the second animated very well. It shows how mastering the art of animation can make all the difference.</p>
<p>I highly recommend that you check out <a href="http://animade.tv/" title="Animade’s Website">Animade’s website</a> for more examples of their work. Another personal favourite of mine is <a href="http://vimeo.com/28505330" title="Ready Steady Bang">30 Ways to Kill a Cowboy</a> which is, as you’d expect, an animation of a cowboy being killed 30 ways, it’s not graphically violent though just pretty hysterical.</p>
<h2>CSS Animation</h2>
<p>So I’m not going to go into a huge amount of detail with this, but I’ll run through the basics and point out a few areas which I feel are important or maybe difficult to get you’re head around initially.</p>
<p>CSS Animations are made up of 2 main parts; the @Keyframe Rule and the Animation Property.</p>
<h3>@Keyframes Rule</h3>
<p>The @Keyframe Rule is basically a list a frames that show what properties that you want to animate and in what order. I don't recommend that you try the following example out by the way, it will not look pretty.</p>
<pre><code>0% {color: crimson;}
25% {color: sandybrown;}
50% {color: gold;}
75% {color: lawngreen;}
100% {color: steelblue;}
</code></pre>
<h3>Animation Property</h3>
<p>Then we have the Animation Property. I like to think if this as the controls for the playhead. How long will it takes to move along our list of keyframes. Is there a delay at the start? Does the animation repeat? That sort of stuff.</p>
<p>name:<br />
duration:<br />
timing-function:<br />
delay:<br />
iteration-count:<br />
direction:</p>
<h3>timing-function:</h3>
<p>I think timing-function is the really important one here. This feature is more commonly referred to as easing, and it's a really important property that can have a massive effect the feel of your animation, so I urge you to take some time here. Although you can use some pre-defined types of easing, I prefer to create my own using the mysterious cubic-bézier function.</p>
<p>Luckily, there are some really great tools on the web that we can use to draw cubic-bézier curves and then preview how they move. You don't need to be good at drawing, maths or French to have a go either. Just have a play, then when you are happy, grab the values it gives you and stick them into your CSS.</p>
<ul>
<li><a href="http://matthewlein.com/ceaser/" title="Ceaser CSS Easing Animation Tool">matthewlein.com/ceaser/</a></li>
<li><a href="http://cubic-bezier.com/" title="Cubic-bezier Tool">cubic-bezier.com</a></li>
</ul>
<p>These tools are brilliant as they let you quickly test and revise timing and duration, plus you can create custom curves then copy and paste cubic-bezier values. They really take a lot of the pain and guess work out of animating, and I use them regularly.</p>
<blockquote>
<p>Easing is one of those things that web designers don’t talk about enough.</p>
<footer>Val Head</footer>
</blockquote>
<p>I think lumping for a default ease-in or ease-out value is like choosing CSS’s default red or blue for your design’s colours. You just wouldn’t do it, any designer worth their salt would spend ages picking the absolute right colour then copying and pasting that value into the CSS. We should be doing the same with easing.</p>
<h3>timing-function: steps(10);</h3>
<p>Another important part of the timing-function property (that is kind of hidden away) is ‘steps’ (no, it has nothing to do with the pop group Steps). Instead of our animation timing moving along a smooth cubic bezier curve, using steps will cause the animation to jump between a number of predefined steps with no in-betweens.</p>
<p>This could be used, for example, to artificially drop the frame rate, giving the animation a quirky, retro feel.</p>
<p>Or, some clever folks have figured out that we can use steps to control animated sprites. Simply lay out all the frames of an animation into one sprite sheet, and animate the image’s position using steps and hey presto, we have animated gifs 2.0. The advantage being we can control things like the speed and repetition using CSS.</p>
<h3><a href="http://minimalmonkey.com/" title="Stephen Burgess">Minimal Monkey</a></h3>
<p>Minimal Monkey is one of my favourite sites at the moment. It’s a personal blog for Stephen Burgess who is a developer at Fantasy Interactive. It has a great minimal design with really strong use of type and colour. It’s also noteworthy for the way it uses animation. The page transitions and hover states are simple but beautiful, and every bit of movement feels like it adds to the overall experience. Communicating a little bit about what will happen next.</p>
<h2>Workflow</h2>
<p>If you're anything like me, animation is probably something that gets left until the last moments of project. Perhaps by then it’s too late to add anything but light touches and small improvements. But to use animation in a really meaningful way, I think it needs to be thought about and planned early on in the design process.</p>
<h3>Animation Identity</h3>
<p>When you are planning out a project, give it an animation identity. Write down a list of words that reflect the brand or personality of your project, e.g. quick, happy, vintage, gamey, professional. Perhaps you could even gather a ‘mood board’ of clips that have right feel to their animation. These words and clips will help to inform the way in which your site moves. You may be doing something similar for other areas of the identity, such as copy, look & feel, photography etc so why not do it to describe animation too?</p>
<p>In Dan Cederholm's book CSS3 For Web Designers, he describes transitions (and animations) as 'butter' that can be used to smooth out the interactions in our site. This is a great idea, but I'd like to add to this by saying that we don't always want things to move like butter, sometimes we want movement to be fluid like water, sticky like marmite, lumpy like porridge, or poppy like Rice Krispies. The breakfast-themed comparisons are potentially endless, but you get the idea: too many buttery animations have the same effect as too many rounded corners.</p>
<h3>Notes</h3>
<p>Annotation of your designs to describe desired movement is always a good idea. It’s good to describe the animation in a way that matches up with the CSS properties that will need defining.</p>
<ul>
<li>What property are changing? Colour, Position etc. (Subtle changes may not be obvious when looking at your mock-ups.)</li>
<li>How long you want the animation to last (think in milliseconds, as a second is a long time in animation)</li>
<li>What sort of easing would you like? (ease-in, ease-out, elastic bounce back?)</li>
<li>Should there be a delay before it starts?</li>
<li>How many times should it repeat?</li>
</ul>
<p>Don't worry, you won't think of everything, and it will almost certainly need to be tweaked in the browser.</p>
<h3>Show and Tell</h3>
<p>Notes are fine for simple animations, but what about more complicated things? The whole point of animation is that it communicates a lot in a short space of time. Sometimes, the best way to communicate an animated idea is to show it.</p>
<p>Act things out! Either with your body, or use props and sketches on pieces of paper. If you’ve ever watched a Pixar documentary you’ll know that they act out movements using props and pull faces in front of mirrors. They even present their storyboards as if they were actors in the plot. The ability to act is very important for an animator.</p>
<h3>Storyboards</h3>
<p>Storyboards are very similar to sketched wireframes. They consist of rough thumbnail sketches, with notes about the action and timing. We can also use arrows and other elements to show how objects, users and even the device viewport will react in certain scenarios. They certainly don’t need to look beautiful, they should be quick and dirty.</p>
<h3>Animatics (Moving Storyboards)</h3>
<p>Animatics are like moving storyboards. To create one, you could scan in your storyboards, then use a basic video editing tool like iMovie to stitch them together. You will begin to get a feeling for the timing and duration of your animation. Sometimes I even separate out the background and foreground objects, so that I can move them independently of each other and create more detailed scenes.</p>
<h3>Keynote</h3>
<p>There have been a few people recently promoting keynote as an alternative, yet basic design package and it certainly has some merits, not least because it’s able to produce simple animated and interactive prototypes.</p>
<h3>Photoshop</h3>
<p>Photoshop has a timeline view of course, it’s handy for testing out frame-by-frame animations And a good tool for creating sprite sheets ready for animation.</p>
<h3>Edge Animate</h3>
<p>I guess the jury is still out on Edge Animate. It’s kind of Flash reborn isn’t it, but using web technologies. You may not want to use it for production ready code, but as a tool for creating mock-ups it’s definitely worth considering.</p>
<h3>After Effects</h3>
<p>Dan Mall has said that he uses Adobe After Effects to 'mock-up' his animations. So that he can can get the timing and feeling right, before handing them over to a developer.</p>
<p>Although After Effects is a pretty expensive bit of kit by itself, these days Adobe's pricing structure is so that if you need 2 or 3 of their programs for 12 months, you may as well buy them all.</p>
<p>So if any of you have access to After Effects, I recommend you give it a try. It's kind of like Illustrator with a time line, and if you're at all familiar with Flash you'll probably feel right at home.</p>
<h3>The Dream App</h3>
<p>So what would the The Dream app be like? When working on the web, we’re used to using a range of apps and services in order to get the job done, but I still would like something created specifically for animation. I guess this is what Adobe Edge Animate wants to be, but I’m thinking more along the lines of a Typecast for animation. Hopefully one day, somebody clever will make this for me!</p>
<h2>Conclusion</h2>
<ul>
<li>Think of animation as a design material, not a piece of content.</li>
<li>Use it to communicate more, without adding clutter to your designs.</li>
<li>Use animation to give each project a unique personality.</li>
<li>Animation is distracting, be mindful of people's attention.</li>
</ul>
<div id="further-reading">
<h2>
Further Reading
</h2>
<p>
If you'd like to learn a bit more from some designers who know a lot more than me, I recommend the following articles (and book).
</p>
<ul>
<li>
<a title="Transitional Interfaces (on Medium)" href="https://medium.com/design-ux/926eb80d64e3">Transitional Interfaces by Pasquale D’Silva</a>
</li>
<li>
<a title="Flashless Animation (on 24 Ways)" href="http://24ways.org/2012/flashless-animation/">Flashless Animation by Rachel Nabors</a>
</li>
<li>
<a title="Better Navigation Through Proprioception (on A List Apart)" href="http://alistapart.com/column/better-navigation-through-proprioception">Better Navigation Through Proprioception by Cennydd Bowles</a>
</li>
<li>
The Animator's Survival Kit by Richard Williams
</li>
</ul>
</div>
Crafting animation on the web an introduction2013-03-02T20:51:00Zhttps://www.benjystanton.co.uk/blog/crafting-animation-on-the-web-an-introduction/<p>I'm going to be speaking about animation on the web at Port80 in May. In short, I'm hoping to answer the following questions…</p>
<ol>
<li>What's possible with CSS3 animation and what does all that dirty code mean?</li>
<li>How can I apply classical techniques to give my animation more personality?</li>
<li>What tools and practices can I use to introduce animation early on in the project workflow?</li>
</ol>
Animation as a design material2013-01-31T23:21:00Zhttps://www.benjystanton.co.uk/blog/animation-as-a-design-material/<p>In an excerpt from her book <em>The Mobile Frontier</em>, published on Smashing Magazine, Rachel Hinman talks about how animation and movement is becoming a new mobile design material. (In fact, I think much of her article can be applied to web design as a whole, and not just mobile.)</p>
<p>I love this idea, that animation is a design material (like typography or colour) rather than a piece of content.</p>
<p>Take Pixar for example, they may be the first company you think of when someone mentions animation, but they don't make animations, they make films. Or, more broadly speaking, they tell stories. They just happen to do it using animation.</p>
<p>Similarly, on the web, I don't want to make animations, I want to make websites. I believe that when used carefully, animation can improve both usability and user experience. As Rachel puts it…</p>
<blockquote>
<p>The addition of movement to a [web] experience can provide clarity, information about context and, frankly, a dash of joy and fun.</p>
</blockquote>
Immersive animation on the web2013-01-26T22:27:00Zhttps://www.benjystanton.co.uk/blog/immersive-animation-on-the-web/<p>I just got back from the New Adventures conference in Nottingham, and one of the stand out talks for me was from Jon Tan. The talk, titled Billboards and Novels, was all about typography on the web, but it got me thinking about animation too.</p>
<p>It's easy to see how animation can be used to make a big impact, but on the web we often want a gentler, more immersive experience.</p>
<p>Sometimes, a <em>lack</em> of animation can be distracting, resulting in us noticing the interface, rather than the content.</p>
<p>For example, abrupt changes on screen can stand out like a sore thumb, so we animate menus if a user opens them. Or, if nothing happens after an interaction, users can be left wondering if they've achieved the desired outcome or not, so we enhance buttons with hover and active states.</p>
<p>So I try not to think of animation as a tool purely used to distract. It's just as powerful when used to communicate gently and keep the user immersed.</p>
On knolling2012-10-27T22:24:00Zhttps://www.benjystanton.co.uk/blog/on-knolling/<p>Darren taught me new word this week – knolling – it's the act of arranging objects in an orderly fashion. An example might be grouping all the things on your desk and placing them parallel to the edge in a grid-like fashion.</p>
<p>Take a look at the <a href="http://knollingblog.tumblr.com/">Knolling Blog on Tumblr</a> to get a better idea.</p>
<p>It reminds me of a story that my mum often tells me, about how I used to do something similar with my toy farm set. Instead of playing with the animals, I'd line them up two by two in a neat line outside the cow shed. She used to think I might have Asperger's syndrome (my wife still does).</p>
<p>I think this hints at my future job as a designer just as much as the fact I was good at drawing.</p>
<p>Often, design is about organising, ordering and presenting things so that they can be better understood, rather than creating something brand new.</p>
An excuse for a blockquote2012-10-19T21:47:00Zhttps://www.benjystanton.co.uk/blog/an-excuse-for-a-blockquote/<blockquote>
<p>Design is as much about absorbing things as it is creating them. It's as much about removing things as it is adding new ones.
<br />— Me, just now</p>
</blockquote>
Design is an actual job2012-10-07T05:13:00Zhttps://www.benjystanton.co.uk/blog/design-is-an-actual-job/<p>I'm currently reading 'Design Is a Job' by Mike Monteiro. It's a great book, and I'd recommend it to anyone working in design. Mike's a web designer, but I'm sure his thoughts and stories could relate to any design sector.</p>
<p>Part of the book tackles the idea that design is some magical process that only creative types can understand. He argues that designers who perpetuate this myth are doing themselves and their industry a disservice.</p>
<p>I couldn't agree more. I'm constantly struggling to define what design actually is, and I'm rubbish at explaining to people what I do. It's far too easy to fall back on the 'I just draw stuff and make stuff look cool' cliché.</p>
<p>But design is a hard thing to explain. It's not what I thought it was before I became a designer, and I'm sure most people have a similar mis-understanding of what it actually is.</p>
<p>It isn't some whimsical hobby or dark art, it's a job. An actual grown-up job. With processes, methods and tools. We get paid money by clients who want to improve the way that they communicate with or service their customers.</p>
<p>If this book teaches me anything, it's that I need to be better at explaining what I do when people ask, otherwise I can't complain when they don't get it.</p>
<p>Right then, back to <a href="http://www.abookapart.com/products/design-is-a-job">the rest of the book</a>.</p>
Designing user experience in casinos2010-10-18T21:34:00Zhttps://www.benjystanton.co.uk/blog/designing-user-experience-in-casinos/<p>What can I learn from Las Vegas? Apart from the fact that I’m addicted to cheese burgers and penny slots, I tried to think about how Las Vegas was designed. After all, it's 100% artificial, everything there is man-made.</p>
<h2>Getting there</h2>
<p>Airports are masterful at moving thousands of people in the right direction whilst trying to minimise stress and confusion. I’m always struck by how clear the signage and icons are. Of course, with such large volumes of people there are always problems, but generally I think it’s easy to find your way around.</p>
<h2>Navigating a casino</h2>
<p>Las Vegas is almost the complete opposite. The signage in the casinos is intentionally misleading. It’s easy to find the slot machines but if you want the exit, or even some food, you really have to pay attention and keep focused. They are designed to keep people inside, spending money.</p>
<h2>So why doesn’t poor navigation annoy casino users?</h2>
<p>Well first off, we are all there to gamble, nobody goes to Vegas for a walk in the dessert (despite what the tourism posters try to suggest).</p>
<p>Secondly, they make it so easy for you. You barely have to lift a finger in Vegas. The escalators, taxis and monorails cart you around from casino to mall and back again before you’ve realised the sun is out.</p>
<p>There are so many places to put your money, your mind-set switches from “should I spend it?” to “what should I spend it on next?”.</p>
<p>And the customer service is great. Drinks and refills are always available. If you’re gambling they’ll serve you free drinks, as long as you keep tipping.</p>
<h2>Applying this to web design</h2>
<p>I was reminded of an article I read on the 37 Signals blog a few years ago, called <a href="https://signalvnoise.com/archives2/the_casino_experience.php">The Casino Experience</a>. They examine this subject in more detail and it’s a great read. 37 Signals are well known for creating popular web-based apps, designed to meet people’s needs by putting user experience at the forefront.</p>
<p>I’m not suggesting we take some of the slightly under-handed techniques used in casinos and simply apply them to our websites, but we can certainly learn something by examining the “immersive and compelling customer experiences” that casinos create.</p>
BBC Newsnight talks graphic design and infographics2010-08-10T12:46:00Zhttps://www.benjystanton.co.uk/blog/bbc-newsnight-talks-graphic-design-info-graphics/<p>It was great to watch graphic design being discussed on the telly last night.</p>
<p>The BBC’s Newsnight program hosted a discussion on how politics might adopt better graphic design to help people understand complex or perhaps even boring ideas.</p>
<p>The case studies in question were David McCandless’s beautiful information graphics and he chatted to host Kirsty Wark alongside veteran graphic designer Neville Brody.</p>
<p>Unfortunately, Brody seemed to dismiss McCandless’s designs as pointless eye candy and almost managed to steer the entire conversation off topic. For me, the fact that McCandless’s designs are beautiful enough to be as used decoration is just a side-effect and by focusing on that, the feature missed the point.</p>
<p>Graphic design can (and should) be used to enhance visual information so that the data can be better understood. Plain text and numbers and tables are boring and hard to understand, unless they have been thought about and presented properly.</p>
<p>Admittedly some of McCandless’s work is experimental, but mostly the designs are simple and clear allowing the message within to be communicated and understood.</p>
Swansea town sea shanty2007-05-10T18:08:00Zhttps://www.benjystanton.co.uk/blog/swansea-town-sea-shanty/<p>I have what you might call a passing interest in sea shanties. I’m pretty sure this stems back to spending a lot of holidays in Typhoon Lagoon, a ship-wreck themed water park, part of Disney World in Florida.</p>
<p>Throughout the water park, the music (and décor) is designed to envoke a strange post-modern fantasy world; a mix of The Beach Boys’ California, paradise islands and fishing ports.</p>
<p>The music played (through hidden speakers in the bushes) differs from area to area; in one part near a café that serves Fish & Chips (a disclaimer points out to Americans that these chips are fries and not crisps) you can hear some authentic sea shanties.</p>
<p>Other works of fiction have also forged my romantic ideals of this music including a song called Spanish Ladies (sung in the film Jaws). And, surely, growing up in Swansea, once a very important port town, must too have played a part.</p>
<p>On returning from my most recent visit to Florida, I tried to find out a bit more about Sea Shanties. It turns out that there is in fact a Shanty about Swansea called Old Swansea Town Once More.</p>
<p>In what is turning out to be a series of coincidences (which always make me want to write) I attended a family party last weekend where a relative performed a song which I mistook for Old Swansea Town Once More. It actually turned out to be I’m Going Home To Swansea Town, a modern song written by John Davies in 1975 for Max Boyce. The songs are certainly similar in content, perhaps Old Swansea Town Once More was inspiration or perhaps it was just a coincidence.</p>
<p>A further coincidence took place today, I noticed after checking my web stats (which I never do) that someone reached this website after typing ‘I’m Going Home To Swansea Town’ into the Google search engine. My site (www.thelab7.com) actually appeared on the first page, eighth from top. Presumably after publishing this article, I will actually get further up the rankings. This happened because my site contains the phrases ‘Swansea Town’ and ‘I’m Going’ in two separate locations, and also because websites referring to the song and people’s interest in it must be pretty rare.</p>
<p>Final coincidence, in Swansea this month (Saturday 28th to Sunday 29th Jul 2007) there is Sea Festival, featuring, among others, a group of shantymen called Baggyrinkle who have recorded a version of Old Swansea Town Once More. I’m there!</p>