Benjy Stanton

Discovery progress and camping at Shell Island

2026-04-10T00:00:00Z

A double weeknote starting 30 March 2026. Continuing the discovery phase and a trip to North Wales.

Discovery progress

The discovery I'm working on has already revealed a nice surprise. The internal users are not following the intended procedure properly, so we think they can cut out a few steps from their as-is workaround straight away.

I still think there is value in pushing ahead with the discovery, as the remaining steps are still a manual workaround that we want to improve. But we may already be able reduce the size of the problem to solve by about a third.

I'm counting it as a win for the discovery, as the map that we created helped others to spot the procedure error. But I think our team can learn something about sharing our discovery plans with key people sooner to ensure less time is wasted capturing incorrect procedures.

The bit I'm most interested in now is creating a list of opportunities to explore in the alpha. I've remapped the journey into key tasks and it shows how we're basically asking the user to re-enter things multiple times. We should be able cut down the steps, reduce risk of error and reduce time taken on cases, leading to reduction in the backlog.

Camping at Shell Island

We took the van away for our second trip. This time was 3 nights in Shell Island, North Wales for Easter weekend. Unfortunately our trip coincided with Storm Dave. Luckily our awning survived, but for safety, all 5 of us decided to sleep in the van with the top down. Bit of a squeeze.

The campsite was very pretty. The campsite is located on a spit of land in between the sea and a large estuary, it's not a true island, but the road in and out gets cut off by the tide so it feels quite remote. You can camp anywhere and it feels quite wild, but the centre of the site has lots of facilities (bar, shops, arcade) that can get quite busy with families.

Highlights included...

Zip World Betws-y-Coed
Portmeirion
Driving through towns like Barmouth and Harlech
Stopping in Aberaeron on the way home for fish and chips in the New Celtic, drinks in the Harbourmaster and some warm sun (finally)

Bookmarks

Geese

2026-03-28T00:00:00Z

A double weeknote starting 16 March 2026.

Kicking off a discovery

Starting to get a bit more momentum back in work now that we have our April to June priorities sorted. I'm leading a short discovery to help improve an inefficient casework process.

I've really enjoyed digging into the problem over the past few weeks and we already have a pretty detailed journey map, a rough service blueprint, and lots of information about the existing manual steps that our internal users have to navigate.

We also have a better understanding of how these things get published on our external facing services.

I think the initial plan was to finish the discovery at the end of March, but with competing team priorities and easter leave I think it may creep towards mid-April. Still, to think we've gone from not even knowing this was a problem to everything we know now, I'm feeling confident we've set ourselves up for success.

Personal stuff

Me and my wife have signed up to do a half marathon hike around Gower in June to raise money for Macmillan Cancer Support. Please donate if you can.
I've also signed up for Swansea half marathon in June too. Going to be a busy month. Better start training.
I really enjoyed episode 146 of the Pod Save the UK podcast with Zakia Sewell. I'm intrigued by how we might make sense of the UK's cultural identity by looking back at myths and folklore. Zakia has written a book this topic. It's something that Blindboy has touched on too in his podcast back in episode 441 I think it was.

Geese

I went to see Geese last weekend in Bristol. The band were pretty new to me, but I loved it. Definitely a new favourite band.

Watching some Axe-con talks

2026-03-14T00:00:00Z

Axe-con

I managed to watch a couple of the Axe-con talks the other week. Axe-con is a free accessibility conference. You can watch the talks for free as long as you register.

I watched Anna Cook's and Stéphanie Walter's talks from the design track.

Anna Cook

Some quotes I liked from Anna's talk...

"Accessibility is not a feature. It is system design."
"Designing for diagnoses creates brittle systems … instead, design for variability … support multiple interaction modes … respect user-initiated preferences"

Video: Accessibility in the End of Deterministic Design (Again) by Anna Cook

Stéphanie Walter

Stéphanie talked about how to get buy-in for accessibility from stakeholders. She recommends "tying accessibility to customer satisfaction KPIs."

She also shared a chart based on IBM data illustrating that fixing defects later on in the delivery process can be a lot more expensive...

Design stage - 1 times the cost
Development stage - 6.5 times the cost
Testing stage - 15 times the cost
Maintenance stage - 100 times the cost

Video: How to Convince People to Care and Invest in Accessibility by Stéphanie Walter

A pic of the new van

A couple of you have asked for a pic of the new van, so here you go. Sorry about the dog poo bag, I though about erasing it, then I thought that in the age of AI it's better to be authentic.

We just stayed for one night near Rhossili. It was cold in the awning (the kids stayed in the van) but other than that, it went well.

Looking forward to a longer break in North Wales at Easter.

Seeing the Rugby in Cardiff

I'm off to the rugby today in Cardiff. Not expecting a win but should be a good game between Wales and Italy.

Glad to see that Wales have started wearing white (not red) when playing against Ireland in green to make it more colour blind friendly.

Considering how common colour blindness is in men, I'm really surprised how often the impact can be forgotten or ignored in sport.

Bookmarks

Getting a camper van

2026-02-21T00:00:00Z

I've had a patchy weeknoting record so far this year. Work has been challenging, and there is plenty of life admin filling up my weekends that isn't leaving much energy to write on the weekend.

We're switching cars at the moment and all the paperwork and expenses are getting me down. Tax, insurance, finance, warranties, cleaning, repairs. It's a lot to juggle, but we are nearly there.

We're currently between cars, and it's a bit tricky. We only had one car, it was adjustment getting down to one car when we did that a few years ago, but having zero cars is a pain.

(With everything going on in the world, I recognised we are lucky that this all we have to deal with.)

Apart from the expense, one of the reasons I've maybe avoided getting a camper van until now is that it feels like a very clichéd status symbol. I'm becoming a very specific type of of middle-aged man. It's going to go very nicely with my Passenger dry robe and travel Aeropress, haha.

Jokes aside, getting a camper van has been a lifelong dream for us. We're hoping we can have a few years of going away with the kids before they are too old to want to go on holiday with us anymore. Saying that, I still go on holiday with my parents and in-laws and I'm in my forties. 🤷🏻‍♂️

Looking forward to lots of adventures down the beach and exploring more of Wales. Maybe I'll even finish my beach challenge.

Bookmarks

No notes, just links

2026-02-07T00:00:00Z

No notes this week sorry, but too many good links not to share them this weekend. Here are the design, accessibility and public sector digital links that caught my eye this week.

Do you read my blog posts? I'd love to know your feedback, good or bad. Let me know via Bluesky, LinkedIn or email (benjystanton@gmail.com). Thanks.

Sharing the journey maps so far

2026-01-31T00:00:00Z

I've been continuing to focus on some detailed journey maps this week. They've reached a good point in their maturity, so I've begun to share them with the team and I think they're going down well so far.

I've gone into a lot of detail and it's helped me to show how much time and effort is being spent on various case working tasks across the internal side of the service.

It's now easier to spot one-off tasks that are taking way too much time. It's also shedding light on smaller tasks that are repeated many times across a case, so even though these tasks are quick in isolation, they are costly when you add them all together across the service.

We are also learning more about when and how tasks are shared between different teams.

Now that I have this deeper knowledge of the user journey, I'm feeling more useful in refinement sessions. I feel confident that I've got something useful to add to team conversations, and that I can be a stronger advocate for users and the wider context they are working in.

What's next for the team?

The team are approaching a big milestone, so I think we're starting to wonder what's next. There's an expectation that some of us will be moved onto other products by the end of March. It sounds a long way away, but it's only about 4 sprints.

It's a little disconcerting on a personal level, but it also means I'm wondering how best to focus my time. If we know the future size and shape of the team ahead of time, then we'll be able to plan and organise our work more effectively. But I can also see why it's difficult for stakeholders to make that call, at least until our team have delivered everything we've been working on.

How to build trust as a designer

I really liked this timely post by Joe Natoli on LinkedIn this week. He writes about how being a great UX (user experience) designer won't help, if you can't build trust with stakeholders and speak their language.

You have to calmly explain tradeoffs instead of arguing and defending your “position.” Your research findings have to speak to business risk and opportunity first — user needs second.
— Joe Natoli on LinkedIn

It's something I need to work on.

Bookmarks

Getting stuck into journey mapping

2026-01-24T00:00:00Z

This week has been fairly positive in work. I've managed to get my head stuck in to new series of journey maps and I'm already feeling like I'm getting a lot of value out of them.

I'm capturing 4 journeys carried out by internal case workers. I've looked into these journeys before, but this time I'm trying to be more accurate with my mapping, and more intentional about how I share the findings.

Findings so far

Users aren't always following their own written guidance notes about when to complete to each task. Some tasks have been moved to separate journeys. I think the extent of the change will come as news to the wider time.
Many of our changes to the digital service haven't reached the production environment yet, so it's hard to measure our improvements still. Good news is, we have lots of improvements coming down the release pipeline.
Some tasks are being picked up by different teams, and the product doesn't really have a native way of clearly capturing when these tasks are done and the case is ready to move to the next team.
I'm seeing lots of repeatable patterns, like "upload a file". These tasks are completed multiple times within a journey and across multiple journeys. So, I'm sorting these into themes so the team can see at a glance how much effort and time is spent on each one across the service.

Next steps

I expect I'll spend most of next week mapping too. Once the first drafts are done I want to do a formal review with the wider team and invite BAs (business analysts), URs (user researchers) and others to plot their findings and observations onto the map.

I'm hoping that we'll start to see clusters of areas that need more attention.

A design artefact to cling too

I'm starting to feel like these journey maps will be something I can use to push for the improvements I think need to be made to the service. So far, I've struggled to show the team how I can help turn all the problems I'm identifying into opportunities.

Usually I'd use a prototype for that, but for various reasons that hasn't really worked on this team yet.

Bookmarks

First weeknote of 2026

2026-01-12T00:00:00Z

Posting this a bit late due to a busy weekend. The first week back in January was a mixed bag. We had some sad family news over the Christmas break so I was thankful for a relatively gentle return to work.

Component library

We're working on a component library idea to try and address some of the design inconsistencies we're seeing on the internal service we're working on.

The service is powered by a low-code, off-the-shelf piece of software, so it currently can't follow the GOV.UK Design System, which means we are struggling to apply a satisfactory level of quality.

We've been sharing an idea for a component library idea round to try and get buy-in. So far so good. We've shared it with other designers, plus a product manager and a business analyst. We also spoke to some devs and they told us that the software being used has an in-built option for creating a native component library which sounds really promising.

A worry for me is that only certain kinds of components can be linked to this library, whilst others are hard-coded into the system and others are completely custom code. So we'll need 3 different approaches depending on how each component is built. The devs have offered to work up a demo so we can see how it works, then agree some next steps.

Journey maps

We're also about to kick-off another iteration of our journey maps. We made the first versions back in September/October and since then our team have been busy iterating on the service. So our product manager has asked us to create and updated to-be version of this map to show what we've achieved, but also highlight any future areas for improvement.

Accessibility testing

As an aside, I've asked our delivery manager to help me introduce accessibility testing to our team's ways of working, so I'm hoping these extra checks will increase our ability to spot and fix issues sooner, and give me more confidence to focus elsewhere.

Feeling detached from day-to-day work

Despite these interesting projects, I'm feeling disconnected from the day-to-day work of the team. They all feel like slow-burn community of practice initiatives, rather then direct improvements to meet user needs.

Overall I think I'm better suited to hands on-work where I can directly shape the iterations that get shipped each sprint. I like to feel like I’ve played a part in the small improvements that build up over the weeks towards an improved service.

I think stepping too far away from this work can erode the idea that designers are an integral part of the delivery team.

Bookmarks

One last weeknote for 2025

2025-12-20T00:00:00Z

I haven't been weeknoting much recently. I've been focusing on Cymru Ddigidol. Plus work has been a bit tough. But, I wanted to round off the year with one more post and some highlights.

Finishing the year with user research

We finished the year off with a round of user research. In fact, my last meeting of 2025 was observing some remote usability testing, which seems like a great way to go out.

This round included some users of the old service, so it was great to get some insight into their mental models.

It was also the first time the team had prototyped with an interactive, HTML based prototype. After my work at the Home Office earlier in the year, I feel a lot more confident in my prototyping skills, so it was nice to put those skills to use again.

Assistive technology groups

Over the past few weeks I've joined a few assistive technology (AT) working groups with internal users. We've spent a lot of time with Dragon Speech Recognition and dark mode users to see the barriers they face with the new service.

I've really valued the time spent with them, and it gave us some solid evidence around bugs to fix, as well as some accessibility workflow improvements further up the chain.

I think I can offer a lot of help in this space, joining the dots between…

identifying barriers that AT users face
linking those barriers to WCAG (Web Content Accessibility Guidelines) success criteria
and translating these findings into improvements that need to be implemented by the delivery teams

Accessibility bookmarklets

I also discovered (or maybe rediscovered?) this amazing resource from Ian Lloyd: A11y audit bookmarklets.

For example:

Blackout is a great tool that "redacts all parts of a page that will be hidden to AT users".
1-Click De-crapulator lets you "click on any part of a web page, get the basic HTML with all the bloaty crap removed!"

Both have been really helpful in helping me to identify and diagnose accessibility issues, Thanks Ian for making these!

Some great feedback about my accessibility efforts

After a tricky few weeks, I received some lovely feedback out of the blue. So I'm just going to capture it here (sorry for the humble brag)…

Benjy has become a genuine accessibility ally. He consistently challenges and supports delivery teams to adhere to relevant accessibility standards and best practice, ensuring accessibility is considered as a core requirement rather than an afterthought.

What really sets Benjy apart is his willingness to get involved. He has proactively volunteered to join accessibility meetings to hear directly from users and see and hear first-hand the barriers they face. He regularly uses these insights to recommend practical improvements and to influence better outcomes across delivery. Benjy's actions are making a real difference to both our users and our teams and his contribution absolutely deserves recognition. It's great to be working with him!

Bookmarks

Introducing the Cymru Ddigidol website

2025-12-14T00:00:00Z

The Cymru Ddigidol website is an unofficial community project to share digital resources in Wales.

Ever since GovCamp Cymru last month, I've been working on a little website with Nia and Monika.

We wanted to create something that promoted some of the great resources that are being shared in the Cymru Ddigidol Slack and also help to amplify some of the weeknoters and people working in the open across Wales.

I was heavily inspired by the brilliant X-GOVUK.

So today we're sharing the Cymru Ddigidol website. An unofficial community project to share digital resources in Wales.

We wanted to get it out early, and then improve it as we go, in the open. Sorry in advance if we've missed your blog or resource, but we'll happily consider it for a future update.

The code is up on Github, so please raise issues if you see any bugs or have content suggestions. Or contact me, Nia or Monika.

Benjify Wrapped 2025

2025-12-06T00:00:00Z

A round up of gigs I've been to in 2025.

16 live music events
14 gigs
2 festivals
7 in Cardiff, 6 in Swansea, 1 in Port Talbot, 1 in Llandeilo, 1 in Bristol
12 standing
4 seated
40 bands (ish)
7 Welsh language bands 🏴󠁧󠁢󠁷󠁬󠁳󠁿
3 cover bands
13 indoor
3 outdoor
Gig of the year Caribou

My year in gigs

In date order, January to December.

The Smyths and Billy Blagg
Gwilym Bowen Rhys Trio and Cadog
Jake Xerxes Fussell
Red Snapper and Monet
Catrin Finch and Aoife Ní Bhriain
In It Together festival - Panic Shack, Antony Szmierek, Becky Hill, Shy FX, The Sugarhill Gang, CVC, Gillie, Bad Manners, Dactyl Terra and The Pill
Gŵyl Tawe: Mari Mathias, Los Blancos, Adwaith and Gruff Rhys
Positive Reaction and Asidhara
Basement Jaxx, Ezra Collective and Eats Everything
Sleeper and Rialto
A Guy Called Gerald and The Jungle Drummer
Cate Le Bon and Kate NV
Reef
Baby Shambles, Trampolene, Vona Vella
Cold Comfort Club
Caribou and Kelbin

Why Spotify is suboptimal

Usability testing a casework backlog view

2025-11-15T00:00:00Z

A weeknote starting 10 November 2025.

Usability testing a casework backlog view

This week's highlight was a round of user research, and the first usability testing session I've been a part of since starting my new contract.

We were usability testing a new design for the first time, so I was quite nervous that we hadn't got it quite right, but the initial findings were positive and it certainly didn't fall flat.

We agreed that in the next round we need to do some user research with team leads too. The design is basically a new caseworking backlog view, but without doing user research with team leads, we're still unsure how much effort they will need to put into shaping the backlog for the caseworkers who then go on to pick up the work.

It was great to work closely with the user research team to plan and observe a research round together. It felt like we were acting as single UCD (user-centered design) team for the first time.

The work we did to review and iterate the design with user researchers and product managers before the research round paid off too, so I need to remember to keep doing this.

In the background I've also been getting the prototype ready to go up into a GitHub repo. This means that other designers can work on it with me, and we can get it deployed to Heroku for future usability testing sessions.

GovCamp Cymru links

Here are a few blog posts, weeknotes and resources that people have written or shared since GovCamp Cymru.

Bookmarks

GovCamp Cymru 2025 – working in the open

2025-11-08T00:00:00Z

My notes and reflections from the session about working in the open.

I went to my first ever GovCamp Cymru on Friday, it was a great event. Thank you to the organisers and volunteers for making it happen.

I went to 3 sessions, here are my notes from the first session on working in the open, that was pitched by Monika. I really loved this session. Thank you Monika for pitching it. (By the way you should definitely subscribe to Monika's blog).

Here are my notes from the session…

The conversation focused a lot around weeknotes and sprint notes and whether teams have permission to do this in public (or not)
It was suggested that this might be one of those things where we can ask for forgiveness rather than permission
Some people publish personal weeknotes too, but there can be nervousness around this
Nia and Monika suggested joining Cymru Ddigidol Slack to share weeknotes and 'working in the open' best practice
Also worth joining the UK government's cross-government Slack (if you can)
Heledd's team in Natural Resources Wales (NRW) were mentioned as a great example of a team working in the open
Matt Jukes was mentioned a couple of times as an advocate for working in the open, Matt has written a lot about working in the open, this is a good place to start: Make things open reading list
'Work in the open' is point 9 on the Digital Service Standard for Wales so it's definitely something we should be doing
We could work more with comms teams, they can help facilitate sharing things publicly
Someone (Osian, I think) pointed out that working in the open isn't just about writing weeknotes, it can be about creating guides or sharing code on GitHub, or inviting people to watch show and tells
Nia mentioned that one of the benefits of working in this way is that it enables the capturing of organisational memory
This reminded me of design histories, which are a great way to "document and share design decisions", this design history tool from X-GOVUK is one way to publish them

Somewhere to publish unofficial community resources?

It made me wonder if we need a place to publish a collection of unofficial community resources for people working in the Welsh public sector. Does one of these exist already? If not, where could it be? I'd see this as somewhere that compliments the Cymru Ddigidol Slack and enables people working in Wales to share things more widely.

It would be great to have somewhere for sharing things that are useful across the community, but not owned by any particular organisation. It could be a GitHub repo, a website or a blog (or a mix of all 3). I'd be happy to put some technical effort into making this happen, if people think it's a good idea (and if others would be able to help supply me with content and resources to put on it?).

Update on 10 November 2025

Benjamin Parry pointed out that Paul Robert Lloyd has a UX London talk about documenting decisions and marking milestones. In that talk Paul covers design histories. Worth a watch. Thanks Benjamin!

Design Swansea and GovCamp Cymru plans

2025-10-30T00:00:00Z

A weeknote starting 27 October 2025.

I’ve been away for most of this week so I don’t have much work stuff to report on, but I’m looking forward to a few extra curricular things next week.

Design Swansea

I’m going to watch my friend Dylan talk at Design Swansea on Thursday 6 November. I haven’t been for ages, but I’m really looking forward to this next one. It’s always a great meet-up.

GovCamp Cymru

Then, I’m going to my first ever GovCamp Cymru on Friday 7 November. I’ve been inspired by the work that people like Nia, Ann and Heledd are doing in Wales.

It feels like an exciting time for public sector digital in Wales. Not to mention the great work that CDPS (Centre for Digital Public Services) are doing.

So, I’m keen to see some of that up close and meet other like-minded people. Hopefully see a few people there, say hello if you’re about.

Bookmarks

Mapping and coastal running

2025-10-24T00:00:00Z

A weeknote starting 20 October 2025.

Just a quick weeknotes this time as I'm off on hols for a few days.

Mapping

Work was a bit up and down, but finished on a real high. A map I've been working on has been getting more attention from the wider team. The product and delivery folk in particular have been using it to help inform the roadmap they are shaping up, ready to share with the higher ups.

It's been nice to feel like I'm making an impact on the team's direction, especially as it's been a bit difficult to get good traction with any hands-on interaction design type work.

Being paid weekly as a contractor

My current contract means that I'm being paid every week. I was a bit apprehensive about it initially, but I think it's helping me to better manage my finances.

Gower coastal path run

I'm waking up early tomorrow for a sunrise run from Mewslade Bay to Port Eynon, Gower. I think the run is going to be about 8K. It's also going to fill in a few gaps in my challenge to visit all the beaches in Swansea. I think we'll pass about 9 beaches, bays and coves. Will hopefully grab some good photos.

Caerphilly by-election

I've been keeping an eye on the Caerphilly by-election. It's been an interesting one to watch and has the potential to shed some light on what might happen in the 2026 Senedd Elections. Check out For Wales, See Wales podcast for some details.

Bookmarks

Design community of practice, prototyping internal services and watching rugby in the valleys

2025-10-19T00:00:00Z

A weeknote starting 13 October 2025.

Service design community of practice

I'm really enjoying spending time with the service design community of practice (COP) in The Intellectual Property Office (IPO).

It's nice to have a safe space to let off some steam, away from the pressure of delivery teams. It's also great to share ideas and experiences.

I've been part of COPs before where I've felt under pressure to prepare things before I attend, but the feeling here is relaxed and I think it leaves room for unplanned conversations and opportunities to emerge.

We meet twice a week and it doesn't feel like an obligation or chore.

The delivery teams also actively look to COPs for guidance on things, which is encouraging. For example, we are reviewing our team's definition of done (DOD) at the moment. So all professions are being encouraged to check in with their COPs.

This ensures any changes to ways of working are owned by the whole community, meaning they are more likely to be followed and will hopefully last the test of time.

Prototyping internal services

My main work focus this week has been setting up an unbranded prototype using the GOV.UK Prototype Kit.

It's possible to remove the GOV.UK branding, and then apply some CSS to make the components look like a different product or service. In our case, an off-the-shelf product with its own design system.

This page in the DWP (Department for Work and Pensions) design system introduces this technique: remove GOV.UK branding.

I also put together some slides to help bring the team along. Not everyone on the team was familiar with prototyping in this way, and I also think there are some risks that I wanted to share before going too far.

We agreed that we would;

set any research participant's expectations carefully
make sure we are continually checking in with the product managers and software developers to ensure what we are designing is technically possible

I'm looking forward to trying out the technique to solve a real problem for users!

Watching rugby in the valleys

My youngest has started playing rugby and this weekend he had his first rainy away game. We had to get up early on Sunday and drive 45 minutes up the Swansea valley to the other team's rugby club.

When he first started rugby, I was dreading these kind of mornings, but I'm actually really enjoying watching him play. I was not into team sports or clubs at all when I was younger, but I can see that he loves it.

It's also nice to visit this part of the country. My mum's family was from this part of Wales. The landscape is pretty epic, and on a clear day you can see the Bannau Brycheiniog (Brecon Beacons). My Grandad loved rugby too, so it feels like there is a strong family connection.

Stewart Lee

Lastly, I went to see Stewart Lee's latest stand-up show this week. I left feeling oddly optimistic. Despite that fact that his show's content, and his general persona, are mostly about despairing at the state of the world. It helps that he's incredibly funny.

Bookmarks

Cycling to work, observing operational users and Cate Le Bon

2025-10-12T00:00:00Z

A weeknote starting 6 October 2025.

Highlight this week was my day in the office on Thursday. I decided not to drive in, but that made things logistically difficult. I had to cycle to the station early in the morning, then get 2 trains and a bus to get to the office.

I'm glad I did it, but it took a lot of effort, so I don't know how often I'll do it in future. Luckily I only have to go into the office once a month.

Cate Le Bon at Llais festival

The main reason I didn't want to drive in was so that I could go out in Cardiff later on that day to see Cate Le Bon play at the Wales Millennium Centre (WMC) as part of the Llais festival. (Llais is Welsh for voice). I loved the gig, Cate is an amazing artist and seeing her in a grand setting like the WMC made it really special.

User acceptance testing

At the office I got a chance to observe some user acceptance testing (UAT) that my team were doing. User acceptance testing is a good method for testing software, but it isn't a typical user research activity. But I thought it was incredibly valuable proxy for user research this time.

We are doing more typical user research (UR) too, but the UR sessions so far have been observing the as-is service, but the UAT session was a good way observe users trying out new features.

I got to see our model office, and meet some more of our operational staff in person. I could see (and hear) from them how usability issues were eroding the benefits of the new feature.

Part of my job as a designer is to reduce the risk of usability issues being found too late in the software delivery cycle, so I felt like I needed to help the team change approach a little. I think that introducing some co-design sessions with the operational team and starting to create a prototype that can be usability tested are a couple of things we can try.

Bookmarks

User research, multi-disciplinary teams and balancing strategic versus tactical fixes

2025-10-04T00:00:00Z

A weeknote starting 29 September 2025.

My first user research session

I had my first remote user research session! We observed an internal user that was completing one of their common weekly tasks using the new beta service.

I've watched a few videos of users doing similar things already, but it was great to get an uninterrupted view of the time it takes to complete things. We also had a chance to have a semi-structured chat at the end.

I think my main takeaway was that this step, although ripe for improvement, wasn't the main bottleneck for the team.

Some of the pain points already have tickets on the board which is great too. Nice to see user research findings being linked directly to technical iterations.

Multi-disciplinary team

I had a real sense of optimism that I was starting to click with the team.

There are lots of great people, and it's great to be part of multi-disciplinary team, where technical, product and user-centred design folks are working together trying to solve the problem.

Tickets on the board

We haven't really started our sprint cycles yet, but I already have a couple of tickets on the board with my name assigned to them, and it felt good to throw my weight behind some things.

Strategic versus tactical fixes

Our team are wrestling with whether to focus on tactical fixes or a more strategic improvement. It's great to see that strategic fixes are being considered. But, depending on the direction, it could mean that some of my quick and dirty efforts this week will need to be paused or revisited.

In my experience, user-centred people are often asked to lower their expectations and work on things more tactically. The "let's not build a gold-plated Lamborghini" argument. So, I'm happy that we may get an opportunity to solve bigger problems. Not that I've ever tried to gold-plate anything, most of the time I'm aiming for a reliable and fuel-efficient family car.

But, I think I've learnt to be very pragmatic and scrappy over recent years. I've been happy to push through small changes based on tiny bits of evidence. As long as I'm nudging things in the right direction, then I'm happy. Now I'm questioning whether or not that approach is right here, and if I'll have to unlearn some of that approach, or try a different one.

For now I have no idea what the scope of the strategic fixes might be. Let's see what next week brings.

Race day tomorrow

Did I mention that I'm running the Cardiff Half? It's race day tomorrow. I'm starting to feel the nerves, but I think this is partly to do with the idea of being part of a big event, as much as the run itself.

Overall I'm happy with where my fitness is at. Wish me luck!

Bookmarks

Disabled buttons

2025-09-27T00:00:00Z

I often see disabled buttons being used by teams, and it can take a bit of work to convince people why they aren't always a good idea. Here's a list of posts that explore why disabled buttons can cause usability and accessibility issues for users.

I think Zahid sums up the solution well…

"…leave the button active. If a user happens to press on it without performing the required action, use error messaging to help them recover." Zahid Ali

Articles about disabled buttons

A new team and a clear problem to solve

2025-09-27T00:00:00Z

A double weeknote starting 15 September 2025.

Assigned to a sprint team

I've just finished the fourth week of my new contract. I was too busy to blog last weekend, so this post is a double weeknote. These past 2 weeks have been a change of pace after a relatively calm first 2 weeks of onboarding.

Some new delivery squads have been created to work on a service that’s in its beta phase and I’ve been assigned to one of them.

We found out the news on the Tuesday morning of week three and by the end of the week we had started having daily stand-ups. I’m impressed at how quickly it’s happening. Well done to the product and delivery folks for getting straight onto it.

Overall I would say the product and delivery folk here seem really strong, which I think is usually a good sign of an organisation's ability to deliver user-centred services.

My team will be working on some of the internal parts of the service. It uses off-the-shelf software, and early impressions are that it is highly constrained, especially in terms of interaction design.

I've been keen to make an impact on the team, so I've been trying to play an active role as the team goes through an inception phase. I think I'm just about getting the balance right between being helpful and annoying!

It's always interesting joining a new organisation to see where design fits into the existing balance, and how I can (hopefully) help to deliver better things.

Making a user journey map

My main focus this week has been on creating some user journey maps. We've had access to some video recordings of users completing common tasks using the legacy service and the beta service. So I've been turning these into maps that I hope will help the team to identify and prioritise problem areas that are slow, repetitive or frustrating for users.

The map has already highlighted some areas for improvements that were different to the problems I sensed when watching the video for the first time. So I think it's been a useful synthesis exercise, hopefully others agree.

We have quite a lot of feedback coming in from internal users from different places, so I'm looking forward to working with the user researchers, subject matter experts and business change people to make sense of it all.

Our team have been give a pretty clear problem to solve with some key metrics that we need to try and improve. It's great to have such a clear target. And it's just a little scary to be in this early position where we don't quite know how we'll do it yet.

Gigs and music

I've been to a couple of good gigs recently (A Guy Called Gerald and Sleeper) after a relatively dry patch over the summer. Next up is Cate Le Bon!

I'm also up early today trying to get Green Man tickets this morning. I've never been before, despite it being located very close to me, and very aligned with my music tastes. Fingers crossed.

Running update

Cardiff Half is a week tomorrow, this is last time I'll ask for donations! I have hit my target though, so thanks to everyone who has donated, it means a lot.

Bookmarks

Prototyping on Windows, joining a hackathon and a new profile photo

2025-09-13T00:00:00Z

A weeknote starting 8 September 2025.

Installing the GOV.UK prototype kit on Windows

Everyone I've met here so far (even interaction designers) uses Windows PCs. I have to say that the hardware that they supply is generous and has a decent spec though. It includes a Surface tablet and 2 monitors that I picked up on my first day to take home.

I had a go at setting up the GOV.UK prototype kit on Windows this week. I haven't quite finished yet, but it seems pretty smooth so far. The design team have written a handy tutorial for how to get going.

Most of the requirements (Git, Node, VS Code) were available for me to self install. The only real blocker has been admin rights to install the kit itself, so I've raised a request with IT to get that sorted.

Apart from that, everything else feels pretty standard. The prototype repo is stored on Github and hosted on Heroku. So once I'm up and running I'm expecting everything will feel pretty normal.

I also really like how the team uses version numbers to keep the prototype code, flow diagrams and dev tickets in sync.

Hackathon

I joined a hackathon in the office on Thursday. I was mostly in listening mode, but it felt like a good way to continue my onboarding and meet more people.

It was great to see a multidisciplinary team, including internal users, come together to work on problems. By the end of the day, the teams had a list of ideas, prioritised by effort and value, to take forward into the coming sprints.

I'd like to spend more time with the internal user team to understand their different roles and needs.

New profile photo

With my new contract in place, I thought it was about time to update my profile photo (I was looking a bit too young and fresh faced in the old one). I'm trying to use the same one across my website (including my favicon), social media and work apps to help people recognise me in different places.

I think it's tricky to get the balance of professional versus personal, and realistic versus flattering 🤣 … anyway here I am:

Bookmarks

First week at IPO

2025-09-05T00:00:00Z

A weeknote starting 1 September 2025.

After a couple of unplanned weeks off inbetween contracts (I blogged about week 1, but not week 2) this was my first week at the Intellectual Property Office (IPO).

Back in Newport

I went to their office on my first day (Monday) to join some onboarding sessions, meet my manager and pickup my IT kit. The onboarding was very well organised, and I'm joining with a few others, as a large phase of transformation work is kicking off. So it feels like an exciting time to join.

It was strange being back in Newport. IPO's offices are right next door to ONS (Office for National Statistics) and share some of the same facilities, like the canteen. I was getting flashbacks from my years working at ONS. Hopefully I'll bump into a few old faces.

For the rest of the week I worked from home, meeting some of the designers I'll be working with, as well as getting group intros with some of the product and delivery people we'll be working with.

A few weeks before the discovery kicks off

There are a few weeks to go before the new discovery phase of work kicks off. So we've got some time to learn about what happened in the last discovery, alpha and beta phases.

There are a few different workstreams that make up the new phase, so we are finding out about which bit we'll be assigned to. Some are in a continuous improvement phase, whilst others need more transformational work.

As is often the case, it sounds like part of the balance will be getting to grips with the products and services we've been assigned to, whilst also staying linked up across the programme to ensure the service as a whole feels cohesive to end users.

It feels like the organisation has done a lot of hard work already, restructuring teams around services.

I'm looking forward to learning more next week!

Running update

I ran 15K this morning, my longest run so far. It's roughly were I want to be in my training to run in the Cardiff Half in a month's time.

Please sponsor me, I'm running to raise money for Sands who support people affected by the death of a baby.

Funemployment part 1

2025-08-23T00:00:00Z

A weeknote starting 18 August 2025.

I'm half way through my 2 weeks of funemployment, waiting for my next contract to start at Intellectual Property Office (IPO).

Apart from responding to a few onboarding emails, I've been trying to switch off from work and have some family time.

Standing out through writing

I was going to write about how I found my new contract, but I don't really have the energy for it. I also think it's come down to a lot of luck and privilege.

One thing that is in my control is having a decent "personal brand" (hate that phrase). Or, as Pavel Samsonov put it recently: Standing out through writing.

For lots of reasons I think writing in the open is the best thing someone can do to get ahead in this industry.

Becoming the dad taxi

The weather has been nice, so I've been aiming to reach laundry zero, but somehow the baskets keep filling up. Probably something to do with having teenage kids. I've also been driving the teenagers around. I appear to be entering the "dad taxi" phase of life. Still, I'm happy that I have the opportunity to do it.

Some time to relax

To relax, I've been spending time with family and friends. I've been able to see my nieces and nephews a bit more than usual.

We've done a few a beach and park trips. Swansea has so many great beaches to choose from (around 40). This time we went to Horton which has a good balance of feeling remote but still has good facilities (car park, toilets, coffee hut, life guards).

I've been catching up with the excellent For Wales See Wales podcast. I'm still a few episodes behind. I particulary enjoyed the recent episode with Leanne Wood. The Senedd elections are set to be very interesting next year.

I'm reading Butter by Asako Yuzuki (translated by Polly Barton).

We did a craft beer tasting night from my favourite brewery (Beer Riff) at a local wine shop called ND Johns. They do really good pizzas too, would recommend. Although given the choice I would probably just go straight to Beer Riff's taproom which is also in Swansea.

Last thing for now, I'm going to see Basement Jaxx in Cardiff tomorrow. Can't wait! Also excited to see the support from Ezra Collective after watching their set at Glastonbury on iPlayer.

Finishing my first contracting role

2025-08-15T00:00:00Z

A weeknote starting 11 August 2025.

My last week

Sadly, this week was my last as an interaction designer at the Home Office (HO).

After 2 years and 5 months, this was my second longest stint in a role since I moved into public sector user-centred design (UCD), just over 10 years ago. Second only to my time at Office for National Statistics (ONS).

It feels ironic that my first contracting role ended up being one of my longest jobs. I'm very thankful for that.

Thanks to…

everyone at HO that I worked with and supported me
especially the core UCD people that I worked with!
my managers for the extensions and trusting me to work on important work
my recruitment agency
the staff that gave up hours of their time so we could do user research with them

I feel very privileged that my first contracting role was so long and fulfilling. Especially given that the UCD contractor market seems so tricky at the moment.

I feel like there are signs that the UCD contractor market is starting to pick up a bit. I'm hoping to write more about how I found my next role in another post. I found it emotionally tiring, but in the end I was lucky to have a few solid offers.

Next up, I'm moving to the Intellectual Property Office (IPO). Which funnily enough is located next door to ONS. So it feels a little bit like full circle. It's also going to be the 4th "Office" I've worked at after being at HO, ONS and the Met Office.

I'm very much excited about getting stuck into a new challenge and learning all about a new organisation and a new set of services with new teammates.

For now, I have a couple of weeks of unplanned funemployment before I start the next role. Hopefully a good opportunity to switch off from work and spend the last of the summer holidays with the kids. Although I don't have much savings, so it's going to be a financially interesting period. Note to self: get better at saving.

Running update

I ran 12K this morning. It's 7 weeks until Cardiff Half Marathon. Please sponsor me if you can.

Bookmarks

A few quick notes before I go on hols

2025-07-20T00:00:00Z

A weeknote starting 14 July 2025.

Update on 10 August 2025

I tried to publish this 3 weeks ago, just before I went on hols. Needless to say, I got something wrong in the rush to post from my phone, so I'm publishing this a bit late.

CSS snippet

I liked this css snippet that Andy Bell shared. Saving it to remember later. Recommend following Andy for great front-end dev tips.

Adds a nice bit of breathing room to stuff that's anchored via URL like example.com/#my-element

:target {
  scroll-margin-block-start: 2em;
}

The Bear season 4

I've really enjoyed watching The Bear season 4 this week. It's so beautifully shot. They even managed to make a crappy document signing website look visually interesting.

Non-Binary People’s Day

I learnt from cross-gov Slack that Non-Binary People’s Day was this week. Love that I can learn about things like this via the community.

Going on hols

I'm off on holiday for a week. ~~Trying to quickly finish this post and merge this branch before we take off~~.

Bookmarks

Remote usability testing and paddle boarding

2025-07-11T00:00:00Z

A weeknote starting 7 July 2025.

Remote usability testing the prototype

I did some prototyping in code this week. For the first time in a while.

It always gives me a satisfying feeling. It was a good break from the endless meetings of late.

We were prepping the prototype for some remote usability testing over Microsoft Teams. After a quick dry run with the user researcher, we realised that giving the participants control of the interactions through screen sharing on Teams wasn't going to work.

So, we decided that I would share my screen and ask the participants to tell me how to operate it. Not ideal, but it was still better than just sharing mock-ups on a whiteboard app and scrolling around the place.

The interactions on our service are quite unique and don't translate well to a standard prototype. But we are building on as-is controls, and we've already spent many hours usability testing it in-person, so I felt this approach was acceptable this time.

I felt like we got a clear answer to the main user research objective pretty quickly. So most of the time was spent digging deeper into the product as a whole, and we got unprompted quotes and observations that we can roll into future iterations.

Booked some travel

I also booked some work travel for early August. We have a 2 day workshop coming up, and although these kind of workshops aren't as rewarding as user research trips, I still value getting out of the 'working from home' routine every few weeks.

Paddle boarding

Me having a break on the paddle board, photo by Dylan at Four Waves Media

I went paddle boarding in the sea with Dylan, we were on the water for about an hour and half, really hoping to do more of this over the summer. We went from Limeslade bay to (nearly) Rotherslade bay.

In between the beaches, the coastline was mostly cliffs and deep water, so it felt quite rugged and remote. There was a bit of swell, so I didn't stand up. We decided next time we'd find somewhere calmer to get our standing confidence/strength back up.

There were a few others on the water. People fishing, kayaking, swimming and riding jet-skis. So it felt pretty idyllic.

Outside of work

I ran 8K, this is my longest ever run. I'm raising money for Sands – a charity that means a lot to my family.

It's hot again, I feel like Swansea mostly dodged the last heat wave, but this one has properly hit us. It's about 28 degrees right now.

I've been feeling a bit unwell this week, not sure if I'm ill or exhausted. Not quite ill enough yet to take a day off work, but enough to make me grumpy. Will try and rest this weekend and see how I feel.

I have 1 more week in work before I go to Greece for week's holiday! 🇬🇷

Bookmarks

What happens in Mural, stays in Mural by Ralph Hawkins

Discovery report feedback, stand-ups and Jukesie's talk

2025-07-04T00:00:00Z

Discovery report

After a bit of a delay last week, our discovery report is out and being reviewing by stakeholders. We've had less feedback than I was expecting (I think this is a good thing, because nothing in the report should be a surprise). We've tried to quickly address some initial comments by updating the design and reissuing the report. Hopefully we are showing that we can respond quickly.

Next step is to do some walkthroughs, we're not sure yet if these will be recorded and shared, or done during a call. We were hoping to do that this week, but things have slipped. Our final deadline is a week today, otherwise there won't be time to prep for the next PI, and we risk losing out to other work that is ready to be picked up by the tech teams.

Honestly, it feels unlikely that we'll get sign-off from all the right people at this point. But maybe the tech teams will take on the risk themselves, and restart the build work anyway. After all, the design has been through multiple user research rounds, and it's quite well annotated. Although I do need to spend some time adding some notes, especially around technical accessibility considerations.

Any further changes feel like tinkering around the edges compared to the impact of the service changes as a whole. So, I'm starting to wonder if there is nervousness about going ahead at all. At least with some stakeholders.

This is a strange position for a design team to be in, at least not one I've had much experience of. I certainly feel a bit powerless to influence the decisions that are needed.

Too many stand-ups?

In other news, I've been trying to get a little closer to the tech teams (again). I want to start joining their stand-ups every day, but on a busy day I have 5 stand-ups to join and many of them clash. Looking at this objectively, it's probably another sign that I'm split across too many things.

Still, I've enjoyed the time chatting with software developers, I enjoy the push and pull between perfect interaction design and what's possible technically. Software developers are really great system thinkers, so they can give valuable pointers on ways to improve designs.

Jukesie's working in the open talk

I was really happy to have got a mention in one of Jukesie's slides at Camp Digital: The Power, Peril and Privilege of Working in the Open.

I haven't seen the talk, but seeing the responses online to all the talks made me very jealous for not attending the conference.

I've seen Jukesie speak a few times, and I think his talk about his time at ONS (Office for National Statistics) in 2014(?) was a big reason for me ending up working in the public sector. So, thanks Matt!

It's also made me reflect on how my blogging is going. It's half way through the year, and including this post, I've published 22 blog posts. I think that's pretty good going.

Here's to working in the open.

Bookmarks

Finalising the discovery report, more running and my birthday

2025-06-27T00:00:00Z

Finishing our discovery report

We've finally delivered our discovery report to wrap-up a big phase of work this week. In contains the results of 4 rounds of user research, and includes our recommended direction for the service.

In all honesty, it's been painful getting to this point. The design itself has hardly changed in weeks, since finishing the user research rounds. And it feels like we've been going round in circles trying to figure out how to get agreement from all the stakeholders.

I know that often, this kind of stakeholder management is the work. But this one almost finished me off. Hopefully when we look back, this will feel like a little blip.

(I'm trying to remind myself that this current version of the team has only been in place for about 4 months. And in that time we've been working on other things too.)

I imagine there will be plenty of "robust challenges" as they say. But I'm going to celebrate the win anyway. I think this marks a turning point in the team. Our new UCD lead has helped us get things across the line, and is setting the team up for much smoother ways of working in future.

We still have almost a month to refine and document the designs in order to ensure the devs are unblocked as they go into another program increment (PI).

It's clear we've been lacking leadership for a long time. I would normally expect a self-organising multi-disciplinary team to be able to do this for themselves. But we just haven't managed it for various reasons.

Our team is now pulling in the same direction, and this is leading to UCD having a stronger, more equal voice in the conversations with other groups.

Working more closely with technical teams

The next phase of work should offer up lots more opportunities to work more closely with developers and other technical roles to deliver something tangible.

I think this is the part of interaction design that I'm more comfortable in, but I will still have work to ensure I'm included in the right sprint meetings etc.

Birthday

It's also my birthday this week, so it's double celebrations. Nothing major planned as we have a holiday in Corfu on the horizon, so I'll be happy with a few beers and some nice food with the family.

Running a bit more

I've been keeping up my with running, after enrolling in Cardiff Half Marathon. My longest run ever is 7.5K, so I've got a way to go, but pleased with progress.

I'm running most days which is a huge change to my usual thing of just walking the dog for 20 mins. I'm noticing that no matter how bad I feel after a day's work, a run will lift my mood.

I'm fighting the middle-aged white man urge to join a running group. But, there's a cool looking local one that does trail running around the Gower coast so I might give that a go in future.

Also conscious that one big thing I like about running is time by myself, listening to music. My running playlist started off with lots of drum and bass, but I'm starting to prefer more ambient electronic music. Think it's more my speed, and better at getting into the right head space for longer runs.

Bookmarks

Slow progress in work, running again and lots of gigs

2025-06-14T00:00:00Z

Slow progress

I've been feeling frustrated in work again this week at the glacial speed of everything.

As mentioned last week, I've been reassigned to new a thing for 50% of my time. But of course it's impossible to completely switch off involvement, so I'm sort of juggling 3 things now.

I think part of the problem in the department is that everyone is across multiple things, so everything moves very slowly. There is also a lot of siloed working.

I think I've seen a presentation by Kate Tarling before, about organising teams around a service, rather than departmental boundaries. It feels like we are a very long way from that, and I feel a bit powerless to influence it at the moment.

Good news though, we have a UCD (user-centered design) lead starting with us. They are a principal user researcher and part of their role will be helping the 2 or 3 UCD teams in the department to work more efficiently, and having a stronger voice in prioritisation conversations and decisions.

Running again

I've starting running again, in preparation for doing Cardiff Half Marathon in October. I'm running in memory of my nephew Emrys and my brother's family and to raise money for Sands. Please donate if you can.

I'm not really a runner, although I did enjoy doing couch to 5K a couple of years ago. So I've restarted that to try and get my fitness back up. I've run about 4K every day this week, and it's been a huge boost to my mental health. It's really helped me to decompress after work.

I've dragged the dog along for a few runs too. She pulls me along for the first half, then I half to pull her along for the second half. 😅

Lots of gigs

Last Saturday, I had a great day running around different venues in Swansea to catch 6 bands!

We saw Mari Mathias, Los Blancos, Adwaith and Gruff Rhys at Gŵyl Tawe. Then Positive Reaction and Asidhara at a breast cancer fundraising gig at The Bunkhouse.

The genres ranged from traditional Welsh folk music to hardcore punk. And we finished the day off dancing to R&B until the wee hours. It was quite a day.

Bookmarks

A user manual for me, version 4

2025-06-04T00:00:00Z

This is version 4 of my user manual. View previous versions. If you're unfamilier with the concept, check out this blog post on user manuals by Cassie Robinson.

Conditions I like to work in

Remote work helps me to drop my kids off at school at a sensible time, it also helps me to recharge between meetings
More about why I love remote work
I like to work in open, inclusive, multi-disciplinary teams
I prefer structured workshops over meetings with no agenda

The times/hours I like to work

I drop my kids off at school at 8:45am, so I'm usually back and ready to start work by 9am(ish)
I usually work 9am to 5pm, Monday to Friday
Some days I do school pick-up, so I can be unavailable around 3pm
I tend to have more energy in the mornings

The best ways to communicate with me

I’m happy to use a mix of communication methods (face-to-face, email, Slack)
I like to use asynchronous tools (like Slack) so that I have a chance to review and feedback in my on time
You’ll get the best answers from me if I’ve got time to prepare

The ways I like to receive feedback

I prefer to receive feedback in a written format
I enjoy demoing my work and presenting at show and tells
I need time to prepare for feedback sessions and time to process them afterwards

Things I need

To work with code-based design systems and prototype kits
To observe user research
Protected time to focus on complex tasks
A team where I can focus on accessibility and inclusive design

Things I struggle with

I’m an introvert, which means too many meetings can drain me
Long email threads with lots of contributors
Long days of back-to-back meetings

Things I love

Spending time with the family
Listening to music and going to gigs
Being at the beach
Drinking good coffee

Other things to know about me

I have 3 school aged kids (and a dog)
I value boring design over shiny things
I spend too much time on ~~Twitter~~ Instagram
What I'm up to now

15 user research days

2025-06-04T00:00:00Z

A weeknote starting 2 June 2025.

Observing users

I'm heading off on the train for 2 more days of observing users, the plan is for a group of us to take turns observing multiple sessions over a couple of weeks.

This should give us a really deep understanding of the user's environment, so I'm excited to see what comes out of the synthesis, even if I am slightly daunted about doing 6 hours of observations in quick succession.

Once complete, I will have done 15 days of user research (UR) or observations this year. (Not full days, just days out of the office where UR where was the main focus of my day).

I think that must be a personal record and definitely the most UR I've done since my time at ONS (Office for National Statistics).

Reassigned to new a new product

I've also been partly re-assigned to a new product. This is the 4th I've been involved with since arriving in this department, which I think points to us not having enough clarity on priorities, or enough user-centered design (UCD) people to go around.

But, I'm happy to work on new things, and feel like I'm starting to get a really well-rounded view of all the products in the department.

This current one feels more contained and more likely to be delivered this year so it will be nice to work closely with some devs for a few sprints and get something shipped. Then hopefully I will be switching back to the longer term service changes I've been working on for most of the year.

Home Office accessibility posters

I was really happy to be able to contribute a tiny housekeeping update to the English language version of the Home Office accessibility posters.

I've admired the posters for a long time. They're a great example of cross government working in the open, and ofcourse a great accessibility resource.

I helped the team to remove the dependency on font awesome icon fonts, meaning that the posters should be easier to maintain and translate in future.

In It Together festival 2025

It's been a busy time personally too. The main thing to report is that I went with a big group of friends and family to In It Together, a music festival in Port Talbot.

I'm really pleased that the festival is going from strength to strength. Nice to have some positive news about Port Talbot for a change. (Aside, they always say it wrong on the news… it's pronounced "Puh-tal-butt" 😀)

I don't think I'm really part of the festival's target audience, but I'm happy to run around between the stages and build a line-up that more to my liking.

Some the bands/acts that I really enjoyed seeing…

Panic Shack
Antony Szmierek
Becky Hill
Shy FX
The Sugarhill Gang
CVC
Gillie
Bad Manners
Dactyl Terra
The Pill

Bookmarks

A few links to design articles

2025-05-21T00:00:00Z

I don't feel like I have have time for weeknotes at the moment. My evenings and weekends are full of preparation for festivals and birthdays.

So, I'm taking a break for a few weeks. But, here are some links to interesting design articles that I've seen recently:

User research, influencing decision makers and Figma sites

2025-05-11T00:00:00Z

A weeknote starting 5 May 2025.

User research in Bristol

This week flew by, starting off with the bank holiday Monday, then we went straight into 2 days of user research in Bristol.

This is the 4th round of user research we’ve done on the service. We did 7 semi-moderated interviews, with usability testing of hi-fi prototypes, and some ad-hoc chats around early design mockups.

We also had a couple of sessions observing frontline staff working with the as-is product. As usual, we were located in an operational area for two days so we got to absorb a little bit of “normal” working life there too.

Spending time with the team was good too, it was nice to have some time to get to know them.

Influencing decision makers

I’ve been moaning a lot recently about how difficult it’s been, and how much effort it’s taking, to influence stakeholders on this service.

But a couple of posts on LinkedIn jumped out to me this week and made me realise that influencing people is the work.

“Most of the work of design is facilitating decisions, not making artifacts.” Erika Hall

"Advocating for design and research is a part of every user-centred design (UCD) practitioners role … Understand how to influence different people" Clara Greo (Teoh)

Figma sites are not accessible

Figma released their website building tool. A lot of people have been pointing out that it produces horrible, inaccessible code.

Adrian has shared a thorough write up: Do Not Publish Your Designs on the Web with Figma Sites…

Welsh service patterns, paddle boarding and prepping for user research

2025-05-02T00:00:00Z

A weeknote starting 28 April 2025.

Patterns for Welsh public services

This week I took a day off to travel to Cardiff to attend a CDPS (Centre for Digital Public Services) workshop: Co-Design Workshop on Service Patterns for Welsh Public Services. I really enjoyed the day, thanks to Liam and the team for running it and inviting me.

It was also nice to catch up with Jo, and meet a few people face-to-face for the first time (Nia, Liam, Adrián, Loubna, Louise and others).

I really liked how Liam broke down service patterns into chunks and this really helped me to zoom in/out to the right level…

services
journeys
steps
actions
components

As a user of Welsh services, it's really exciting to see this work develop.

Read more in about the service patterns work in Liam's weeknotes.

Related, I haven't been very good at prioritising things like meet-ups, conferences or training since going to contracting. I felt energised after the workshop, so I'll definitely try and attend more events like this.

Paddle boarding

I spent an evening this week paddle boarding along the river Tawe in Swansea. We went from the old Hafod Copperworks down to the marina. We stopped off at the best pub in Swansea afterwards. Need to do more of this!

The River House restaurant from the River Tawe

Prepping for user research

In work we've been prepping for user research, it's been the most productive and least frustrating week for about 2 months. Probably having something concrete to aim for has helped. But I also think that all the effort the team has been putting in to restructure ourselves is starting to pay off.

Pressure is easing up a bit

I think more and more people working on the wider service are realising that we are not ready for beta, and I also think (hope) they are not all pointing the fingers at the UCD (user centered design) team as the blocker.

I'd like to think that our robust push backs (read: constant moaning) have helped other people to realise that there are many product decisions and technical dependencies that just aren't ready yet.

The upshot is we no longer have any big dependencies on the UCD team going into the next PI (program increment).

But, I do think we need to be much more intentional about how we're going to spend the next couple of months. I want to spend some serious time planning and agreeing what to focus on when we get back from user research, I think we'll end up with a long list of the following things…

stakeholder questions
business requirements
user research objectives
assumptions
user journeys

It'll be good to reflect on how many we might consider are done, to do next or to do later.

Bookmarks

Customising checkbox question pages with the GOV.UK Prototype Kit and Nunjucks

2025-04-26T00:00:00Z

A weeknote starting 22 April 2025.

I've been doing some more prototyping this week, using the excellent GOV.UK Prototype Kit.

I needed to recreate a checkbox question page to mimic an existing product.

There were a few things that took me a second to figure out so I'm capturing them here to help me next time. This is because I was in a bit of rush and a little rusty with the kit.

I needed to:

add html to the hint text
show which options the user has selected, if they return to the question page later
show a list of selected options when the user checks their answers later

1. Add html to the hint text

I like to use the Nunjucks code whenever I can, but it can mean that customisation is different to editing plain html and sometimes the options are constrained (for good reason). But, there are lots of options available to modify the Nunjucks code.

Here's how to add custom html in place of the normal hint text.

The default code looks like this…

hint: {
    text: "Select all that apply"
  },

Use html in the hint text like this…

hint: {
    html: "Some <span>example html</span> can go here."
  },

My assumption is that I should be careful not to add too much complexity to the hint text, so it's perhaps not wise to stuff complex html in here.

2. Show which options the user has selected, if they return to the question page later

I wanted to make sure that if users navigate backwards in the form, that their answers are saved. So they can see which checkbox are selected, allowing them to review and optionally change them.

This is pretty much standard behaviour in the prototype kit, and it's documented here: Let the user change their answers.

But, in my rush, I missed that I needed to use the values option (with an s), not the value option (without an s). This makes sense as there can be more than one.

Here's an example…

{{ govukCheckboxes({
  name: "example",
  values: data["example"],

3. Show a list of selected checkbox options when the user checks their answers later

Lastly, I wanted to show the user's checkbox selection on the check answers page.

I forgot that, because a checkbox question allows users to select multiple options, then the data for the answer is stored as an array, which is a is like a collection of things, rather than a single thing.

So, if you want to control the way they display (like showing the answers in a list) I needed to use a for loop.

This is documented here: Pass data from page to page.

Here's an example…

<ul>
{% for item in data['example'] %}
  <li>{{ item }}</li>
{% endfor %}
</ul>

Conclusion

In hindsight, all of these examples are fairly simple things that the prototype kit handles out of the box. But I find that writing reusable code snippets like this can come in handy later. I have a few more like this which I might try and publish one day.

More efficient prototyping with the GOV.UK prototype kit: step by step (updated January 2024) by Vicky Teinaki

Retro note – have more retros

2025-04-18T00:00:00Z

A weeknote starting 14 April 2025.

Know your stakeholders

My post last week seemed to go to down well. But, after boldly proclaiming that I'd solved stakeholder management, I was humbled this week. After working hard to gather everyone's opinion, I left one Very Senior Stakeholder out.

Then, at a meeting where I was hoping to simply rubber stamp the designs, that Very Senior Stakeholder turned up with lots of critiques and challenges that I just wasn't ready for. Lesson learnt for next time, make sure you include the right people.

This is a running theme with the current service I'm on. The stakeholder landscape is very complex.

My first retro (on this team)

On to positives though, we had our first retro this week. It's the first we've had since about October 2024. I'll never go that long without one again, or at least without strongly recommending that we have one.

As the Atlassian page linked above says…

These meetings are essential because regularly assessing and improving processes leads to quality results and fewer obstacles.

It was massively cathartic, and I felt much more aligned with my team. I think there was some pretty strong agreement about the things we need to do to help with the problems we've been facing.

Sometimes retros can feel like a waste of time or too introspective, but I think our team is approaching a point where the problems blocking our ways of working are preventing us, and the wider service team, from meeting user needs.

Anyway, that's enough weeknotes for now. I'm off to enjoy a long weekend walking around beaches and eating chocolate.

Solidarity with trans people

A technique for getting team alignment

2025-04-13T00:00:00Z

A weeknote starting 7 April 2025.

We had a couple of bad stakeholder meetings this week. It started to feel like we were losing their trust and they definitely weren't supportive of the direction our designs were taking.

I know stakeholders desires may not always be user-centred. But, without their support and sponsorship, projects can become completely derailed. Money and effort can be wasted, leading to missed opportunities to improve services for users.

I felt the need to try a different approach, before things descended into a battle over "user-centred design (UCD) purism" versus "protecting the ways things have always been done".

Around the same time, an old teammate got in touch. They were looking for a document we'd used previously to review requirements and gather input from the whole team on a previous project.

I remember it worked well as a way to understand the problem space and gather consensus, before jumping into the designing mock-ups and prototyping phase.

Giving the whole team a chance to input on and review the plan upfront, can give design teams some breathing space later, so it's worth putting in some early effort.

So I decided to try something similar with my current team.

(Technique is a strong word, it's basically: make a list and share it around for feedback. Maybe there are more well documented versions of this approach?)

The technique

Make a list of problems to solve, scenarios to test, or user stories
Add each as a row to a table or spreadsheet
Create columns for the blockers you are having, e.g. technical constraints, service owner feedback or affected components
Talk people through each row and capture their feedback
Repeat until there is consensus

I've found that using Microsoft Word or Confluence works well for this. Probably best to avoid using design tools that can feel unfamiliar to non-UCD colleagues.

Example 1

This following format worked well because it gave us a chance to talk about the pros and cons of solving each user story. It enabled everyone to input things they considered to be risks and opportunities.

In my experience UCD people (myself included) bring too much work into scope. It comes from a good place, we want to solve as many problems for users as possible. But I think we also under estimate the effort needed to solve these problems. Bringing in input from other disciplines can help us to be more pragmatic.

The good news is, if anything is ruled out of scope, that later becomes a problem for users that we need to fix, we have some useful notes that will help us to get started quickly.

User story	UCD	Tech	Product and delivery	In scope?
[Example user story]	[UCD team feedback]	[Tech team feedback]	[Product and delivery team feedback]	Yes
[Example user story]	[UCD team feedback]	[Tech team feedback]	[Product and delivery team feedback]	No

Example 2

This following example worked well, because as a UCD team we didn't understand the as-is service enough to make changes or introduce new components or patterns.

It is also helping to capture and balance competing requests from different parts of the organisiton.

Problem	Expected user action	Affected components	Similar "as-is" problems	Notes and questions
[Example problem]	[Action 1]	[Sign-in form]	[Registration form]	[Comments and questions from stakeholders]
[Example problem]	[Action 2]	[Error message]	[Search results page]	[Comments and questions from stakeholders]

Conclusion

I think this technique works well because it can uncover hidden problems, constraints and complexities earlier. Often as UCD people, business requirements can land in our lap that seem simple to begin with. Taking some time to interrogate them as a team can often uncover multiple user needs and problems hidden inside.

I suppose it's like a mini-discovery that can be done in the middle of any project phase.

If you jump straight into design mode, and then these problems appear, it can make user-centred design processes look flawed.

Bringing others into the process can demystify the design approach, and ensure everyone feels like they have a chance to input into the direction the designs are taking.

Bookmarks

Some unrelated bookmarks that I've been saving this week.

A few positives

2025-04-05T00:00:00Z

A double weeknote starting 24 March 2025.

I didn't manage to fit weeknotes in last weekend because I was at my cousin's wedding on Saturday, so these notes cover 2 weeks.

Things are still a bit up and down

These past few week have been a bit up and down in work. We are still dealing with the fallout of splitting the team in two. In a way, it felt a little bit like onboarding into a new team, or doing an inception.

So it's probably not a good idea to expect normal work progress to happen during that phase of work, but it's still frustrating considering the momentum we had earlier in the year.

I feel a bit like I am making a nuisance of myself by bothering all the BAs (business analysts) with questions about ways of working, rather than getting my head down into core interaction design work. Think I need to strike a balance between longer term culture change, that will enable future UCD (user-centered design) work to run more smoothly, and just delivering the things I've been brought in to do.

Not sure if this is a universal thing, or just me, but I find ambiguity around ways of working much more stressful than rushing to get a prototype ready for users. I suppose it's because it's out of my control and much more difficult to influence?

More user research planned

Good news is we have our next onsite user research session booked in for early May. So that will give us something to focus on, and a chance to pull together the various strands and ideas we've been thinking about the past few weeks.

The next program increment (PI) planning day is going to happen pretty quickly after that, and there is going to be pressure on us again to show what work is ready to move into a technical build phase.

Reflecting on the positives

It feels like PI planning is coming too soon, but I'm trying to look for the positives that should enable us to be more prepared than we were back in February…

we've had more space to design some of the edge case scenarios (like error states)
we're working more closely with the tech teams and we have been invited to their stand-ups and sprint reviews
we've got access to one of the dev environments so we should be able to start doing QA (quality assurance) reviews from a UCD perspective
we've managed to highlight some of the blockers we are facing, that are outside of our direct control, and some of the delivery managers, service owners and policy people are looking into these for us
we are working more closely with more stakeholders and are having more focused conversations
we are being included in conversations about new work on the horizon, so we have the opportunity to shape the work before it lands on in our laps
we've had agreement on a few pages and flows so I've been able to start prototyping again
I've been invited to PI planning without having to ask

Contract issues

I had an unexpected day off this week. There was a slight delay in signing off my contract paperwork so I had to pause until it was sorted.

It was quite nice to be honest, and it gave me a chance to do some garden DIY and enjoy the nice weather. Thankfully it was sorted very quickly. I think I would've panicked a bit if it had lasted a few days.

Still, this is the first real contract issue I've had in 2 years, so I can't complain!

Bookmarks

Thanks to the folks on the Cymru Digidol Slack Community for suggesting some of these resources.

Losing team momentum

2025-03-23T00:00:00Z

A weeknote starting 17 March 2025.

This past week was tough and I'm still not feeling in a very weeknote-y mood, but I'm trying to get some thoughts down anyway.

After an intense few months of user research and fast prototype iterations, our team has lost momentum a bit. A few things happened at the same time leading to this disruption…

new user researcher joined
we had program increment (PI) Planning
there was a few (welcome) days of leave
different work streams are becoming less aligned (one is staying in alpha, whilst the other is moving into beta)

It gave us a chance to reflect on how things are going, and try to set ourselves up for the next few months of work.

I think I've blogged before about how our team didn't have much structure, it suited us (maybe just me?) earlier in the year as we could move quickly and do lots of discovery type research.

But, now some of our work is moving into a delivery phase, I think there I a bigger need to be more structured.

I shared my concerns (read: had a moan) with a few people about how I think we need to shape the team differently, so that the technical delivery phase can go more smoothly. The people responsible for delivering it are spread across different parts of the organisation so it's always tricky to push against those boundaries.

There was a quick response from everyone to the problems we reported, so I'm feeling very positive about how quickly the team is reshaping itself.

So, even though it's been a tough few days, I felt like the week ended on a high. The UCD team (me, our content designer and new user researcher) are working nicely together. We have some better plans and more sprint ceremonies in place.

Services Week

I managed to join one of the sessions during GOV.UK's services week (Sharing experience of user testing with people who use assistive technology, hosted by Justice Digital) which I though was excellent.

Accessibility backlog

Next week, I've been invited to a meeting about kicking-off some accessibility work. I think it'll be focused around how to address a backlog of accessibility tickets that we have. It's the kind of work that I enjoy, and have some good experience with, so I'm looking forward to getting it going.

I'm hoping we can show how, by breaking tickets down and delivering incrementally, we can improve the experience of people with access needs bit by bit.

It'll be good to focus more on the delivery side of things after a few months of doing lots of interviews and prototyping.

Delivery first, then discovery, then strategy

This LinkedIn post by Dave Baines really resonated with me. Dave talks about how he likes to focus on delivery first, before moving back up the chain to look at discovery, and lastly strategy.

I don't think this way of working is often touted as an ideal way to work, but if I think back over the various places I've worked, I think I've delivered more value to users in places that adopt this approach.

This question I shared is sort of related…

On a scale of 1 to 10, how closely should an interaction designer be working with a software development team during a beta phase?
1 = Separate teams, designs are annotated then passed into the dev teams backlog.
10 = Completely integrated teams, you go to all the same meetings, you work on things together, at the same time.

There were some really good responses on LinkedIn and BlueSky.

I might blog more about this at some point, but I agree that whilst everywhere is different, it's better to aim for a medium/high score.

Mostly about my long weekend in North Wales

2025-03-10T00:00:00Z

A weeknote starting 3 March 2025.

PI (program increment) planning

I'm heading to London today to join PI (program increment) planning tomorrow. So I'm writing these notes a bit late, from the train (again).

Last week was a bit of a break from our usual user research rounds, but we think we have a new user researcher lined up so normal service should be resuming soon.

It gave us a bit of time to prep the work that is going into PI planning. Nothing is signed off yet, but I think the tech team have a much better idea of the size and scope of the work.

I'm hoping that by attending PI planning I'll get a better sense of the different teams and stakeholders that are working across the program.

A long weekend in North Wales

I had a day off on Friday, and we travelled to North Wales for a weekend staying in Bala to celebrate a good friend's 40th. We stayed in a big house with a group of friends and their kids. There was 30 of us in total!

Bala is a small town on the edge of a huge lake called Llyn Tegid. Apparently it's Wales’ largest natural lake. We didn't have much time to spend on the lake but it looked beautiful and we could see people canoeing, wind surfing and paddle boarding.

On Saturday we went to a pub for food. We were very happy to have found somewhere to serve all 30 of us. After food we stayed there to watch the rugby. There was a great atmosphere and I enjoyed being surrounded by lots of Welsh speakers.

On Sunday we went to Zip World Llechwydd. The historic slate mines there have been converted into an underground trampoline park that was loads of fun. I think maybe the parents enjoyed it more than the kids.

Llechwydd is near Blaenau Ffestiniog a town that is surrounded by huge mountains. We were just constantly blown away by the vast scale of the landscape as we drove around the area.

Cofiwch Dryweryn

On the drive back home through Gwynedd and then Ceredigion (passing through some more beautiful scenery) we spotted some graffiti with the phrase Cofiwch Dryweryn. Welsh for Remember Tryweryn, it marks the flooding of a Welsh valley in the '60s, to create a reservoir, which destroyed the communities that lived there.

Without realising, we'd driven past the reservoir (Llyn Celyn), on our way from Bala to Llechwydd earlier that day.

Bookmarks

End of the week, sprint, month and quarter

2025-03-01T00:00:00Z

A weeknote starting 24 February 2025.

🏴󠁧󠁢󠁷󠁬󠁳󠁿 Dydd Gŵyl Dewi Hapus (Happy St David's Day)!

End of the sprint

Lot's of things coming to an end this week. It's the end of the month so I had to put some timesheets and expenses in. You can tell from my expenses alone that it's been a busy month of travelling.

It's the end of the sprint, so I've been reflecting on how the 3rd user research round went. We managed to fit in…

6 interview / usability tests
observing operational areas
a few demos of our prototype to staff that were passing by

PI (program increment) planning

It's nearly the end of the quarter, and our next PI (program increment) planning is round the corner. I wasn't involved with PI planning last time, but hoping to get more involved this time.

A PI is basically 3 months worth of work, that is planned across a whole program, so multiple teams can align on dependencies.

We are working on 2 work streams and only one is going into this PI, so we've got a chance to focus on 1 work stream for a sprint or 2 and make sure the tech teams have what they need. I'm also hoping to start working more closely with the tech team, rather than just chucking designs over the fence.

I haven't been officially invited to PI planning yet, and I get the sense people are a bit surprised I would even want to go. I'm hoping that what I've learnt from attending previous PI planning days will help me (and some others) get value from me being there, at least for some of it, if not the whole 2 days.

Eryri and Gower trips

Thankfully, I do have some fun things and time off planned this month.

We have a weekend planned in Bala in Eryri National Park with a big group of friends, including a trip to Zip World Llechwedd.
I'm going to try the beach saunas at Oxwich Bay and have some food at Beach House.
I'm planning a Gower hike with some friends. We're hoping to walk over Rhosili Down.
A couple of gigs around Swansea (may have to skip one because there is too much going on).
And, last but not least, my cousin is getting married. Looking forward to catching up with the whole family there.

Bit of weekend working

2025-02-24T00:00:00Z

A weeknote starting 18 February 2025.

These weeknotes are a little late. I was catching up on work over the weekend, so couldn't really justify blogging. But, now I've got a few spare hours on the train, so plenty of time to reflect on last week.

I'm heading off to our 3rd user research trip. Another 2 two days spent at an operational area, observing users and doing usability tests.

Last time, for round 2, I was updating the prototype until the night before. So this time, to avoid the panic, I decided to work a little over the weekend. Definitely better for my stress levels, but not ideal.

To be fair, nobody was forcing me to do work on the weekend, and I could've decided to reduce the scope of the iteration. So this was partly my own fault, but this research trip might be the last for a while, and I wanted to make the most of the opportunity.

Writing up and analysing user research notes

Last Monday I was still writing up and analysing my notes from round 2. For piece of mind, I wanted to do a thorough job, and make a list of my own key findings before going into group analysis.

On Tuesday the UCD (user-centred design) team got together and did some quick analysis and grouping of the findings, which lead to a list of things we wanted to change, and a list of things we'd leave until after round 3.

I felt pretty positive that we'd created an iteration backlog so early on in the week. But my optimism wouldn't last!

Stakeholder show and tells

We had a couple of show and tells throughout the week. One with a smaller team of key people, then later on in the week we did a more open one. We've had lots of positive engagement from stakeholders, but more and more keep turning up every sprint so it's starting to feel tricky to ensure everyone has a chance to input.

Our prototype includes 2 separate work streams, so there has been talk of splitting our show and tells in two, to ensure time to focus on each bit of work.

I think a quick sprint break is needed soon in order for us regroup and ensure we don't miss anything.

Updating the design mock-ups

In order to get shared visibility of the design changes, and iterate quickly, we have a mock-up of the prototype that the whole UCD team can access and edit. I worked closely with the content designer to implement the changes we'd agreed earlier in the week.

Despite moving quickly earlier in the week, the mock-up wasn't finished until Friday.

Planning research objectives and questions

Because the design mock-up wasn't ready, we had to plan our user research questions by going through the iteration backlog.

This meant we were looking at sticky notes of ideas, rather than finished screens. But I think it worked out okay. I quite like that the whole UCD team (content designer, user researcher and interaction designer – that's me) are working hard to be very agile, as a way to cope with the fast pace of this project.

Personally I'm very happy that we are iterating between each round, and I'd rather make a change that tests poorly, than avoid making any changes at all.

Although I also worry that I'm letting them down, by consistently being late to deliver the finished prototype.

Finishing the prototype on the weekend

All this is what lead to me working on the weekend. I wanted to start Monday (today) with a finished prototype. This meant translating the design mock-ups into code. Luckily the prototype was already setup from previous rounds of user research, so I was really just re-assembling it and making sure the screens still flowed together

The code is nasty behind the scenes, but I keep reminding myself that we're in alpha and it should be throwaway quality, not perfect. Still, I think that with a bit more space and time to think, I could implement some things to make the prototype more scalable, allowing me to add more data, pages and scenarios in a more dynamic way.

Sharing a video of the prototype

All this pain meant Monday (today) was plain sailing and I could focus on meetings and chats in work, rather than desperately trying to fit in time to finish the prototype.

It left me more time to test the prototype, both with a mouse and a keyboard. And I even had time to record a video of the prototype journeys to share with the team, to help with their last minute preparations.

I'd like to record these videos every sprint in future.

Paper prototyping

One more thing to mention, as I've blogged in previous weeknotes, I'm really enjoying prototyping the physical parts of the users' journey for this project.

For this iteration, I've mocked-up some lo-fi paper artefacts to help users get into the mindset of the task. They don't contain much in the way of realistic content, so I'm hoping they enhance the scenario, without users getting distracted by specific details that could become out of date. Let's see.

Bookmarks

Our second round of user research

2025-02-14T00:00:00Z

A double weeknote starting 3 February 2025.

These past couple of weeks have been a whirlwind. After our first round of user research 2 weeks ago (which really took up most of the week) we found out that our user researcher was sadly leaving.

This put a little extra pressure on an already busy week. We needed to analyse findings, playback the results, visit London to meet some stakeholders and learn more about the as-is products, and iterate the prototype ready for our next round of user research. Thanks to our great stand-in user researcher for helping us avoid postponing any of our plans. Our content designer also did some great work reviewing content with some policy folks.

I feel like the project is going well but I’m looking forward to some quieter times.

User research trip number 2

This week we had our second round of user research. Which meant another couple of days away from home, observing users in their environment, and then doing some usability testing with 5 more participants (that's 11 participants so far).

I was so distracted by meetings all week, I was still updating the prototype up until the night before the test. Obviously not ideal, I'll be more organised next time.

It’s been a lot of work, but I’ve been getting a buzz from the fast pace. I think working in this way is only really possible when you’re working at a mid or senior level. If I had more responsibility like line management or multiple products to look after I wouldn’t be able to pour so much energy in. So I’m thankful that my current contract allows it. And that my managers and team give me the space to work in this way.

Rough analysis of the user research

I finished off the week by going over my notes from the usability tests, to pull out a list of…

Scenarios – New, untested scenarios that we could consider adding to the prototype next time. I think some will need to be captured for later, to form a list of lower risk backlog items for the beta.
Recommendations – A short list of important things to fix.
Ideas – A long list of smaller experiments we could try, and see if they fix smaller issues we are noticing (or sometimes feeling).
Bugs – Mistakes or gaps in the prototype that users ran into.

I'll share these back with the team next week so help us do our group analysis.

Peaking behind the curtain

I’ve also been reminded that one of the perks of being a designer is that you get to see behind the scenes of whatever industry you are working in.

It’s a privilege to learn about, and have a small effect on things that impact real people, across the country. I don’t think many people outside of public service digital world always appreciate this. It sounds so boring whenever I try and explain it to my friends at least.

Outside of work

I went to see Jake Xerxes Fussell in Cardiff. I'm listening to a lot of folk and country at the moment. I blame the Yellowstone soundtrack.

Bookmarks

Being a non-Welsh speaking Welsh person at a Welsh music gig

2025-02-09T00:00:00Z

A trip to Llandeilo to the Gwilym Bowen Rhys Trio and Cadog

This weekend I went to see the Gwilym Bowen Rhys Trio (with support from Cadog) at a cafe in Llandeilo, a town about 40 minutes from Swansea.

I’ve seen a few Welsh language gigs recently, but this was the first one I’ve been to when the staff, crowd and bands spoke exclusively in Welsh.

I know a tiny bit of Welsh, but not enough to have a conversation. I probably understood less than 1% of the lyrics (and the chats that happen between the songs).

Growing up, I was sometimes around Welsh speakers. My grandparents and some of my cousins spoke Welsh. But generally it’s quite rare for me to hear people speaking it these days. Less then 30% of people in Wales can speak Welsh and I think it's less in Swansea.

I find listening to Welsh comforting, like I’m connecting with family and roots. But I also felt a bit embarrassed. It was a humbling feeling to be in my own country and not speak its language.

But, we were made to feel very welcome and anyone who chatted to us quickly switched to English when they could see our puzzled faces.

It reminded me that it’s a privilege to speak English and to be able to go anywhere and be understood.

You don’t need to understand the language being sung to enjoy music of course. It also helps that the band are amazing, the trio were made up of a singer on guitar, banjo and harmonica, a violinist and a harpist. They played some beautifully raw folk songs, that I think were a mix of traditional folk songs and new stuff they'd written.

Even though I’m not a Welsh speaker, I’m a proud Welsh person and it made think about what it means to be Welsh. And how Wales’s culture, identity and language are all connected. This is probably spurred on by listening to the For Wales, See Wales podcast recently.

I think it’s fair to say that a lot of non-Welsh speaking Welsh people look down on Welsh culture. It’s seen as twee and old fashioned. Or maybe too closely tied to feelings of exclusivity and nationalism. And I think this extends to a lot of people’s feeling about the Welsh Government.

But I’m hopeful things can improve. It feels like there is some momentum behind Welsh music at the moment, with bands like Adwaith getting picked up by the mainstream UK press. And I’m sure that music can be a gateway into Welsh language and culture for lots of people.

And finally, as someone who designs services that the public interact with, it made me think about what it must be like for people who live in the UK but don’t speak English as a first language. No surprise to anyone that there is a lot of improvement needed in this area.

A complicated prototype setup

2025-02-01T00:00:00Z

A weeknote starting 27 January 2025.

I've just got back from our research trip. It felt like a successful few days, we learnt lots and I think our prep work had paid off.

We did 6 sessions that were a mix of semi-structured interviews with usability testing. And we did 2 sessions of observing the as-is live product.

Being located in the users' environment for 2 days also gave us a good chance to absorb any ad-hoc things that happened.

I think the interaction of the prototype was good enough (and close enough to the as-is product) that conversations focused on how users felt about the changes that were being introduced, and how the wider service changes might impact them in their day-to-day.

For now, we only included simple journeys in the scenarios. Next time we need to introduce some more complex situations, like errors, or multiple things happening at once.

Prototyping the physical environment and role play

Our prototype included less common input devices, so we had to think about how users might interact with other types of computer peripherals, not just a standard mouse or touch screen. These were "off the shelf" things than are available to buy easily (nothing custom) but still it add an interesting new dimension to the work.

It was interesting to try and prototype the users' environment, and think about how they might interact with things in the physical space.

We learnt things that will help us iterate on the physical environment and input devices too, which means we should be able to make it more realistic next time.

Ensuring the prototype interacted with these input devices was a technical challenge too. I had to use more JavaScript than I’ve ever used before to make this happen.

We also needed to trigger things without the user noticing, to make them feel like it was happening automatically.

I should’ve spent more time making sure it behaved exactly the same on our testing laptop (a windows PC) as it did on my MacBook. Lesson learned for next time. I think the biggest interaction challenges will be around how users interact with the physical environment, so it's important we get that right.

Any kind of usability testing requires a bit of role play, but by including elements of the users’ physical environment in the test, it felt more like we were asking them to perform. I sensed some resistance to this, but we may need to gently encourage more role play next time.

That probably sounds like a lot was going on, but I'm relatively sure that, to the users, it felt mostly seamless. So overall I'm pretty happy with how it went.

Our next user research is happening in a couple of weeks, so we have a few days to create a new version.

For Wales, See Wales podcast

I've started listening to the For Wales, See Wales podcast. I think I heard about this via Nia Campbell or Ann Kempster.

I’m really enjoying it as a way to get more connected with Welsh politics. And honestly I’m learning about important things that I otherwise would’ve missed, like upcoming Welsh Government elections, the Welsh budget and the Crown Estate.

I've also realised that I've missed off Nia Campbell from my blogroll. Fixed now!

Bookmarks

Getting ready for usability testing the prototype

2025-01-26T00:00:00Z

A weeknote starting 20 January 2025.

In work, it felt like the team was really working well together by the end of this week. A lot of stuff has happened recently (onboarding at different times, people leaving and joining, holidays, Christmas) so we've struggled to really get a good rhythm going, until now.

We have 3 user research trips on the horizon, which will include visiting 3 to 5 different locations around the UK. The first is next week, and I'm looking forward to getting things in front of users for the first time.

We did a prototype show and tell to some stakeholders and I feel it went well. I was prepping myself for difficult questions, but generally it seemed people were excited to see some abstract requirements brought to life. I think people are starting to take notice of what we are doing, and we are getting our name out there with more teams.

It reminded me that often, creating a prototype and trying to take it out for usability testing, can also spark the wider team into thinking more about things like policy, comms, training, reference data… or at least how all these things will need to fit together.

I get the impression that maybe we are pushing to show things to users before the wider program is really ready, but I think it's better to face some of those issues now, rather wait until later when it'll be harder and the stakes will be higher. Hopefully this way, we can iterate on the comms, training etc as we go.

Met Office app accessibility audit

Elsewhere, I was really pleased to read this blog post: Accessibility audit of the Met Office app: outcomes and learnings by Andrew Hick, Eu-Hyung Han and Sophie Yeomans-Smith,.

I wasn't involved in this work, but I did previously work on the Met Office app with Sophie and the team from Calvium, whilst I was at Made Tech. It was a great team, that really took accessibility seriously. Hats off to everyone involved for delivering such a positive outcome. I'm sure it must have been stressful at times.

Vicky Teinaki

2025-01-18T00:00:00Z

I was shocked and saddened to hear the news last Sunday that Vicky Teinaki had passed away. I don't think I'd ever met Vicky in real life, but I'd followed her online for many years, and thought of her as a web friend.

I first saw Vicky speak at a user research meet-up in DVLA in 2016. We chatted every now and then on Twitter and Slack, then later via Bluesky. I was a big fan of her blog posts and weeknotes. She was one of the best at writing about interaction design and I learnt a lot from her.

I think she really embodied the spirit of public service design and working in the open. I'll miss her presence in this community, but I'm sure that her knowledge, experience and achievements will continue to be helpful and influential for many, many years.

My thoughts are with her family, friends and team-mates.

A few others have written great tributes to Vicky here:

Resolutions and beach walks

2025-01-12T00:00:00Z

A weeknote starting 6 January 2025.

My only work related resolution this year is to keep blogging and weeknoting. I like the combination of self reflection and keeping up with the community. I get to share my news, and learn from/connect with others.

It's the right balance of energy-versus-reward for me. And I need to save my extra time and energy time for user research trips (which have been quite demanding over the past few months).

I don't have any grand plans to change anything about work this year. Usually at this time of year, I'm planning my next move. This time, I'm looking for stability. Contracting is still working out well, and I feel lucky to have had a continuous contract throughout 2024, doing very interesting work.

Beach walks to blow away the cobwebs

Looking down to Hunts Bay from near Eastcliff Road.

I've been back in work this week after 2 weeks off. It was nice to have a few days off after new years to decompress before going back to work. I went on a couple of nice beach walks before the wintery weather hit, including one to Hunts Bay on the South Gower coast. It's only 20 minutes drive from my house, but it felt very remote.

I'm half way through the challenge I set myself to visit every beach in Swansea and Gower. I also found one I didn't know about (Heatherslade Bay). So the new total is up to 40.

User research plan

Just before Christmas, our user researcher proposed an exciting research plan that we really want to kick off soon. Although, with the busy winter period, I'm not expecting any trips will get organised until February now because recruitment is proving difficult.

To be honest, I'm really looking forward to jumping on a train and getting to speak to some people. It's been 2 months since my last research outing.

We also have a new content designer starting, so I'm looking forward to getting to working with them. The extra time gives them a chance to have an impact on the prototype too.

Personal stuff

On a personal note, our family had some tragic news in 2024 so I'm really just hoping for a year that allows us to regroup and recover.

It's also my wife's 40th birthday so we have a few plans to celebrate with friends and family. Including a trip to Greece in the summer (hopefully).

Bookmarks

Quick prototyping ready for a busy new year

2024-12-20T00:00:00Z

Another double weeknote, starting 9 December 2024.

My energy for blogging about work is dwindling as we get towards the end of the year.

But, I'm not being too hard on myself. Including this post, I've blogged 40 times this year, which is a recent record for me. Don't think I've blogged this much since my ONS (Office for National Statistics) days.

Focusing and quick prototyping

I've moved my focus over entirely to one team now. We have a pretty intense round of user research planned for the new year. We wanted to squeeze in some user research this year, but we just couldn't recruit anyone in time, before the Christmas break

Given the tight schedule, I think I need to completely stop showing up to the other team's stand-ups, let alone joining other meetings, as it'll just drain my energy and I won't be able to really contribute anyway.

(I think focusing for 2 or 3 months feels like a good amount of time to make progress. Then I can check-in with a few folks and see if it makes sense to move back to the other team or not.)

I've spent the last couple of weeks creating a prototype of the as-is digital service I'll be working on. Spending time recreating the pages has helped me think critically about what each page does, so it's been a useful familiarisation exercise.

It also means I'll have a head start in the new year when we start doing usability testing on some new user journeys.

We've done a few stakeholder reviews, and I think the wider team is happy with the progress we are making. Although I think the pressure will be turned up in January.

I've been trying my hardest to write quick, throwaway code, as I mentioned in my last weeknotes…

… I'm trying to resist the urge to build the prototype with high quality code. So that I can iterate quickly, and avoid getting drawn into fixing the out of scope issues.

It's been quite liberating, and I feel I've been able to move very quickly. Only slowing to focus on the specific challenges associated with our service.

I've been using the existing utility classes found in the GOV.UK design system. For example, these font override classes.

Then, when I need to, I've been creating my own. Things like border-left-grey-small. It's pretty scruffy, and not how I like to write more production ready code. But it means I don't have to waste any time thinking semantically about the components and patterns. There is obviously a time and place to work like that, but it's probably more of a beta exercise, once we're confident in design direction we are heading in.

Self organising team

We've landed in a team that doesn't really have what would say is a standard product and delivery setup. So I think we're going to have to be quite self organising.

I think there are pros and cons to working this way. But my feeling is that if we can stay disciplined in the way we work together we'll be able to move quickly.

Let's see what the new year brings.

Bookmarks

Benj-ify Wrapped 2024

2024-12-14T00:00:00Z

I wish Spotify Wrapped included live music, so here is my 2024 run down of gigs and festivals.

Stats

36 bands (at least)
15 gigs
8 gigs in Swansea
7 Welsh language bands
1 festival
1 postponed gig (Jessica Pratt)
1 time compelled to ask chatty people to be quiet

All gigs and festivals

Bombay Bicycle Club
Follygroup
Orchestral Manoeuvres In The Dark (OMD)
Thundercat
In It Together (festival) (Highlights: Artful Dodger, Adjua, Mellt, The Mysterines, Gardna, Afrocluster, Gruff Rhys and Dr Meaker)
Smashing Pumpkins and Weezer
Sweatbox, Only Fool And Corpses, Dead Noize and MWN
Classic Ibiza
Ynys, Mojo JNR, Ffredi Blino and Big Red Car
Ssssnakes and The Groundnuts & Independents
Panic Shack
Melin Melyn and Mari Mathias (Highlight ⭐)
Positive Reaction, Damek, Penny Rich and Silverburn
Vampire Weekend
Eyehategod and Goatwhore (not my cup of tea ❌☕)
Georgia Ruth

PI planning and prototyping

2024-12-07T00:00:00Z

A double weeknote starting 25 November 2024.

I didn't do a work weeknote last week, so this post covers the whole 2 week sprint.

PI (Program Increment) planning

I spent 2 days in London at the beginning of the sprint for PI planning. It's the first time I've attended PI planning, in the past I've worked on teams that have done it, but this is the first time I've been invited.

Basically it was an opportunity for all the engineers, delivery managers and architects to get together and plan the next 5 sprints of work. There are multiple teams with cross dependencies, working together on a big program of work.

Overall I thought it was a really well organised and worthwhile event.

My only criticism is that us UCD (user-centered design) folks weren't really invited to plan our work alongside all the technical work. I think basically there is a belief floating around that UCD work should be 3 months ahead of technical delivery, so in theory there should be no immediate dependencies on us.

In practice, I don't think being that far ahead is achievable or even a good idea. It separates UCD too much from delivery and contributes to the idea that UCD can act as a consultancy that dips in and out, rather than a key part of the delivery team.

I like the idea of doing "just enough" UCD work to unblock delivery. But you need someone with enough seniority who knows how much effort is actually required to plan that work in the first place.

Starting a new prototype

I also started to build a new prototype for a team I'm joining.

The service is already in live, and even though at first glance the digital parts of it appear to be following the GOV.UK design system, on closer inspection the design patterns are quite idiosyncratic.

But, I've heard it works well for the task the users are trying to achieve. I'm looking forward to doing some observations of people using it "as is" before jumping to too many conclusions.

We're being asked to add some new features that should enable a more efficient service, and things have been quite strictly scoped, so it'll be interesting to see how much general improvement we can make without upsetting things.

Ideally we can build up trust over a few sprints. Then I'm hoping we'll have an opportunity to link up some disparate bits of work, and turn it into a longer term plan to do some bigger improvements. Looking into how to measure the improvements and how they affect efficiency will be key.

For now, I'm trying to resist the urge to build the prototype with high quality code. So that I can iterate quickly, and avoid getting drawn into fixing the out of scope issues.

Removing Twitter

I've removed mention of Twitter from my homepage. I need to get round to deactivating my account too.

Bookmarks

Vampire Weekend

2024-12-02T00:00:00Z

Hamilton in Cardiff

I’ve had a jam-packed weekend away with the family. Starting off with Hamilton at the Wales Millennium Centre in Cardiff.

The show was impressive and I thought the cast was as good as the recording I’d seen on Disney plus. I think the standout scene for me is when Angelica replays the wedding scene in her head, it makes great use of the rotating stage.

The whole show is an amazing spectacle but it’s quite a slog with the long running time and detailed lyrics.

Vampire Weekend in Manchester

The next day we headed to Manchester to see Vampire Weekend at the O2 Apollo. They have been one of my favourite bands for a long time and they’ve become of a firm fave of our family too.

We all love the Father of the Bride album, so I decided that I’d take us all next time they toured.

We decided to go to Manchester because of the weekend date and more relaxed rules about taking kids.

I love Manchester, having been here a few times for work over the years. We even got the tram past my the WeWork office that Swirrl used to work in.

We were hoping to walk around the Christmas markets but it was raining so we (I) decided to go to the Northern Monk bar for some IPA and burgers. Luckily there was plenty of space so we could dry off and warm up too. From here we headed to the gig.

The band played a great selection of songs from all 5 albums (they have so many good songs) and ended with a request section where they played covers requested by the audience. This included Common People by Pulp, Last Nite by The Strokes, Lovefool by The Cardigans and HOT TO GO! by Chappell Roan (for the gen Zs).

The crowd were really up for it by this point and the atmosphere was great. But I thought it was a shame they didn’t take any requests for Mancunian bands (despite repeated calls for oasis).

I was a bit nervous about taking the kids to a proper gig to be honest, even though they have done festivals before (they are aged between 8 and 13). But they absolutely loved it, even if they were flagging by the end of the mammoth 2 plus hours set.

I think your first gig is a pretty special moment so I’m hoping we’ve made some good memories.

Never half-ass two things

2024-11-24T00:00:00Z

One alpha and one discovery

I've finished my first sprint of being split between 2 services this week. I'm already feeling like it's not the most efficient use of my time, but I'm trying to remind myself that I did make progress on both sides.

One service is in alpha, and on that side I created a prototype search page that was used in user research (that I observed remotely). And I iterated on some other pages following the previous usability testing sessions that happened earlier in the month.

On the other service, that's in discovery, I started to get my head into the initial work that's been done already. And started to do some UCD (user-centered design) discovery planning, exclusion mapping and problem statement framing.

That feels like a lot in hindsight, but I do have the feeling that it would be better to focus on the side that's in discovery for a few sprints just to get a handle on it. The other side will still have a dedicated interaction designer during this time.

I'm reminded of the Ron Swanson quote from Parks and Recreation…

"never half-ass two things, whole-ass one thing"

I've made a case for moving over to the discovery team 100%. I'm not really sure what the outcome will be yet, let's see what next week brings.

Travelling for PI planning

I've managed to avoid any travel this sprint. This was the first one since I joined the new department where I was able to do that. That probably explains why I was able to make decent progress on both services.

Next week I'm heading to London for PI (Program Increment) planning for the alpha team as they head into beta. I'm preparing myself for two pretty full on days of active listening.

I think the prototypes I've created so far will be end up being quite useful artefacts to talk around and help bring some of the service features to life. They also present a lot of unanswered questions though, so I expect I'll have to say things like "we don't know yet" quite a lot.

Bookmarks

Moving teams again

2024-11-16T00:00:00Z

A weeknote starting 11 November 2024.

I’m moving team again, well sort of

I found out last Friday that I’m moving teams again. But, I’m staying in the same department and moving with some of my existing team mates, so it’s not a huge move, but it was still a bit of a surprise.

Actually I’m going to be split 50/50 between the existing service and this new one. So I’ll need to keep an eye on how the balance goes. I think next year I’ll be moving over 100%, so we’ll see if I can make it to Christmas whilst juggling both. There is a dedicated interaction designer on the existing team so it makes sense that we are given separate things to work on.

The new service is in an interesting space and it’s kinda public facing so I’m looking forward to getting stuck into the problem.

Bluesky

Wow Bluesky really took off this week didn’t it? The US election results tipped a lot of people over the edge I think. I’m on a few starter packs so my follower count is ticking up nicely, it’s feeling very close to old Twitter.

And for now the people running it seem to be making good choices about the future roadmap. Sounds like they need to prioritise accessibility though.

Follow me on Bluesky: @benjystanton.co.uk

Service assessment results

We finally had our service assessment results. It wasn’t good, as feared. I was a bit annoyed whilst reading through the report, because it felt like it missed things that we had actually done.

That is probably our fault for not communicating it well enough. And I suppose that’s the risk with service assessments, on another day, with other people in the room, we might have had a slightly different outcome. I recognise though that ultimately there is a lot of room for improvement.

The positives are that I’m reflecting on how I can do a better job next time. I know my old team and department are doing that too.

Update

I feel like I should add that this is not a criticism of the assessment panel. Just a bit of frustration that it's difficult to sum up months of work into a few hours. I'm also inexperienced at service assessments. It's also partly sour grapes from me, and I'm just letting off some steam.

Inclusive design resources

I updated my list of inclusive design resources.

Bookmarks

Lots of bookmarks this week.

What makes a successful usability test?

2024-11-07T00:00:00Z

A weeknote starting 4 November 2024.

We’ve just finished up 2 days of in-person usability testing. I think it’s fair to say that we all came away feeling positive about the trip.

So, I’ve been reflecting on a few reasons why I think the sessions went well (note: it was a team effort)…

We ran the user research at the participants’ place of work
We worked hard to make the environment and device setup as real as possible (we ran the prototype with Microsoft’s Edge browser on a Windows laptop, we plugged it into a user’s display, we sat at a desk near where they would usually work and plugged in a keyboard and mouse we found in the office)
We brought along a multidisciplinary team to observe (a user researcher, content designer, interaction designer, front end developer, delivery manager)
We had multiple internal reviews of the prototype in the sprints running up to the research (we implemented ideas from a range of people including business analysts and software developers)
The content and data was as realistic as we could make it (we know we have more work to do here though)
We built on the learnings from the discovery and early alpha phases to create a version of the prototype that was evidence based
We explained to users that not everything was working just yet (this didn’t seem to negatively affect the sessions)
Note taking was a team sport (although it was lead by our excellent content designers)
We worked hard to get the whole UCD team access to the prototype, despite some frustrating barriers in our way
We discussed our findings inbetween sessions and made a running list of key findings to address
We invited remote observers

Having said all that, we have a lot of work to do now to improve the design of the prototype. And we need to balance this with adding a longer and more realistic task flow to test with participants next time.

Bookmarks

Travelling for user research and design workshops

2024-11-03T00:00:00Z

A weeknote starting 28 October 2024.

Last week my focus was on getting our prototype ready for some face-to-face usability testing happening this week. We're traveling to an office that our users work in, so they can try out the prototype.

Although traveling can be tiring, I see it as one of the perks of the job. For my day-to-day work, I'm more productive working from home. But, I also really value chances to meet with users and teammates. I also enjoy visiting different parts of the UK.

I think there is something grounding about seeing different parts of the country, and getting a glimpse of peoples' lives. Especially when we are building services that impact the public. Hopefully that doesn't sound too trite.

My new team meets in person more regularly than other teams I've been on recently. It's reminding me of my time working for Office for National Statistics where I spent a lot of time travelling the length and breadth of the UK for user research.

So far, it's looking like 2 or 3 days away from home every sprint is the norm. Which is probably a little too much for me to sustain for a long time.

My last team only met up once every 3 months though, and that didn't feel like it was enough. So the sweet spot for me is somewhere in between, perhaps one trip every month?

Service blueprint workshop

A couple of weeks ago our service designer organised an event storming workshop. They invited a range of people from the different disciplines working on the wider service, including user centred design, product, delivery, business analysts and architects.

It made me realise that I don't really understand what the different types of architects do. So I should find some time to read up on the Government Digital and Data Profession Capability Framework.

The workshop was great, and the outcome will be a better and more accurate service blueprint.

Travel expenses as a contractor

I'm sure travel expense rules change from role to role. At the moment, I'm able to get train travel and bed and breakfast covered. Thankfully, I don't have access to the internal travel booking system, so I use the trainline and hotel websites to book things direct. The only downside is that I need to pay upfront myself, then claim things back.

Bookmarks

And lastly, a shout out to Bobby King, a designer who has been helping me recently by sharing some great prototype resources.

Front-end dev standards

2024-10-25T00:00:00Z

A weeknote starting 21 October 2024.

Like always, there is pressure on us to hand work over to the devs when we don't quite feel ready. (Or perhaps it's just me that doesn't feel ready?).

I've never really liked handover steps, they don't feel very agile. But, if we don't formally document some kind of acceptance criteria for each bit of work, then experience tells me that front-end development standards won't be met.

Expensive (to fix later) problems will be baked into the whole architecture of the service.

So, in effort to avoid lengthy handover documents, I'm keen to get some agreement on our "definition of done". Then I can hopefully return my focus to the prototyping and user research side of things.

Some front-end standards that I think we should be meeting

Meet accessibility standards
Use existing design systems
Follow responsive web design
Follow progressive enhancement
Be testable by the UCD team
Consider different interface states

I've gone into a bit more detail below…

Meet accessibility standards

Meet level AA of the Web Content Accessibility Guidelines 2.2 (WCAG 2.2)
Make sure the service works with the most common assistive technologies
Get an accessibility specialist or QAT (Quality Assurance Tester) to audit the service as we go

Legally, public sector websites and apps must meet accessibility standards. And all suppliers to government have a legal duty to make their technology and services accessible to all, especially people with disabilities.

Make things accessible and inclusive – GOV.UK

Use existing design systems

Use GOV.UK Design System
Use GOV.UK Frontend

Follow progressive enhancement

All government services must follow progressive enhancement, even if part of the service or a parent service needs JavaScript

Building a robust frontend using progressive enhancement – GOV.UK

Follow responsive web design

Building your service in this way means users get the same content and functionality, regardless of how they access your service. And it will help you to meet government accessibility requirements.

Making sure your service works well on mobile – GOV.UK

Be testable by the UCD team

The dev environment should be available for the UCD team to check in a browser before something is considered done. They should be able to inspect the code on their own devices.

Devs should be prepared to fix small issues or create tickets that can be added to the backlog.

Consider different interface states

User interfaces can be in many different states, like error states, empty states, loading states etc.

This post by Dave Rupert lists out a lot of them: UI = f(statesⁿ)

Bookmarks

Prototype kit and nunjucks special

2024-10-19T00:00:00Z

A weeknote starting 14 October 2024.

Sprint planning

I started this week off feeling tired and grumpy, especially because sprint planning last Friday didn't go as I had hoped. Serves me right for writing my last weeknotes before the week was done.

There's pressure on the team to show they can deliver something, and even though there's been plenty of good discovery and alpha work so far it's mostly stored in confluence documentation and peoples' heads.

So, I decided it was better to try and prove that we could make some good progress with the prototype, rather than kick up too much of a fuss on my first sprint.

Prototyping the layout

Now that we finally had access to a repo to store the prototype kit, I was able to throw myself into it on Monday morning.

The sprint goal was to get all of the designs so far into the prototype kit. It was just a couple of pages, but they were both quite complex.

One of the screens displays data to a user in a layout that looks a bit like a table but isn't a table. So I decided to take inspiration from the summary list component.

I was struggling with using flexbox for a long time to try and get the desired result, but ended up using display:table in the end. This approach ensured that the columns were the same width down the page, making it easy to compare similar bits of information.

Part of me still wonders if an actual HTML table might end up being the right way to go. But considering we wanted to make quick progress, I tried not to question the design too much and just wanted to build something that looked right. The approach I took means that we can change this later without breaking everything.

Pulling json data into the prototype kit

Once the layout was sorted, I was feeling brave, so I decided to try and set up the data as as a separate json file and pull that into the design. I've done things like this using the Liquid templating language in the past, but I was struggling to understand how to do it with Nunjucks.

I decided to turn to the cross Gov Slack to ask for some help and luckily Ed, Joe and Harry were able to help out with some tips and examples of similar things they're working on. (Thanks all!)

I put the file items.json in the data folder…

[
    {
      "title":"Title 1",
      "date":"2024-10-19",
      "category":"news"
    },
    {
        "title":"Title 2",
        "date":"2024-10-19",
        "category":"news"
    },
    {
        "title":"Title 3",
        "date":"2024-10-19",
        "category":"people"
    }
]

Then added the following to the session-data-defaults.js file…

module.exports = {
  items: require('./items.json')
}

(This approach meant it was stored in session data, so I'd need to clear the prototype data every time I made a change to the json.)

I could now display the data in my pages like this…

<h1>Items ({{ data.items.length }})</h1>
<ul>
{% for item in data.items %}
<li>{{ item.title }} {{ item.date }}</li>
{% endfor %}
</ul>

Filtering the data

Next, I wanted to filter the data down to just a certain category before displaying it to the user, but making that work realistically alongside things like pagination was proving quite tricky.

I went back to Slack and got help again from Ed and Joe (thanks again!). The solution included using the selectfromarray filter which is part of the x-gov filter plugin which I'd heard about, but not used.

I needed to filter the data first, by creating a new array like this…

{% set filteredData = data.items | selectFromArray("category", "news") %}

Then I could use that new array of the data like this…

<h1>Items ({{ filteredData.length }})</h1>
<ul>
{% for item in filteredData %}
<li>{{ item.title }} {{ item.date }}</li>
{% endfor %}
</ul>

Macros

Once the data was set up, I pulled it into the interface using a macro. I initially learned about macros from Vicky's excellent prototype kit blog post.

(Every time I look at that post, I learn something new. Highly recommend it if you're using the kit.)

I must admit, I don't fully understand the difference between macros and includes yet, but it felt like the right approach based on the examples I'd seen. This blog post explains the differences between includes and macros so I need to spend a bit more time reading through it.

Was it worth it?

This is definitely the most complex prototype I've built so far and I kept asking myself: is it worth making it this complicated, is there an easier way to just "fake it"?

Overall, I think that this initial upfront effort will be worth it.

I think keeping everything separated and dynamic, means that we can…

add more rows or columns of data and the interface will adapt (or at least ignore things it doesn't understand)
decide to change the way the interface works, and we can do that without interfering with the underlying data
create newer detailed views later that pull from the same data, keeping the end-to-end journey in sync and feeling more real for the user

Basically, I think it will allow us to iterate easily on the riskiest things.

Bookmarks

Unrelated things that caught my eye this week…

Accessibility severity scale (LinkedIn post) by Karl Goldstraw
Attachment component from GOV.UK Publishing Design Guide (a good example of accessibility acceptance criteria)
Hire More Designers, OK? (YouTube video) by John Cutler
Early career framework roadmap from Department for Education

Observing users on site

2024-10-10T00:00:00Z

A weeknote starting 7 October 2024.

Posted from the train, I've missed train blogging!

2 day trip

This was my second week on the new team. I was focused on getting ready for (and then taking part in) a 2 day onsite visit to shadow and do some workshops with users.

It was a great way to learn about the existing legacy service, and the environment, needs, behaviours, frustrations etc of the people who use it.

Day one was a sort of contextual enquiry with unstructured interviews. I got to observe around 4 users in their environment. In total, as a team, I think we observed over double that. I think the main takeaway was that everyone uses the system in very different ways. And different teams have developed different workarounds over many years.

Hopefully now the existing legacy service documentation will also make more sense, now that I've seen it in action.

On day 2, we invited the users to spend time with us and talk more indepth about some of their needs. We didn't manage to recruit as many people as we'd hoped on day 2. I think we all reflected that it could have been more focused. In the afternoon, we let the users go back to work so that we could sketch and explore some of the things we'd learnt.

Meeting in real life

It was also great to spend some time with the new team. Meeting in real life is always a good way to speed up that alignment process.

Sadly we didn't manage a team meal or anything like that though. Hopefully next time.

Prototype time?

I'm itching to put what I’ve learnt into a prototype to start testing the journey. I have a new sticker on my laptop that says "build to learn".

Some of the initial designs (done earlier in the Alpha) have been very detailed. But they focus on the initial couple of screens in great detail. I'd really like to create a string of basic screens that start to carve out the end-to-end process.

The earlier work won't be wasted though. We can iterate and add that detail later.

We have sprint planning tomorrow (a bit delayed because of the trip) so hopefully I can float that idea there and get it into the next sprint.

Bookmarks

New team and some great gigs

2024-10-06T00:00:00Z

A weeknote starting 30 September 2024.

Service assessment

First off, we’ve had some good feedback about how the service assessment went. Certainly not expecting that we’ll meet everything. But it probably wasn’t quite the disaster I thought it was.

We will have to wait another week or two for the actual result though.

New team, new service

I switched to a new team / service and it’s been quite a full on week. It’s adjacent to the work I’ve been doing for the past 18 months so not a complete reset.

Going well

Interesting problem to solve
Lots of documentation about the problem; including user research notes that describes the users, pain points and needs throughly
Great team of UCD people
Regular in-person user research and team planning days in the calendar

Going less well

Wider department are unfamiliar with working with UCD people and processes (Andrew’s post about justifying UCD’s impact arrived just in time)
Pressure to move quickly and feed the devs with work
No existing prototype kit setup, and some hoops to jump through to get access to a repo
Lots of new people and news ways of working slowing down delivery
I can see a lot of potential accessibility challenges in the design, think we’ll need to get on top of those quickly even if it’s just documenting them so everyone is aware

Overall, I'm feeling positive and I think the team has been setup for success. Exciting times ahead.

Live music

Since my last weeknote I’ve seen some amazing gigs. Probably the best run of live shows I’ve been to all year. Including a few unplanned ones which is always a bonus.

Recommend checking out Melin Melyn (welsh for yellow mill) if you can. I managed to grab a "prop" from their show – a torn-up eviction notice letter from their fictitious landlord. They somehow manage to deliver a hysterically goofy concept show, with catchy pop songs, whilst also being amazingly talented singers and musicians. It's something that works much better live than it probably sounds on paper.

Bookmarks

A tough week

2024-09-28T00:00:00Z

A weeknote starting 23 September 2024.

⚠️ Content warning: funeral.

Funeral

This week was a tough one. In work I've been getting ready to move teams and we went through an internal service assessment. At home we had some builders in to start work on the kitchen. And on Wednesday we had a funeral.

I won't share much about the funeral, it feels wrong to dwell on it here, especially when others are closer to it. But I'm capturing 2 of the songs that were played at the service so that I don't forget them.

Service assessment

The service assessment was really tough, and we faced some robust questioning. It felt unfair to face some of the questions, when perhaps we weren't empowered to solve some of the underlying issues. It was also frustrating for me that we couldn't really show how far we had come as a team, or details about the constraints we were working within.

At the end I felt completely drained, but I think that was a lot to do with the other things going on.

Hopefully the assessment result can trigger some longer term changes that will empower teams to better meet the service standard.

Personally, I'm going to be more proactive in making sure my work (and the wider team's work) is considering the whole service standard.

Interaction designer weeknotes

I've been really enjoying Frankie and Owen's weeknotes. Especially the practical bits around interaction design and front-end development. It's really interesting to hear about their challenges, and how they tackle them, including specific examples of code and workflow practices. Thanks for sharing!

Bookmarks

Service assessment looming

2024-09-21T00:00:00Z

A weeknote starting 16 September 2024.

Prepping for our service assessment

Next week we're going for an internal service assessment. I'm not really looking forward to it, to be honest.

I feel like the service, and the team, has come a long way in 12 months, but I'm still not convinced we'll meet every part of the service standard. I guess that's the point, to look for gaps.

I also feel like spending a long time preparing is unavoidable. I don't think it's wasted time, but I wish the guidance didn't say this…

It can be tempting to spend a long time preparing for assessments. But try not to over-prepare.

I never feel able to talk about weeks or months of work, without spending a long time preparing. Whether it's for service assessments, interviews or any kind of presentation. I think my ability to talk about things like that only stretches a few hours back, or a few days at best (and only then if I'm focusing on one thing).

Still, I am resisting the urge to put together a big slide deck, and instead I'm digging out prototype links, Word docs, Murals and Jira tickets, that should show how we've worked along the way.

In future, I'm going to add "brush up on the service standard" to my weekly habits. I know some bits well, but I also recognise that there are gaps in my knowledge.

A few minutes each week spent thinking about these sample assessment questions for example, will help me build up and capture more notes.

And I'm hoping it will trickle through to everything else I'm working on.

Last week on the team

Next week is also the last full week before the team is split up. Some of the team have left already. I still don't really know what I'll be moving on to, but I'm happy to leave all that new onboarding stuff until October.

I've really enjoyed working with my current team. I'm made a couple of good friends too and will miss working with them.

I often think back to all the work friends I've made over the years. People I've worked with every day, for years sometimes, who I might never see again once the project is over.

I should make more of effort to keep in touch.

Bookmarks

Worrying about the future of interaction design

2024-09-14T00:00:00Z

A weeknote starting 9 September 2024.

This post from Steve Messer got me thinking about the future of interaction design again this week.

With the rise of tools like GOV.UK Forms, Figma and AI, combined with the layoffs seen in recent years, I often find myself wondering what my role is going to look like in a few years time.

(Related, check out Tim Paul's amazing AI demo if you haven't seen it yet.)

Am I just gatekeeping my own role by hoping that the barrier to entry remains high? To be clear, I think GOV.UK Forms is a great thing, and a force for good in government. But when being a 'designer that codes' is already a rare and undervalued thing (especially when looking outside gov to the private sector) I wonder what will happen if the industry shifts further.

What if teams can ship great digital products without interaction designers?

Will interaction designers all have to transition towards being service designers?

I guess part of the answer is to ship the digital parts of the product quickly and cheaply so the team can focus more on the wider service, making sure it's truly inclusive?

Thing is, I really like tinkering with HTML!

I think for me, I can see a path where I focus more on design systems or accessibility. Both of those areas interest me, and it feels like these spaces will continue to need people who like get to their hands dirty with writing code.

In the end, I think similar questions came up with rise of design systems too. Hopefully I am worrying about nothing.

Bookmarks

Contract extensions

2024-09-08T00:00:00Z

A weeknote starting 2 September 2024.

Extending my contract and moving a new team

I’m still waiting for written confirmation of my move to a new team. Apparently my contract is quite flexible, so I can be moved around my wider department to provide interaction design services wherever I’m needed.

But I still need a team with a need for an interaction designer and a budget to pay for one.

Alongside that I need my contract to be extended as it’s currently set to end in September. An extension until the end of April is what’s being applied for and the paperwork is starting to move.

So there’s a few loose ends that need to be tied up. I can’t really control this part of the job, which feels strange. But my managers and agency are always transparent and it allows me focus on doing design work.

Hopefully, I will find out more about the services I could be moved to next week.

Bookmarks

Personal stuff

Kids went back to school this week, now 2 out of 3 kids are in secondary school!
Enjoyed watching Colin from Accounts series 2 on BBC.
Had some tragic family news this week, not really for me to go into details but life is hard, hug your loved ones.

Back from hols to a team shake-up

2024-08-31T00:00:00Z

A weeknote starting 26 August 2024.

Back from hols

This was my first week back in work after 4 weeks off with the family. Luckily I had the long weekend to get over the jet lag before starting on Tuesday. I've shared a few holiday snaps on Instagram.

I did my timesheets, and I only worked 4 days this month. Honestly no idea how much I'm going to get paid. Obviously I've been saving up to cover this exact situation, but I fear September will still be a tight month. Still, I feel very lucky that I can take that much time off.

Team being redeployed

I came back to some big news that our product had lost out on its funding bid, and that my team was being reassigned to a different product from the end of September.

Most of the team are being kept together, but it looks like I'll be moving to a new one. Still not 100% sure what will happen, but I will miss the team, especially the other UCD (user-centred design) folks. It's going to be sad to move on, but I've been with my current team for 18 months, so a new challenge is also welcome at this point.

Our focus now is on documenting things (like our design histories) and making sure things are packaged up neatly. Fingers crossed the product gets more funding in April. It seems like a possibility, but I'd be very surprised if many of the current team make it back.

We still have a backlog of dev work to release before stopping. I've enjoyed working with a team that has released something new, and has been able release further iterations. Version 1.2 went out yesterday and I think we have 1 or 2 more releases to go. These will add new features and increase the amount of users that can make use of the product.

We probably made the age old mistake of hanging on too long before the first realese. I wonder what might be happening now if we'd released 6 months earlier. Would we have more funding… or would the funding have been pulled sooner?

Design system

I've also been trying to get a little more involved with our design system working group. I've made a tiny change to our documentation website.

Hopefully I'll be able to make more changes to components and patterns in future.

Bookmarks

Design links and live music

2024-06-22T00:00:00Z

A weeknote starting 17 June 2024.

I've had a busy few weeks both in and out of work so I've been struggling with the time and motivation for blogging. But I finally have a free weekend. So here goes…

Emulate Windows high contrast mode

I learnt that you can emulate Windows high contrast mode in google chrome.

Andy Bell has also written a good blog post on Piccalilli that describes the transparent borders and outlines technique. It's a useful way to make sure buttons are still visible in high contrast mode without affecting the design in other modes.

You can also emulate lots of other things using google chrome's rendering panel (like print mode, dark mode or prefers reduced motion etc.)

Prototyping emails

I learnt that you prototype emails and text messages using the GOV.UK Prototype Kit and a Notify account.

Looking forward to an opportunity to try this out.

Toggle buttons

I dug out my copy of Heydon Pickering's Inclusive Components book to help with a toggle button that I was working on.

I'm a big fan of the book and it's one I consistently refer back to.

Make bangers not anthems

I enjoyed this blog post from FF Studio. There should be more blog posts that reference The Streets.

Updating my weeknotes naming convention

I'm switching up how I name my weeknotes. Inspired a bit by Vicky Teinaki.

I'm going to try giving each post a unique and descriptive heading. Then I'm going to add "A weeknote starting 17 June 2024" to each post's excerpt / meta description.

This should make it clearer what the post is about, and also removes the incremental count… which I found was putting too much pressure on me to keep posting every week.

Live music

I've seen lots of live music recently…

In It Together Festival, highlights included: Artful Dodger, Adjua, Mellt, The Mysterines, Gardna, Prince Levy, Afrocluster, Gruff Rhys and Dr Meaker
The Smashing Pumpkins and Weezer in at Cardiff Castle
Only Fool And Corpses and MWN in Swansea

Weeknotes – series 07 episode 18 and 19

2024-05-19T00:00:00Z

User acceptance testing (UAT)

This week I'm heading out to observe user acceptance testing for the thing I've been working on for most of the past 12 months. This is a big milestone! I'm nervous but also looking forward to learn more from users.

Bookmarks

In It Together festival

Later on in the week I'll be heading to In It Together, a music festival in Port Talbot (which is very close to me). So it's going to be a short week in work.

This is the festival's 3rd year, and it's great to see the line-up getting better every year. The smaller stages have a great mix of drum and bass, reggae and Welsh alternative rock.

Looking forward to seeing Congo Natty, Dr Meaker, Los Dedos, The Mysteries, Adwaith, Melin Melyn, Gruff Rhys and N’Famady Kouyaté.

Snakes!

We have a snake who appears to have moved into our garden. We're pretty sure it's a grass snake. We keep catching it sunbathing by our tiny pond. The pond is full of tadpoles, so I guess the snake is eating them. Hopefully some survive to be frogs!

A year or two ago, I decided to stop mowing the garden, apart from a few paths, so I'd like to think I've created the perfect habitat for the snake.

Great grandad

I also learnt recently that my great grandad setup a health centre for miners in the Welsh valleys in 1946, two years before the NHS was created.

According to accounts of him online, he was a progressive doctor, atheist, noted actor and lapsed communist. He even plays himself in a short film that is available via the British Film Institute (BFI)…

I knew he was a doctor, but I had no idea about the details of what he achieved.

I love hearing stories about public service and worker solidarity that resulted from the mining industry in South Wales. So it's amazing to hear that some family members were involved in a little bit of history like that.

Sort of related… I spotted that it was the Pits and Perverts 40th anniversary recently. If you want to learn more about that, I recommend watching the film Pride.

Weeknotes – series 07 episode 17

2024-05-04T00:00:00Z

Good design habits

I've been trying to get into some good design habits recently. Every Monday I go through an ever growing checklist. It's a good hack to get my brain back into gear quickly at the start of the week.

Here's some of the things I do. Often they aren't needed every week, but it's good to check.

Create a new design history doc

Each week I capture any big decisions or changes made to the design
For each thing, I try and capture the following: what we changed, why we changed it, how we’ll measure success
I've been surprised how easy this has been to maintain, each week there are at least 2 or 3 things that are worth capturing
I try and update this throughout the week, but will check it on Friday to make sure the key things are there

New design screenshots folder

Alongside the design history doc, I create a new folder every week to store prototype screenshots
I'm often creating these screenshots to share with team members and record user flows
So the iterations are not lost, I store them in a folder each week

Create a new weeknotes doc

I like to write my weeknotes on the weekend, but I also like to jot down notes throughout the week to build on
I tend to create 3 headings and add things under them, for example: work stuff, bookmarks, personal stuff

Update my retro doc

I have a single retro document, and each sprint I add a new subheading it to it
Under that I have a heading for things that went well, and things that didn't go well
I try and populate it throughout the sprint so that when the end of sprint retro rolls around, I don't have spend time trying to remember what happened

Check if there is any user research happening this week

Make sure the prototype and supporting documents are ready
Help the user researcher prep the research objectives
Capture the research dates on a list

Make a new prototype version if needed

Archive the current version of the prototype and create new version to work on
Especially if we've just finished some user research, or some big changes are planned
Make a record of the version number and when it was merged

Review my todo list

I have a paper(!) todo list, that I often rewrite every week to clear off completed or unnecessary tasks
Reading through it regularly helps me focus on what's needed

Review the sprint board

We have a shared Kanban board for the whole Planning Interval (PI) which lasts for about 6 sprints (or 12 weeks)
It contains all of the user-centered design (UCD) and business analyst (BA) work
Checking over it every Monday helps get my head into it before we have our daily stand-up

UCD ticket refinement

We've just started doing a fortnightly UCD ticket refinement
We have a whole team refinement too, but often this is focused around the software developers' work
Me and the content designer go through each UCD ticket and make sure we know what we're doing for each one
Often they become out of date and are no longer required, so it's quite satisfying to mark these as done or withdraw them

Suggestions?

What kind of things do you like doing every week to keep the work on track? Feel free to drop me an email about it benjystanton@gmail.com or message me on LinkedIn.

Bookmarks

Side projects (A weeknote starting 22 April 2024) by Vicky Teinaki
A Motown style AI generated song that's sort of about user-centred design: Design Revolution
Reasoning why verbal reasoning tests are bad by Silvia Maggi
Content warning, lots of swearing: Swearing and automatic captions by Eric Bailey
More Indieweb Automation by Simone Silvestroni

Weeknotes – series 07 episode 16

2024-04-28T00:00:00Z

Inclusive language

Candi Williams shared a great post on LinkedIn about inclusive language. It's a great reminder to me that there is always more I can do to choose better words.

~~Dark patterns~~ Deceptive patterns

~~Whitelist~~ Allow

~~Blacklist~~ Deny

~~Sold down the river~~ Betrayed

The contenteditable attribute

I remembered that contenteditable was a thing this week. Add it to any element, e.g. the <body> and then you can select text in the browser and start typing to change the page content.

Really useful for quick prototyping in the browser. Any changes won't be saved anywhere, so as soon as you refresh, your changes are gone.

Read more about contenteditable on mdn web docs.

Bookmarks

Weeknotes – series 07 episode 15

2024-04-20T00:00:00Z

Finishing off the prototype

I had to simplify a complex page I was prototyping. There were two bits of JavaScript on the page and even though they both worked separately, when I enabled them both, they stopped working.

One bit was powering an autocomplete, and the other was powering a conditional reveal. I was going a bit off-piste from the GOV.UK design system, so I was out of my comfort zone.

I made the decision that the conditional reveal was more important to test during the user research session. So I removed the autocomplete (for now, we already know they help our users in these sorts of cases).

I felt grumpy for 24 hours, but on reflection I think it was the right approach. I probably could have fixed it if I reached out to someone for help, but it was a quick, tactical, low risk decision to keep us on track.

Overall I still feel like my prototyping skills are improving. And I definitely feel more comfortable with Nunjucks.

First 2 user research sessions

We had our first 2 user research sessions. With more due next week too. I feel like the usability of the prototype worked well, and it allowed us to uncover some unmet needs and also prove some of our working assumptions about how users currently work weren't quite right.

So far it's felt like the best round of research I've been involved with for a while. And I think the prep work that the team have done is really paying off.

Home Office design system

A while ago I suggested a small improvement to a component in the Home Office design system. This week, the change was finally merged in. I enjoyed being part of the process, and am keen to get more involved with the design system if possible.

Discovery, alpha, beta, live

I liked this post by Harry Scott-Trimble about delivery phases.

Discovery - What to do first?

Alpha - What is useful?

Beta - Is it usable?

Live - Is it scalable?

Bookmarks

Weeknotes – series 07 episode 14

2024-04-14T00:00:00Z

Planning for some user research

We've decided to do some usability testing on our most recent prototype. We had to narrow the scope to one user group (out of three) and we may only be able fit one round in. But a little bit is better than nothing, and this way, we'll be able to test our riskiest pages.

We worked together to put together a user research plan that included…

the activity (remote usability testing)
ideal number of participants (in this case, 3 to 5)
a scenario for the participants to follow
key objectives (things we wanted to test and learn more about)
design deliverables (a list of things we needed to make to prep for the research)
dates and a schedule for the work
a few bullet points we could use to convince users to take part

Making the prototype

My main focus has been making the prototype, however there have been a few distractions, so I've had to fit it and around other things.

Previous work exploring the requirements and reviewing initial design sketches with the wider team is still helping me to move relatively quickly though.

The prototype has one page that is quite tricky, with lots of moving parts. We're asking the user 3 new questions on this page. The questions are linked to each other, and will required using reference data and some JavaScript to make it all work together. The user can also add another thing to a list.

I hope the user will feel it's simple, but there's lots going on behind the scenes.

Prototype scenario setup screen

I've also decided to create a prototype setup screen. This is so we can modify the prototype before the user starts using it. It will fill the pages with relevant information. So hopefully it will feel more real to the user.

In reality this is just a basic form that lets us set the following things as variables to be reused later…

user's team
user's location (for example region, town and building)

Need to get better at routing the prototype

I'd like to get better at creating routes with the GOV.UK prototype kit. The method I use is quite basic, but I think it's perhaps limiting the scale if the prototypes that I'm making.

User research as a mini product release

It struck me this week, that prepping a prototype for user research, helps me to think more critically about the design. It's a bit like a mini-release. More things about the product have to be ready (or at least better understood) for the prototype to be ready, and for the user research to go well.

Even before we learn if the design is usable, we are taking a few little steps towards a production-ready release.

Bookmarks

Weeknotes – series 07 episode 13

2024-04-06T00:00:00Z

Reflecting on 1 year contracting

I've been contracting for just over a year now, and I'm still pleased with my decision to take the plunge.

It feels like there is less work around at the moment, so I feel lucky that I've managed to have continuous work. It looks like my first contract is set to continue for at least another 6 months.

My previous 2 (permanent) jobs only lasted a year or less each, so it feels a little ironic to get more stability from contracting. This is a welcome surprise to me.

Contracting has also given me the chance to really focus on the practice of interaction design.

Being honest with myself, I think my core interaction design skills have suffered because previous roles have pulled me lots of different directions, into things like people management or high-level strategic work. Those things are really important, but I think I went down that path too quickly.

Still, having experience in those areas helps with navigating tricky situations that I face as an interaction designer, so maybe it wasn't such a bad route to take.

About 8 months ago, I wrote down some informal goals for myself. I've been able to make progress on about 75% of the things on that list.

I haven't really been able to move around and work with a range of orgs, but as mentioned earlier, I've been pleasantly surprised by the continuous work.

I do have the head space however to engage more with the wider gov design community, which I'm really enjoying.

Nice things to do in Swansea

I added Nomad Bar & Kitchen and Motley Pie & Coffee to my non-exhaustive list of nice things to do in Swansea.

Bookmarks

Thundercat at Bristol Beacon

2024-03-31T00:00:00Z

⚠️ Content warning: alcohol use.

Finally managed to get to a gig in Bristol. Here are a few photos from the night (and following morning).

Thundercat

Thundercat at Bristol Beacon

Rubbish photo, but really good gig.

Small Bar

Drinking beers outside at Small Bar

We also went to The Christmas Steps for beers too. Recommend both bars.

Cafe Kino

Vegan breakfast at Cafe Kino

Tried to go to The Crafty Egg but it was full. So tried Cafe Kino as it was just across the road. Really nice vegan breakfast.

Weeknotes – series 07 episode 12

2024-03-29T00:00:00Z

Moving into the prototype phase

At the start of the week, I shared our refined requirements with the wider team (including software developers and quality assurance testers) and our business sponsor.

We agreed the requirements were more or less correct. We also agreed the rough order we wanted to do them in.

I was then able to pick up my rough design sketches/mock-ups from earlier and start moving them into the prototype.

Because the prototype was up to date, and the requirements were well understood, the process of creating the new prototype pages has been surprisingly quick.

This is thanks in part to how amazing the GOV.UK Prototype Kit is. Especially when used together with the GOV.UK Design System.

I shared my progress with the team on Thursday and even though we got stuck on a few points and had some circular conversations, I left feeling that what I had done so far was heading in the right direction.

I'm also using a command line tool to take regular screenshots of the prototype. This will help us to document our design histories later. This process was inspired by X-GOVUK's design history tool.

Met Office app beach forecast improvements

I noticed that the Met Office app team, that I used to work with, have released more improvements to their beach safety forecast.

It's great to see some ideas that we were talking about back then being added, including…

daily, location specific safety warnings (e.g. big waves today, watch out!)
improved wind forecast icons to help users understand the direction of the wind in relation to the shoreline (really important for safety)
Improved content about where the tide times data is collected

It reminded me how much I loved working with the Met Office app team and my teammates from Made Tech, and what a great culture of continuous improvement they have there.

The app is available on iOS and Android.

Digital inclusion

Cadi from Cwmpas gave a great presentation about digital inclusion in Wales. It was a really inspiring talk about how to design people-centred services.

I liked this slide in particular…

go to where people are

work with the people who know [users] best

co-design: from initial discovery phase to live service and beyond

build solutions that fit into people's everyday lives

Cadi ended with this comment that really resonated with me…

"People don't like complicated things"

I think this phrase needs to be made into a poster or a sticker (if it isn't already).

Here are some of the great resources that Cadi shared…

Katy Beale & Natasha Bhambhra: co-design during a crisis

Cadi's talk reminded me of Katy and Natasha's co-design talk from Service Design in Government. Worth a watch if you'd like an intro to co-design.

Bookmarks

Weeknotes – series 07 episode 11

2024-03-23T00:00:00Z

Refining business requirements

I've spent most of this sprint refining and iterating on some new business requirements that the team are being asked to work on. It's been nice to work on something new, after at least 6 months of reworking something old.

It's not glamorous work, but effort spent here will help us later on.

I've been guilty of jumping straight into the design phase before (as in: making journey maps and prototypes). So I've tried to be more disciplined this time, and not moving on until we've had a chance to invite comments from across the team. And then to capture these as acceptance criteria.

Working in this way has helped me to see the scale of the work, and break it down into a few epics.

Alongside this, I've been looking at…

past user research and designs
similar patterns across our department
getting accessibility advice about specific components
investigating the technical and data constraints

There seems very little room for manoeuvre between all the constraints and often the work feels like trying to find a way through a maze.

Still, understanding this all up front, means the design work is going to be much quicker. And we can focus on making it better for users.

I feel like we're at the right point now to start looking at the interaction and content design of the page. And that this will help us understand more about the problem.

A uses page

I've created a uses page. It's a list of all the tools (software and hardware) that I use for interaction design. Hopefully others will find it useful, or might just like to have nose around. It was inspired by Wes Bos.

X-GOVUK show and tell

Frankie hosted a show and tell to share some of the cool stuff that the cross-government community (X-GOVUK) are working on. It was part of services week.

I'm a big fan of X-GOVUK and the tools look very useful. The Nunjucks prototype filters look especially cool.

Sadly I didn't make session, but Frankie kindly shared the slides.

Design system for Wales show and tell

Perago and CDPS (Centre for Digital Public Services) hosted a mid-discovery show and tell on their design system for Wales project.

I really enjoyed the session, and it was a great example of working in the open, and also not jumping to conclusions. Even though I don't work on Welsh services I feel really excited that this piece of work is happening. Can't wait to hear more.

Twenty Twelve

I've been rewatching Twenty Twelve – a BCC sitcom about the organising team behind the 2012 olympics in London.

If anything, I think I'm enjoying it more the second time around. They really nail what it's like to work in the public sector. I feel like it hits its stride in series 2. This episode is great.

Bookmarks

Weeknotes – series 07 episode 10

2024-03-15T00:00:00Z

Space for new work and design debt

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.

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.

I’m also keen to make some progress with our design debt and accessibility statement work. This post about Design debt by Gavin Elliot arrived just in time.

Coming up to 1 year contracting

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).

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.

Mentoring

I started mentoring someone this week and found a couple of interesting resources off the back of my discussions with them…

Steal my portfolio: How I structure my portfolio preview including FREE Figma Template! By Liz Hamburger
Eleventy Excellent (An Eleventy starter) by Lene Saile

RSS feeds, blogrolls and Feedbin

I updated my blogroll this week. And I’ve simplified the content a bit, to make it easier to maintain.

Plus, I’m really enjoying subscribing to blogs and reading them in Feedbin. 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.

White default in autocorrect

A few articles about how autocorrect systems exclude people who don’t have white, English sounding names. Via Priyanca.

Frontend devaluation

These two posts about the devaluation of frontend web development really hit home for me.

I said on LinkedIn…

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.

Links and anchors

I wrote about standards for links a few weeks ago. This blog post is great too: Links and Anchors by Michael Mathews and Ian Pouncey. Might move all of this link stuff into it’s own blog post.

Bookmarks

Weeknotes – series 07 episode 09

2024-03-08T00:00:00Z

Design Swansea Cropped

I spoke at Design Swansea on Thursday, I’ve shared my talk slides and rough transcript. I put a lot of effort it to the talk, and making it available in multiple ways, so not much energy for weeknoting today.

Subscribing to RSS feeds

I’ve started using Feedbin to keep up with the blogs that I follow (again). I’ve subscribed to all the sites I have listed on my blogroll that have feeds.

You can import my subscriptions using this OPML file if you want.

Jakob Nielsen

Oof Jakob Nielson’s article about AI and accessibility has been robustly critiqued by many accessibility experts.

I’ve linked to a few posts below. And those posts link to many more.

Thanks to Dean for initially bringing it to my attention.

I wonder how much damage has already been done, and whether Jakob will retract the original post, or at least respond to the feedback?

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.

(As an aside, it feels very civilised to experience this via the medium of blog posts rather than a Twitter public shaming).

Reading (and things to read later)

3 interaction design things

2024-03-06T00:00:00Z

Get the slides

View slides on Google Slides

Hi, my name is Benjy

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.

Link to slides and transcripts

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.

3 interaction design things

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.

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.

Who I’ve worked with

Worked with Home Office Met Office, UK Health Security Agency, Environment Agency, Office for National Statistics and Driver and Vehicle Licensing Agency." />

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.

I’ve worked as a civil servant, as an external designer working via a design agency and as a freelancer.

Things that I do

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.

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…

sharing user journey maps and prototypes
doing accessibility and design reviews
documenting design assets, html and css

I’m really interested in how we can execute user research findings and business requirements to make the best thing.

That can mean spending a lot of time in meetings, talking to stakeholders and alongside software developers. Just to get something over the line.

Thing 1: share early and iterate

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.

It’s much better to involve the whole team and get their expertise as early as possible.

Poppit Sands lifeguard sign

One example I want to give was when I was working with Made Tech and Met Office on improving beach safety

This photo shows a lifeguard sign on Poppet Sands beach near Cardigan.

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.

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.

The boring designer

I really like this quote from Cap Watkins, from a blog post called the boring designer, and he says that…

The boring designer chases the right idea over their idea every time.

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.

It’s good to not be too precious over where ideas come from.

Searching for beach forecasts

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.

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.

It's just a small incremental improvement, but it's probably one I wouldn't have come up with by myself.

A prototype is worth a thousand meetings

I like this quote from IDEO as well…

If a picture is worth a thousand words, a prototype is worth a thousand meetings

Jo Carter reminded me about it recently in a blog post she wrote.

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.

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.

It can also come in useful, when you need to test or revisit the idea later.

Flow diagrams

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.

It looks enough like a website, but it stops people from getting to bogged down in discussions over the detail.

I adapted this whilst working on the Met Office mobile app. And the devs really liked it.

GOV.UK Design System Flow Diagrams for Figma

Thing 2: Make it work for everyone

Thing two is “make it work for everyone”.

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.

Accessible design is good design

I strongly believe that “accessible design is good design”.

Driving with a medical condition service

I first properly learnt about accessibility whilst I was at DVLA. I was working on a service called “driving with a medical condition”.

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.

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.

Working with disability charities and user research with people with disabilities

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.

This is a photo I took whilst visiting RNIB (Royal National Institute of Blind People) in Cardiff.

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.

This person has high contrast mode turned on and is zoomed right in using a screen magnifier.

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.

Basic accessibility checks

These are some basic accessibility checks I recommend doing on every design…

zoom to 400%
test with keyboard
turn colours off
check on phone

I also have a more detailed accessibility checklist with links to more resources.

Microsoft’s Accessibility Insights for Web

This is a screenshot of Microsoft’s Accessibility Insights for Web plug-in running on my homepage.

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.

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.

Screenshots like this can become part of a handover document for developers too, so they can see how the code should be built.

Thing 3: document everything

That takes me to my last point which is “document everything”.

Make things open, it makes things better

One great thing about the design community in UK government is that they love designing in the open.

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.

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.

(Aside: if you’re interested in stickers, check out this post by Vicky Teinaki: Metaphors we sticker by)

Department for Education’s design histories

One really good example of this is design histories.

This is a community built tool from X-GOVUK.

It’s not funded by gov, it’s just a bunch of people getting together to make free tools for the community.

This screenshot shows how Department for Education (DfE) have used this tool to create really detailed design histories for their teacher services.

I recommend taking a look if you have time.

Design history tool

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.

A design history for your GOV.UK service.

Basic design history questions

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.

Something I'm trying to do it at the moment is answer these questions (via Adam Silver) at the end of every week.

What we changed
Why we changed it
How we’ll measure success

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.

And it can become really useful for justifying decisions, helping new team members get up to speed and avoiding past mistakes.

Recap

So to recap, these are the 3 things I’ve been talking about…

Share early and iterate
Make it work for everyone
Document everything

Why?

In the end, I think that working in the open and showing that you care builds trust.

It builds trust with users, your team and your stakeholders. It can help create the right environment for good to design to happen.

Thanks

Thanks!

Weeknotes – series 07 episode 08

2024-03-02T00:00:00Z

Super quick weeknotes this week because I want extra time to prepare for my lightning talk at Design Swansea next week.

Breaking words in tables

I tooted about a problem with breaking words in tables.

Looks like it inspired Adrian Roselli to write a whole post about it. This is good because Adrian is the expert on accessible tables: Techniques to Break Words by Adrian Roselli.

I’m also glad that Sara Soueidan mentioned it on Bluesky. Otherwise I may not have spotted it.

Trip to Sheffield

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).

It was very productive and very fun. But I also wrote a post about why I prefer my day-to-day work to be done remotely.

Bilingual design

Nia Campbell 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.

So it’s really great to see that Nia has started sharing weeknotes too. In her post you can find some interesting notes around bilingual design and accessibility. With some really great tips via Martin Glancy.

Reading and listening to

Design Ops Island Discs by Luke Murphy you can also find Design Ops Island Discs on Spotify
A decade of working remotely by Lynn Fisher

Some bookmarks for later

Why I love remote work

2024-02-27T00:00:00Z

After 2 days away with the team. I’m reminded that in-person workshops are often amazing (this one included).

But… joining video calls in an open plan office full of other people on video calls is a disaster for my productivity and wellbeing.

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”.

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.

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).

What remote working means to me

I recognise that I’m very privileged. But, I need remote working. It helps me in so many ways.

I need it because I’m

an introvert
a parent of school age kids
someone who lives away from the places where most digital jobs tend to be

It helps me to

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)
help the kids with their school run and morning routine (breakfast, getting dressed, brushing teeth, packing lunchboxes)
be available to pick up my kids if they’re ill and need to come home in an emergency
be more active (school run, walking the dog, pop to shops)
do a few chores in my lunch break (like loading the dishwasher or putting clothes out to dry)
help my partner to work full time if she wants to
have more energy for life in the evening and weekends (see friends, exercise, help the kids with homework)
have more focused, uninterrupted work time (if I need it)
work for a much wider range of companies
have access to better paid jobs

Weeknotes – series 07 episode 07

2024-02-24T00:00:00Z

Almost 1500 GitHub commits

I spotted that I’ve made almost 1500 commits on GitHub for this site. The first commit was 9 years ago!

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.

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.

Now page

I’ve added a /now page to my site. It’s inspired by Derek Sivers, but it was Simone Silvestroni’s blog where I first spotted the idea.

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’.

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.

Next, I’d like to add a /uses page. As a way to document all the different software and hardware that I use as an interaction designer.

Away day in Sheffield

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.

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.

Axe-con

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.

Reading

Silvia Maggi’s blog recommended by Simone Silvestroni
Not entirely safe for work: What is Utility-First CSS? By Heydon Pickering
UI=f(org): UI is a Function of Your Organization by Jim Nielsen

Listening to

I’ve got a couple of gigs on the horizon (Folly Group and Thundercat). So I’m spending some time listening to their stuff in preparation.

Why Markdown is a great design tool

2024-02-18T00:00:00Z

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.

This post by John Gruber is a good intro to Markdown.

Markdown example

# Heading 1

## Heading 2

Paragraph with **bold** text.

- list item 1
- list item 2
- list item 3

Markdown helps me to…

take notes quickly (during meetings or user research sessions)
start designing something with a "content first" approach
focus on writing, instead of visual style
convert notes to HTML
write HTML quickly
learn HTML basics (like heading levels)
share my notes everywhere (Markdown is just plain text, so it works everywhere)
write blog posts (it’s compatible with lots of blogging tools, like Eleventy)
write formatted notes in lots of apps, like Slack, GitHub, Trello (although the different flavours of Markdown can be annoying)

It’s even compatible with this lo-fi prototyping method that Andrew Duckworth has written about (thanks to Joe Lanman for sharing that recently).

Tools for writing Markdown

My favourite is iA Writer. It’s been a part of my design toolbox for over 10 years. but any code editor or plain text writing tool will do.

Weeknotes – series 07 episode 06

2024-02-17T00:00:00Z

Designing with many dependencies and an unclear scope

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).

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.

I’ve been doing some high level journey maps to help me think about what each of our users need to do at each phase.

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.

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…

business analyst and product manager
service owner
software developers
wider interaction design team
reference data team

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.

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.

I can feel already that sharing in this way is reducing some of the stress that I’m facing.

Accessibility strategy resources

Shaun Conner shared this post: getting to an accessibility strategy. 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).

I remembered that I’d created a list of accessibility strategy resources on Twitter, so I’m resharing them here, before I lose them.

Bombay Bicycle Club

I’m looking forward to seeing Bombay Bicycle Club this weekend. It’s my first gig of the year. Little disappointed that I didn’t manage one in January in though.

Reading

Bookmarks

Some things I’m saving here to read later…

Weeknotes – series 07 episode 05

2024-02-10T00:00:00Z

Stressful week

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.

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.

But, it definitely hasn’t been all bad…

Prototype demos

I’ve been going round various external show and tells, showing our latest prototype to stakeholders across the wider organisation.

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.

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.

Links withouts `hrefs`

I was reviewing a screen this week and spotted that it contained many links without href attributes. That's the bit of the link that tells browsers which page to go to when clicked.

JavaScript was being used to add the link’s destination URL in. Apart from the progressive enhancement issues, I felt like this was going to cause accessibility problems too.

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.

Here’s what I found out about links without hrefs

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
extra code is needed to make the links work with keyboard navigation
link styling can be unpredictable on Windows High Contrast Mode
the links can act unexpectedly with some screen readers

This page by The Ally Project is also good primer on creating valid and accessible links.

Bluesky is open

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…

View my profile or join Bluesky

Bluesky is far from perfect, but I really hope we (as a community) find somewhere that rekindles the spirit of early Twitter.

Reading (and listening to)

Bookmarks

A few things that I didn’t get round to reading, but don’t want to forget about…

Weeknotes – series 07 episode 04

2024-02-03T00:00:00Z

Design Swansea 60

I went to Design Swansea on Thursday. I hadn’t realised until I’d got there, but it was their 60th event!

The talks were by photographer Nick Morrish and his previous life as an in-house photographer at British Airways. And, Lloyd Morgan the founder of video agency Rockadove.

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!

Shoreline management plans

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 shoreline management plans. Aimed at organisations who need to know about coastal flood and erosion risks.

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.

It’s great to see it finally go live. Thankful that Rob picked up the baton and kept going to get it out!

Test local prototypes from your phone

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.

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.

Run a prototype (or website generator) locally on your Mac
Address will be something like http://localhost:3000
Navigate to page you want to test http://localhost:3000/path/to/page
Find out your Mac’s IP address
It will be something like 192.000.00.000
Make sure both devices are on the same wifi network
Navigate to http://192.000.00.000:3000/path/to/page on your other device

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.

Managing design debt in Jira

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.

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.

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.

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).

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.

Target size

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.

Reading

Weeknotes – series 07 episode 03

2024-01-25T00:00:00Z

Work has been busy, and very up-and-down this week, so I’m pleased to be heading towards the weekend feeling pretty positive.

Prototype rhythm

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.

I’m working on a mixture of…

tidying things up
adding new user flows
making sure the design keeps pace with the dev environments

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.

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…

it’s always going to be ready for a demo
or a new round of research
design debt doesn’t build up
it keeps me aware of any changes that are being worked on by others on the team

Design authority

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.

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.

Design histories

Adam silver wrote a short post about design histories on LinkedIn.

Adam’s tip was to try and answer these questions to document every design iteration.

What we changed

Why we changed it

How we’ll measure success

I’m trying to get into a regular habit of doing this. I’m planing on diving into the good work that X-GOVUK and Department for Education are doing with design histories.

Design Swansea is back!

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.

Grab a free ticket to Design Swansea 60 with Nick Morrish & Lloyd Morgan.

Task list pattern event

I joined a community event to celebrate the launch of the updated task list component that’s part of the GOV.UK Design System. It was a really nice event.

You can read more about the work that happened in this blog post: Working as a community to iterate the task list pattern by Frankie Roberto.

Reading

Weeknotes – series 07 episode 02

2024-01-18T00:00:00Z

Deadline approaching

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.

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.

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.

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.

Paid off my laptop

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.

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.

I’m really happy with the investment though, and it still feels like new.

I wrote this around that time: setting up a new mac for interaction design

Flow diagrams and design resources

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.

Credit to Clare Brown, Paul Smith and Dave House for helping to make the GOVUK Design System Flow Diagrams for MURAL a reality. Stuff like this really saves me time.

Also in the GOV.UK Design System’s community section are some great videos about inspecting and testing for accessibility.

Sara Soueidan's accessible notifications chapter

I've not read this yet, but Sara Soueidan has very generously released a chapter of Practical Accessibility for free.

I'm working on accessible notifications at the moment so it's great timing for me.

Reading (and listening to)

Weeknotes – series 07 episode 01

2024-01-13T00:00:00Z

Trying weeknotes again

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.

Contracting extension

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.

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 Swirrl). So I’m still feeling like my decision to switch to contracting was the right one for me.

I’ve been at Home Office for 10 months already. Which is the same amount of time I was at Made Tech. So that feels like a good milestone.

Centre for Digital Public Services (CDPS) community of practice

I’ve joined CDPS’s Designing Digital Experiences community of practice.

It’s a community for designers to discuss…

…the practical aspects of designing digital experiences, such as user-centred design methods and processes, design skills, and software.

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.

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.

My Neighbour Totoro show

I’m taking the family to see the My Neighbour Totoro 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.

Reading

Helping to get quality code into production as an interaction designer

2023-12-06T00:00:00Z

My notes on how interaction designers can work with software developers and testers on agile delivery teams.

I shared this earlier in the week and wanted to expand on it a bit…

… 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!
— Bluesky on Dec 4, 2023 at 17:57

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.

Tidy up the prototype

I use the GOV.UK Prototype Kit 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…

it uses the design system's styles, component and patterns correctly
it makes sense to other designers in future
the code valid and accessible, and that it doesn't introduce any bad practices that developers might copy over to the build environments

Write handover notes

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…

hidden visually
only appear at certain resolutions
only appear on certain types of device
only become apparent when using a particular input method (like a keyboard)

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.

I like to include…

designs - link to prototypes or user flow diagrams
screenshots - capture the design at key breakpoints
notes - describe behaviour, decisions, accessibiltiy considerations and anything else to be aware of
assets - links to any production ready assets like SVG icons
content - make it easy for engineers to copy and paste any text content
follow on tasks - any next steps that need to be captured as tickets or tasks, or anything that is out of scope for now

Write tickets

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.

View my ticket template.

Have a handover chat

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.

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.

Design and accessibility review

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.

I like to be able to inpect the code, and interact with the design on different devices.

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.

View my notes on basic accessibility testing.

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.

Help developers to write HTML and CSS

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…

Using the correct CSS style classes from the design system
Using semantic HTML, so the code is valid and accessible, for example: nesting <input>, <label>, and <legend> correctly within a fieldset, like with the radio component on the GOV.UK Design System.

First 6 months contracting

2023-09-10T00:00:00Z

I’ve just started my 6th month as a contractor, and wanted to share some notes around the practicalities of being employed inside IR35.

Inside IR35

I’m writing this from the perspective of being inside IR35.

This means that I'm not self-employed, or running my own business. I'm employed by an umbrella company who sort my pay, (most of) my tax, my pension and my liability insurance (all for a weekly fee).

A big chunk of my daily rate disappears before it comes to me, and a lot of my tax is collected at this point via PAYE (pay as you earn). But I still need need put some money aside each month for paying my tax bill. I paid an extra fee for someone at my umbrella company to file my tax return, so that I knew exactly how much tax I owed.

Apart from that, I don't need to worry about the paperwork associated with running a business or a limited company.

Inside IR35 daily rates tend to be higher too, which helps to balance out the fact that the tax situation is less favourable.

All in all, I'm happy with the arrangement.

(By the way, I’m certainly not an expert in all of this so please get professional advice before acting on my notes.)

Contract extensions

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.

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.

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.

Holidays and annual leave

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.

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.

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.

Working days

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.

Pay day and time sheets

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.

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.

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.

Expenses

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.

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.

There are 2 routes for me to cover the costs…

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.
Pay for it myself, then claim it back.

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.

(Update: option 2 has now been recommended to me as the preferred route by my manager).

Even though it seems pretty clear to me that this is an allowable expense, my umbrella company, needed to do a one-off (?) 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.

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.

My advice it to be wary about expenses!

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.

Next time

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).

Seb

2023-07-18T00:00:00Z

⚠️ Content warning: cancer, death.

My cousin Seb died early last year from cancer. He was just a few months older than me.

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.

4 cousins

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).

I loved hanging out with them.

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.

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.

Surfing down Gower

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.

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.

I instantly wanted to grow my hair long and buy surfy clothes.

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.

Music

Seb and his brothers and sister helped turn me on to decent music too.

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.

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 were considered cool. Phew.

So much music reminds me of Seb: Sublime, Crash Test Dummies, Red Hot Chill Peppers, Reef, G Love & Special Sauce.

For my 12th birthday, my parents took us to Glastonbury festival. I have hazy memories of seeing Finley Quaye, Foo Fighters and Ben Harper.

Uni

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).

I still have the scar now.

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.

My housemates had to drag us inside, before we disturbed any neighbours.

Living together

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.

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.

"We'd just be throwing out air otherwise."

To this day, I think of this story whenever I put the plastic recycling out (e.g. at least every 2 weeks).

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.

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.

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.

Pontneddfechan waterfalls

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.

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.

Sitting outside The Angel Inn, after our walk.

My contracting goals 2023

2023-07-15T00:00:00Z

Here are some work goals I've set myself, now that I've started contracting.

The goals at a glance

Work with more varied organisations and services
Improve my processes and use the best tools
Contribute to, and be active in, the wider gov design community

Read on for a bit more detail…

Work with more varied organisations and services

UK Government
Welsh public sector
Private sector
Work on planet centred design, or products and services that are trying to address climate change

Improve my processes and use the best tools

Continue using the GOV.UK Prototype Kit
Work on design systems
Get better at Git (for example; use Terminal more, work with teams that use Git, try doing code reviews)
Continue working on accessibility and inclusion

Contribute to, and be active in, the wider gov design community

Work in the open (for example; by using the X-GOVUK Design History project)
Continue blogging about personal and work things
Stay with my union (United Tech and Allied Workers)
Attend meet-ups, training and conferences

First 3 months contracting

2023-07-01T00:00:00Z

Contract extensions

I've just finished my first 3 months contracting, and have finished on a high by getting an extension for a further 6 months.

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.

My recruitment agency 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.

Despite all that, getting the extension approved with about a week to go was a little scary. Even though I previously blogged about trusting the process, things did get a little close for comfort.

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.

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.

Day-to-day interaction design work

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.

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.

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.

I'm very much loving being back in central government, and being able to use the GOV.UK Prototype Kit. The team behind it seem to be making some great improvements at the moment.

I've also enjoying being (a little bit more) active on the cross-government Slack. If you're not aware, this recent post by Steve Messer is a great intro: How to use cross-government Slack.

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 Vicky Teinaki…

This is forty

2023-06-17T00:00:00Z

I'm turning 40 this month, so I thought it was worth marking it with a blog post

Lots has happened since I turned 30. 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.

Switching jobs a lot

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).

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.

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.

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.

Family

My family has also grown. We had another kid 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.

Contracting

My latest and maybe biggest risk has been going contracting. 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.

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.

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.

Birthday party(s)

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.

Highly recommend Tap & Tân, 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.

Here's a photo of me living my best life. Taken by my brother-in-law Tariq.

Here's to the next 10.

Inclusive design for interaction designers

2023-04-23T00:00:00Z

What can interaction designers do to make services more inclusive?

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?

(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).

Reasons for exclusion could be related to peoples' protected characteristics, digital exclusion, and many other factors.

A list of groups that might face exclusion.

In the past, Clara Greo and Sonia Turcotte have used the phrase “oppressed and systematically disadvantaged people and communities in the UK”. Which I think is a better term than excluded groups.

Things interaction designers can consider to help make services more inclusive

Physical points in the journey
Multiple digital channels
Accessible formats
Multiple languages and bilingual services
Progressive enhancement and performance
Barriers and access needs
Co-design and co-production
Content and language

Physical points in the journey

For example; signs, physical products and printed documents.

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.

Multiple digital channels

For example; PDFs, emails, social media, videos, podcasts.

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.

Accessible formats

For example; large print, easy read, British Sign Language (BSL) videos, Braille, audio.

Multiple languages and bilingual services

Designing services that are translated into multiple languages, or languages other than English, might mean the following need more work:

typography
layout
navigation
information architecture (IA)
content management systems

Progressive enhancement and performance

As the GOV.UK service manual says, progressive enhancement can "help users with device or connectivity limitations to use your service".

Create assets that are lightweight, cross-compatible and reusable on other channels.

Avoid designing journeys that require large downloads.

Barriers and access needs

Focus on excluded people and communities. Understand the barriers they face.

Co-design and co-production

Work alongside people, communities and content experts.

Lend your interaction design skills to help prototype how other types of content and channels could work before they go into production.

Content and language

The words we use in the service and in our teams matter. Be careful to use terms that don't exclude people.

For an interaction designer, this could mean something like renaming the branch you're working on from master to main.

My first few weeks contracting

2023-04-20T00:00:00Z

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.

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 blog post formats for teams website from Giles Turnbull really helped spur me on to try a post, even if I'm not going with regular weeknotes for now.

Interaction design versus service design

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.

(If you're unfamiliar with the terms, this page on GOV.UK defines the user-centred design job family pretty well.)

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?

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?

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!

Some of my open browser tabs

Setting up a new mac for interaction design

2023-03-27T00:00:00Z

Check out my uses page for an up-to-date list of hardware and software that I use for interaction design.

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: my interaction design tools.

Apps

1Password
Chrome
Figma
Firefox
GitHub Desktop
iA Writer
ImageOptim
Slack
Visual Studio Code
Xcode

Menu bar apps

Contrast – Colour Accessibility
Divvy – Window Manager

Chrome plugins

45to75
Axe Accessibility
Toggle Javascript
Validity
WAVE Evaluation Tool
Web Developer Toolbar
WhatFont

Terminal

GOV.UK Prototype Kit
Homebrew
Node.js

The stickers on my laptop, 2023 edition

2023-03-17T00:00:00Z

Time to clean the stickers off my laptop (again). Quite a good haul this time. See this laptop sticker post from 2018 too.

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.

Design – White, all caps text on black background. Part of the GOV.UK Design System Day swag.
Work Together, Super Friendly – Red and blue text, custom hand-drawn lettering, surrounded by blue stars. From SuperFriendly.
Be Inclusive – 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 RedBubble.
Weirdo – Green, pink and yellow hand-drawn text. Behind the text, a black cat peers over the top. By Gemma Correll. I added 2 blue rectangles to give the impression of frowning eyebrows.
The Gower Dough Co, Est 2020, Wood Fired Pizza – A happy, cartoon pizza carries a pizza box and wears a backpack.
User-Centred Profession, Made Tech – An orange cartoon crab on a black circle. Black text sits on a green ring around the edge.
The problem with London is it is so far from everywhere – Blue illustration of the United Kingdom on a pink background. From Ian Ames.
Our rights are not for debate – Black text on a round, shiny metallic sticker. In the middle is an upside down triangle. From Sarah Drummond's Don't Say Gay film Kickstarter.
UX – Large colourful letters spell out "UX". The U is partially covered by sticker 8. From RedBubble.
If it's not accessible, it's not acceptable – White retro font with a gradient drop shadow. From RedBubble.
And then you die – Black text on a white sticker shaped like a coffin. From Owen Friend.
Cats not TERFs – Black and white painterly effect sticker. White text on a black cat silhouette. From Frank Duffy
2022 – White text on a black square. Part of the same set as sticker 1.
User-Centred Design – A stylised red crab. White text follows the curve of the crab's body. From Made Tech.
I'm silently judging your app's usability – Black text on a white background. From RedBubble.

Lining up my first role

2023-02-27T00:00:00Z

Good news, it looks like I've lined up my first contract role.

It's a…

interaction design role
3 months
remote
central UK government
inside IR35

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.

Timelines

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.

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.

Lots of work around

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.

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.

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.

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.

Hard work

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.

I think my constant tweeting and blogging over the years has helped me to get a good reputation.

Some tips

These are some rough tips (caveat: I'm still working through these, your mileage my vary).

Get some savings (6 to 8 weeks) – I haven't got this yet but it's part of my plan
Learn the difference between inside IR35 and outside IR35
If you go inside IR35, you'll need an umbrella company to work through
Get a MacBook (probably) – sounds like some roles supply these, some don't
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
Find out if the role is remote or not, find out who pays for travel and accommodation if travel is required
keep your CV and LinkedIn profile up to date
work in the open, share what you know
network little and often – a few minutes each day makes it easier to manage

I’m going contracting

2023-02-02T00:00:00Z

Hey friends, I've decided to take the plunge and go contracting.

If you know of any interesting opportunities kicking off , please let me know!

What I'm looking for

Interaction design, UX (user experience) design or product design roles
Lead or senior level
Starting April 2023
UK public sector or tech for good
Remote – happy with occasional travel
Inside IR35 – would consider outside
Bonus points if there's a focus on accessibility or inclusive design

Very happy to chat if you have other kinds of role available.

What I can do

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.

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.

More about me.

Contact me

Check my LinkedIn page, or email me at benjystanton@gmail.com.

Happy to share an up-to-date CV.

Thanks

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!

Accessible PowerPoint presentations

2022-11-20T00:00:00Z

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.

Make your slides available

Share your slides
Before the meeting starts ideally
Or at the beginning of the presentation
So people can follow at their own pace

When speaking

Turn the camera of the person speaking on
Speak clearly (but not slowly)

Sounds and music

Avoid sounds and music where possible
Especially if it might make it difficult to hear other people speaking

Make content available in different ways

Add speaker notes
Turn on auto subtitles or captions if you can
Consider sharing alternative formats like HTML or audio

Turn on accessibility checker

On the tool bar, go to “Review” then “Check Accessibility”
Or search for “Accessibility”
Keep it running while you work
Re-open checker from link in bottom left

Graphic design

Keep the design simple
Use a legible font, like Arial
Minimum 18pt font size
Avoid low contrast text
Avoid using colour as the only means of conveying information
Avoid using text in images
Add an off-white slide background colour for people with dyslexia

Content

Aim for no more than 6 words per line
Aim for no more than 7 lines per slide
Add alt text to images (unless they are decorative)
Explain visual information when presenting
Use simple language
Check reading order
Add meaningful hyperlink text
Give every slide a unique title
Warn users about sensitive content with TW (trigger warning) or CW (content warning)

Tables

Use tables for simple data
Don’t use tables for layout
Don’t merge cells or nest tables
Make sure tables have header rows with descriptive text

Animation and transitions

Avoid using animations and transitions
Use gifs sparingly, and stop them from repeating forever

Inclusive design resources

2022-11-12T00:00:00Z

A collection of posts, articles, guides and podcasts about inclusive design.

My list of inclusive design books.

Visiting all the beaches in Swansea and Gower

2022-11-04T00:00:00Z

I’ve set myself a challenge to visit all the beaches in Swansea and Gower. There are about 40 in total. I visit some regularly, but many are new to me.

Beaches visited: 28 of 41 (68%) 🏖️
Longest continuous stretch: 10 beaches 📏
Seals spotted: 5 (at Broughton, Langland and Worm’s Head) 🦭
Favourite beach: Overton Mere ⭐️
Skip to list of beaches

Swansea Bay

Swansea Bay, near Sketty Lane

Date: 8 March 2022
Location: Swansea Bay on Open Street Map

Knab Rock

Paddle boarding around Mumbles passing Knab Rock, photo by Dylan Tucker

Date: 28 July 2022
Location: Knab Rock on Open Street Map

Mumbles Head Beach

Looking from the beach near the pier towards the islands and lighthouse. Some maps call this beach Touch Down, not sure why.

Date: 19 November 2022
Location: Mumbles Head Beach on Open Street Map

Bracelet Bay

Bracelet Bay towards Mumbles lighthouse

Date: 16 October 2022
Location: Bracelet Bay on Open Street Map

Limeslade Beach

Limeslade Beach looking south west

Date: 14 November 2022
Location: Limeslade Beach on Open Street Map

Rotherslade Bay

Rotherslade Bay looking towards Langland Bay

Date: 4 November 2022
Location: Rotherslade Bay on Open Street Map

Langland Bay

Sunrise at Langland

Date: 9 October 2022
Location: Langland Bay on Open Street Map

Caswell Bay

Low tide at Caswell, looking west

Date: 6 February 2022
Location: Caswell Bay on Open Street Map

Brandy Cove

Looking towards Brandy Cove from the coastal path that leads to Caswell

Date: 3 December 2022
Location: Brandy Cove on Open Street Map

Hunts Bay / Deep Slade

Looking down to Hunts Bay from near Eastcliff Road.

Date: 4 January 2025
Location: Hunts Bay / Deep Slade on Open Street Map

Foxhole

Looking south east, towards the sunrise behind the cliffs

Date: 3 January 2025
Location: Foxhole on Open Street Map

Heatherslade Bay

South east towards Oxwich point

Date: 11 January 2025
Location: Heatherslade on Open Street Map

Pobbles Bay

Looking west towards Three Cliffs, Tor Bay and Oxwich

Date: 11 January 2025
Location: Pobbles on Open Street Map

Oxwich Bay

Sauna at Oxwich Bay

Date: 13 March 2025
Location: Oxwich Bay on Open Street Map

Horton

Looking west towards Port Eynon

Horton is a popular sandy beach on the east side of Port Eynon. It has a small car park with with toilets and takeaway coffee in summer months.

Date: 16 August 2025
Location: Horton on Open Street Map

Port Eynon

Looking east towards Horton and Oxwich point

Date: 18 January 2025
Location: Port Eynon on Open Street Map

Salt House Mere

Looking west, up towards Port Eynon point

Date: 18 January 2025
Location: Salt House Mere on Open Street Map

Overton Mere

Looking east towards Port Eynon point

Date: 18 January 2025
Location: Overton Mere on Open Street Map

Common Cliff to Butterslade

Includes Foxhole Slade, Knave Bay and Ramsgrove. I ran along the coastal path here in October 2025. Need to go back here and take more photos.

Somwhere beteen Common Cliff to Butterslade, looking east.

Date: 25 October 2025
Location: ?

Mewslade Bay

Looking east towards Butterslade

Date: 4 January 2026
Location: Mewslade Bay on Open Street Map

Fall Bay

Looking east towards Mewslade

Date: 4 January 2026
Location: Fall Bay on Open Street Map

Worm’s Head

Rhossili point, looking out across the worm's head causeway

Not really a beach, but a spectacular tidal peninsula. Be careful of the tides because you can get stranded.

Date: 19 April 2025
Location: Worm’s Head on Open Street Map

Rhossili

South end of Rhossili Bay, with Worms Head in the distance

Date: 28 June 2023
Location: Rhossili on Open Street Map

Llangennith

Surfing near Hillend campsite, Worms Head in the distance

Date: 15 June 2022
Location: Llangennith on Open Street Map

Burry Holms

Burry Holms tidal island seen from the coastal path, looking west.

Date: 15 July 2023
Location: Burry Holms on Open Street Map

Blue Pool Bay

A natural archway at Blue Pool Bay called the Three Chimneys

Date: 10 August 2022
Location: Blue Pool Bay on Open Street Map

Little Broughton

Little Broughton at low tide

Date: 12 November 2022
Location: Little Broughton on Open Street Map

Broughton Bay

Broughton Bay at high tide, from the coastal path, looking towards Llanmadoc

Date: 14 August 2022
Location: Broughton Bay on Open Street Map

Whiteford Sands

Dunes at Whiteford Sands

Date: 22 August 2023
Location: Whiteford Sands on Open Street Map

Swansea and Gower beach checklist

Jersey Marine Beach
Swansea Bay ✅
Knab Rock ✅
Mumbles Head ✅
Bracelet Bay ✅
Limeslade Beach ✅
Rotherslade Bay ✅
Langland Bay ✅
Caswell Bay ✅
Brandy Cove ✅
Pwll Du Bay
Bantam Bay
Hunts Bay / Deep Slade ✅
Foxhole ✅
Heatherslade Bay ✅
Pobbles Bay ✅
Three Cliffs Bay
Tor Bay
Nicholaston / Crawley Beach
Oxwich Bay ✅
Slade Sands
Horton ✅
Port Eynon ✅
Salt House Mere ✅
Overton Mere ✅
Common Cliff
Foxhole Slade
Knave Bay
Ramsgrove
Butterslade
Mewslade Bay ✅
Fall Bay ✅
Worm’s Head ✅
Rhossili ✅
Llangennith ✅
Burry Holms ✅
Blue Pool Bay ✅
Little Broughton ✅
Broughton Bay ✅
Whiteford Sands ✅
Llanrhidian Sands

Useful links

Starting a blogroll

2022-10-29T00:00:00Z

Inspired by Max Böck, I've decided to add a blogroll to my site. According to IndieWeb, a blogroll is "a list of other sites that you read, are a follower of, or recommend".

With Twitter under threat from you-know-who, it's a great time to start publishing on your own domain.

Let me know your blog and I'll add it to my blogroll. My contact details are on my home page. Or, add your own via a pull request.

In particular, I'll be looking to add people posting about…

user-centred design
accessibility
inclusive design
web design
service design in the public sector

List of inclusive design books

2022-10-22T00:00:00Z

Some inclusive design books that I'm reading, or are on my wish list.

Beyond Sticky Notes – “…your guide to doing co-design, for real.”
Design Justice – “An exploration of how design might be led by marginalized communities, dismantle structural inequality, and advance collective liberation and ecological survival.”
Extra Bold – “a feminist, inclusive, anti-racist, nonbinary field guide for graphic designers.”
Good Services – “How to design services that work.”
Mismatch – “How Inclusion Shapes Design.”
Ruined by Design – “How designers destroyed the world, and what we can do to fix it.”

Showing the post excerpt on blog post lists

2022-10-15T00:00:00Z

I've been getting into the habit of writing excerpts for my weeknotes, so that they can be used in the social media snippets (or cards) when I share my posts on Twitter.

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 series-01-episode-01 format.

They look a bit look this…

excerpt: "Design Swansea, user research and design reviews."

I add this content to the front matter 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.

Until now, I haven't been displaying this content on the blog.

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.

So, I've updated a couple of my site templates with the following liquid tags (see the last <p>).

HTML example

<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>

Weeknotes – series 06 episode 14

2022-10-07T00:00:00Z

Design Swansea

This week was Design Swansea 48. It’s a free meet-up held at the HQ Urban Kitchen near the train station. It’s a really nice venue which serves good coffee, tiny rebel beers and drop bear alcohol free beers.

Both talks were great this week. Ryan Stephens is a mindset coach that talked about persistence.

And Owen Friend is a Cardiff based graphic designer who talked about work-life balance.

The next meet-up will be on Thursday 10th November at 6:30pm. Grab a free ticket on Eventbrite.

Finished the first round of user research

We finally finished the last user research session that had been delayed due to the queen’s passing and period of mourning.

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.

Started a weekly design show the thing session

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.

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.

Weeknotes – series 06 episode 13

2022-10-01T00:00:00Z

Posting from my phone again today as we’ve gone to Liverpool for a friend’s 40th.

It’s been a week of highs and lows.

My Gran’s funeral

It was my Gran’s funeral on Monday, a sad day but she had lived a full life. I enjoyed hearing more about what she achieved.

Probation

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.

Service design in gov

I’ve been following along with the service design in gov news on Twitter.

Some friends from Made Tech, Tom and Vicky, both spoke there. Looking forward to finding out more about how it went.

Plus it was nice to hear that the work of the inclusive design team at UKHSA got a couple of mentions, from Soh-yon Park and Claudia Hopkins and Katy Beale.

Weeknotes – series 06 episode 12

2022-09-23T00:00:00Z

Accessibility best practices

Leaning heavily on the GOV.UK Service Manual, 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.

Everyone understands how they can help
- Guidance for your job role – Department for Work and Pensions Accessibility Manual
Do regular user research with disabled people
Consider accessibility in the design phase
- Stef Walter has a great guide for designers on documenting accessiblity requirements
Review barriers and excluded groups
- see exclusion mapping later in the post
Run regular accessibility testing
- Flutter's guide to accessibility testing for native apps
Get an accessibility audit
Publish an accessibility statement

Exclusion mapping

I also ran a lightweight exclusion mapping exercise, again inspired by work done at UKHSA (UK Health Security Agency).

The idea was to try and identify…

groups who might be excluded by a service
barriers that they might face
groups who might be at greater risk from the problems you are trying to solve

The result was a list of people to include in our user research plans and barriers to focus on as we design.

It's useful to have some design concepts and user journeys to hand, to review against.

Step 1 – Excluded groups

Reflect on the different types of people who may be excluded from any service (or policy or system).

As I mentioned in my weeknotes last week, Clara Greo and Sonia Turcotte have an excellent list of people and groups: oppressed and systematically disadvantaged people and communities in the UK.

Step 2 – Accessibility barriers

Go through the Home Office's accessibility posters. They have posters for the following groups…

Anxiety
Autistic spectrum
Deaf or hard of hearing
Dyslexia
Low vision
Physical or motor disabilities
Screenreaders

Identify which barriers from each group could appear as a result of poor design in your service.

For example, some barriers that might affect users with physical or motor disabilities are…

High precision or dexterity required
Dynamic content that requires a lot of mouse movement
Lots of scrolling and tabbing
Lots of typing
Things time out without much warning
Interactive elements are bunched together
Bits of the page don't work a keyboard
Can't interact with or close pop-ups

Step 3 – Universal barriers

The universal barriers framework is a good way to focus on the barriers that can affect anyone.

For example…

Awareness
Enthusiasm
Access
Time
Finance
Evidence
Interface and interaction skills
Comprehension skills
Self confidence
Emotional state
Trust

Identify which statements from each group could happen as a result of poor design in your service.

For example, when thinking about time, people may feel…

I don't have time to use this service
The waiting times are too long
It takes too long to travel to do this
Download speeds take too long
The information took too long to arrive

Step 4 – Protected characteristics

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?

age
gender reassignment
being married or in a civil partnership
being pregnant or on maternity leave
disability
race including colour, nationality, ethnic or national origin
religion or belief
sex
sexual orientation

Step 5 – Wrap up

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.

Phew that was a lot to go through, if you find this useful, or can see any areas for improvement, please let me know!

Other things

Intuit have a great content design guide called Abolish racist language
I was reminded of something that Lou Downe says: "Service design is 10% design… 90% creating the conditions for design to happen"
It was Inclusive Design 24 this week, a free 24-hour online event full of inclusive design and accessibility talks

Weeknotes – series 06 episode 11

2022-09-16T00:00:00Z

First sprint

This week my team finished their first sprint without any of the old supplier onboard. It was good to get stuck in.

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.

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.

Running retro and planning

Made Tech (or maybe its just the team I'm on?) has a culture of letting everyone have a go at hosting agile ceremonies.

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.

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.

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.

Exclusion mapping

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).

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…

the Home Office's accessibility posters
GOV.UK's accessibility user profiles
GOV.UK's universal barriers
Clara Greo and Sonia Turcotte's list of excluded groups

Other things

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.
Figma was bought by Adobe for $20 billion, it was massive news on design Twitter, even eclipsing "The Queue".
I asked on Twitter for tips about doing user research with people with access needs and collected the notes in a GitHub gist.
I'm heading to Stranger Things:The Experience in London this weekend.

Weeknotes – series 06 episode 10

2022-09-09T00:00:00Z

Design Quality Assurance (QA) and device testing

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.

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…

Making sure everyone can use your service (at beta phase)

run regular accessibility testing
run research sessions with disabled people
get an accessibility audit and fix any issues
explore whether the service has any pain points that might lead to people being excluded, and what steps you are taking to address them
prepare to publish an accessibility page for your service

This list is taken from: How the beta phase works – GOV.UK

Remote user research about video and text content

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.

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.

Content warning: ableist language

I sparked a little debate on Twitter about Crazy 8s. Some people suggested more inclusive names for the exercise, like Random 8s.

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.

Other things

Colin, someone I used to work with, shared a blog post about his experiences working at Test and Trace, it included a nice little shout out for my old team (the inclusive design team) which was nice to see
I remembered that the gov design tumblr exists!
Design Swansea (a local meet-up) was back after a two and a half year break
It was back to school this week, and my eldest daughter started secondary school!

Weeknotes – series 06 episode 09

2022-09-02T00:00:00Z

Goodbye old team, hello new sprint

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.

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.

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.

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.

Writing Jira tickets for user-centred design (UCD) tasks

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.

Some ideas we came up with…

User story – include one whenever we can
Outcome – what user need, problem or outcome are we trying to meet/solve?
Sizing or story points – build up examples for how long typical UCD things take
Links – link to previous user research, epics and design mock-ups
Accessibility and inclusion – add notes about access needs and barriers
Interaction – show user flows for key changes in component states and page navigation

Design quality assurance (QA)

Some of the iPhone accessibility features I've been learning about

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).

Here’s the rough process I’m following so far (room for improvement here)…

Create a sample list of pages/components to check
Check in portrait mode and landscape mode
Check against the mock-ups (in Zeplin)
Check with Dark mode
Basic VoiceOver check
Basic Voice Control check (to check hidden labels and focus order)
Check the design with colour filters
Increase text size

This blog post about testing with Voice Control was really useful: New in iOS 13 Accessibility – Voice Control and More – Deque.

I also followed this: Doing a basic accessibility check if you cannot do a detailed one - GOV.UK.

Other things

The Design Swansea meet-up is back, for its first event since the pandemic – grab a free Design Swansea ticket
Formal job role guidance launched by GOV.UK about accessibility specialists

Weeknotes – series 06 episode 08

2022-08-29T00:00:00Z

Made Tech design community stuff

I got myself some tickets to the UK Gov design system day conference in September. I think the theme is inclusivity – so really looking forward to attending (remotely).

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.

I also joined my first interview panel at Made Tech.

Design assignment stuff

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.

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.

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).

This post from Stéphanie Walter has been a great help: A Designer’s Guide to Documenting Accessibility & User Interactions.

Weeknotes – series 06 episode 07

2022-08-20T00:00:00Z

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.

Native app design

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.

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.

The existing team uses Sketch for designing, and Zeplin 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.

Apple publishes a lot of their design resources in Sketch format, so I think this is one reason that app designers use Sketch.

Here are some resources…

The apps follow native design patterns, so it’s been recommended that I get familiar with Apple’s Human Interface Guidelines and Android Material Design system. This helps to take advantage of the operating systems’ built-in accessibility features.

Accessibility best practices

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.

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.

I’ve been gathering some resources about how to document accessibility…

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…

Identify excluded groups and their pain points
Do user research with people with disabilities and other excluded groups
Use native app design patterns and components
Continuously run accessibility tests
Get an accessibility audit
Publish an accessibility statement
Gather performance data and analytics in a way that includes everyone

Reading about inclusive design

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…

Just a few pages in, and I can’t believe I didn’t get it sooner. It reminds me of Why I’m no longer talking to white people about race 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.

I’m collecting further reading resources about inclusive design over on my Github Gists page.

Weeknotes – series 06 episode 06

2022-08-14T00:00:00Z

This week we stayed in a static caravan at Broughton Farm, near Llangennith in Gower.

Broughton Bay

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.

We did plenty of paddle boarding, and spotted lots of Barrel jellyfish 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.

Blue Pool Bay

A natural archway at Blue Pool Bay called the Three Chimneys

When the tide started to get low during the day, we walked around the headland on the beach from Broughton Bay to Blue Pool Bay. 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.

Ice cream and pizza

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.

We did venture away from the camp site a few times though. I always drag the family to the Kings Head for at least one meal, and this week was no exception.

We drove to Penclawdd (famous for its local cockle industry) one day to pick up some supplies and grab a GG's Ice Cream.

The best surprise were the pizzas we had the Gower Dough Co pop-up at Kennexstone camp site. They have a double decker bus serving wood fired pizzas and a converted horsebox trailer serving local beers like Gower Gold and non alcoholic beers from Drop Bear. They were playing music too… it had a nice festival vibe. Definitely worth a visit again.

I tweeted a few more photos from the whole trip in this thread.

Weeknotes – series 06 episode 05

2022-08-08T00:00:00Z

Camping at Alton Towers

On Monday we got up early to drive to Alton Towers – a 4 hour drive from Swansea. We stayed at a campsite called Common End Farm. 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 Rue Hill Campsite next time.

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.

On the way back we drove through the nearby village of Stanton to get a photo by the sign.

Packing for Llangennith

Today we're packing for the second half of the holiday, we're staying in a static caravan site in Broughton, 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.

Beaches in Swansea and Gower

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.

Swansea Bay
Knab Rock
Bracelet Bay
Limeslade Bay
Rotherslade Bay
Langland Bay
Caswell Bay
Brandy Cove
Pwll Du Bay
Three Cliffs Bay
Nicholaston Burrows
Oxwich Bay
Pennard Burrows
Pobbles Bay
Port Eynon Bay
The Sands - Slade
The cove - Horton
Salt House Mere
Tor Bay
Overton Mere
Mewslade Bay
Butterslade
Fall Bay
Ramsgrove
Rhossili Bay
Llangenith
Burry Holms
Blue Pool Bay
Broughton Bay
Whiteford Sands
Llanrhidian Sands

I used this Gower Holidays website to populate the list.

Weeknotes – series 06 episode 04

2022-07-30T00:00:00Z

Meeting the team

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.

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.

Some of us have started to share our Manuals of Me, so I took it as an opportunity to update mine.

Design community

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.

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:

Create a slide deck containing intros to everyone in the community
Gather some notes around the different meetings and Slack channels
Agreed to share more work, problems and tips via Slack

Design leadership for introverts

Someone in the wider design community shared a link to this great podcast design leadership for introverts with Tim Yeo.

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:

Learn to schedule in breaks and time to focus
Prepare for meetings and workshops in advance – plan what you’re going to say and practice saying things out loud to give yourself confidence
Preparation enables you to be present and to listen well
Don’t wait until you think you are 100% right before speaking up, say the thing, and use feedback to improve ideas together
Be yourself, everyone has a unique perspective to bring

Design portfolios and tools

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:

Use social media like Twitter and LinkedIn
Play around with code on Github and CodePen
Start a personal blog to practice writing and html/css
Create case studies in slide deck format

It also spurred me on to update my blog post about interaction design tools.

Paddle boarding around Mumbles

I went paddle boarding at high tide 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.

My interaction design tools, version 3

2022-07-27T00:00:00Z

This blog post explores the tools that I use for interaction design. It's an update on a post that I wrote in 2018 and 2013.

Check out my uses page for an up-to-date list of hardware and software that I use for interaction design.

Devices

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.

Pen and paper

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.

A while ago, I asked people on Twitter to recommend their favorite pens. So, I've started using Paper Mate Flairs, when I can be bothered to order some.

I also think Pental Sign Pens are great. But my kids steal them, so I often end up with bog standard ball point pens.

Google Drive

Google Drive and the Docs, Slides and Sheets tools have had some nice improvements recently! A few things seem to be "inspired" by Notion, like the ability to insert chips. Chips are special links that refer to things in your Google Workplace, like other documents, meetings or people.

It also allows you to write in Markdown now which I really like, although I would prefer it if it allowed me to export in Markdown too.

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.

Visual Studio Code

Visual Studio Code is a code editor from Microsoft.

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.

Eleventy

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 GOV.UK prototyping kit.

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.

Netlify

For personal projects, and this blog, I prefer to use Netlify for hosting (it's similar to Heroku). It watches my GitHub repo, and automatically rebuilds my site when I merge things.

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.

Google Chrome and Developer Tools

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.

Here are a few useful plugins too:

WAVE for checking accessibility
axe DevTools for checking accessibility
Validity for checking code is valid
45to75 for checking line length
Toggle JavaScript quickly turn off JS to check how sites perform without it
Web Developer a collection of tools for web development

GitHub Desktop

I feel slightly guilty for using this tool (instead of using Terminal).

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.

Terminal

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.

Trello

Trello is my tool of choice for managing sprints and kanban processes. It's especially handy if you learn the keyboard shortcuts and Markdown formatting.

iA Writer

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.

Figma and Sketch

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.

Miro

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.

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.

CodePen

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.

A user manual for me, version 3

2022-07-25T00:00:00Z

View my latest user manual.

This is version 3 of my user manual. If you're unfamilier with the concept, check out this blog post on user manuals by Cassie Robinson.

Conditions I like to work in

Remote work helps me to drop my kids off at school at a sensible time, it also helps me to recharge between meetings
I like to work in open, inclusive, multi-disciplinary teams
I prefer structured workshops over meetings with no agenda

The times/hours I like to work

I drop my kids off at school at 8:45am, so I'm usually back and ready to start work by 9am(ish)
I usually work 9am to 5pm, Monday to Friday
Some days I do school pick-up, so I can be unavailable around 3pm
I tend to have more energy in the mornings

The best ways to communicate with me

I’m happy to use a mix of communication methods (face-to-face, email, Slack)
I prefer teams who use asynchronous tools (like Slack) for most things
You’ll get the best answers from me if I’ve got time to prepare
I'm more likely to remember something if it's written down

The ways I like to receive feedback

I like demoing my work and presenting at show and tells
I need time to prepare for feedback sessions
And time to process them afterwards

Things I need

To observe user research
Good digital tools like Trello, Slack and Google Drive
Protected time to focus on complex tasks
A team where I can focus on accessibility and inclusive design

Things I struggle with

I’m an introvert, which means too many meetings can drain me
Long email threads with lots of contributors
Acronyms and jargon
Long days of back-to-back meetings

Things I love

My family
Music
The beach

Other things to know about me

I have 3 school aged kids (and a puppy)
I value boring design over shiny things
I spend too much time on Twitter

Weeknotes – series 06 episode 03

2022-07-23T00:00:00Z

Extreme heat and end of school

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 uncomfortably hot. Thankfully a few meetings were postponed until next week, reducing the pressure on people.

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…

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?

Helping with the software academies

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.

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...

Who’s on the team?
Who are the users?
What different types of users are there?
What are their needs?
What user research has been done?
What problems are we trying to solve?
What outcomes do we want?

It also reminded me to check out the great Ways of Working website by Lawrence Kitson, Jamie Arnold and Giles Turnbull.

Mobile app design

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 mobile app design twitter thread.

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.

1-to-1s

I feel like my 1-to-1s with my manager are going well, and they’re helping to keep me focused and motivated.

At Made Tech they use a web app called Small Improvements 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.

Weeknotes – series 06 episode 02

2022-07-15T00:00:00Z

Onboarding

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.

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.

The Chalet

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.

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.

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 academy.

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.

Design tools and kit

I’ve spent a couple of days this week getting my design tools setup.

So far I've installed…

GOV.UK Prototype Kit
Figma
Visual Studio Code
GitHub Desktop
Heroku
Xcode

I've been working my way through the GOV.UK Prototype Kit Tutorials and templates which are all really well written and easy to follow. Hopefully I can find some time next week to do the advanced usage section.

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).

Weeknotes – series 06 episode 01

2022-07-08T00:00:00Z

Onboarding

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.

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.

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.

Culture

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.

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.

New (old) role

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.

Tools

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.

Next week I’m going to get Figma, Github and the GOV.UK Prototype Kit setup.

The handbook

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 – Made Tech handbook.

Ending the week feeling motivated

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.

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.

Things to do in Swansea

2022-05-25T00:00:00Z

⚠️ Content warning: alcohol use.

My non-exhaustive list of nice things to do in Swansea. Mostly places that serve craft ale and coffee. And beaches. Roughly East to West.

Marina and SA1 waterfront

Beer Riff. Excellent indie brewery and taproom. Relaxed. Family and dog friendly in the day. Nice outside seating with views of the marina. Serves pizza and sometimes has pop-up food trucks serving something different. Essential visit!

Wind Street

Founders & Co. Large food hall with long benches. Lots of different great street food style options. Great spicy margaritas. Coffee shop at the front during the day.
Flickering Light. 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.

City centre

Swansea Market. 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. Storm in a Teacup does great coffee.
The Bunkhouse. Great bar and music venue. Serves Beer Riff beer. Bringing some great bands to Swansea.
Kardomah. 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 The End of the F***ing World.
Exist Skate Park and Store. Independent skate park and shop with boards, trainers and T-shirts.

High Street

Hippos. Alternative bar and music venue.
Elysium. Bar, music venue, gallery and artist studios.
Tangled Parrot. Record store.
Basekamp. Coffee shop.

Bryn-y-mor and Uplands

Little Valley Bakery. Artisan sourdough, pasties and cakes. Has another shop near Three Cliffs Bay.
Hoogah. Brunch style food and drink cafe/bar, sourced locally. Nice relaxed vibe.
Sloth Coffee Co. Excellent little coffee shop. Up the hill from Uplands.

Sketty

Square Peg. Best coffee in Swansea, as rated by me. Great brunch too.

Mumbles

View from The Lighthouse restaurant at Bracelet Bay, looking towards Mumbles Lighthouse.

Joes Ice Cream. Swansea’s most famous ice cream parlour. Unique style of ice cream.
Hiatus. Surfing and adventure lifestyle shop. If I was rich I would buy everything.
Gower Seafood Hut and Deli. Seafood deli serving crab sandwiches. Located near the playground. Outdoor picnic benches including some that are under cover nearby.
Bracelet Bay. Small cove behind mumbles pier. Walk the headland round to Langland.
Langland Bay. Picturesque beach, but can get very busy. Good for surf and paddle boards. Range of options for food.
Caswell Bay. Huge bay when the tide is out. Smaller surf than Langland, so better for beginners. Nice walks in the woods behind the car park.

Gower

A natural archway at Blue Pool Bay called the Three Chimneys

Worm's Head, Rhosili Bay. 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.
King's Head. Relaxed pub with good food. Sit outside the front and enjoy the sunset.
Llangennith Beach. Huge beach with good surf. Camp site and cafe nearby.
Blue Pool Bay. Remote, secluded beach. With large rock pool that you can jump into from surrounding rocks. Tides can be dangerous so check local information.
Britannia Inn. Beautiful old pub with great food and stunning views across the estuary. Some playground stuff for little kids.

Gowerton

Motley Pie & Coffee. Great pies, cakes and coffee to takeaway. Pies come with optional sides like mushy peas and gravy.
Nomad Bar & Kitchen. Small plates, bar snacks, cheese and cured meat platters, guest pale ales. Small and cosy inside, with a nice big covered area outside.

More beaches

I’ve blogged separately about all the beaches in Swansea and Gower.

My first 3 months in the inclusive design team

2021-10-08T00:00:00Z

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.

Rebooting the inclusive design team

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.

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.

Our team is made up of a mix of...

user researchers
content designers
service designers
accessibility specialists
a business analyst
a delivery manager
a product manager

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.

Now we've got some work to do.

What's it like being a head of design?

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.

The good news is, I'm supported by a lot of great people, including the...

inclusive design team
other heads of design
wider user-centred design community
equality and inclusion group

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.

And, I have to be able to tell a good story about the team. So that other teams want to work with us, and so that the team will understand the scope of what they need to do.

Software and tools

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.

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.

A big part of the job is about staying on top of conversations. Which means Outlook is my ~~friend~~ 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.

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.

Strategy, Key Performance Indicator (KPIs) and setting standards

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.

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.

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.

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.

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 Let’s Talk About Strategy.

Sophie's questions, captured in the slides linked in the last paragraph, help me to think about what a good strategy should tell us...

Where are we going?

What will be different when we get there?

Where are we now?

How are we going to get from here to there?

What might stop us and how will we overcome that?

Joining NHS test and trace

2021-07-24T00:00:00Z

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.

Head of inclusive design

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.

We’re a multi-disciplinary team that are responsible for a range of things including…

helping with the design and delivery of services
setting standards for accessibility and inclusive design
helping teams across test and trace to work in more inclusive and accessible ways

Heads of user-centred design

I also work closely with the other "heads of" roles, including…

the heads of profession – the people who lead the design, design-ops, user research and content design functions
the heads of UX (user experience) – the people who lead the user-centred teams on specific services

Working across different orgs

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.

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.

A step up

I feel honoured to be able to work on something like this, alongside some user-centred people that I really look up to.

I’m hoping some of their experience rubs off, as this role definitely feels like a step up for me.

Weeknotes?

I can’t promise week notes but I hope to be able to share more about what I’m working on, as I go.

A user manual for me, version 2

2021-06-25T00:00:00Z

View my latest user manual.

It's been over 2 years since I last updated my old user manual for me. If you're unfamilier with the concept, check out this blog post on user manuals by Cassie Robinson.

Conditions I like to work in

Remote work helps me to drop my kids off at school at a sensible time, it also helps me to recharge between meetings
I like to work in open, inclusive, multi-disciplinary teams
I prefer structured workshops over meetings with no agenda

The times/hours I like to work

I drop my kids off at school at 8:45am, so I'm usually back and ready to start work by 9am(ish)
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.
Staggered school start and end times (due to COVID) are making this less predictable
I prefer to work in the morning, so during school holidays you'll catch me working 8am to 4pm

The best ways to communicate with me

I’m happy to use a mix of communication methods (face-to-face, email, Slack)
You’ll get the best answers from me if I’ve got time to prepare
I'm more likely to remember something if it's written down

The ways I like to receive feedback

I like demoing my work and presenting at show and tells
I need time to prepare for feedback sessions
And time to process them afterwards

Things I need

To observe user research
Good digital tools like Trello, Slack and Google Drive
Protected time to focus on complex tasks

Things I struggle with

I’m an introvert, which means too many meetings can drain me
Long email threads with lots of contributors
Acronyms and jargon

Things I love

My family
Music
The beach

Other things to know about me

I have 3 young kids
I value boring design over shiny things
I spend too much time on Twitter

Adding some basic CSS

2021-04-11T00:00:00Z

I've had an email from Google Search Console telling me that it's detected some mobile usability issues on the site.

The following issues were found on your site:

Content wider than screen

Text too small to read

Clickable elements too close together

So, I've added some very basic CSS for now, just to keep Google off my back.

I've increased the font-size and line-height, added some styles to stop images from being wider than the screen width, and included a basic sans-serif font stack.

I'm not sure this'll fix the last point (about clickable elements being too close together), we'll see.

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.

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%;
}

Update

Looks like it was actually the 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.

And I've increased the font size of code elements, as the browser default was only 14px, which is too small.

Update 17 April 2021

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…

Bigger font-size
More generous line-height
Prevent horizontal scrolling

Switching to Eleventy, but still naked

2021-04-08T00:00:00Z

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 moved away from WordPress.

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.

I've been chipping away at it slowly and you can read more about my progress in this Twitter thread, these posts and on my GitHub project board.

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.

If you spot any issues, please let me know via email benjystanton@gmail.com.

Tomorrow is also CSS naked day, which gave me the extra push I needed to get the redesign out there.

Family friendly TV shows with LGBT characters

2021-03-11T00:00:00Z

Name	Current streaming service (UK)
Adventure Time	Prime (not included in subscription)
Arlo the Alligator Boy	Netflix
Clarence	Netflix
Danger & Eggs	Prime
Gravity Falls	Disney+
Julie and the Phantoms	Netflix
Kipo and the Age of Wonderbeasts	Netflix
She-Ra and the Princesses of Power	Netflix
Steven Universe	Netflix

Thanks to Paul Burgess, Matthew Jackson, Simeon Smith, Jen and steve higgs for the recommendations.

Link to original tweet asking for tips.

Redirect custom domain name from GitHub pages to Netlify

2021-02-20T00:00:00Z

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.

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.

Netlify

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. This page in the Netlify docs helped me figure that out.

GitHub Pages

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 GitHub docs page helped with that bit.

Despite feeling in over my head, the whole thing only took half an hour probably. And now my site is being hosted on Netlify.

Checking for visual changes with BackstopJS

2021-01-09T00:00:00Z

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.

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.

I've been playing around with Percy.io at Swirrl, but for personal use, I decided to use the open source Backstop.JS, which I'm pretty sure I first heard about via Stuart Robson (thanks Stu!).

After a little while digging around the BackstopJS README I found the commands that I needed.

Setting up BackstopJS

Open Terminal
Install BackstopJS globally $ npm install -g backstopjs
Move to the project directory $ cd your/project/folder
Initialize the project $ backstop init
Open the project in Visual Studio Code
Open the backstop.json file
Update the breakpoints to match my site's
- 460px
- 660px
- 900px
- 1400px
Populate the list of pages to test, each page needs the new preview URL and the current/old reference URL to test against
Create the reference images against $ backstop reference (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)
Run the test $ backstop test
This command will generate a test report in HTML which you can open in a browser to compare the images

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.

Example report

Here's a copy of my report, as you can see everything passed, so there isn't much to see.

Some personal goals for 2021

2021-01-08T00:00:00Z

Average daily steps: 6500
Average weight: 12 st 9 lbs
Continue being mostly vegetarian
Save for Christmas and holidays every month
Family walk every weekend
Stop listening to white men on Spotify
Move house or convert loft
Pay off small Lloyds loan
Switch to electric car

Deploy my Jekyll site to Netlify

2020-12-15T00:00:00Z

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 some of the things that Netlify does versus GitHub Pages.

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.

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.

I’m pretty familiar with Netlify because we use it at Swirrl, 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.

I basically needed to follow these Connecting to Netlify steps, and the automatic settings all worked without me needing to tweak anything.

After a quick glance, the preview site is looking good, but I'm going to do some more formal testing with BackstopJS. This is mainly because I want some practice with visual regression, rather than me expecting anything to have gone wrong.

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.

Create a list of sample pages for testing

2020-12-13T00:00:00Z

Having a representative sample of pages to check as I make changes to the blog will be useful for a few reasons.

I can…

check pages are building building correctly as I move to Eleventy and Netlify
check CSS styling when I setup visual regression testing
check for accessibility issues when I do some manual and automatic accessibility testing
have a list of different kinds of pages in my style guide for future reference

How I've picked my list of sample pages

Key pages (homepage, blog post, list of posts)
Pages with unique layouts or templates
Popular pages (I'll check this with Google Search Console)
Style guide (because it should contain almost every single component)

List of sample pages

Change default branch from master to main

2020-12-13T00:00:00Z

Yesterday I tweeted that I want to switch this blog from Jekyll to Eleventy, then blog in the open as I rebuild the site with modern CSS techniques.

There's going to be a few behind the scenes steps to get ready for the changes, including moving over to Netlify from GitHub pages.

Step one is to change the name of my default branch from master to main. 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…

If it prevents even a single black person from feeling more isolated in the tech community, feels like a no brainer to me!
— Una Kravets

The change is fairly simple to do, and I followed these steps by Steven Mortimer. But before deleting master (Step 5), I made sure that GitHub Pages was building from the newly created main branch. You can do this by going to your repo's Settings in GitHub, selecting Options and scrolling down to the GitHub Pages section.

A plan for accessible maps

2020-11-28T00:00:00Z

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.

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.

Accessible map overview

First, decide if you really need a map
Make sure information in the map is available elsewhere
Keep the map simple
Design the map in black and white first
Follow web best practice (semantic HTML, progressive enhancement)
Break the map down into layers (features, dialogues, controls, backgrounds, supporting information)
Test the map with different browsers and devices including mobiles and keyboards

First, decide if you really need a map

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.

Make sure information in the map is available elsewhere

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.

Think of maps as an enhancement to the service your building, the core content and functionality should be available without the map
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)
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
Interactive maps often require JavaScript, so making sure information is available outside of the map is compatible with a progressive enhancement approach too
Aside: FixMyStreet uses HTML image maps to work even if the JavaScript doesn’t work, thanks to Matthew Somerville for pointing this out

Keep the map simple

Break content down into multiple pages or sections that meet specific needs, rather than having a single map that contains all of the things
Avoid complex interactive maps if you don’t need them, for example a static inline SVG might be enough in some cases
Don't add panning and zooming and multiple layers if you just need to display a single area and its boundary

Design maps in black in white first

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.

Directly label things where possible, or use a separate legend or key, if direct labelling is not possible
Consider using shading or cross-hatch patterns instead of colour fills
Consider using unique line styles, for example dotted or dashed lines
Use high contrast colours clear enough to read (avoid light greys)
If legends/keys are used, make sure they work in black and white too

Break the map down into layers

Interactive maps are made up of multiple layers:

features (points or areas of interest)
dialogues (for detailed information)
controls (for example zoom buttons)
background maps
supporting information (for example small print)

I like to break down the map, then think about how to make each layer more accessible.

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.

Features (points or areas of interest)

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.

Interactive lines (for example rivers or roads) should be thick enough and high contrast enough to see
Interactive elements should be large enough to click on
You can add clickable labels to lines if the lines themselves are so thin they are hard to tap or click on
Allow users to zoom in, so that selecting the area they need becomes easier
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 (<a> instead of a <div>)
Add clear hover style for interactive elements, for example change the line thickness, tint and mouse cursor
Any interactive elements of the map should have a clear focus style
If elements are not interactive, they should have a different visual treatment (for example black and white text without an underline)

Dialogues (for detailed information)

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.

Avoid using tool tips that only appear on mouse hover
Dialogues need to be keyboard accessible too

Map controls

Map controls are the buttons, form elements and gestures that the allow users to manipulate how they view the map.

Common controls include the ability to zoom and pan the map
Test to make sure these controls are available to all input types, for example mouse, touch, keyboard and voice
Use visible text labels, not just icons, for less common controls like toggling full screen mode
Make sure to follow best practice for web forms when adding custom controls (like adding a select menu to change the background map layer)

Background maps

The background map contains extra context. They typically depict large water bodies, land masses and can include labels for important landmarks like cities.

The images might be generated from satellite photos or they can by stylised illustrations that are common in things like Google Maps.

If you have control of the background layer it’s worth simplifying things down to exactly what you need.

Turn off any background layers you don’t need, for example hide roads if your users don't need to see them
Make the text legible, for example increase size and contrast of labels for towns and cities
Choose background tiles that don’t contrast too much with the foreground layers

Supporting information, map metadata and descriptive labels

Supporting text such copyright, source and license information is often overlooked in maps.

Make sure the text has sufficient size and contrast
Make sure links are styled to look like links
Icons, elements and sections need to have accessible text labels

Test the map with a mobile

Don't rely on complex motions or gestures
The doing a basic accessibility check if you cannot do a detailed one from GOV.UK explains this in more detail
Make sure users don't accidentally zoom into the map, when they meant to scroll down the page
Test maps still work at small sizes
Test map works with touch interfaces

Test the map with a keyboard

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 skip links in the GOV.UK design system.

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.

Do a range of testing

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.

It's definetely worth doing your own manual and automatic testing. I've written a bit about manual and automatic accessibility testing before so I won’t go into more detail here.

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.

Services with maps

Map prototyping tools

Thanks

Cathy Dutton and the interaction design team at Defra, Angharad Stone, Joe Lanman, Simon Everest, John Waterworth, Rob Chambers, Oli Hawkins, ONS digital and Swirrl.

Updates on 7 December 2020

Added a link to Map Accessibility from Minnesota IT Services via Philip Kiff
Added a note about Shapefiles via Mike Gifford
Added a link to FixMyStreet from My Society and clarification that interactive maps don't always require Javascript via Matthew Somerville
Added a link to Defra map design standards via Cathy Dutton

Weeknotes – series 04 episode 04

2020-11-15T00:00:00Z

This week I have been mostly thinking about accessible mark-up and content design for HTML tables (again).

Adrian's simple, responsive, accessible table

Adrian's twitter thread about tables 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…

<div
  role="region"
  aria-labelledby="Caption01"
  tabindex="0">
  <table>[…]</table>
</div>

The thread goes into more detail, but a couple of things stood out for me…

An overflowing table is interactive, so you need to add tabindex="0" to the container so that keyboard users can scroll the content too
Anything that receives focus needs an accessible name and role

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 Adrian's blog posts about tables. Worth a read if you want to make sure your tables are semantic and accessible.

Accessible characters in tables

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" >), but I wasn't sure if screen readers can be relied upon to read out these kind of symbols correctly.

Annemarie Parsons shared a good blog post with me that goes into detail about what you can expect when specific screen readers encounter symbols and characters: Why Don’t Screen Readers Always Read What’s on the Screen from Deque. 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.

For these kind of content issues I also like to check GOV.UK's content style guide and ONS's style guide for best practice.

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.

One day I'll write a big post about tables

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.

But for now, for my fellow table nerds, there's this short post I wrote about tables from 2019. There's also some bits about tables in my accessibility checklist.

Weeknotes – series 04 episode 03

2020-11-06T00:00:00Z

Notes about API user research, recording remote user research sessions, and onboarding remote team members during lockdown.

API user research

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.

Last time I put together a list of resources, so I decided to share these API user research resources on GitHub. I'd also blogged about some user research questions for data users. These were a really good start for planning my research this time round.

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. Jason Bell from DWP has written a good blog post about this: How we designed for users without having a user interface to test.

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.

Rob 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.

Recording remote user research sessions

Earlier in the summer I bought myself an app to record my mac screen called Record It. 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 Open Broadcaster Software, but Record It "just worked" for me, so I'm happy.

At the time, I asked people on Twitter for tips for Mac apps that lets you record the screen, the system audio and the mic audio at the same time – take a look at that thread if you want to see some other options.

Onboarding remote team members during lockdown

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.

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: list of articles and resources about remote onboarding.

Weeknotes – series 04 episode 02

2020-11-01T00:00:00Z

Notes about wireframing, checking accessibility with CSS off, the user-centred design and data community, and designing in the open.

Wireframing design workflow

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.

Later, when I worked at DVLA (Driver and Vehicle Licensing Agency) I discovered GDS's (Government Digital Service's) 'sketch first, then prototype' design workflow. 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.

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.

At Swirrl we use Moqups. 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.

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.

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.

Checking accessibility with CSS off

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 doing a basic accessibility check if you cannot do a detailed one that recommends checking designs in this way.

I was able to spot that a group of related links wasn't marked up as a list (<ul>) 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.

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.

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…

#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?
— My tweet on 17 September 2020

User-centred design and data community

This week, I also had a chat with the team who organise the user-centred design and data community. 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 public Trello board where you can keep up to date with our plans. More on this soon.

Designing in the open

UX (User experience) designer Westley Knight got in touch with me on Twitter to ask about an old blog post of mine that I'd posted on the ONS digital blog.

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).

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.

Weeknotes – series 04 episode 01

2020-10-24T00:00:00Z

It's been a while since my last weeknote, (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.

Coronavirus

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.

Accessibility testing tools and techniques

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 round-up of accessibility testing tools and techniques 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.

Switching back into design mode

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 Procrastiworking by Jessica Hische.

I use 11ty (static site generator) for my most of my prototyping. It's compatible with the same templating language (Liquid) 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 Nunjucks at some point.

Swirrl are hiring again (and we've started a podcast)

There's been lots of Swirrl news recently. We're hiring junior and senior software engineers. 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!

Sarah has also started a podcast. You can listen to the first episode where she chats to Jamie about telling stories with data.

A user-centred design and data community

2020-10-15T00:00:00Z

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.

Since then, I've met (well, via Twitter) a few people working on these kinds of services. Jeremy and Pete 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.

Luckily for me, Jeremy, Pete and Megan 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.

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… introducing the user-centred design and data community.

The community is for anyone working on services that collect, analyse, visualise and publish data and applying a user-centred lens to them.

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.

11ty resources

2020-05-20T00:00:00Z

A list of my 11ty bookmarks. 11ty (or Eleventy) is a static site generator.

Teams who share their accessibility processes in the open

2020-05-19T00:00:00Z

A list of teams who share their accessibility audit plans, backlogs and roadmaps in the open. Last updated on 5 April 2021.

Thanks to everyone who suggested stuff. Here's a link to my original tweet.

Nick Colley in particular shared some excellent details in this Twitter thread about how the GOV.UK Design System team worked to meet WCAG 2.1.

Accessible close buttons

2020-04-30T00:00:00Z

A short post about designing close buttons with SVG icons and accessible mark-up.

How to design accessible close buttons

Mark it up as a button, for example <button type="button">…</button>
Include accessible text, for example<button>Close</button> or aria-label="Close"
The overall size should be at least 44 pixels in height and width
Add styles for keyboard focus and mouse hover
Consider adding an <svg> icon
If you use the multiplication/times character (×), be sure to hide it from screen readers with aria-hidden="true" (so it's not read out as "times")

Example mark-up

<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>

Update 11 May 2020

Adam Silver suggested that using a visible text label with the icon (or even just visible text, with no icon) would improve accessibility for voice dictation software users.

Update 25 May 2020

Manuel Matuzović has written a great round up of close button bad practices and a range of solutions on HTMHell.

Generally, it’s better to avoid opening links in new windows or tabs

2020-04-20T00:00:00Z

It's bad for usability, because it takes control away from users (for example, it breaks the back button functionality) and makes interactions unpredictable
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)
It can be bad for performance and security

Exceptions

Sometimes the experience might be improved by opening links in new windows or tabs. For example, if:

the link provides help from a different place
the link interrupts the user journey
the link leads to another type of document like a PDF
the link leads to a large image which takes time to download

In these situations the link text should clearly state what's going to happen, for example: <a href="#" rel="noopener noreferrer">Link to a thing (opens in a new window or tab)</a>

Download attribute – update 11 May 2020

Adam suggests that PDF links can be downloaded to the device, instead of opened in a new tab, by using the download attribute.

My first year at Swirrl

2020-04-16T00:00:00Z

I’ve been at Swirrl for 12 months (happy swirrliversary to me)!

I joined as an interaction designer back in April 2019. I'd spotted that they were on the lookout for a designer after Jamie shared a link on Twitter.

Swirrl's Power of Data laptop sticker

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.

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.

Remote working

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.

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…

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!)

My role at Swirrl

My work includes a mix of;

user research
stakeholder workshops
drawing journey maps and wireframes
coding HTML and CSS

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.

Getting stuck into development

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.

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.

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.

Projects I'm working on

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.)

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.

Here's a related post about my pros and cons of working remotely.

Pens for UX sketching and note taking

2020-04-13T00:00:00Z

Not surprisingly, a lot of my twitter friends are stationery nerds like me.

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?

Paper Mate Flair (via Grace, Si, Sam, Jonathan)
Pentel SignPen (via Benjy, Nic F, Nic P)
Rotring Tikky Graphic Fineliner (via Rob)
Parker Jotter (via Rob)
Copic Multiliner (via Paul)
Pilot V-Ball 07 (via Stevan)
Mitsubishi Uniball (via Liam)
Muji (via Pete)
Matador I-Teen (via Fozlusays)
Pilot V-Pen Erasable Fountain pen (via Agricool)
Winsor and Newton Fineliners (via Andy)
Pentel GraphGear (via Andy)
Winsor and Newton Promarker (via Andy)
Pilot Hi-Tecpoint V5 (via Graham)

Bonus content: try these notebooks

Rhodia notebooks with dot grid (via Ben)
Muji notebooks (via Si)
Leuchtturm 1917 notebooks (via Rob)

User research activities for testing interface content

2020-04-06T00:00:00Z

Here are some tips on different user research techniques to try when you're testing user interface content (crowdsourced from Twitter – thanks everyone!).

Highlighter test – Ask people to highlight easy-to-understand words, and confusing words, using different colours (via Helen and many others)
Walkthrough – Explain to someone how to use the thing (via Paul Pod)
Check search logs – Check the search logs to see if people are looking for features that are right there in the interface (via Mark Hurrell)
Task based usability test – 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 Joe Lanman)
Cloze test – Remove words from the content and ask people what the missing words should be (via Kieran Forde)
Memory test – Show pages that fade to blank after a period of time and ask people what they remember (via Grinchyface)
Eye tracking – Measure how many times people's eyes stop on different words as they read (via Fritz von Runte)

Making data part of the web sticker

2020-04-04T00:00:00Z

Here's my first submission for Jukesie's sticker stories project. I made this whilst I was working at Office for National Statistics in 2017. Leigh Dodds was working there at the same time and wrote some open data publishing principles.

Me and Andy Dudfield 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 hit with open data Twitter.

Get the sticker artwork PDF from GitHub

Designer(s): Benjy Stanton, Leigh Dodds
Organisation: Office for National Statistics
Team: Digital Publishing
Year: 2017
Licence: MIT License
Willingness to be contacted: Yes

Books about racism in the UK

2020-02-08T00:00:00Z

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.

Currently reading “Why I’m no longer talking to white people about race” by @renireni. What should I read next? I want to educate myself about racism in the UK.
— Benjy Stanton (@benjystanton) January 21, 2020

List of books about racism in the UK

Here's my resulting reading list. I'm slowly making my way through it. Please let me know if you have any other recommendations.

Why I’m No Longer Talking to White People About Race by Reni Eddo-Lodge
The Good Immigrant by Nikesh Shukla
Brit(ish): On Race, Identity and Belonging by Afua Hirsch
Natives: Race and Class in the Ruins of Empire by Akala
Black and British: A Forgotten History by David Olusoga
Heart Of The Race: Black Women's Lives in Britain by Beverley Bryan
Safe: On Black British Men Reclaiming Space by Derek Owusu
What is Islamophobia?: Racism, Social Movements and the State by Narzanin Massoumi

More resources on racism and anti-racism

Some Twitter threads that link to more resources

Accessible search form mark-up

2020-01-10T00:00:00Z

A brief checklist for marking-up an accessible search form. Last updated on 21 May 2020.

Add role="search" landmark to the <form>
Associate the <label> and <input> using for="…" and id="…"
Add type="search" or type="text" to the <input>
Add type="submit" to the <button>
Optionally, associate the <input> with any help text using aria-describedby="…"

Example

<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>

More info

Some personal goals for 2020

2020-01-09T00:00:00Z

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.

Also, this is my 150th blog post!

Money

Finish paying off my student loan
Don't take on any short term debt (like credit cards or overdrafts)

Update on 13 April 2020

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.
No credit cards or overdrafts so far

Update on 8 July 2020

Nearly saved up enough to pay off my student loan
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
No credit cards or overdrafts so far

Personal

Take more steps than in 2019 (more than 7000 steps per day on average)
Only eat meat 1 day a week (that means I have a 52 meat budget for the year!)
Weigh less than 13 stone 7 pounds (on average)
No flights
Spend at least 1 hour a week playing video games with the kids

Update on 13 April 2020

My step count was going well until the Coronavirus lockdown, might just scrap this goal!
We're eating a lot less meat as a family. Probably close to once a week on average, but I've given up counting.
Got my weight down to 12 stone 7 pounds, need to lose a little bit more before my BMI is in the ideal zone.
No flights so far!
Hard to track this, but put some good time into Luigi's Mansion and Kingdom Hearts.

Update on 8 July 2020

Step count is averaging about 5,600 because lockdown
Weight is averaging under 13 stone, slowly putting on weight because lockdown
Given up meat most weeks, but still having some on the odd occasion
No flights so far because lockdown
Currently playing Super Mario Maker 2

Home

~~Get the decking sorted~~
Plant 5 trees
~~Grow some vegetables~~ (start with the pumpkin seeds from Halloween)
~~Plant more wild flowers~~
~~Let the lawn grow at the bottom of the garden (again)~~

Update on 13 April 2020

Decking is done
Planted some vegetables and wild flowers
No-mow patch going well, noticing more wild flowers growing naturally, especially in front garden

Update on 8 July 2020

No trees planted, but lots of flowers, small plants and vegetables planted in garden

Making data tables more accessible

2019-12-18T00:00:00Z

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.

Whilst working at Office for National Statistics (ONS) I worked with my content design colleagues Laura and Paul to improve our tables.

We also worked with accessibility specialists at the Digital Accessibility Centre and the UK government accessibility community. I'm sharing these notes now before they're lost in a Google Drive forever.

Use semantic mark-up

Use <th> tags to define the header cells.
Use <caption> tags. Captions are like headings for tables, and they help screen reader users understand whether they should listen to, or skip the tables.
Don't cram sentences or meta data that describe the table (like geographic coverage) into table cells.
If you need to add extra content like footnotes, wrap the whole table in a <figure> tag and insert a <footer> tag to hold the footnotes.
If you're using <figure>, it's probably best to use <figcaption> instead of <caption>.

Avoid complex markup

If you're using colspan everywhere to merge cells it's probably a sign your table is too complex.
Split complex tables into a few small ones.

Think about structure

Think about structure, not just the visual layout.
Don't split text and headings across cells.
Remember that tables give structure to data.
Avoid using cells simply to control the layout.

Borders can help

Borders (horizontal and/or vertical) can help users to read complex tables.
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.
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.

Avoid blank cells

Don't leave cells blank.
Explain why there isn't a value.
If space is limited, use "N/A" (to mean “not applicable”).

User research questions for data users

2019-12-09T00:00:00Z

A list of questions to help with user research when designing data things.

I was inspired to write this after reading Andrew Duckworth's excellent post design for real data. 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.

So, inspired by that post, here's my list of question aimed at end-users of data.

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.

How do you find the data? Where do you start?
Which specific bits of the data do you need and why?
What decisions does the data inform?
What is your end goal?
What software do you use to interrogate or manipulate the data?
What manual tasks do you need to do every time?
Which file formats are most useful?
How will you know if the data is updated? What will you do then?
What will you do next with the data?
Who will you share the data with? How?
What other sources of data you use?

Thanks

Thanks to Alison, John, Rob, Jeremy, Jason, Rosalie, Louise and the team at Swirrl who have been helping me to get better at this data stuff.

What have I accomplished this decade?

2019-11-14T00:00:00Z

A list of big things that I’ve done over the past 10 years.

Got married
Had our first baby
Had to have our dog put down (RIP Harry)
Worked at a design agency
Moved house
Had our second baby
Went freelance
Started a design meet-up
Became a 2 car family
Got my first proper UX role
Climbed the Welsh 3 peaks
Had our third baby
Decided to stop having babies
Became a civil servant
Hired a whole design team
Started working at Swirrl
Got my first proper remote job
Became a 1 car family

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.

Anyway, here's a similar post I did when I reached thirty.

Accessibility checklist

2019-11-07T00:00:00Z

A list of accessibility recommendations; covering typography, content, layout and interaction.

Typography

Nest headings in order (for example, h1, h2, h3)
Don't skip heading levels
Use semantic mark-up (for example, headings, lists and blockquotes)
Links should look like links (for example, blue and underlined)
Lines should be less than 80 characters wide
Add suitable vertical spacing between lines and paragraphs
Avoid italics, block capitals or justified text
Use a san-serif font with thick letters
Make sure text can be resized
Responsive Type and Zoom by Adrian Roselli

Read my post about how improving typography can help us to meet user needs.

Written content

Use plain English
Explain unusual words and jargon
Explain abbreviations in the first instance
Don't rely on link title attribute
Put the most important information at the start
Explain what a user has to do in a clear and concise way
Use headings and lists to break the content into chunks
Download links labels should include file format and size
Headings, links and button text must be unique and descriptive
Each page should have a unique, descriptive h1 and page title

Tables

Make sure tables are accessible
Only use tables to present data
Use tables as accessible alternatives to charts and infographics
Split complex tables into multiple small ones
Use correct table markup for headers, rows and cells, so screen reader users can understand and navigate them

Read my post about making data tables more accessible.

Charts

Read my post about accessible charts.

Colour and contrast

Check colour contrast between foreground and background elements
WebAIM have a web based tool, or Contrast is a great Mac based tool
Check design works in black and white
Don't communicate using colour alone
Check design works in high contrast mode
Read An interactive guide to color & contrast
Who can use

Interaction

Check design is functional when using a keyboard to navigate
Check it's visually apparent which page element has current keyboard focus if it’s interactive, it needs focus styles
Make sure scrollable regions are focusable
Make clickable areas (target size) at least 44 pixels
Use aria-current if you're styling active page links
Complex interface components, like sliders, should be avoided when simple solutions, like a text input, can be used instead
If an experience cannot be made accessible, create another route for users to get that information

Forms

All form inputs should have labels and be linked with a 'for' attribute
Group radios together with a <fieldset> and a <legend>
Forms and interactive elements should have useful hints if needed
Avoid using placeholder text, because it disappears when users start typing
Error messages should suggest ways to fix errors
Error messages should show a summary of errors above the h1 and move focus to it
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
Example search form mark-up
Close buttons
Be careful with input type="number"
Is input type="date" ready for use in accessible websites?

Images

Images should have good alternative text
If images are purely decorative, then they need an empty alt tag alt=""
Avoid using images of text

Read my post about SVGs icons.

Layout and structure

Use HTML sectioning elements like <header>, <main> and <nav>
Add a skip to main content link
Layout should be consistent and predictable
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")
Check reading and navigation order is logical
Check page is readable and functional when text size is doubled
Don't use duplicate id attributes

iframes

Use the iframe title attribute to give the content a descriptive title
Make sure interactive elements inside an iframe are usable with a keyboard
Make sure interactive elements have a clear focus style
Test the iframe is readable and functional with browser zoom at 200%
Test the content doesn't overflow or become truncated when font size is increased

Manual tests

Check the service can be operated with…

a mouse
a keyboard
a touch device
CSS off
increased browser zoom
increased browser font size
high contrast mode
speech recognition software, like Dragon NaturallySpeaking
screen magnification tools
screen readers
a range of browsers and devices

Automatic tests

Remember that automatic tests aren't perfect.

It’s important to note, however, that automated accessibility testing tools can only catch 30-50% of your accessibility defects. — Deque

Read building the most inaccessible site possible with a perfect Lighthouse score from Manuel Matuzović.

Using Shortcuts app to add location data to my posts

2019-11-06T00:00:00Z

I've been playing around with the Shortcuts app since they added it to iOS. It allows you to string together actions to create automatic workflows.

I think it has a lot of potential for adding some IndieWeb features to my blog, which previously felt out of reach without using services like Instagram or Swarm (Boo!).

Borrowing an idea from Jeremy Keith

I spotted a while ago that Jeremy has location checkins 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.

I also realised that Jeremy passes the latitude, longitude and zoom level into an Open Street Map url that allows users to click through and see a map of the checkin location.

https://www.openstreetmap.org/#map=15/51.2211/4.3997

Create a "copy my location" workflow

So I started playing with Shortcuts and came up with this workflow…

Get location (of my phone)

Extract the latitude, longitude and city as 3 separate variables

Insert those variables into a text template (which happens to be a short snippet of html)

Then copy that to my phone’s clipboard

Screenshot of Shortcuts app

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.

Example

Posted from Cardiff, United Kingdom

HTML

<a href="https://www.openstreetmap.org/#map=9/51.47608788174919/-3.179009460568023">
Posted from Cardiff, United Kingdom
</a>

Next steps

There is lots of potential for tweaking this workflow, and reusing the data to create embeddable maps, or categorising posts by location for example.

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 image post template. Although that one has more moving parts, so I need to iron out a few things before sharing it.

Going full Monzo

2019-11-05T00:00:00Z

I’ve recently switched my bank current account to Monzo.

Beta user

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.

Overdraft

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.

Switching

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.

Manually switching was a pain.

It highlighted how easy it can be to update your direct debit details with user-centred companies like Bulb

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.

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.

Benefits of switching

I’m trying to be more sensible with my spending and I think Monzo helps me do that.

I love that I can put money aside for bills into pot, and clearly see available spending money that’s left for the month.

I also like that, at a glance, I can check whether I’m spending too quickly or that I'll have money left over.

Conclusion

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.

It would be nice if all companies I dealt with had the same great service design as companies like Monzo and Bulb.

Work trips 2019

2019-11-04T00:00:00Z

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 something similar last year. I was slightly surprised (and pleased) that even now that I’m working remotely, I’m still getting about a bit.

20 Individual trips

11 Unique places

Places

Abergavenny
Bristol
Cardiff
Coventry
Edinburgh
London
Manchester
Newport
Reading
Swindon
Titchfield

Reasons for trips

Conference, training or workshop
Meeting
Remote work
User research

Finally went to Ty Cwrw in Mumbles last night, tried a lovely Tenby Brewing x Tiny Rebel ale

2019-11-03T00:00:00Z

Finally went to Ty Cwrw in Mumbles last night, tried a lovely Tenby Brewing x Tiny Rebel ale

Coffee beans

2019-11-02T00:00:00Z

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.

Peru Cajamarca Regional Select

Process: Washed
Tasting notes: Tangerine, Maple Syrup, Macadamia
Type: Single origin
Roaster: Clifton Coffee Roaster, Bristol

Finca Chayote

Process: Natural
Tasting notes: Sweet Pineapple, Cocoa Finish
Type: Single origin
Roaster: Crankhouse Coffee, Exeter

Organic Merchant's Blend

Process: Not sure
Tasting notes: Dark Chocolate, Raisin, Nutmeg
Type: Multi origin
Roaster: Cru Kafe, London

Tiny Rebel beer mat

2019-10-26T00:00:00Z

Tiny Rebel beer mat

Design workshops

2019-07-06T00:00:00Z

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.

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.

Design workshop collections

Here are some sites that list a range of design workshops, activities and exercises…

A list of design workshop methods

Here are some links to specific design workshop methods…

Writing user stories

2019-06-28T00:00:00Z

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 wrote in my weeknotes last month… "the middle bit is quite easy to write, the user groups are a little more difficult, and the “so that” bit is really difficult".

Here are some notes that I pulled together on how to write better ones (borrowed heavily on the excellent advice in the GOV.UK Service Manual).

Format

As a… [who is the user?]
I need to… [what does the user want to do?]
so that… [why does the user want to do this? What is their goal?]

Tips

User stories are tasks that users must complete, or knowledge they must acquire to inform a decision.
A user in this case does not have to be just one person. It can mean a broad group of people.
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.
Try to write from the users‘ perspective. Use the same language that users would use.
Try to describe the problem, not the solution.
If you need to add more detail, try writing acceptance criteria. A list of points that indicate when a user story is complete.

Co-working spaces in Cardiff centre

2019-06-19T00:00:00Z

Updated on 1 November 2019.

Tramshed
Little Man Garage – Unlimited coffees/teas for £7, closes at 3pm, proper coffee, not strictly co-working though
Indycube – Multiple locations in Cardiff, £10 per month for 1 day per month
Cardiff Eagle Lab
Cardiff Central Library

Disclaimer, I've not tried all of these (yet). But, thanks to people for responding to my tweet asking for tips.

Remote working pros and cons

2019-06-17T00:00:00Z

After almost 10 weeks of working at Swirrl, here's a quick post that lists some of my pros and cons of working from home.

Pros

Time to focus

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.

More time with family

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.

Less driving, more walking

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.

Cons

Harder to form relationships

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.

Sitting in the same room can get boring

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.

Sometimes, it's hard to focus

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.

Weeknotes – series 03 episode 05

2019-05-20T00:00:00Z

Wellcome data labs

I was excited to learn about Wellcome Data Labs, 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.

Although the title nearly put me off (Tableau Best Practises Put to the Test), 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.

Laura Kösten

I had a chat with Laura Kösten, 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.

She showed me some of the stuff she's working on, including this data summary tool which helps publishers to describe datasets, with the most useful information that users need.

IF

IF, according to their website are a "technology studio, specialising in ethical and practical uses of data". They have a really nice pattern library of data sharing components, 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.

They also have some data ethics principles which are available to download in poster format too.

My favourite is "understand the flow of data". This is really hard and so important I think.

Writing requirements as user stories

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.

I pulled together a few notes (leaning heavily on the excellent advice in the GOV.UK Service Manual).

As a… [who is the user?]

I need/want/expect to… [what does the user want to do?]

So that… [why does the user want to do this?]

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.

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.

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.

Chat to Jeremy Yun

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.

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.

Things we could try measuring

It lead me to think more about measuring the performance of data publishing and what the metrics could be…

Apart from common stuff like increases in page views and user satisfaction, what kind of metrics are important to data publishing?

These are some early (hopefully educated) guesses combined with a few I’ve pinched from other places…

Increase automatic publishing workflows
More organisations publishing
More datasets
Increased data quality
Increased data standards
Openness of formats
Completeness of metadata
Regular updates
Reduce requests (increase self-serve)
Reduce duplication (more shared code lists and reference data)
Ability to format/filter data to low granularity

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.

Other things I’m reading

Weeknotes – series 03 episode 04

2019-05-15T00:00:00Z

This week I have been mostly thinking about user-centred design and how to apply it when designing, measuring and improving data services (again).

DWP's presentation at Data Bites

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 bringing skills demand data to local government via a digital service.

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.

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.

Looking forward to seeing what Aleks, Pete and Ryan do next.

Selecting multiple things from a long list

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 accessible components for search interfaces.

It's relevant to this post I wrote whilst at ONS (Office for National Statistics) called picking things from a long list and it feels like a problem I'll come up against again when designing data interfaces in future.

Challenges with searching, finding and filtering seems to crop up in every conversation I have about data.

Common problems facing users of data services

I've been looking over some past projects at Swirrl to see what I can learn from previous user research work. The MHCLG (Ministry of Housing, Communities and Local Government) user engagement review was summarised in this blog post.

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.

I put together a list and shared them on Twitter…

Thinking about common data service problems…

– Low awareness of service
– Finding things
– Complex content
– Data quality
– Maintenance
– Visual presentation
– Interface usability
– Too technical
– Geography is hard
— Benjy Stanton (@benjystanton) May 8, 2019

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.

GOV.UK Registers have a done a good job of solving common tasks

Obviously I'm not a true user of GOV.UK Registers but I think they've done a great job at creating a usable interface for exploring datasets.

They have done a really nice job of meeting user needs that I've observed, for example…

A simple search with filters
Enough important metadata (description, row count, field descriptions) without being overwhelming
Clear links to get the data (via download or API)
A history of changes
Subscribe to be notified of updates
A preview of the data in tabular format

The also have a nice poster that describes the characteristics of a register (I love a good poster) in this article by Ade Adewunmi.

How do you define success for a data catalogue?

I've been thinking a lot about Giuseppe Sollazzo’s tweet about how we can define success for a data catalogue.

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.

Luckily Steve Messer is blogging good stuff about OKRs right now.

Data inclusion scale

I also had a chat with user researcher Louise Petre about her work on data.gov.uk and the data inclusion scale. You can read a bit about the data inclusion scale in this post.

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.

It reminded me that Matt Knight worked on something similar whilst he was at ONS. Here's his blog post about it: A data literacy scale?.

Other things that I'm reading

What is open data from DTA (Digital Transformation Agency) Australian Government
Understanding your services by Ben Holliday
Understanding services through user needs  by Jeanette Clement

Weeknotes – series 03 episode 03

2019-05-05T00:00:00Z

Mapping data ecosystems

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.

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.

I've been using Moqups 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.

Data user personas

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.

Alongside project work, I've been taking a step back to look at the similarities in user needs that are visible across different data things I've worked on.

Teams and people talking about data in a user-centred way

Continuing on from last week, I'm still on the hunt to discover (and remember) all the people and teams I can find that are working on systems that publish (or enable access to) data.

I've found some good things so far…

A discovery into data publishing formats – a blog post from the Race Disparity Unit at GDS
You can lead a person to data, but you can't make them use it – a blog post by Thea Snow that I spotted after Kit Collingwood retweeted it
Open data discovery outcomes – detailed research outcomes from the Digital Transformation Agency (DTA) in Australia

… of course ONS digital publishing are always doing good things in the space too.

More like service design

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.

This feels like a good opportunity to keep looking at the big picture for a while.

Weeknotes – series 03 episode 02

2019-04-29T00:00:00Z

Week 2 at Swirrl started on Tuesday after the Easter bank holiday weekend and the amazing UK weather.

Looking for data designers

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!

Who’s out there using user-centred design techniques to help people publish and use open data? Let’s be friends?
— Benjy Stanton (@benjystanton) April 23, 2019

Meeting more of the team

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 Julija and fellow designer Guy.

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.

Guy's skills sound more technical than mine, closer to that of front-end developer. He's busy improving the Publish My Data pattern library. He's been busy adding automated visual testing with storybook.

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.

I've been catching up with lots of her blog posts, including this one about mapping data ecosystems, which introduced me to this mapping data ecosystems tool by the ODI (Open Data Institute).

More wandering around Manchester

I managed to visit the Magma book shop 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.

Trip to London

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).

Working from home

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.

Weeknotes – series 03 episode 01

2019-04-23T00:00:00Z

View from Swirrl's shared office in St Peter's Square

Some short-but-sweet weeknotes about my first ever week at Swirrl.

Last week was my first week at Swirrl. 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).

I was convinced to join Swirrl thanks to their digital-first hiring campaign (read: two really well written blog posts about who they were looking for and what it's like to work for them). I also identify with their mission of publishing open, linked data to help public sector organisations provide better services and make better decisions.

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 Bill, Ric, Jamie and others. Their office is located in a very nice co-working space called WeWork (in St Peter's Square).

I also enjoyed wandering around Manchester, highlights include V-Rev 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 stationery shops I spotted nearby.

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

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.

As for work stuff, I got introductions to some of the core concepts of Swirrl's work, like Linked Data and RDF.

They also have a pattern library that is built with Gatbsy so I had a play around with that. Gatsby's tutorial 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 Storybook too, so will aim to play around with that at some point.

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 Environment Agency

How to be a more resilient service designer

2019-02-23T00:00:00Z

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.

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?
— Benjy Stanton (@benjystanton) February 14, 2019

I got an amazing response, and I recommend you take a look at the entire thread, but I've tried to condense the tips into this blog post.

Tips for being a resilient service designer

Buddy up
Talk to others outside of work
Build relationships
Remember it’s a long game
Visualise your problems
Switch off
Zoom out
Keep going

Buddy up

It’s a team effort
You will lose the will to live if you're the only one driving change
Work with someone who is able to support and advocate for what you're doing
It doesn’t have to be another service designer (someone with similar agile, user-centred, silo busting mindset)
Share the load of firefighting

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
— Sophie Dennis (@sophiedennis) February 14, 2019

Talk to others outside of work

Talk it over with people who aren't involved
Go to meet-ups like OneTeamGov
Network on social media
Get a mentor

Build relationships

Go in as an explorer, rather then an expert
Focus on building networks not breaking down silos
Try to see things from other people's point of view
Find a balance between organisational goals and user needs
Learn about the personalities and values of the other stakeholders

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.

Also remember that change needs time. I’ve learned patience over the last ten years of working in and around gov.
— rufflemuffin (@rufflemuffin) February 15, 2019

Remember it's a long game

Change needs time
Be patient
Trust the process
Learn to spot opportunities
Think strategically about where to plant seeds and where they might grow best
Remember that others are trying to reach their own goals

Visualise your problems

Map out your stakeholders and priorities
Frame the big challenges by breaking them down into smaller problems and attach rough odds of success
Knowing how hard a problem is makes it less stressful to fail
Focus on smaller projects or task you can finish
Make sure your maps are accessibile to everyone
Go easy on jargon

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”
— Harry Vos (@vosageroll) February 15, 2019

Switch off

Don't stare at the wall/screen trying to design solution
Go for a walk
Change your environment
Take a lunch or coffee break
Listen to music
Take up surfing or yoga
This can give you time to arrange your thoughts without realising it

Zoom out

Remind yourself of the context and purpose of the service
Remind yourself of the outcomes you want for the people using the service
Try not to attach your self-worth to the immediate feedback you get

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.
— (((Nic Price))) (@nicprice) February 14, 2019

Keep going

Trust yourself
Celebrate all the wins, no matter how small
Recognise that it's hard
Recognise that it takes emotional investment and mental strength
Keep reminding folk of the duty of doing the right thing

Thanks

Thanks to everyone who helped (apologies if I forgot anyone).

Weeknotes – series 02 episode 06

2019-02-17T00:00:00Z

Short weeknotes feat. prototyping, Service Design in Government, my strong tweet game and Andy Bell.

Prototyping in code

I got stuck into my new team's pattern library and prototyping kit this week. I put my headphones on and listened to Joe Cornish on 6 music. It felt good to play around with code.

Service Design in Government

I also made some good progress with my slides for Service Design in Government. I should have them finished up next week.

Strong Twitter game

I did great at Twitter this week too. My twittering about struggling with resilience when doing service design and a new data sticker went down pretty well.

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?
— Benjy Stanton (@benjystanton) February 14, 2019

I also became the 100th person to contribute to Andy Bell's awesome Personal sites project.

Weeknotes – series 02 episode 05

2019-02-08T00:00:00Z

Laura’s leaving do

I’m writing these notes on my phone, on the train from Swansea to Cardiff. It’s Laura’s leaving do, so a few of us are heading to Tiny Rebel.

Another check-in with Andy

Even though I’m no longer working for him, me and Andy are continuing our one-to-ones.

This week I needed an extra one! As always, I’m thankful for his support.

Website

We’re making a website for a thing in work and it’s finally making progress, thanks to Leah’s hard work. She has that great ability to pin people down and get them to make a decision.

Often in the civil service these kind of decisions can take weeks to make, so having people like Leah on your team is essential.

Making plans for Service Design in Government

I’m speaking at service design in government next month with Kieran. We’re making headway with our talk outline and slides.

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.

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.

Snarky-ness aside, ONS really has a generous and supportive attitude to training and conference attendance.

Making plans to shadow a field officer

After a recommendation from Tom, I’m trying to organise a day when I can shadow a field officer.

These are the staff that ONS employ to go door-to-door and help people to fill in surveys.

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.

Forgot to mention my stand-up desk

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.

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.

I assume it’s better for my health too, but I’m certainly not noticing any adverse effects so far.

January 2019 bookmarks

2019-02-02T00:00:00Z

Your Talk of the Year?: 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.
Changing the name of a service: 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.
Stepping away from Sass: 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.
Interact London 2019: 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.
Introducing progression.monzo.com!: A progression framework is a tool that maps people's competencies (their skills and knowledge) to compensation (how they're rewarded for them financially).
The Design Sprint Canvas: 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.
Communities of Practice: The Missing Piece of Your Agile Organisation: 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.
You don't know what you're missing without session replay.: 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.
Understanding services through user needs: 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.
BEM for everyone else: 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.
Accessible SVG flowcharts: 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.
VoiceOver and list-style-type: none: 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.
Make Time: Make Time is Jake's new book. It's about creating time and finding focus in daily life. Coming in September 2018.
What does the CEO of Front do?: 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.
Research Questions Are Not Interview Questions: 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.
Title Texts Suck: 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.
The End of the Beginning of Digital Service Units: 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.
Creating Accessible SVGs: 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:
Happo is a visual regression testing service for React.: 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.
Starting a Design System: 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.
CSS Feature Toggles: 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.
Help us start a data revolution for government: 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.
The Amen break is the ultimate design pattern: 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.
Learn Vanilla JS: 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.
I'm a Web Designer: Something that I am increasingly uncomfortable with is our industry's obsession with job titles.
Constrast Checker: Skip to main content Constrast Checker Text
Making your service more inclusive: 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.
Announcing a11y.reviews: 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.
Should we measure if a digital service is a good citizen of the web?: I don't like being annoyed. It is unhelpful.
An alpha alpha approach: Mr Downey spurred a bit of conversation on Twitter about the idea of alpha stages in the GDS delivery cycle.
Blogging Guide: 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.
A guide to agile communication: 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.
Designing design: 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.
Participant needs - Alpha design hypotheses: This discovery was to help us understand how we might better design our user research.
Designing for the web ought to mean making HTML and CSS: 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.
Representation: 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.
Table Design Patterns On The Web: 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.
We are not our users: we should not tell them how to feel: 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.
Talk: Tabular data on the web: 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.
On Strategy: The strategy is delivery. Again.: 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.
Two sides of service design: 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.
Outcome-based service mapping: 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.
Why user researchers and service designers should be best friends: 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.
HTML, CSS and our vanishing industry entry points: 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.
Researching how we ask users about their ethnicity: 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.
A reading list for The World-Wide Work. ethanmarcotte.com: 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.
New Year, New Website: 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.
Leadership skills when you're in the business of disruption: 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.
Openness and Longevity: 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.
On Simplicity: 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.

Weeknotes – series 02 episode 04

2019-02-01T00:00:00Z

Watching services week from my kitchen

Services week

It was services week – 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.

Early on in the week Lou Downe did a great talk on the characteristics of a good government service. 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.

Looking after the design team

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.

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.

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.

Went to my first show and tell

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.

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).

Snow and remote working

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.

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.

Emma Boulton has been tweeting recently about how it would help her to balance the demands of having young children and accepting new work.

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.

Weeknotes – series 02 episode 03

2019-01-26T00:00:00Z

We got a chance to walk around Coventry cathedral on Thursday lunch time

This week I travelled to Newport, Titchfield and Coventry and I realised while writing these that I'd been on 10 different trains!

Logos, letters and campaign websites

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.

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.

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.

The value of observing user research

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.

For the whole day on Thursday I watched people complete the Census by going through a process that roughly followed this timeline…

User becomes aware of the Census via social media
A letter is sent to the household
The user goes online to complete the Census

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…

Post arrives in different ways and at different times
People have different systems in place for assessing whether a particular letter is important or not
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
Some people will take a photo of the letter so they can fill out the survey on their phone on the bus
Some users will plan a time sit with their partner in the study and use a desktop PC

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.

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.
— Benjy Stanton (@benjystanton) January 24, 2019

Weeknotes – series 02 episode 02

2019-01-19T00:00:00Z

Chatting to the design team

On Monday I spent some time catching up with the permanent interaction designers working in my area. Even though they'll be line-managed by a non-designer (boo) I've been asked to lead them in terms of objectives, progression, training and kit.

Cross-gov design train

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.

There were a few others I knew on that train too. In total we counted 13 designers!

Off site away-day

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.

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.

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.

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.

Panic attack?

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.

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.

Finishing on a high

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.

Things to focus on next week

I'm visiting the Titchfield office on Monday to chat with the comms team about the Census brand
I'm going to help the Census website team pull together some user needs, so we can begin validating them
I'm going to observe some user research on Thursday

Weeknotes – series 02 episode 01

2019-01-11T00:00:00Z

This was my first week back after Christmas and my first week on the Census cross-service team.

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.

Resisting the move

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?

Focus on something

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:

marketing campaigns
paper letter
people calling at the door
a big fat online survey
email reminders
call centres

Service design fun

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.

My plan over the next few days and weeks is to:

meet the wider team
understand the different products
draw up a service blueprint
map out the stakeholders
perform a service walkthrough
identify gaps

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:

help improve a service that will be used by everyone in the country
work across several multidisciplinary product teams
learn about another bit of statistics (how survey data is collected)

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.

*in reality my new desk is about a 1 minute walk away from my old one.

Christmas day dinner timings 2018

2018-12-27T00:00:00Z

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.

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).

Turkey

06:30am Bring turkey inside to dry and warm up for 2 hours
08:00am Make glaze
08:00am Preheat oven 180°C fan
08:30am Cook turkey for 3½ hours (covered with foil)
11:00am Remove foil for last hour
12:00pm Check turkey – give it another 30 to 60 mins if we need
12:00pm Rest turkey for 2 hours (covered with foil)

Starter

12:20pm Preheat top oven
12:30pm Chop fruit and prep prawns and salmon
12:50pm Roast butternut squash roti for 40 mins

Oven

12:50pm Honey roast parsnips for 60 mins
13:10pm Parsnips for 40 mins
13:15pm Roast potatoes for 35 mins
13:15pm Spinach and cheese parcel for 35 mins
13:15pm Cauliflower cheese for 35 mins
13:20pm Carrot and swede for 30 mins
13:20pm Braised cabbage for 30 mins
13:25pm Pigs in blankets and pork stuffing for 25 mins

Boil

13:30pm Sprouts for 9 mins
13:30pm Carrots for 7 mins

Microwave

13:30pm Sprouts with bacon for 6 mins
13:30pm Bread sauce for 3 mins
Yorkshire pudding
Veggie stuffing
Gravy

Recipes

December 2018 bookmarks

2018-12-21T00:00:00Z

Adding value, by adding values: 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.
Design native userflows right inside Figma and Sketch with Flowkit 2.0: 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.
Releasing Design Systems: 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.
Reluctant Gatekeeping: The Problem With Full Stack: 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.
Prototypes and production: 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.
Accessible SVG Icons with Inline Sprites: If we were searching for reasons to use icons on a project, we don’t need to go far in order to find them.
Unlocking Accessibility for UX/UI Designers: 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.
An Alfred Workflow for WebPageTest: 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.
Sketch plugin for charts: 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.
About HTML semantics and front-end architecture: 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.
What I Learned in Six Years at GDS: When I joined the Government Digital Service in April 2012, GOV.UK was just going into public beta.
Thinking about iteration: 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.
The Ecological Impact of Browser Diversity: 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!"
Addy Osmani's 18-Point Web Performance Checklist: Web performance is critical for user experience. Prioritize it before it becomes a problem.
An alpha alpha approach: Mr Downey spurred a bit of conversation on Twitter about the idea of ‘alpha’ stages in the GDS delivery cycle.
Good design doesn’t just happen: 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.
Squoosh: Compress and compare images with different codecs, right in your browser.
Accessible-as-possible colour palettes · Henry Lau: 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.
Being bolder – reflections 18 months into my work at NHS Digital: On 5 July 2018, the National Health Service turned 70. I was exactly 13 months into my own time with the service.
How to download your Flickr photo library and transfer it to Google Photos or iCloud Photo library: 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.
How to design the ultimate Bullet Journal for 2019 (no art skills required): 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.
Shared Values are Overrated: 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.
Remove Background from Image – remove.bg: 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.
Designing Your Future: 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.
Sloganeering for stickers: 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.
Putting users first is not the answer to everything: User-centred, user need, user story, person-centred — hmm, I’m trying to think of some other variations, I’m sure there’s more!
Five things Benjy taught me.: 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.
The practical value of semantic HTML: 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
Understanding semantics: 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.
Why every design system needs a service designer: 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.
6 practices for user-centred civil servants: 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.

Five things Andy taught me

2018-12-19T00:00:00Z

This is my response to Andy’s blog post five things Benjy taught me. If you’re tired by our cheesy web bromance, turn away now.

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.

Here are 5 things he helped me to understand…

Love the Web — 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).
Work in the open — 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.
Support culture — 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.
Trust your team — 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.
Be human — 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.

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.

A user manual for me

2018-12-14T00:00:00Z

View my latest user manual.

I’m joining a new team in Office for National Statistics (ONS), so it seemed like a good time to finally create a user manual for me.

Conditions I like to work in

I like to work in open, inclusive environments
I like to be embedded into multi-disciplinary agile teams
I prefer structured meetings that allow everyone to voice their opinion and vote on the best way forward
I like to be surrounded by good design (posters and journey maps on walls, stickers on laptops)

The times/hours I like to work

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
7am to 3pm are the hours I work most days
I work best in the mornings

The best ways to communicate with me

I’m happy to use a mix of communication methods (face-to-face, email, Slack, Skype)
You’ll get the best answers from me if I’ve got time to prepare

The ways I like to receive feedback

I love demoing my work and presenting at show and tells
I need time to prepare for feedback sessions
I find over-the-shoulder comments difficult to process

Things I need

To regularly observe user research in person
Good digital tools like Trello, Slack and Google Drive
The ability to have regular quiet days (no-meeting days and working-from-home days)

Things I struggle with

I’m an introvert, which means too many meetings can drain me
Long email threads with lots of contributors
Acronyms and jargon

Things I love

Government design principles
Web standards
Accessibility
User-centred design
Government Digital Service (GDS) service standard
Blogging and sharing my thoughts on Twitter (let me know if anything should be kept private)

Other things to know about me

I have 3 young kids
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
I value boring design over creating shiny things

NaBloPoMo round-up

2018-11-30T00:00:00Z

I did it! 30 posts in 30 days!

I spent more time tweaking the patterns and components on the blog, rather than writing actual articles, but I think that's okay.

Here's a quick highlight reel

I created a new image post template and blogged about it
Added a link to my RSS feed to the footer
Made a list of words that my 2 year old says
Made a list of interaction design tools that I use
Started adding some indieweb features to the site in the shape of microformats
Blogged from my phone using the Working Copy app
Created a progress bar and key figures dashboard for my blog
Next and previous links to the bottom of articles

Thanks to Jukesie for encouraging me to do it. And to Michelle for putting up with me blogging every night.

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:00Z

Nice people saying nice things about the ONS website

2018-11-28T00:00:00Z

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.

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).

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.

I've congratulated @mr_dudders and @ONS for it separately -- and I will never stop. This is one of the biggest single improvements in a websites design ever. pic.twitter.com/kXB4s75G1G
— Tom Forth (@thomasforth) November 27, 2018

Quietly (too quietly!) the @ONS have been doing some exceptionally good work properly publishing their stats. https://t.co/Dg7QNQdW8T
— Tom Loosemore (@tomskitomski) November 27, 2018

Gotta love @ONS Quietly getting the job done. 👏 👏 👏 https://t.co/qAGWKbeXar
— Steve Foreshew-Cain (@s_foreshew_cain) November 28, 2018

November 2018 bookmarks

2018-11-27T00:00:00Z

The hidden cost of design tasks: 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’.
Kickoff Kit: Tools to Help Teams Work Better Together: 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.
How we document components and patterns in the GOV.UK Design System: 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.
Design Systems: Mastering Design at Scale: 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.
Improving Readability With Bigger Fonts and Higher Contrast: 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.
The Business Case for Digital Accessibility: 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:
UX Debt: How to Identify, Prioritize, and Resolve: 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.
Product People West & South: Product for APIs, what’s the difference?: 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.
Prompts for design leaders working with product teams: 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.
Digital Land: 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.
11 more things to hate about hotels – iterate: 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.
Design System London: Accessibility in the GOV.UK Design System: 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.
5 Questions with Giorgia Lupi: 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.
White-label agile wall templates: 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.
A rota for retrospectives: 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.
Learning to enjoy the size of the problem: Some thoughts about having fun at work. Last week I had a good time speaking at a Glug event in Reading.
Authoring Tool Accessibility Guidelines (ATAG) Overview: 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.).
Make Technology Work for Everyone: introducing digital accessibility: 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
Voxxed Thessaloniki 2018 - Automated Visual Testing: The Missing Part of your CI Pipeline?: Voxxed Thessaloniki 2018 - Automated Visual Testing: The Missing Part of your CI Pipeline? by Viv Richards
Loyal to the network [redux]: 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.
What if boldness were an explicit value of the civil service?: 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.
Local boundaries in England: What is ‘place’?: 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.
UX is negotiation: 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.
Variable Fonts and Wide-Screen Layouts: Adopting Data-Driven Progressive Enhancements: 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.
Product Land (Part 3): This is the 3rd and final part of an essay about design and possibilities.

Blog stats

2018-11-26T00:00:00Z

A quick post of blog stats that used to be on the homepage.

Note, this content used to be dynamic, but now it's static.

173 posts
25 categories
42 pages
5 images
4 notes

The stickers on my laptop

2018-11-25T00:00:00Z

The stickers on my laptop

Here are the descriptions for each of the stickers on my laptop lid right now. Descriptions go from top-left to bottom-right.

Daliwch ati: The welsh translation of “keep going”
International design in government: A conference and community of designers working in government around the world
Florence: The content management system behind the ONS (Office for National Statistics) website
Be bold: From What if boldness were an explicit value of the civil service? by Janet Hughes
Customise my data beta: A mission patch for a project at ONS (Office for National Statistics), designed by Tom
Smiley face: A hand drawn smiley face on a blue dot sticker
Order: From a set Andy brought in
One Team Gov: The One Team Gov logo
Command: A pixelated Apple keyboard command icon from The Icon Handbook
Users First: A classic GDS (Government Digital Service) motto
Make data part of the web: One that I designed, based Leigh Dodds’ open data publishing principles
Better government by design #oneteamgov: A One Team Gov motto
UX Wales: A UX (user experience) meet-up in Cardiff
Change takes time: Part of the Practical Action set by Alyson Fielding
Making data meaningful for everyone: Designed by Carlie for the ONS (Office for National Statistics) digital content team
Data discovery alpha: A mission patch for a project at ONS (Office for National Statistics), designed by me
You are not the user: By Marianthi Makra
Cake driven development: Part of a set from DXW
Build the right thing: From Pilot Works
#OfTheGovernment: A coveted shiny “hashtag of the government” – I think maybe Laura saved this one for me?
ONS (Office for National Statistics): 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
What is the user need?: Another classic GDS (Government Digital Service) sticker
Go where the users are: I designed this one whilst I was working at Leadin – a Finnish service design agency that have now been bought out by Gofore
Loyal to the network: I found this one in the sticker tub in work – based on a post by Jukesie
ONS design team: One that the ONS (Office for National Statistics) design team designed and printed in-house
Medical notifications and renewal service alpha: A mission patch from the first service I worked on at DVLA (Driver and Vehicle Licensing Agency)

I’ve added previous and next links, so users can skip to the posts published before and after this one.

2018-11-24T00:00:00Z

Speaking at Service Design in Gov 2019

2018-11-23T00:00:00Z

Looks like me and Kieran will be speaking at Service Design in Government 2019.

The conference takes place in Edinburgh in March and we'll be doing a case study on making stats easier to understand.

Here's a bit about the talk from the conference website;

At this session, you will learn how we:

worked with a multidisciplinary team across our department and the wider organisation
gathered evidence to convince stakeholders of the need for simpler statistical reports
presented our work to senior stakeholders and regulatory bodies
learnt about the needs of end users and internal users
improved the service by co-designing and pair-writing with teams

Hopefully see you there!

A quick review of the Netflix She-Ra reboot

2018-11-22T00:00:00Z

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.

The men are sensitive and supporting without being overtly masculine. Often they are camp and their sexuality is ambiguous.

It’s also funny, spooky and full of cool action sequences.

It’s the feminist cartoon series I’ve been waiting for.

Review of She-Ra on Vox

This is a quick test note from my phone. I’m using Working Copy GitHub client for iOS.

2018-11-21T00:00:00Z

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:00Z

My first “no meeting” day

2018-11-19T00:00:00Z

If you follow me on Twitter, you’ll know that I moan about meetings a lot. Lots of people have recommended that I block out time in my calendar to make sure I have space in my week for focussed work.

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.

Too many meetings are a drain on my energy

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;

I'm an introvert
I need time to focus on my design work

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.

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.

Prioritising doesn't work for me

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. Outlook makes it too easy for people 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.

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.

So I created a "no meetings" day

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.

I'm not in "do not disturb" mode

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.

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.

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".

Adding h-entry to the posts template

2018-11-18T00:00:00Z

The next step in getting my site indieweb ready is to add h-entry microformat markup to the posts.

Here's what I've done so far…

Created a new layout called "post"
This will be used for standard blog posts, and is different from "pages" and "image posts"
Moved the <header> and <h1> inside the <article>
Added .h-entry class to the <article>
Added .p-name class to the <h1>
Added a profile image with the class .u-photo
Added an author (as in my name) with rel="author" class="p-author h-card" markup
Added a link back from name to my home page
Added .dt-published class to the published on date
Added permalink for the post to the published on date
Added the .u-url class to the permalink
Added the .e-content class to the full content of the post
Checked it all with the indiewebify.me validator

Example markup (with style classes removed)

<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>

But why?

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.

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).

Next steps

Switch all old posts to this template
Add similar features to the image post

Getting started with indieweb

2018-11-17T00:00:00Z

I decided to add some indieweb goodness to the site. The indiewebify.me validators were really helpful to check things were working.

Here's what I've done so far…

Added rel-me links from the home page to my social media profiles
Made sure links back from social media profiles are using https
Added h-card markup to the home page

Markup

<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>

Next step

Next I want to add h-entry markup to my posts.

A single word that makes the tricky task of changing nappies so much easier

2018-11-16T00:00:00Z

A single word that makes the tricky task of changing nappies so much easier

Introduction to interaction design in gov

2018-11-15T00:00:00Z

What's it like being an interaction designer in a UK government department?

Interaction designers, sometimes known as user experience (UX) designers, are an essential part of digital service teams that want to meet user needs.

They work closely with the entire team, especially service owners, product owners, delivery managers, user researchers, content designers, service designers, software engineers and quality assurance (QA) testers.

What do interaction designers do?

Create design ideas based on user research
Design mock-ups
Create prototypes in code
Decide on high-level user journeys and micro-interactions

Other useful skills

Graphic design
Content design
Accessibility
Front-end development
User research
Information architecture
Responsive web design

GDS (Government Digital Service) design resources

Day to day

Sitting at the computer
Much of your time will be spent sitting at the computer, designing things. Don’t forget to walk around and talk to your team. If you're working remotely, tools like Slack are good for keeping in touch, but often Civil Servants are restricted to things like Email and Microsoft Teams.
Meetings
There are lots of meetings. Find a way to attend the important ones, this is where decisions are often made. Although time consuming and energy zapping, one of the strengths of agile working is the shared understanding between the team. The more you hear, the greater the understanding you will have.
Workshops
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. If you're working remotely use collaborative tools like Mural or Microsoft Word. Make sure everyone is included.
Daily stand-up
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?
Show and tell
Every 2 weeks or so, teams organise a presentation where they share their progress. Sometimes called sprint reviews. Often stakeholders from across the organisation are invited. Be prepared to talk about your work and show a few slides. Over time, these slides become a useful resource showing how the work has progressed.
User research
Observe as much user research as you can. Work with your user researcher to plan objectives, and ensure your designs can help answer the research questions. Take notes during research and help the team to analyse the findings.

Basic process

User need is discovered
User needs are uncovered by user research, or other sources of evidence. Business requirements will be introduced by the internal team too. Make sure business requirements meet user needs.
Understand the need
Read any previous user research, talk to the user researchers and subject matter experts. Understand why this thing needs to be added.
Has this been solved before?
Speak to the design team. Speak to the wider government design community. Check the GDS (Government Digital Service) design resources.
Mock-up some ideas
Design a few ideas quickly, these could be sketched on paper, created in a design app like Sketch, Figma, Mural or written out as plain text. Often, simple and obvious ideas are the best. Remember that many users are inexperienced with using computers and digital tools.
Prototype
Sometimes a paper prototype is enough to use during user research. Sometimes an interactive HTML prototype is required.
Usability testing and research
Meet with the user researchers and discuss the prototype and how it functions. If possible, go along and observe the research session.
Repeat
Repeat steps 1 to 7.

Prototyping in code

It can be difficult to use the GOV.UK Prototype Kit for the first time (unless you are familiar with installing things via the command line). Get some help to set things up. Once that’s done, you only need basic HTML and CSS knowledge to get started.

Tools

Pens, post-its, notebook
Macbook
A web browser, like Google Chrome
GitHub account for version control and sharing code (your organisation may use something like Gitlab or Bitbucket)
Visual Studio Code for writing code (other text editors are also available)

Related, my blog post about interaction design tools.

Leave me feedback

2018-11-14T00:00:00Z

Inspired by Simon’s website, I want to encourage people to leave me feedback.

That way, I can continue to improve this website and spot errors more quickly. Positive comments are welcome too. :)

Ways to leave feedback

Submit an issue on GitHub

How improving typography can help us to meet user needs

2018-11-13T00:00:00Z

What is typography?

Typography isn’t the same as "choosing a font".
Typography is about improving the usability and readability of content.
Typography is concerned with the layout, spacing, size, contrast, ordering and grouping of text.

What problems does good typography solve?

Good typography can help users to;

navigate around a page
understand the meaning of content
understand the relationship between different bits of content

How do we know poor typography is a real problem?

I've observed the following in usability testing;

users get overwhelmed when presented with too much content
users find it difficult to scan a pages and pick out information
users squint, lean closer to the screen and complain about small text
strong headings, clear and generous spacing and larger text helps users to scan text and find specific bits

How can we tell if better typography is solving the problem?

Through usability testing and collecting feedback, it should be possible to observe that;

users are able to find the content they are looking for more easily
users find the content easier to understand
users with low vision will be able to read content more easily
users are able to spend longer reading content

100 blog posts

2018-11-12T00:00:00Z

This is my 100th blog post.

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.

It started out as a Wordpress blog with the Kubrick theme. I switched to Jekyll 3 years ago.

I showed early hipster tendencies in 2010 by adding a colophon. I used "Starkers" and "320 and Up" to build on back then (remember those?).

Over half of the 100 posts have been this year. I blame Andy, Dan and Jukesie for encouraging this over-sharing.

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.

I feel lucky to work in a place where I can write openly and honestly about my organisation.

Here's to 100 more.

Interaction design tools

2018-11-11T00:00:00Z

Check out my uses page for an up-to-date list of hardware and software that I use for interaction design.

A screenshot of the dock on my MacBook Pro

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.

Stationery

I've usually got a supply of the following to hand…

Black Pentel sign pens
Assorted Sharpies
Grey Winsor & Newton marker
Post-its
Blu tack
A4 and A3 paper

Google Drive

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.

It's still so far ahead of corporate alternatives (I'm looking at you Office 365 and Sharepoint) in terms of usability at least.

Atom

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).

I hear Visual Studio Code is good now too, so I may switch to that one day.

Jekyll

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.

Using data files has become a big part of my workflow recently too.

Chrome DevTools

Chrome is an essential tool for inspecting and iterating on designs in the browser. Here are a few useful plugins too;

WAVE for checking accessibility
disable-HTML for disabling HTML, CSS or JS
Validity for checking code is valid
45to75 for checking line length
WhatFont for checking font size and line height

GitHub Desktop

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.

Terminal

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.

Trello

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 keyboard shortcuts and Markdown formatting.

Slack

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.

iA Writer

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.

Google Inbox

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.

I think most of all, I'm going to miss the Trip bundles.

Check out my similar post from 2013 to see how things have changed.

Swn 2018

2018-11-10T00:00:00Z

A quick round-up of the things we got up to at Swn.

Swn 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.

Numbers

2 days
5 bands
8 venues

Days

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.

Bands

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.

Venues

We did much better at venues. We went to 8 different venues across Cardiff. A lot of craft ale was drunk.

Next time

I'd definitely recommend Swn, and I'm hoping to go again next year – and see a few more bands. It reminded me of All Tomorrow's Parties, a music festival in Butlins (that was a lot better than it sounds).

Articles I’ve written that have been published somewhere else

2018-11-09T00:00:00Z

Introducing the user-centred design and data community: Design in government
Things we learnt when we hired six designers at the same time: ONS Digital blog
Why ONS needs to hire service designers: ONS Digital blog
We’re hiring five graphic designers (and a front end developer): ONS Digital blog
Finding data by location (my first Design Sprint): ONS Digital blog
Building a design culture, some tips from Leading Design Conference: ONS Digital blog
Picking things from a long list: ONS Digital blog
Enabling users to customise datasets: ONS Digital blog
Getting started with Data Discovery: ONS Digital blog
My first week: ONS Digital blog
Tips for healthy freelancing: Everyday Designer
A Visit To The Eden Project: James Good

Sid’s words

2018-11-08T00:00:00Z

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.

Hello: Ay-oh
Baby (as in himself): Bubba
Milk: Nooz
Ice cream or yogurt: A-nooz
Car: Boom-ba
Sing: Mah-moz
Dance: Nh-nh
Sorry: Yoy-oh
Tummy: Bdum-bdum
Sweets: Num-num
Water: Barf (as in bath)
Jump: Dump
Bird: Wack wack
Dinosaur: Raaas
Dragon: Wack wack a raaas
Shark: Do-do-do

Sid playing with a mirror at Techniquest, Cardiff

Good coffee in places we go for meetings and user research

2018-11-07T00:00:00Z

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.

Our (mostly Andy's) list of coffee shops

This list is curated by the folks at ONS digital publishing, and other nice digital people.

Books and Beans: Aberdeen
The Pocket: Belfast
Yorks: Birmingham
Small Street: Bristol
Full Court Press: Bristol
Baristas: Bristol
Playground: Bristol
Harts Bakery: Bristol Temple Meads
Mok: Brussels
Hard Lines: Cardiff
Little Man: Cardiff
The Scandinavian Coffee Pod: Cheltenham
Bear: Derby
Cairngorm Coffee: Edinburgh
Mr Eion: Edinburgh
Exploding Bakery: Exeter
March Coffee: Exeter
McCune Smith: Glasgow
200 degrees: Leeds
Laynes Espresso: Leeds
North Star Coffee Shop: Leeds
IF: Leeds
Fika: Leeds
Dolcezza: London
Treves & Hyde: London Aldgate East
Kioskafe: London Paddington
Ready!?: Luxembourg
Idle Hands: Manchester
North Tea Power: Manchester
Siop Shop: Manchester
Takk: Manchester
Quay Ingredient: Newcastle
Quarters Coffee: Newport
The Missing Bean: Oxford
Colombia Coffee Roasters: Oxford
Truck Store: Oxford
Workhouse Coffee: Reading
Ambrulo: Sheffield
Upshot Espresso: Sheffield
Foundry: Sheffield
Temper: Sheffield
Bear: Stone
Square Peg: Swansea
BaseKamp: Swansea
Bear: Uttoxeter
Create Cafe: Wakefield
Ue Coffee Roasters: Witney

Add your own to this list. It's an open, editable Google Sheet. This web page won't automatically update though. I'll do that every now and then.

New design team retro

2018-11-06T00:00:00Z

Here's a snippet from an article I wrote for the ONS (Office for National Statistics) digital blog:

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.

Read the full article on the ONS digital blog

I also learnt not to use the word onboarding. Joining or induction is better.

Sorry for using the word "onboarding" – it won't happen again. https://t.co/K70vTLIMsB
— Benjy Stanton (@benjystanton) November 6, 2018

Work trips 2018

2018-11-05T00:00:00Z

Inspired by people like Al and Dan, 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…

In 2018 I went on 15 work trips.

I travelled to 9 different locations – Birmingham, Cardiff, Edinburgh, Exeter, London, Manchester, Reading, Sheffield, Titchfield.

I travelled for meetings, training and conferences, user research.

NaBloPoMo progress

2018-11-04T00:00:00Z

NaBloPoMo stands for National Blog Posting Month. I’ve decided to join in this November and post something new every day.

30 of 30 posts published
100% complete

Creating the image post layout

2018-11-03T00:00:00Z

Yesterday I posted a photo using a new image post layout. Here’s a round up of the key things in the new template.

Content

Each image post needs 3 bits of unique content;

image file name
image alt text
title

They are defined at the top of the post, like this;

---
image: "glasto-sign.jpg"
image-alt: "A rusty roadside sign in the countryside"
title: 9 miles to Glasto
---

The image template is very simple, and doesn't require any more content.

Template

The image layout takes these variables and inserts them into the template to generate the page.

Here's a simplified version of the template mark-up;

<article role="article">
  <figure>
    <img src="/images/{{ page.image }}" alt="{{ page.image-alt }}" />
    <figcaption>
      <h1>{{ page.title }}</h1>
    </figcaption>
  </figure>
</article>

The image is wrapped in a <figure> element.

The image and image-alt variables are combined to fill in the gaps in the <img> element.

Since the title variable is used to describe the image and the entire post, I've wrapped it inside a <h1> and then inside the <figcaption>. 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.

Twitter summary card

I've also reused the image variables to populate the Twitter summary card in the <head>.

{% if page.image %}
<meta name="twitter:image:src" content="/images/{{ page.image }}">
<meta name="twitter:image:alt" content="{{ page.image-alt }}">
{% endif %}

For day 2 of #NaBloPoMo I've created a new post layout that allows me to publish microblog style image posts with a simple design https://t.co/0bnbT1Fgza
— Benjy Stanton (@benjystanton) November 2, 2018

9 miles to Glasto

2018-11-02T00:00:00Z

9 miles to Glasto

October 2018 bookmarks

2018-11-01T00:00:00Z

One Small Step for the Web…: 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.
Why re-use is the best design (because civil servants are users too): 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.
Seeing Data: 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.
Productivity to the Max: Kevin Hoffman on Designing Better Meetings: 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.
Fillet your findings: 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.
Diagram generator: 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.
Building a service design team from scratch: 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.
Everybody Hurts: Content for Kindness: 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:
Digital Accessibility course — week one: 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.
Creating a Design Facilitation Practice: 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.
Internet-era ways of working: 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.
Building what’s useful: governance and agile delivery: I’ve had lots of conversations with colleagues in the Co-op about working in agile ways.
The Most Important Role In Your Design Org: Team Lead: Discussions of design leadership tend to look upward, toward the executives and directors who sit atop the organization.
How Typography Can Save Your Life — ProPublica: 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.
Designing inclusively: 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.
How much documentation to include in a style guide?: 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.
One Chart, Nine Tools – Revisited: 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.
Design Systems — the means, not the end: 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.
It can be difficult to make data from information: 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’.
Designing Accessible Content: Typography, Font Styling, and Structure: 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.
User research is a team sport: ‘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.
What I learned as an interaction designer at DataJam North East: 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.

September 2018 bookmarks

2018-10-02T00:00:00Z

Accessibility is not a feature. — ethanmarcotte.com: 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.
Why it’s never a good time for service design: 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.
From Idea to App Store: A Design Sprint Case Study: 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.
The Core Model: Designing Inside Out for Better Results: 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
Team Charters for Diverse Teams: 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.
Seven questions to build a roadmap: 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.
A user manual for me: 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.
The Importance Of Manual Accessibility Testing: 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.
Assistive technology tools you can use at no cost: 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.

How to focus in open plan offices

2018-09-26T00:00:00Z

Earlier this week, I asked the Twitter hive mind for tips how to get focussed work done when working in open plan offices.

Designers who work in open plan offices — how do you make space and time for focussed work?
— Benjy Stanton (@benjystanton) September 25, 2018

I got some great responses (thanks everyone!) so I've captured them here for prosperity…

Put on some headphones

Get some headphones
The bigger the better
Noise cancelling ones are good
Listen to white noise
Or don't listen to anything – just wear them to discourage people from interrupting you

Work from home

That's it really, just work from home more

Manage your calendar

Block out slots in your calendar
Decline non-essential meetings
Plan to do focussed work when you're at your most productive – for me that's early in the morning

Stop using distracting apps

Put do not disturb on Slack
Turn your emails off
Use Focus app to help

Get away from your desk

Book yourself a meeting room
Use Skype pods and breakout spaces
Hide in usability labs
Find anywhere that's quiet or tucked away

Be anti-social

Scowl at people
Put a hoodie on
Put up 'do not disturb' signs
Make sure people know you're busy

Look after yourself

Working in distracting environments can be stressful
Don't ignore the problem

A plan for accessible charts

2018-09-17T00:00:00Z

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.

How to make accessible charts

Keep the layout simple and mobile friendly
Present the information in more than one way
Use clear, readable typography
Check the chart is understandable in black and white
Label the data directly
Don't use light shades and colours
Use valid, semantic mark-up
Interactive elements should be controllable with a keyboard
Use vector formats that can be zoomed-in (like SVG)
Consider using patterns or textures to distinguish bars and lines

Read on for more detail.

Colour

Check colour meets contrast standards
Don’t use colour alone to convey meaning
Consider colour blind users (use colour blind simulators to check)
Charts should be readable in black and white
Check design works in high contrast mode

Update on 5 December 2018

Thanks to Henry for suggesting these points about how colour is used by data visualisation producers…

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.

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.

Line and bar style

Consider using patterns or textures to distinguish bars and lines
Increase minimum size of elements in chart
Label the data directly (instead of a separate keys or legend)

This game on the Apple app store uses some nice patterns to help make the game usable for people with colour vision deficiency.

Present data in alternative ways

Use titles and descriptions to support the chart
Allow users to view data in an html table
Allow users to download the data as a spreadsheet

Interactive elements

Interactive elements must have affordance (for example, links should be blue with an underline)
Make sure interactive elements are usable without a mouse
All interactive elements should have a focus style
Tool tips can help some users to read charts, especially users with cognitive conditions
Download links labels must include file format and size
Headings, links and button text must be unique and descriptive
If an experience cannot be made accessible, create another route for users to get that information

Typography

Use a minimum font size
Use consistent font and spacing
Lines are less than 80 characters wide
Avoid italics and block capitals
Use a san-serif font with thick letters
Make sure text can be resized
Test the content doesn't overflow or become truncated when font size is increased
Nest headings in order (for example, H2s only appear after H1s)
Don't skip heading levels

Layout

Design with a mobile-first mindset
Use a consistent design
Use simple, well known chart types that users are more likely to understand
Create a limited number of reusable templates
Strive to use a simple design
Reading and navigation order is logical

SVGs

Use SVG because they are scalable
Users can zoom in and they won't become pixellated
Structure the SVG carefully, so that it makes use of their accessible powers
Use ARIA tags to improve accessibility
Tips for Creating Accessible SVG
Making SVG accessible
Accessible SVG line graphs
How to Make Charts with SVG
Reliable and Valid SVG Accessibility

HTML mark-up

Use figure element to wrap the chart
Use figcaption for the chart title
Use footer inside the figure element to contain any notes or citation information
Read Alt vs Figcaption by Elaina Natario

Other resources

Examples of charts across UK government services

How to lead user-centred design

2018-09-14T00:00:00Z

My brief notes from the Government Digital Service (GDS) essentials of leadership training, run by Rebecca Kemp and Ade Adewunmi.

Tell a good story

Learn how to talk about what you and your team do.
Learn how to talk to people who aren't familiar with user-centred design.
Help your team to talk about it too.
Make sure you can talk about your profession, and the product you are working on.

Find common ground

Not everybody cares about user-centred design, so don't be a purist.
You only have to convince people enough to let you do your job, you don't have to convert them.
Acknowledge other peoples' expertise.
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.
Be pragmatic. What concrete steps can you take to improve the service? Making everything better for everyone at the same time is impossible.
Learn how much things cost, and show people what savings can be made.

Look after your team (and yourself)

Protect your team from things that can disrupt their flow.
Make decisions for them (when they need you to).
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.
Don't let yourself burn out.
Speak to friends and mentors outside of your organisation.

August 2018 bookmarks

2018-09-06T00:00:00Z

Your Friendly Guide to Colors in Data Visualisation: 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.
Blocked from benefits ... literally: 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.
Accessibility is not a feature. — ethanmarcotte.com: 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.

July 2018 bookmarks

2018-09-05T00:00:00Z

Design backgrounds are over-rated: 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.
Responsive Blue Note Album sleeves recreated in the browser using HTML and CSS: Over the last few months I’ve been busying myself trying to re-create some of Reid Miles iconic album sleeves in the browser.
How to make Accessible Animated Images: 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.
Planting the Service Design Seeds at CBC: 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.
Keeping in touch helps me feel like me: 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.
Data Access: 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.
Leadership Style Colors: 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.
What's New in WCAG 2.1: 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.
Pattern Library First: An Approach For Managing CSS: 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.
Lifecycle: a simple service design mapping technique: 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.
3 questions everybody should know the answer to: 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.
Data visualisation: A one-day workshop: 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
Readability guidelines: 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.
Outcome-based service mapping: 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.
Making Data Viz Without SVG Using D3 & Flexbox: 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.
Feedback Equation: 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.
Interview in Offscreen Magazine: 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.
Webmentions: Enabling Better Communication on the Internet: 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.
Beyond 800 words: prototyping new story formats for news: 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’.
Sara Soueidan – Freelance front-end Web developer, author & speaker: 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.
WCAG 2.0 Primer alpha: 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.
Your Body Text Is Too Small: 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.

June 2018 bookmarks

2018-07-07T00:00:00Z

A decent remote show and tell set up: 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.
The Cult of the Complex: 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
Cards: 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.
Web Content Accessibility Guidelines (WCAG) 2.1: 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.
Creating a list of services: 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.
How Design Teams Are Using Trello: The Ultimate Round Up: Design teams are arguably the most underrated, understaffed, but also one of the most important teams at your company.
Making Annotations First-Class Citizens in Data Visualization: I’m convinced that annotations are where we’re going to see the next wave of innovation in data visualization.
“Look after the water” – reflections 1 year into my work at NHS Digital: 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.
Reimagining The New York Times Digital Story Experience: 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.
DesignOps Handbook: DesignOps is the key to scaling digital product design teams with more efficiency.
15 principles of good service design: 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.
Measuring the benefits of your service: 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.
Designers as power brokers: 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.
Making the hours count, not counting the hours: 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.
How to test accessibility of emails: 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.
Design your service using GOV.UK styles, components and patterns: 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.
Service mapping and different types of maps: 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.
Jelly Flood! The world of design, seen through the lens of a kids’ cartoon: 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.
Working across organisational boundaries: 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.
All in Sync: How our designers keep up with the latest design system assets: Design systems empower designers to focus on the many unique problems that they’re solving while providing a consistent experience.

Weeknotes – series 01 episode 06

2018-06-10T00:00:00Z

Inflatable bowels, Twitter charts and busy, busy days.

Monday

Sharing charts on Twitter at time of release

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.

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.

Tuesday

Show and tell with the publishing team

On Tuesday I was asked to run a show and tell for the publishing team.

The publishing team are the people who use the ONS website's content management system to upload content so it can be published.

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.

Wednesday

Wednesday was intense

In the morning I finished off my 'find data by location' prototype, then presented it at our usual end-of-sprint show and tell.

Sue (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.

At lunch time, we walked around a giant inflatable bowel. Which was a completely normal thing to do.

When you get invitied into an inflatable bowel you can’t say no 🤷‍♀️ @mathew_weeks @RachelPricetag @NationJoseph @benjystanton pic.twitter.com/cF4l3cgayx
— Grace Elizabeth (@designergrace) June 6, 2018

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.

Last of all, Sam 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.

Thursday

Thursday was also intense

Looking back — I had too much on on Thursday. My day went a bit like this...

3 stand-ups
Usability testing with the publishing team part 1
Follow-up chat about social media workflows
Meeting to discuss UX (user experience) designer progression pathways
Design community of practice
Usability testing with the publishing team part 2
Meeting to finish off sprint planning because we didn't finish everything on Wednesday

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.

Friday

Day off with the kids — whoop!

What's the best way to mark-up an SVG map?

2018-06-03T00:00:00Z

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.

Example

Swansea Unitary Authority W06000011

<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>

Weeknotes – series 01 episode 05

2018-06-02T00:00:00Z

This week included a trip to GDS to discuss service design and graphic design. Plus location page prototypes, pattern audits and moaning.

Monday

Monday was a bank holiday. I needed a day to recover because I went to The Biggest Weekend in Swansea on Sunday.

Tuesday

Challenge meeting!

On Tuesday I had a meeting with Andy, Laura and Ian to review progress on the bulletin page redesign. Andy wrote in his weeknotes 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.

Wednesday

GDS

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 chats with Martin and my chat with Mark separately so I won't go into that here.

Prototyping on the train

On the train to Paddington from Swansea I started creating a prototype for the 'find data by location' 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).

Thursday

Moaning

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.

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.

Friday

I had zero meetings on Friday (apart from stand-ups). This is rare so I managed to do lots of work.

Pattern audit

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.

I'm trying to introduce visually simpler components and larger typography, as well as more consistency with GOV.UK elements.

'Find data by location' prototype 2

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).

I was able to populate the pages using Jekyll and a CSV file that I downloaded from the ONS Geoportal. Then I installed a plugin that allowed me to automatically generate 100s of area pages filled with realistic content. I am super proud of myself.

Kicking things off with the graphic design team

2018-05-30T00:00:00Z

I went up to GDS to talk to Mark 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.

Keep Britain Tidy, 1963, Tom Eckersley

Make your work visible

Share patterns offline
Pattern libraries don't have to be code based
Create posters
Especially key things like typographic scale and colours
Print out work and stick it on the wall
Print black ink on coloured paper to add colour (but keep costs down)
Cover the environment in "good design"
Graphic design and data visualisations might need a more extensive pattern library that is difficult to maintain – that's okay
Maybe we do need 50 shades of grey?

British public service design

British public service design has a strong history of great graphic design
Look at designers like Tom Eckersley
ONS is in a position to create some great information and editorial design

Zoom out

Step back and look at your work
Does it work at a distance?
Does it work at a angle?
Does it work on smaller screens?
Graphic design needs to be strong enough that the hierarchy still works under pressure

How to start a service design community

2018-05-30T00:00:00Z

Here are my notes from today’s cross-gov service design call. Thanks to Martin for inviting me along and letting me ask lots of questions.

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!

We’ll do another one in a month from now. pic.twitter.com/EaaLPEfDX2
— Martin Jordan 🌈 (@Martin_Jordan) May 30, 2018

How to start a service design community

Marie and Tom at DWP gave some tips on how to grow your own service design community. Warning: this will create demand for service design.

Extend the invite beyond user-centred design roles
Include policy makers, business architects and business analysts
Find allies to help
Try an "intro to service design" workshop
Start lunch time meet-ups
Start user-centred design show and tells (designers, researchers, performance analysts)
Allow people to join remotely, use quick and easy tools like Google Meet
Spread the word using offline channels too (for example; posters in the kitchen)

Marie has written about building up the service design community in DWP.

Why to start doing service design

Sanjay talked about how the digital service standard is changing to become the service standard.

service designers help organisations design services that work end-to-end, front to back and across every channel

How to do service design

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:

zoom in and zoom out – you need to consider the details and the big picture.

Next steps

Go to a service design conference (like Service Experience Camp)
Create a business case to hire service designers (in the open)
Go to the next cross-gov service design meet-up (maybe host it in South Wales)

Weeknotes – series 01 episode 04

2018-05-26T00:00:00Z

This week, we got a new graphic designer and a new user experience designer. Ryan Dunn popped in too.

Monday

Lead graphic designer starts

Monday was Joe'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.

Tuesday

Tuesday was my usual non-work day, to look after the kids.

Wednesday

Contract user experience (UX) designer starts

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 hiring a UX designer?

End of sprint 24

Wednesday was a good day for the new starters as we had our fortnightly show and tell, covering things we'd done to improve the ONS website.

Publish a dataset prototype

My main focus has been working on the 'publish a dataset' 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.

Thursday

Ryan Dunn pops in

Ryan from DWP visited on Thursday. At lunch time, he demo'd some of the things he's been working on, like Churchill. And afterwards we had a chat about starting a cross-gov data design community. Let me know if you're up for joining that.

Bulletin design workshop

We also had an all-day workshop to continue the bulletin work we'd started in the design sprint a few weeks ago. We wanted to get together and iterate on the prototype, following the first round of user research.

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 best room in the house.

Friday

Catch-up with Joe

On Friday morning I had a quick catch-up with Joe after his first week. I'm excited to work with him and Andy to start taking control of the design workflow and plan out the things we want to achieve now we have a full team.

UX designer promotions

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.

This will help us to reward good people, and hang on to them for longer.

May 2018 bookmarks

2018-05-25T00:00:00Z

Introducing our user research principles: 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.
Designing the impossible makes it possible: 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.
The Fast and Slow of Design: 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.
What's in a pattern name?: 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.
Where Lines Break is Complicated. Here's all the Related CSS and HTML.: 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.
The Veil of Ignorance: 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.
Design Sprints Are Snake Oil: 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.
What we learned from getting our autocomplete tested for accessibility: 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.
Facilitating Awesome Meetings: 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.
How we're using data dashboards for content design at ONS: 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.
10 principles for service patterns: 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.
Responsive tables, revisited: 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:
A guide to agile communication: 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.
How to test frontend performance: 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.
What charts do: 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.
Automatically creating an accessible color palette from any color? Sure!: 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.
Why we removed the most visited advice page on our website: 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.
How I used Wget to make a copy of the Service Manual for user research: 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.
#WhatisResearchOps? A starting point: 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.
Card sorting: a powerful, simple research method: 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.
Search interface: 20 things to consider: 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.
Observations on the web: 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.
To take the next step on digital, we dropped the word ‘digital’: Last year, Citizens Advice helped over 2.6 million people directly and our digital advice had 41 million hits.
Enterprise Design Stack: The Tools We Use To Design The Datacenter Operating System: 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.
Short Note on ARIA, Dragon and Standards: 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

Service walkthrough

2018-05-20T00:00:00Z

Service walkthroughs are a service design tool. Observe a service by going through the stages of the user journey.

How to use service walkthroughs…

facilitator creates and acts out a scenario
participant pretends to be a user
walkthrough each touchpoint
put equal emphasis on digital and human interactions

Use service walkthroughs to find out…

key touch points of the service
gaps in the end-to-end journey
how users become aware of a service

Weeknotes – series 01 episode 03

2018-05-18T00:00:00Z

Featuring service design, accessible maths symbols and pizza. If you only read one bit, read the bit on service design training.

Monday

Review user research

We got together after morning stand-up to review the user research findings from Alison'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!)

Future of research and design

The lead user-centred design people met with Sam 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.

Stickers!

Andy brought back co-op design principle stickers from his conference in Manchester.

Hiring a user experience designer

The advert to hire a user experience designer to replace Tom went live! No-one can replace Tom obviously – but we have to try.

Tuesday

Design sprint next steps

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 Kieran and a more flexible "at a glance" section at the top thanks to Rachel.

User experience design lead catch-up

Me and Ben chatted about whether we'll use Fractal for the next iteration of the pattern library or not. Hint: probably will.

Prototypin’

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.

Wednesday

Cross site working

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.

Accessible maths symbols

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 GDS content style guide.

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.

Related: we noticed that our equations are inserted as outlined SVG shapes, so they are effectively invisible to assistive technology.

<g role="img" aria-labelledby="title">
<title id="title">FISML=(r−Rt)SL</title>
...
</g>

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.

Thursday

Thursday was a loooong day. I got the train in because I needed to get the train straight to London after work.

Interactive calculators pattern library

Me and Matt 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.

Design review

We had our regular design review (my fav meeting of the week). Carlie showed this neat data viz thing that Go Compare have made called You and planet earth.

Front-end dev and user experience (UX) design reviews

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.

This is in addition to the regular demo slots we have after morning stand-up and sprint show and tells.

Card sorting with the publishing team

We did a card-sorting exercise to help us figure out how to:

help the publishing team find pieces of content
prioritise the elements on the page
name the pages and sections

London

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 Tom's recommendation.

Friday

Service design training

I was in London for my 'intro to service design training' at GDS with Clara and Martin. It was really, really good.

The key takeaways were:

service design tools are easy to pick-up (like this one: service walkthroughs)
you don't have to be an expert to start doing it
service design helps you to ask 'why?'
service design helps us to rephrase problem statements so we're meeting user needs
design the end-to-end process (and think about what happens before and after the service)
design the things the user can't see (not just the front-end touch-points)
design across channel (digital, face-to-face, phone, letter, email)
service design is great for facilitating discussions and creating shared understanding with stakeholders
service design can help you make sure you are building the right thing

You can see me being trained in the art of service design in this tweet.

Hiring a user experience (UX) designer at ONS

2018-05-14T00:00:00Z

Closing date: 11 Jun 2018
Salary: £28,450 to £33,249
Location: Newport

Working at ONS

To learn what it's like to work at ONS, check out our Digital Blog or you can read some of my ONS posts and weeknotes.

Or, feel free to ask me on Twitter.

Weeknotes – series 01 episode 02

2018-05-12T00:00:00Z

It was the super hot bank holiday weekend – so I was down the beach with the family, along with most of the country. Related: Awen noticed that Saturday 5th May had the lowest number of sessions on the ONS website since Boxing Day 2017.

Monday & Tuesday

Days off.

Wednesday

Stats New Zealand

Me and Rachel started the day early by chatting to Blair and Arna from the Stats.NZ website. 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.

Show and tell

We had the show and tell for sprint 23. Everyone was excited by observation level endpoints being added to the API for some reason. More importantly I showed the prototype we made during the recent design sprint.

Culture and service design

Esko and Ben popped in to give a lunch time talk about service design and culture. I really liked what Ben said about culture...

"culture is: what is okay here and what is not okay"

… it reminded me of the GDS it's okay to poster.

Thursday

Usability testing

On Thursday I went to Birmingham with Al 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 second iteration whilst I was up there fixing some of the obvious issues (like missing links).

Prototyping on the train

Whilst on the train back I began to split the ONS website prototype kit out of the design manual repo. It no longer makes sense to keep them together and having them separate should make it easier to update both.

Friday

Hiring a user experience designer

The job ad went live on Friday to replace Tom. I'm pretty pleased with the job description:

"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."

Future of research and design at ONS

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.

Weeknotes – series 01 episode 01

2018-05-05T00:00:00Z

My first ever weeknotes! Thanks to Dan Barret for finally pushing me over the edge and convincing me to start. This intro to weeknotes by Jenny Vas helped too.

Monday

I was off on Monday to look after the kids. I needed a 3 day weekend to recover from the Design Sprint and Tom's leaving do.

Tuesday

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.

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.

Carlie also showed us the National Trust tea rooms 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.

I started doing 1-to-1s with some of the new designers (Andy and Matt). 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.

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.

Wednesday

I was meant to be going to the Digital Accessibility Centre in Neath to observe them auditing the "filter a dataset" part of Customise My Data. But, I caught a stomach bug off the kids so I couldn't go.

Thursday

I was off again on Thursday to look after the kids, but managed to do some prepping for the contractor interviews during nap time.

Friday

We (the designers in digital publishing) held a second design review/critique session because I'd missed the usual Thursday slot.

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.

Andy and Grace have started working on the UKSA Annual Report – it's shaping up nicely after just one week. I showed the new bulletin prototype.

I was a bit late leaving work, but managed to catch an interview with with Mona Chalabi on Radio 4's More or Less programme. It's worth a listen if you're interested in Data Journalism.

April 2018 bookmarks

2018-04-30T00:00:00Z

Dash-bored
Designing Better Design Documentation
Going Offline
Everything About Web Design Just Changed
Creating Themeable Design Systems
What do we mean when we talk about services?
Pitfalls of Card UIs
Smarter Tables with Sketch + Paddy
Using a design challenge to bring policy and design closer together
The strange becoming familiar
The problem of ‘Looks good’ inclusive design
Enabling Webmentions in Jekyll
How You Can Aid User Scanning with Eyebrow Headlines
Why Work Out Loud?
Introducing Second: a framework for mostly-static React applications
Resilience: Building a Robust Web That Lasts by Jeremy Keith—An Event Apart video
Takeaways from the DSConf (part 1/2)
Data Viz Project | Collection of data visualizations to get inspired and finding the right type.
Project boards that build team harmony ?
It's Nice That | An insight into The Guardian’s newly released brand guidelines #branding
Scrolling and Attention
Common ways we break accessibility and how to avoid them - Laura Carvajal | Render Conf 2018
Data Sketches | A year of exotic data visualizations - Nadieh Bremer | Render Conf 2018
How to use the open standards for data canvas
If you enjoy Spectacle please consider donating
We Can’t Do That In One Sprint
Managing Heading Levels In Design Systems
Scroll to the future
Empathy Map – Why and How to Use It
The Core Model: Designing Inside Out for Better Results
Users don’t hate change. They hate our design choices.
A new typeface for Parliament
Comparing service design and business analysis
The Illusion of Control in Web Design
Variable Fonts (beta)
Shortcuts.design
Despicable Design – When “Going Evil” is the Perfect Technique
Consultation launch: accessibility of public sector websites and apps

March 2018 bookmarks

2018-03-25T00:00:00Z

Understanding Policy Better
Strategic thinking with blog posts and stickers Cheap, quick, better than strategy documents
Digital government: reasons to be cheerful - SDInGov - Google Drive
Complexity Bias: Why We Prefer Complicated to Simple
Getting partners on board with research findings
A DIY Web Accessibility Blueprint
The Reseach Funnel
One-page-applications are not accessible
The Big Web Show #171 : Art Directing the News – with ProPublica Design Director David Sleight
Building A Static Site With Components Using Nunjucks
Where do service designers fit within an organisation?
Design Operations
Hopefully, the Ultimate Guide to a Flat Icon Set
Vue Design System
How do you design a design doc?
UK Parliament shells out for almost identical new logo
Alex - Catch insensitive, inconsiderate writing
Building a Visual Language
Why T-shaped people?
In defence of UX research
Try This Time-Obsessed Designer’s Approach To To-Do Lists
Consistent Design Systems in Sketch With Atomic Design and the Auto-Layout Plugin
Design with code, without knowing how to code
UX Leadership Skills: A short guide for busy people
How to run a design crit and why they’re important
Four ways to make the case for simplicity
Why UK Parliament needed a new identity
Britain's Beautiful Garbage Bins
Meeting Design

February 2018 bookmarks

2018-02-16T00:00:00Z

Improving accessibility with accessibility acceptance criteria
Capture your screen
Studying students’ experience using guerrilla research. What worked and what didn’t.
My Accessibility Journey: What I’ve Learned So Far
Automatic visual diffing with Puppeteer
Net Promoter Score Considered Harmful (and What UX Professionals Can Do About It)
AMPERSAND
Org Design for Design Orgs: Building and Managing In-House Design Teams 1st Edition
buzzfeed/design
Why Your App Looks Better in Sketch
We need to talk about design patterns
Asking the right questions to frame the problem
Five User Research Rules of Thumb to Follow
The principles that make me a better product manager
LIES arrow-stickers for the era of the Alternate Fact
giving-a-fuck-about-climate-change/carbondoomsday
The most influential female designers of the last century
.mdx proposal · Frontend Cafe
Explaining the role of a Delivery Manager
How to gain widespread adoption of your design system
Fast Path to a Great UX – Increased Exposure Hours
I Accidentally Built A Brogrammer Culture. Now We’re Undoing It
Everything Easy is Hard Again
Layout Land
Scaling design: the case for narrative transformation
Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input
The musicality of design systems
Work culture is toxic to women. I’m finding joy anyway.
Content crits
Creating accessible and responsive search
PixelSnap
Sketch Plugins I Can’t Live Without
Design’s Lost Generation
Developing new typography and spacing for GOV.UK Frontend
audreyr/favicon-cheat-sheet
No more data pukes, no more jargon

My link sharing workflow

2018-02-10T08:01:00Z

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.

So, I’ve come up with a workflow that lets me collect and publish my bookmarked links on this blog.

1. Save links to Pocket

Pocket is a neat service that lets you save articles and read them later. It has plugins for Chrome on Mac and Safari on iOS, so with one click or a couple of taps I can save things to my account.

2. IFTTT (if this, then that) and Google Sheets

IFTTT is another handy service that lets you connect up lots of popular web apps and internet connected things.

I’ve set it up to check my Pocket account and add any links that I bookmark to a Google Sheet. Each article I bookmark gets saved to the spreadsheet as a new row.

3. Copy the data into Jekyll

Next, I need to copy the links from Google Sheets and add them as a CSV to Jekyll’s _data folder. Now that I’ve got my links stored as structured data I can make use of Jekyll’s handy templating features.

4. Create a list of links component

I’ve created a little reusable component that will check the data folder my links and output that as a list.

Include the component and point it at the data

Insert the component into the blog post and point it to the right month, for example January 2018.

{% include 'partials/list-o-links.html' list=site.data.links-2018-january %}

The list component itself

The list component automatically creates an unordered list of links.

<ul>
  {% for item in include.list %}
  <li><a href="{{ item.url }}">{{ item.label }}</a></li>
  {% endfor %}
</ul>

Example of the generated html

<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>

5. Steps each month

Now that I’ve set all this up, it’s almost effortless to keep it maintained.

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.

Check out last month's links

Use fewer layouts

2018-02-03T21:08:00Z

Jekyll uses templates stored in the _layouts folder to apply reusable designs to its pages. In a previous release, I created a list of page layouts in use on this site to help me spot inconsistencies.

For this release I've started to reduce the inconsistencies and duplicate code. The user story is the same though…

User story

As a user, I need the website pages to be consistent, so that I can read and browse them easily.

Acceptance criteria

Combine the page and post layout into one
Update the index.md to use the page layout
Update the style guide to reflect the changes

What's changed

The biggest change was combining the page and post 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.

The if statement looks something like this…


{% if page.is_post %}
<small>{{ page.date | date: "%e %B %Y" }}</small>
{% endif %}

So that posts know they are posts, I had to add the following snippet to the _config.yml file.


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

Add a list of page layouts

2018-01-28T08:13:00Z

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.

By adding a list of different page types I can start to make them more consistent.

User story

As a user, I need the website pages to be consistent, so that I can read and browse them easily.

Acceptance criteria

Add a list of different page types to the style guide
Include a link to an example for each

January 2018 bookmarks

2018-01-28T00:00:00Z

Laws of UX
Todo list system
Understanding SVG Coordinate Systems and Transformations
Quotes & Accents
Seniority in design
Designing Tables for Reusability
Custom Control Accessible Development Checklist
You’re hired: 6 ways to welcome your new employee on their first day
Meeting Achievement Stickers
Types and stages of services
What we mean by service outcomes and measurement
Creating a common language to describe services
Making password managers play ball with your login form
Style guide-driven design systems
Holistic user profiling: making research more user-centred
Drafts Zero challenge
Structural Metadata: Key to Structured Content

Change date format

2018-01-27T22:16:00Z

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.

User story

As a user, I need to know when an article was written, to help me decide if the content is still relevant.

Acceptance criteria

Date format is changed from 01 Jan 2018 to 1 January 2018 to match the GDS content style guide
Use the Shopify Liquid and STRFTIME resources to control the date format
Date is moved below the title on post pages

Add SVG icons

2018-01-19T00:00:00Z

Switching from PNGs (Portable Network Graphics) or icon fonts, to SVG (Scalable Vector Graphics) icons.

The Twitter icon being edited in Figma

SVGs are best for icons

SVGs are vector images
They can be zoomed without pixelating
Inline SVGs can be styled with CSS
Inline SVGs are good for performance
SVGs have accessibility advantages
They are better than icon fonts
Browser support is good
Editable using code or vector drawing applications

Useful SVG attributes

height=""
width=""
viewBox=""
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-labelledby=""
fill="currentColor"

Add `focusable="false"` to SVGs

Scott O'Hara explains why and when to use focusable="false"

focusable="false" is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.

Inline SVG performance benefits

There is one less http request because we don't need to load an external image file
File size is often smaller (unless the icon very complex)
Only load what you need (instead of a whole icon font)

What I changed on the blog

Old HTML

<i class="icon icon-social icon-instagram">
<span class="visuallyhidden">Instagram</span>
</i>

New HTML

<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>

Add aria-current to the site nav

2018-01-13T21:32:00Z

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 aria-current attribute to fix this.

User story

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.

Acceptance criteria

The screen reader will announce "current page" when it reads out the label of the current page in the site navigation.

What's changed

I've added the aria-current="page" attribute to the current page link in the site nav.

<nav role="navigation">
  <a aria-current="page" href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>
</nav>

Visit the home page to test this out

Resources

December 2017 bookmarks

2017-12-31T00:00:00Z

Design in: the Parliamentary Digital Service
Web Content Accessibility Guidelines—for People Who Haven't Read Them
Getting remote-friendly
Understanding the needs of service data users
WCAG 2.1 and Silver (AG): What is Next for Accessibility Guidelines
Using Design Workouts To Build World-Class Design Teams
SVG Accessibility API Mappings
Web Typography: Numerals
Embedding Tabular Metadata in HTML

Accessibility for designers

2017-12-19T23:20:00Z

A guide to web accessibility best practices for graphic, visual and UI (user interface) designers.

Images

Images of text

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.

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.

Images should have alternative text

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.

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.

Writing effective ALT text for images

Typography

Measure

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.

Luckily Trent Walton has a neat trick for managing fluid type.

Justified text

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.

Never Justify Type on the Web

Line spacing

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.

Line Spacing

Colour

Don’t use colour alone to give meaning

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.

Colour accessibility

Colour contrast

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.

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.

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.

Colour Contrast Checker

Interaction

Design a style for keyboard focus

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.

Tip: go to GOV.UK and press the tab key a few times to see a good example of this in practice.

Forms

Labels

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.

Help text

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.

Validation errors

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.

The 10 Commandments of Good Form Design on the Web

Content

Avoid technical terms, abbreviations and jargon

Technical terms, abbreviations and jargon can be off putting to all sorts of users:

users who don’t speak English as a first language (English is a second language for British Sign Language users)
users who have a low reading age
newcomers to the topic you are writing about

You can help everyone understand your content better if you use common and simple words.

If you absolutely have to use these words then explain them by using the <abbr> element or by adding a glossary.

Stop your team using technical terms and jargon

Readable page titles and hackable urls

Page titles should be descriptive and should match the <h1> (main heading) on the page. This helps users to orientate themselves.

URLs should be designed so that users could navigate their way through a site by editing the website url in the browser address bar.

Web accessibility & URLs

Buttons and links should have descriptive labels

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.

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.

Writing content for everyone

Conclusion

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.

Designers often put up barriers to users with access needs without really meaning to. Don’t be one of those designers.

We’re hiring 5 graphic designers at Office for National Statistics (ONS)

2017-12-16T07:41:00Z

We're looking for 3 digital designers and 2 brand and print designers in Newport. The closing date is 22 January 2018.

Graphic Designers (Digital)

These roles are based in the Digital Publishing department. We're looking for designers who are experienced working in digital.

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.

Lead Graphic Designer (Digital) £35,200 to £40,249
Graphic Designer (Digital) £28,450 to 33,249
Graphic Designer (Digital) £21,950 to £27,249

Graphic Designers (Brand and Print)

These roles will be based in the Comms department. We're looking for designers who are experienced working in print and communications.

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.

Lead Graphic Designer (Brand and Print) £35,200 to £40,249
Graphic Designer (Brand and Print) £28,450 to 33,249

Bonus role: Front End Developer

We're also looking for a front end developer to join digital publishing. This person will be working closely with the designers.

Front End Developer £21,950 (Closing date 7 January 2018)

Websites you'll be working on

ONS website

What's it like to work at ONS?

Here are some blog posts I've written about life and work at ONS:

November 2017 bookmarks

2017-11-30T00:00:00Z

Vertical campfires: our user research walls
Using design crits to improve collaboration

My first 12ish months

2017-11-28T09:39:00Z

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.

I've been meaning to write a round-up for weeks, and reading Sophie's first six months finally gave me the kick I needed.

The commute

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.

The drive is actually okay. As long as there is something good on Radio 4 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.

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 6 music.

Or, for the most hipster points, I could catch the train and cycle in-between.

Choosing my own hours

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.

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.

Travel

One of my favourite things about the job is that I get to travel. I've been all over the country (London, Wrexham, Manchester).

I've attended or spoken at;

conferences
cross-government design meet-ups
user research trips

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.

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.

Meetings and admin-y things

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.

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.

The admin-y things are usually okay in principle. But to complete each admin-y thing I need to:

dig out an email from a some mysterious new department
login to a different system with a different password
read the massive PDF guide
navigate a poor interface
give up and ask for help

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.

Open data community

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.

But, I've discovered a grass-roots community of geeks. People who are passionate about the web, open standards and doing work that matters.

The Digital Publishing department

Joining Digital Publishing has been the stand-out highlight of my first year. Digital Publishing handles the ONS website and things like social media.

I didn't know when I applied for the job that I would end up here. Luckily it was Jukesie's 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.

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.

Highchair at the table

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.

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.

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 Andy save the world.

Disney data

2017-09-22T11:51:00Z

Back in March we took a family trip to Disneyland Paris.

I collected some data, mainly so that I could play around with styling up key figures and data tables like this…

Key figures

979 miles driven

27 miles walked

7.8 hours spent queueing

6 buffets

50,720 steps

Walking

How far we walked each day
Day	Steps	Miles
Monday	15065	6.94
Tuesday	19831	9.14
Wednesday	14818	6.80
Thursday	10006	4.60

Queue time

How long we waited for each attraction
Day	Attraction	Queue time (minutes)
Monday	it's a small world	0
Monday	Mad Hatter's Tea Cups	5
Monday	Dumbo the Flying Elephant	15
Monday	Peter Pan's Flight	10
Monday	Big Thunder Mountain	20
Tuesday	Big Thunder Mountain	30
Tuesday	Les Voyages de Pinocchio	30
Tuesday	Blanche-Neige et les Sept Nains	25
Tuesday	Phantom Manor	20
Tuesday	Star Tours: The Adventures Continue	20
Tuesday	Buzz Lightyear Laser Blast	15
Wednesday	Les Tapis Volants - Flying Carpets Over Agrabah	15
Wednesday	Slinky Dog Zigzag Spin	10
Wednesday	Ratatouille: The Adventure	30
Wednesday	Toy Soldiers Parachute Drop	30
Wednesday	Cars Quatre Roues Rallye	10
Wednesday	Crush's Coaster	60
Wednesday	Les Tapis Volants - Flying Carpets Over Agrabah	5
Thursday	Le Carrousel de Lancelot	0
Thursday	Mad Hatter's Tea Cups	5
Thursday	Princess Pavilion	60
Thursday	it's a small world	10
Thursday	The Twilight Zone Tower of Terror	45

My 12 year quest to get a public service design job

2017-02-17T22:38:00Z

There have been a lot of "I'm leaving government posts" recently.

It feels a bit weird because I've been trying for years to get in.

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…

My first design job

When I first started in design, back in 2004, I remember worrying that being a designer was a soulless profession.

My parents were both in healthcare. And there I was; designing little websites and putting client's logos on promotional mugs.

I failed to see how I was helping to make the world a better place.

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.

Public services designed without designers (gasp!)

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.

They were showing us their latest software and it was painfully obvious that there were no designers working with their teams.

They just didn't see design as something that should be integrated into the software development process.

It freaked me out.

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.

I knew I had the skills to help, but I had no idea how to get involved.

Government Digital Service (GDS)

Luckily there were a bunch of people who were figuring it out for me.

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.

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.

Also, I didn't want to move out of Swansea. Hmm.

Comrade Paul Pod

A while later I was freelancing and I came across a tweet by Paul Pod. 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.

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.

Leadin and DVLA

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.

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.

I became hooked on the ways of working that GDS helped introduce:

user needs
designers working in agile teams
rapid prototyping
design patterns
laptop stickers

It was addictive. I realised that somehow, I needed to keep working in this way.

Matt Jukes' talk at Design Swansea

I'd seen Matt Jukes 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.

In 2016 I asked him to speak at Design Swansea (a meetup that I help organise). He gave his product is a team sport talk.

He painted a picture of the culture at ONS, especially within the digital publishing department.

He spoke about:

the digital publishing department's principles
taking time to hire the right people
posters on walls
blogging and working in the open
also, he brought laptop stickers

All this stuff rang true for me, and I remember thinking that I really wanted to work there.

A few months later they posted a job, I had to try applying.

Joining ONS

So, I've been at ONS for about 4 months now.

Working with service manager Andy Dudfield and his team in the digital publishing department.

Why is it so great? It combines the best bits of all my previous jobs and more:

I get to work with a talented, engaged team … on stuff that matters
the work is constantly challenging and the standard is high
we are encouraged to work in the open and share what we do
nobody is micromanaged or forced to do overtime

… and there are loads of laptop stickers.

Retrospective (my first 2 months)

2016-12-17T13:16:00Z

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.

Here's a quick retrospective that I'm going to turn into my New Year’s resolutions.

Keep doing

Feeding research findings back into the design process
Working with the team to design and iterate together
Met with lots of people and teams
Blogging (although this has slowed down)
Designing in the open (again, could do more)
Getting design evidence from a range of sources (analytics, surveys, usability testing, subject matter experts and lessons learned from previous projects)
Show and tells, stand-ups and team walls are working well

Need to improve

Need an improved research rhythm
Need to recruit more users
I'm getting stressed out by the competing priorities
Need to be better at switching contexts, focus on one task at a time
Need to accept criticism without taking it personally
Need to break for lunch and eat properly
Need more exercise
Falling behind with training

Actions

Research rhythm

Work even more closely with researcher to make sure we get more momentum in our research schedule. Try more varied research techniques.

Work from home more

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.

Prototype in code

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.

Manage "business as usual" work better

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.

Go for walks

Try going for walks at lunchtime. Find out how to get into grounds of Tredegar House.

User experience (UX) designer objectives

2016-11-18T22:22:00Z

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.

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.

Does this look like a UX designer to you?

UX designer objectives

Follow a user centered design approach
Use evidence to inform design
Create prototypes and iterate designs
Work as part of an agile team
Be part of the community
Communicate effectively
Learn new skills and improve existing ones

User research activity cards

2016-11-09T19:15:00Z

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).

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.

Download the GDS user research activity cards

Activities

Guided tour
Pop-up research
Sketch your idea
Conversation cards
Social network mapping
Affinity mapping
Card sorting
Think aloud
Write a diary
In their environment
Map your use
A day in the life
User persona
Paper prototyping
My user journey
Remote research

Work with me at Office for National Statistics (ONS)

2016-10-29T01:14:00Z

I’ve just finished my second week at ONS. You can read about my first week on the ONS Digital blog. My second week was spent kicking off a big new project, more about that soon.

We’re hiring designers and researchers

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.

What do UX designers do?

The role has different meanings to different people. I really like this list of UX designer skills.

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.

Open days

If you’re interested, but would like to know more, we have 2 open days coming up:

Newport on Tuesday 1 November from 2pm to 7pm
Titchfield on Thursday 3 November from 2pm to 7pm

View map and contact details on ONS website

What’s it like at ONS?

The main thing that convinced me to work at ONS was this: Product is a team sport, a talk/blog post by Matt Jukes.

If you want to get an insight into the culture here at ONS, then I recommend that you take 10 minutes to read that.

Apart from the working culture and good pay (£35k) there are some great benefits, like:

flexible working
a Civil Service pension
an on-site nursery at our Newport site
an on-site gym
free car-parking
a training/conference budget

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.

Apply

The closing date for applications is Tuesday 15 November 2016. If you have any questions, feel free to direct message (DM) me on Twitter. My DMs are open.

Creating a digital delivery culture

2016-10-21T20:50:00Z

I’m a big fan of this digital delivery culture poster, from Ben Holliday and his team at DWP Digital (Department for Work and Pensions).

Here are the points from the poster:

Work in the open
Share, not send
Right people, same room
Less process, more progress
Don’t wait for permission
Show the thing
People, not resources
Build strong communities
Fail fast and learn

My thoughts

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.

Visual note-taking with Eleanor Beer

2016-08-30T13:23:00Z

My notes from the Visual Notetaking Made Easy event on Thursday 11th August at Innovation House, Magor.

Intro

Visual note-taking is basically notes with doodles
It’s also known as sketchnoting
The basic processes is; listen, filter, draw
It’s useful for creating user journeys, meeting facilitation and conference recording
Listening is a key skill!

Benefits

Improves memory recall
Captures emotion
It’s fun!
People who are usually quiet in meetings feel included
Can help people with low literacy

Elements

Basics: layout, words, objects, containers, lines and arrows
Pictographs are drawings of things; like a book, dog, mobile phone or aeroplane
Ideographs are pictures that represent an idea; like balance, collaboration, education or digital
People (stick figures and smiley faces)
Layouts: linear, circular, random, path or grid

Shopping list

Pens

Pen & Paper, Cardiff

Books

Follow Eleanor Beer

Things my little girls have taught me about feminism

2016-08-26T11:12:00Z

A rough transcript of my talk on feminism at Ignite Swansea.

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.

I want to start off with the definition of feminism. According to Google, feminism is:

“the advocacy of women’s rights on the ground of the equality of the sexes”.

For me it’s about wanting to live in a equal society, and I just don’t think we are there yet.

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.

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.

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.

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.

They enjoy “boy stuff” too, like Marvel and Transformers. But it feels very segregated still. Boys toys and girls toys.

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.

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.

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.

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:

“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.”

It’s a typical example of the way men react online when gender roles are reversed.

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:

The olympics have been full of men saying embarrassing things too.

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.

And this bloke on Twitter, mansplaining to olympic athlete Annemiek van Vleuten after her horrendous crash by saying: “the first lesson in bicycling, keep your bike steady… whether fast or slow”.

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.

Credit: WNYC New York Public Radio (CC BY-NC 2.0)

So, if like me, you’re keen to be a better man then I recommend following @manwhohasitall on twitter. It’s an account that takes headlines from trashy women’s magazines then aims them at men.

Like this one:

“Men! Is having it all really possible? Kids, relationship, beach hair, imaginative picnic ideas AND a PH balanced intimate area?”

It highlights the absurd way that women are treated by the media sometimes.

So I’m hear today as a sign of solidarity to say: “My name is Benjy and I’m a feminist”.

…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.

Thanks.

Update

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, let me know over on twitter.

User experience (UX) designer skills

2016-08-18T16:06:00Z

A list of skills needed to be a user experience designer, from Centre Centre.

(Brandon Ward shared this list on twitter. It was shared as an image so I decided to write it up as text here for prosperity.)

Technical skills

Front-end development: coding valid HTML, CSS, JavaScript
Visual design: understanding the use of colour, grid, layout and typography
Mobile integration: creating consistent experiences through responsive layouts, touch interactions and input techniques
Project management: incorporating iterative design, agile practices and software development life cycles
Information architecture: planning experiences through site mapping, modelling and wireframes
Interaction design: building flow, form design, micro-interactions and transition animations
Copywriting and content strategy: writing microcopy, content modelling and content inventories
User research: conducting field research, usability studies, research synthesis and data analysis

Soft skills

Presenting: sharing thoughts an design concepts with peers and stakeholders
Facilitating: extracting design requirements and project direction from peers and stakeholders, while prompting a shared understanding
Critiquing: receiving, giving and training peers and stakeholders with constructive feedback
Storytelling: 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
Sketching: communicating emerging ideas quickly and exploring problem space with peers and stakeholders
Leadership: providing vision, direction and passion to peers and stakeholders

Should designers design content?

2016-07-28T15:07:00Z

In my experience, interaction and visual designers are often relied upon to write the words used in an interface (also known as microcopy).

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.

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).

What is content design?

The first UK Government accessibility meet-up

2016-07-22T18:25:00Z

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.

Accessible design works better for everybody

Alistair Duggin, head of accessibility at Government Digital Service (GDS) was the meet-up host and first speaker.

He reminded us that, in government, everything needs to work for everybody. We should never exclude anyone on the basis of disability.

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.

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.

Accessibility research at the Home Office

Emily Ball and James Buller are user researchers at Home Office Digital.

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.

They recommend that you should discover every participant’s digital skill level, reading age and access needs whenever doing research.

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 accessibility dos and don’ts posters.

Writing content for everyone

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 how to write content for everyone.

Her talk included lots of good tips on how to write simple content that can be understood by everybody:

keep content short, clear and simple
organise information into manageable chunks
use bullet points to break up long lists
don’t use acronyms
avoid using all capital letters
use words that users use
be direct

Accessible healthcare design

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.

Everything they do is accessible, because the NHS constitution says that it must provide a “…comprehensive service, available to all”.

He reminded us that accessibility must never be seen as a separate thing. We should always be thinking about it.

He recommended that designers should:

challenge overly complex interfaces
use simple, action focused language
design clear and intuitive layouts
pick colours with enough contrast
use clear and legible typefaces

Creating a positive environment at the BBC

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.

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.

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.

The New ABCs of Research by Ben Schneiderman

2016-06-21T16:30:00Z

Working at Swansea University has its benefits. I was invited along to a lecture by Ben Schneiderman recently, one of the authors of Designing the User Interface. Here are my rough notes from his talk.

New Book: The New ABCs of Research

Ben was promoting his new book The New ABCs of Research.

New research context

The old model of research needs to be updated, because we are facing new challenges:

Immense challenges in the 21st Century (e.g. healthcare)
New tools like the web, social media, visual communication
Raised ambitions and expectations about what can be accomplished in a short period of time

Research strategies

Some of the principles and tips from his talk:

work on real world problems
work with actual practitioners
we are witnessing a growing movement in design
design is as important as science and engineering
talk to real users and have empathy
the best way to promote your ideas is to write well
publish in open, accessible, free ways
form teams with diverse individuals and organisations
do something small soon… it’s the path to larger things
be social and be engaged with the wider community

“do something small soon… it’s the path to larger things”
Ben Schneiderman

Port80 2016

2016-05-20T10:46:00Z

My notes from the brilliant Port80 web design conference, including talks from Gavin Davies, Digital Accessibility Centre, Helen Clark and Ash Nolan.

Louise Howells

Why so serious? Running a team hack day

Louise is a Professional Services Manager at Zengenti
happy working environments are good for staff
good offices need breakout zones
Zengenti call their annual hackathon “Lockdown”
step away from the day job and do something different
teams created digital and physical products like:
- a games room in the basement
- a BBQ area
- a website that listed design conferences
helps to foster a community
staff started up book clubs and pool clubs afterwards
it encouraged staff to do job swaps and learn about different areas of the business

Gavin Davies

Using build tools

Gavin is an automation engineer/coder at Radify
software is advancing at a scary pace
it’s important to understand things conceptually first
it’s about workflow not particular tools
improve your workflow
reduce tedious, manual tasks
get feedback sooner
use Grunt or Gulp (it doesn’t matter which) to automate your asset pipeline
use linters to highlight bad code
optimise images and minify code
use gulp-rsync to deploy automatically
use source maps to debug your Sass
Yeoman can help get up and running quickly
Blog post about using front-end build tools

Fred Heath

The uncertainty principle

how do we deal with uncertainty?
why do projects fail?
it’s hard (impossible) to estimate project time and cost
cushioning is when you give a client the worst case estimate and double it, this is bad
telling a client you don’t know how long things will take is not much better
Enter SCRUM
2 week sprints, then show client
product backlog > sprint planning > sprint backlog > sprint
behaviour driven development (BDD) is “outside in” development
stakeholders define features
features are like user stories
tools: cucumber
write scenarios for features
scenarios are like examples e.g. show special offers
these should be in plain English
then write a step definition
sprint planning > define steps (flesh out plan) > do the work > show and tell > retrospective

Gavin Evans and Jaime Purvis

Designing accessible websites

accessibility is about not creating barriers right from the design stage
developers need to use the right mark-up
follow web standards and WCAG 2.0
user testing with actual users with disabilities
tips for better mark-up
- provide alternative text for visual content
- consider users who don’t use a mouse
- use structure and logical hierarchy
- don’t suppress zoom
- display:none hides it from everyone, so be careful
- always style up hover, active, focus
- Use tools to check understanding level of your content
- html <track> element to add text or captions to videos (webVTT)
- bad error handling is bad
- don’t rely on placeholder text only in forms inputs
www.html5accessibility.com
Use ARIA roles for sectioning
How to use iOS Voiceover
- two finger tap stops speech
- swipe left and right to go to next item
- twist hand to choose different elements
- swipe down with 2 fingers to read on
<details> and <summary> in Firefox with NVDA skips over it completely
avoid cluttered designs
mobile versions of sites are generally better
the less content the better
label properly, be descriptive but concise
dynamic sites are hard to navigate, if something changes make sure focus changes too

Andy Clarke

Designing imaginative grid systems

web design is boring right now
everyfuckingwebsite.com
bland.ly
(too busy listening to make proper notes sorry)
Slides for Andy’s talk: Designing imaginative grid systems

Helen Clark

Open and inclusive design

beware stealth stakeholders, these are senior staff who pop up at the end of projects and try to change things
work in the open
document everything done on the project (on Tumblr for example)
speak to customers (end users) to discover user stories
get honest, impartial feedback (users might lie if staff are running the research sessions)
speak to staff (at their place of work) especially front line staff
create a list of priories based on this research
create paper prototypes
feedback can be applied beyond the website, so share your research
risks of working openly?
- research should uncover problems not solutions
- working in the open can make some people uncomfortable (it shows the behind the scenes, messy, ugly bits)
good research means you can justify design decisions
Code for America
- build iteratively
- people’s needs first
- design with data
- open by default
- ensure everyone can participate
Growth Driven Design
- launching the website shouldn’t be the end
- launch a basic site first
- build the must-haves, and leave the nice-to-haves until later
- then do continuous improvement
beware: clients might block access to users if they feel left out of research
immerse the client in the design team, then both can communicate with the audience

Ashley Nolan

Developing for the unknown

Ash is front end dev at Just Eat
no docs or commenting leads to legacy code straight away
put the right things in place from the start: structure and workflow
workflow
- grunt and gulp can act as self documentation to show new devs what workflows exists
- grunt or gulp, it doesn’t matter
- create common workflows: e.g. Sass, linting, minifying
documentation
- good commenting
- style guides
- “programs should be written for people to read and incidentally for machines to understand”
- describe what components do and where they’re used
style guide and component library
- look for patterns
- reuse them across website
- organise CSS
- start small and extend
- components only worry about themselves
- Read SMACSS by Snook
Naming schemes: BEM or SUIT
- be consistent
- show relationship between class names
- BEM: Block, elements, modifier
- BEM naming scheme
- Statix, a reusable snippets tool
- Static site generators Assemble or Jekyll
Separate your concerns
- decouple CSS classes from JS
- hook JS into data attributes or IDs
look into PostCSS
whatever we create should be built to last

The last ten percent

2016-04-17T20:47:00Z

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.

We’d compare the (almost) finished website against the mock-ups, the navigation diagrams and the content plan. We’d stop making the site and try to experience 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.

We were designing in the browser, although we didn’t call it that.

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 disjointed and unbalanced.

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.

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”.

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.

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.

Now, the last 10% usually takes up about 90% of the budget.

Research findings over the long term

2016-04-16T17:57:00Z

My rough and patchy notes from the Cross Government Research meet-up that happened on Tuesday 12 April 2016 at DVLA in Swansea.

Dave Ellender

Stop important stories from being forgotten

create a spreadsheet of user stories
give each story a star rating
star rating = how many times this problem was seen
use this rating to help prioritise backlog
product owners can really relate to the star rating
if design fixes don’t meet the user need, this method helps to push issues back to the top of the agenda

Example user story spreadsheet

ID	Story	Status	Source	Star Rating
Story number	User story	Fixed or not?	Date & time	*****

John Waterworth

Make research data traceable

create one folder per round
e.g. date - R12 - name of study
keep all materials in there
participant naming: R12-P3-name-of-file.jpg
prune video files (keep key recordings, delete everything else)
watch out for accidental deletion (especially when using shared folders on Google Drive or Dropbox)

Sharing and keeping findings

show and tell what you’ve learnt (this builds up a “corporate memory”)
show 5 to 10 findings per showcase
each slide should have: a heading, 3 points and an image
share the slides around afterwards
build up a library of slides overtime
helps you to understand and remember
create a summary slide at the end of each phase to round-up important findings

Share at every opportunity

blog posts
make a comic
make posters
create “big picture” journey maps
create things that stay after you’ve gone (this is tricky)

Vicky Teinaki

Documenting changes in agile teams

things get buried in confluence
create living documents
Google Drive FTW
spreadsheets don’t work too well
try Google presentations (these are visual, malleable, trackable)
in Google videos, you can link to timestamps
create a stack of successes as you go
use them for decision making
these will help bring new staff up to speed
it’s a hub, it doesn’t have to include everything
everything must be shareable

Tara Land

User needs

user needs should not become too granular
real user needs are stable (they don’t change much overtime)
they come from the lived experience of real people
read Indy Young’s Mental Models book

Training for the Welsh 3 Peaks

2016-03-29T16:20:00Z

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.

Our aim is to raise £1000 for Tŷ Hafan. You can sponsor us here.

Training walks

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.

Brecon waterfalls

7.7 miles

2:38 hours

Port Eynon to Llanmadoc (Gower)

13.5 miles

4:08 hours

Brecon Beacons

12.6 miles

4:39 hours

What’s next?

More training coming soon, watch this space.

Speaking at Design Swansea in April

2016-03-27T20:50:00Z

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).

Talk title

“How to be a user experience designer without losing your soul”.

Slides

View my slides over on Speaker Deck

Talk blurb

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.

Event information

Thursday 7th April, from 7pm at TechHub.

Matthew Jackson, front end developer at Bluegg, is also speaking.

Great service design at Premier Inn

2016-03-26T20:50:00Z

I’m always impressed by the good service that me and my family get at Premier Inn.

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.

The little touches…

nicely decorated lobby and rooms
clean and free of clutter
friendly, happy, helpful staff
staff that made polite conversation (“good morning” or “how did you sleep?”) for some reason this is tricky to get right in the UK
well designed posters, flyers and menus
working air conditioning in the room
no quick and dirty posters made by staff
comfy bed
12 o’clock checkout
nice food at breakfast
kids eat free
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)
2 for 1 drinks at the bar (handy when you have kids)

This ain’t The Ritz

All the little touches add up to make a pleasant experience. We don’t need (or expect) five star treatment.

Premier Inn know they ain’t The Ritz, and they’re okay with that. They specialise in not being The Ritz.

They understand their customers well, and give them just what they need.

Usability research labs in the UK

2016-03-13T20:34:00Z

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.

This list is hosted on GitHub, so please get stuck in and make some improvements if you can…

Tools for recording usability tests

2016-01-22T20:53:00Z

Good old Twitter… I asked my friends to recommend screen recording software (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.

Did I miss anything?

Baby guerrillas

2016-01-20T00:00:00Z

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.

They remember my passcode and can use it to unlock my phone, and they are even budding photographers (their specialities are selfies).

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.

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).

Button pushing

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.

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).

An error occurred

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…

“An error occurred loading this content. Try again later.”

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.

Empathy

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.

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.

When things get tedious

2015-11-12T14:20:00Z

There is an on-going debate around whether or not designers should know how to code.

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.

Design tools are for sketching

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.

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.

When things get tedious, switch to code

Certain tasks become very repetitive or even difficult when using traditional design tools. Things like…

mocking up the same page at different sizes
styling up generic pages that could be built from existing components
making small changes to existing pages
explaining interactions and animation

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.

Not Photoshop, not Sketch either

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 InVision, Sass and DevTools are getting closer and closer to becoming what we need. Even if they don’t look like traditional design tools at first glance.

Goodbye WordPress

2015-11-05T15:53:00Z

Today marks the day that I’ve finally switched my blog over from WordPress to Jekyll.

WordPress has served me very well over the years but I wanted something a little simpler.

The main reasons I prefer Jekyll are…

I can write in MarkDown
it uses Sass by default
I can do everything locally first
it’s easy to sync everything with GitHub
the templating system is simpler
…which allows me to design more complex layouts

What’s the best way to learn UX?

2015-03-28T20:06:06Z

A friend of mine asked for ideas on learning UX, so I turned to Twitter and got a couple of really great responses.

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)…

Leisa Reichelt

Leisa is was the Head of User Research at GOV.UK at the time, and she gave me a list of resources to look at…

So, you’re going to be a user researcher: top tips to get you going

Andy Budd

Andy is a User Experience Designer, partner at Clearleft and curator of dConstruct and UX London.

Andy recommend this User Experience Design Course by General Assembly in London.

P.S. Thanks to Zach Inglis too for pointing me in the right direction.

Finding work and managing money as a freelancer

2015-03-09T22:05:22Z

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.

Finding work

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.

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.

Networking with a small ‘n’

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.

Even though Networking (with a capital N) sucks, in reality though, you do need to network.

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.

Work hard. Don’t be an asshole. Share what you know.
— Brad Frost

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.

Love thy client

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.

Go out and find work

Tweet that you are looking for work
Ask local agencies if you can pop in for a coffee (don’t give them the hard sell)
Working Nomads
Need

Money, business, tax etc.

Being self employed

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.

Hang on to paperwork

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.

Saving for your tax bill

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.

Banking

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.

Most business accounts tend to have a ‘free banking’ period (around 12 months) where they won’t charge you for transactions.

Use FreeAgent

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.

What to charge

I used the handy UK Freelance Rates Calculator by Cole Henley.

Get business insurance

Having business insurance helps me to sleep at night. I used Insurance by Jack to sort my policy.

Expenses

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.

Conclusion

I hope this helps with some of the questions that you may have about going freelance. If you have questions… feel free to tweet me.

Reasons London

2015-02-22T21:26:01Z

This a quick write up of my experience at Reasons:London this weekend (Friday 20th February).

The venue was beautiful and at lunch time we went to Whitecross Market for some great street food (it’s worth a trip in itself).

We drove from Swansea, so we parked in Hounslow West NCP. 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.

Harry Roberts

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.

Stefanie Posavec

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 blogged about it at the time.

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.

James Hall

James Hall had a rather sobering (but really entertaining) round-up of security issues. TLDR:

Don’t use public wifi
Don’t use internet banking
Don’t build websites

… all these things are just too insecure.

Anna Dahlström

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 data rash — a kind of eruption of notifications that is becoming more visible and distracting, the more devices we have.

Andrew Clarke

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.

Elliot Jay Stocks

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 paying your contributors.

My top albums 2014

2014-12-12T13:57:11Z

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.

According to my Last.fm profile, these are my top albums for 2014 (with Spotify links)…

At Best Cuckold by Avi Buffalo
This Is All Yours by Alt-J
The Night Is Young by The 2 Bears
The Scenic Route by Panacea
Singles by Future Islands
Wooden Aquarium by Mazes
They Want My Soul by Spoon
Our Love by Caribou
Jungle by Jungle
Keep Moving by Hyde & Beast

Responsive HTML email talk at Winter LocalHost 2014

2014-11-25T21:10:07Z

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).

Check out my slides.

Swansea design meet-up

2014-11-25T09:16:32Z

I’m planning a design meet-up in Swansea. This is a timeline of my notes (expect them to change a lot).

10th February 2015

Booked 2 speakers for the first event (Tim Morgan and Paul Pod)
Got TechHub Swansea onboard as the second sponsors
Using Get Invited for ticketing
Working on v2 of the website
Created information for potential sponsors

26th January 2015

Launched a basic holding page
Create a subscribe form for our email newsletter

21st January 2015

Designed a basic logo to get things going
Signed up for a Twitter account: @DesignSwansea
Got Campaign Monitor onboard as sponsors

19th January 2015

Email Techhub Swansea to get the ball rolling with the first event.

15th December 2014

Contact Design Stuff Cardiff and Second Wednesday for advice.

11th December 2014

Went to Design Stuff Cardiff to check it out and have a chat with the organisers.

5th December 2014

Continue to share and promote the survey
Getting lots of interest and offers of help

1st December 2014

Published a survey

26th November 2014

Draft a survey aimed at designers in Swansea and run it past Paul, Jade and Gareth

25th November 2014

Start this blog post (I like to design in the open whenever I get the chance)

24th November 2014

Announced the idea on Twitter (I have to do it now)
Went to the Swansea Software Development Meet-up to chat about it with Viv, Paul and Nic

My BlogConf slides

2014-10-11T21:01:51Z

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.

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?

In the end I decided to base the talk around 3 ideas that have helped me to become a better web designer…

Release things early, get feedback and improve
Learn as much as you can about typography
Get familiar with code

Check out my slides.

Who inspired me

2014-10-08T13:09:08Z

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.

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.

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.

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.

We still keep in touch but they have their own things going on these days, Tariq runs a bunch of ecommerce websites and Anthony runs a web development agency in Birmingham.

Looking back, I really feel like this was the best introduction to working in the industry. So… thanks guys.

Making responsive HTML emails

2014-09-28T20:04:40Z

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.

Starting with the Client Brief

If you are lucky like me, you’ll have a client who will supply you with an initial brief.

These usually include…

the main objective of the email
the target audience
an early draft of the content
guidance on potential photography
ideas about potential design style

(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).

The Content

This is an example of the kind of content that a typical email might include…

Logo
Main image
Heading 1
Paragraph (or two) of body copy
A main call to action (CTA) button
Contact details
Social media icons
Small print
Unsubscribe link
View in a browser link

What Email Clients Are Your Users Using?

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.

If your audience are using modern email clients you might want to try some cutting edge techniques like moving images or web fonts.

The bad news is, despite community efforts 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.

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).

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: The Ultimate Guide to CSS.

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: Email Client Market Share. You’ll notice that ‘mobile’ makes up a big chunk of users.

Sketching

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.

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.

Next, I’ll begin to sketch a layout, slowly grouping the elements together into a very rough design.

Designing

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.

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.

How Big Should an Email Be?

Although it’s becoming less clear cut with responsive design, I still like to design my emails at around 600px wide.

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.

In terms of email height (and file weight) I think the smaller the better is a good rule of thumb. Your content should be focused and concise and this in-turn should result in a small email.

Keep Things Simple

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.

Complicated designs take a very long time to test once built. And more importantly, 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.

The Inbox

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.

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.

Spam

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: Spam Lawsuits (by MailChimp).

Build

Choosing a Framework

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.

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.

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).

Ink

The framework I currently use is called Ink, which was created by Zurb, the people behind the Foundation framework.

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.

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.

Other Tools, Frameworks and Approaches

Testing

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.

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.

Before Testing, Don’t Forget to…

Proof read of the copy
Double check phone numbers and email addresses (in the markup too)
Check you’ve included alt text and titles attributes where appropriate
Remove any unused CSS (frameworks are notorious for adding bloat)
Optimize images
Check your email with images turned-off
Update images to have absolute paths

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.

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.

Using MailChimp to Send Test Campaigns

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.

Currently, I Test on the Following Email Clients…

Gmail.com (Chrome, Firefox & Internet Explorer)
Outlook.com (Chrome, Firefox & Internet Explorer)
Yahoo.com (Chrome, Firefox & Internet Explorer)
AOL.com (Chrome, Firefox & Internet Explorer)
iPhone 5c
iPad
Mail (OSX)
Thunderbird (OSX)
Outlook (Windows)
Windows Live Mail (Windows)

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 PDF for testing email clients.

Debugging Common Problems

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.

Here are a few common ones…

Use CSS Attribute Selectors to stop Yahoo rendering your media query styles
Use !important in your mobile media queries, to make sure the styles override the inline desktop styles
Use <span> to style blue links on iOS
Use <td> and padding to get reliable spacing around chunks of text
Use vspace="10" hspace="10” to get padding around images in Outlook

The Litmus and Email on Acid blogs are usually the best place to find solutions to problems.

Virtual Testing with Litmus (via MailChimp)

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.

There are two email testing services that I would recommend…

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.

Conclusion

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 ask me on Twitter.

Lastly here are some further resources to keep you busy…

Design Inspiration and Further Reading

Subscribe to Some Emails

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…

Freelancing and switching off

2014-06-02T23:48:20Z

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.

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 and 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.

So last Friday afternoon I decided to ask people on Twitter for some tips…

Guys, what are your tips for switching off from work in the evenings and over the weekend?

It got a great response (mainly because Stu Robson retweeted it) and loads of people replied with their tips for switching off.

Here is a round-up of what people said…

Watch the telly

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.

Marc Drummond 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.

Liam Jay 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.

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.

Turn off notifications

Adam Whitcroft, Bevan Stephens and Patrick Fulton 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.

Get outside and exercise

Gary Lake replied simply “bikes innit” and others suggested outdoor activities and sports too. My personal favourite was from Andy Davies who grows vegetables — that’s something I can see myself getting into.

Have a drink

Richard Baker, Keiron Skillet and John Coyne 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.

Spend time with friends and family

Sanjay Poyzer came up with probably my favourite…

hang out with friends who don’t understand what you do

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.

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.

Conclusion

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.

Time to dust off the surfboard I think.

Notes on creating Twitter, Google+ and Facebook profile page images

2014-04-22T14:09:05Z

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.)

Twitter

Profile Photo: 512 x 512, PNG

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).

Header Photo: 1500 x 500, PNG

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.

Google+

Profile Photo: 869 x 869, PNG

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.

Cover Photo: 1177 x 661, PNG

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.

Facebook

Profile Picture: 520 x 520, PNG

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).

Cover Photo: 851 x 520, JPEG (will require cropping on upload)

Facebook’s own tips 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.

General Notes

More often than not, creating a 24 bit PNG that is bigger than required will offer you the best results.
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.
Profile page layouts are updated regularly and they are designed to be viewed on multiple devices, so keep things simple.

Responsive email design

2014-04-03T12:26:27Z

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.

Making sure that your email looks good in Outlook is still a huge part of the task at hand. The good news is mobile email has taken the lead, so it is certainly time to start playing with responsive layouts.

Progressive enhancement

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.

Keeping things simple

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.

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.

Either way, the design should have a clear hierarchy and structure, with headings used to help guide users.

Testing on devices

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 Litmus to get screenshots of how the email will look across a range email clients and devices.

Accessibility

A good reading experience

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.

Plain text email

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.

Images off by default

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.

Colours

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.

Worrying about health

2014-03-27T15:55:51Z

I wrote an article for Everyday Designer about being a freelancer, working from home and trying to stay healthy.

I worry about straining my eyes, bad posture, getting enough fresh air and even putting on weight.

Read the whole article: Tips for health freelancing.

User experience design

2014-02-17T12:08:30Z

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.

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.

Designers shooting for usable is like a chef shooting for edible.
— Aarron Walter

Client interviews

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.

User research

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.

Content, structure and journeys

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.

Sketching, planning and wireframes

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.

Prototyping

Whether walking a client through your sketches or using a framework to create html/css prototypes, nothing quite beats the feeling of experiencing a website. That’s why I think prototyping should happen before or at least alongside the visual design stage.

My name is Benjy and I’m a web designer

2014-02-04T10:03:02Z

These words have been sitting in my ‘finish up and publish’ pile for almost two years and finally I’ve been inspired to do just that this week, after listening to Unfinished Business 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 Dan Rubin’s talk at the recent MK Geek Night All Dayer (although I didn’t attend).

Living A Lie

I’ve actually been a web designer ever since my first real job, way 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.

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.

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.

It was also at Web Media Works that I discovered Jeffrey Zeldman’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 Andy Clarke, 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).

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).

My Peoples

Fast forward a few years and I had joined James Good, based in Swansea.

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.

When we arrived, I remember saying to James (only half-jokingly) “these are my people”. They were designers, the shaggy haircuts, scruffy trainers and button badges confirmed that much, but they were web too. Web designers. People who cared about good typography and good semantic HTML and good content. Web designers. I felt like I belonged.

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.

My name is Benjy and I’m a web designer.

Readable, guessable and hackable urls

2013-11-29T11:41:00Z

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.

Designing the url

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.

Examples from HuffDuffer

/new
/username
/tags/tag
/username/tags/tag
/username/collective
/username/collective/tags/tag
/search?q=query

Urls work anywhere

If it isn’t human readable, then it is probably more likely to be forgotten.
Make it guessable, users should be able to look at your url and figure out how to navigate your site.
Urls work anywhere, they can be written down, sent as a text, read out loud.
They are much better than QR codes (but they need to be designed purposefully).

Web design tools

2013-11-26T10:31:25Z

Check out my uses page for an up-to-date list of hardware and software that I use for interaction design.

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.

iA Writer

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 Markdown, 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.

Alternatives

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.
Editorially 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.

Divvy

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.

Dropbox

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).

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.

Alfred

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.

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.

Illustrator

At James Good 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.

Alternatives

Photoshop, despite coming under some criticism recently, Photoshop is receiving some nice updates, such as better text rendering and an asset generation tool.
Sketch 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.

LiveView

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 completely different to seeing it mocked up on a desktop computer.

ImageOptim

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.

ImageAlpha

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.

Chrome Developer Tools

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.

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.)

It’s also possible to use developer Tools on Safari on your iOS device (via a Mac).

Alternatives / Extras

WhatFont is a quick way to check a site’s typography.
Web Developer Toolbar is a collection of very helpful tools. A modern classic.

Ghostlab

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.

Trello

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.

Honourable Mentions

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.

Mailbox
Fantastical
Readmill
Pocket
Tweetdeck

Why I like to use “smart quotes”

2013-11-17T09:54:16Z

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.

Don’t use dumb quotes for quotations or apostrophes — the nerds will revolt.
— Jessica Hische

I’ve recently started forcing myself to type smart quotes wherever possible (yes, even when texting my Mum).

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.

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.

Still, my view is that using the right mark is as important as having punctuation marks there in the first place.

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.

(The nerds are watching.)

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.

30 things done before I'm 30

2013-06-10T11:05:56Z

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.

In no particular order, here are thirty things that have shaped me in one way or another.

Married Michelle
Had two beautiful girls
Bought our second (and hopefully last) home
Bought our second (and doubtfully last) car
Rescued a dog from the dog's home
Owned one snowboard
Owned two surfboards
Owned five skateboards
Broken my arm twice
Played bass guitar in a band
Been Dan's best man
Spoken at a web design conference
Started a club night
Started a blog
Been one third of GeekThree (a podcast)
Lived in London
Started my own business
Worked for the Royal Mail
Worked for a well known pizza restaurant chain
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
Went to Glastonbury
Went to All Tomorrow's Parties
Went to Camp Bestival
Went to Disney World
Went to the Grand Canyon
Went on a business trip to LA
Flown over Las Vegas at night time
Nearly capsized a Swan Pedalo in Prague
Been thrown out of a camp site in Hossegor and consequently…
Visited Roxy Jam surf festival

Stickiness and lumpy bits

2013-05-19T05:50:14Z

I really enjoyed Andy Davies' talk on mobile site performance at Port80 2013, but one fact in particular stood out for me…

Facebook artificially slowed down scrolling from 60fps to 30fps. User engagement collapsed.

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.

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.

Stickiness and lumpy bits are a massive turn off, so it's important that we don't end up scaring people away.

Crafting animation on the web

2013-05-14T00:53:00Z

Notes from my talk at Port80 2013, covering animation principles, CSS and workflow plus a link to my infamous Mario Part animation.

My slides on Slideshare

About Me

Mario Paint

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.

The Nativity (by me, aged 10) animated using Mario Paint on the SNES

University

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.

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.

James Good

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.

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).

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.

Crafting Animation on the Web

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.

F***h

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 was a big part of animation on the web, but, luckily we all know that it’s days are numbered.

Animation is Immature

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.

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.

Animation as a Design Material

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.

Clean and Simple

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.

The Time is Right

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.

Animation Principles

I'm going to run through some important animation principles and also a brief history of the medium.

According to Wikipedia, the definition of animation is:

'Animation is the rapid display of a sequence of images to create an illusion of movement.'

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.

':a bestowing of life.'

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.

I like to think of these as the pre-cursor to animated gifs.

Gertie the Dinosaur and Winsor McCay

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.

Timing and Spacing

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.

Easing

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.

Ease Out

‘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.

Ease In

‘Ease in’ is the opposite. The animation will have a slow start before speeding up.

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.

Anticipation and Reaction

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.

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.

There's a great little quote in one of my animation books and apparently it's from Charlie Chaplin…

Tell them what you’re going to do.
Do it.
Tell them that you’ve done it.

Testing

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.

Animade Lernz

Watch Animade Lernz on Vimeo (01:46)

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.

I highly recommend that you check out Animade’s website for more examples of their work. Another personal favourite of mine is 30 Ways to Kill a Cowboy which is, as you’d expect, an animation of a cowboy being killed 30 ways, it’s not graphically violent though just pretty hysterical.

CSS Animation

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.

CSS Animations are made up of 2 main parts; the @Keyframe Rule and the Animation Property.

@Keyframes Rule

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.

0%   {color: crimson;}  
25%  {color: sandybrown;}  
50%  {color: gold;}  
75%  {color: lawngreen;}  
100% {color: steelblue;}

Animation Property

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.

name:
duration:
timing-function:
delay:
iteration-count:
direction:

timing-function:

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-bézier function.

Luckily, there are some really great tools on the web that we can use to draw cubic-bé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.

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.

Easing is one of those things that web designers don’t talk about enough.

Val Head

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.

timing-function: steps(10);

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.

This could be used, for example, to artificially drop the frame rate, giving the animation a quirky, retro feel.

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.

Minimal Monkey

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.

Workflow

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.

Animation Identity

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?

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.

Notes

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.

What property are changing? Colour, Position etc. (Subtle changes may not be obvious when looking at your mock-ups.)
How long you want the animation to last (think in milliseconds, as a second is a long time in animation)
What sort of easing would you like? (ease-in, ease-out, elastic bounce back?)
Should there be a delay before it starts?
How many times should it repeat?

Don't worry, you won't think of everything, and it will almost certainly need to be tweaked in the browser.

Show and Tell

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.

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.

Storyboards

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.

Animatics (Moving Storyboards)

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.

Keynote

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.

Photoshop

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.

Edge Animate

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.

After Effects

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.

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.

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.

The Dream App

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!

Conclusion

Think of animation as a design material, not a piece of content.
Use it to communicate more, without adding clutter to your designs.
Use animation to give each project a unique personality.
Animation is distracting, be mindful of people's attention.

Crafting animation on the web an introduction

2013-03-02T20:51:00Z

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…

What's possible with CSS3 animation and what does all that dirty code mean?
How can I apply classical techniques to give my animation more personality?
What tools and practices can I use to introduce animation early on in the project workflow?

Animation as a design material

2013-01-31T23:21:00Z

In an excerpt from her book The Mobile Frontier, 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.)

I love this idea, that animation is a design material (like typography or colour) rather than a piece of content.

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.

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…

The addition of movement to a [web] experience can provide clarity, information about context and, frankly, a dash of joy and fun.

Immersive animation on the web

2013-01-26T22:27:00Z

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.

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.

Sometimes, a lack of animation can be distracting, resulting in us noticing the interface, rather than the content.

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.

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.

On knolling

2012-10-27T22:24:00Z

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.

Take a look at the Knolling Blog on Tumblr to get a better idea.

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).

I think this hints at my future job as a designer just as much as the fact I was good at drawing.

Often, design is about organising, ordering and presenting things so that they can be better understood, rather than creating something brand new.

An excuse for a blockquote

2012-10-19T21:47:00Z

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.
— Me, just now

Design is an actual job

2012-10-07T05:13:00Z

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.

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.

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é.

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.

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.

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.

Right then, back to the rest of the book.

Designing user experience in casinos

2010-10-18T21:34:00Z

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.

Getting there

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.

Navigating a casino

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.

So why doesn’t poor navigation annoy casino users?

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).

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.

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?”.

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.

Applying this to web design

I was reminded of an article I read on the 37 Signals blog a few years ago, called The Casino Experience. 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.

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.

BBC Newsnight talks graphic design and infographics

2010-08-10T12:46:00Z

It was great to watch graphic design being discussed on the telly last night.

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.

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.

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.

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.

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.

Swansea town sea shanty

2007-05-10T18:08:00Z

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.

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.

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.

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.

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.

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.

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.

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!