Interacxtion design, user exerience and front end development blog
Around 2016 I came across a line from a blog post by Carrie Bishop that's stuck with me ever since: 'I really wish I had one place where I can see all my transactions with the council', said nobody, ever Carrie Bishop Citizens Portals Y / N? It was a response to the steady stream of portal requests that flow from policy into digital teams. Over the years I've lost count of how many times I've been…
Like many organisations, we rely on legacy platforms and processes that are expensive to run, difficult to adapt, and slow to change. In line with the modern blueprint for Government, we are moving away from piecemeal fixes towards a more structured, cost effective approach to transformation that delivers lasting improvement. Where we started In 2024, I took on responsibility for the Funding…
Real transformation demands more than tweaking what exists and staying within our structures. If we’re serious about changing how government works, we need to get serious about design. Design has always been about solving problems. My favourite definition is Design is a creative approach to problem solving . That distinguishes it from art, and from digitising processes without actually…
When I moved out of a hands-on design role, I started thinking more about how design could influence or create the conditions for good service delivery to happen. After speaking with other UCD professionals in leadership and delivery roles, two big themes emerged: Designing team structures and processes (which I wrote about in Breaking Down Silos ) Designing our relationship with suppliers to…
The post on Mission-Driven Government highlights the growing momentum and opportunity to rethink service delivery in government. It also highlights the need to be pragmatic and start with the things we can control; this post explores how we are putting that into action. This year, the ESFA’s Funding Service will distribute over £76 billion to 25,000 providers across the education and skills…
With the shift towards mission-driven initiatives, we have a huge opportunity to rethink how we approach service delivery across the public sector. As long as I’ve been a Civil Servant, the idea of delivering "whole services" has been a regular topic of conversation but moving things from theory or discussions to reality has been slow. Why? Because services or user journeys, defined as they are…
Where we started The first Government project I worked on was a licensing service, as part of the project, licence numbers were updated. That change stopped users from being able to log into a related service where they recorded their activity. In summary, our ‘service’ had broken someone else’s ‘service’. I’ve seen loads of examples of similar issues over the years. Usually the result of only…
Essay question Write a 4000 word portfolio on the following topic... You are required to produce a portfolio which shows ongoing evidence of how you are applying learning on the PG Certificate in Management and Leadership to address your personal development goals. Personal development goals My ambition as a civil servant is to enable the effective and efficient delivery of public services. I am…
Essay question Write a 2000 word essay on the following topic... Critically discuss the choices that you have made in relation to your communication techniques and style within the context of specific trauma-informed events or organisational change at work. You should draw on illustrative examples from practice to support or refute particular models and/or theoretical frameworks. Introduction…
Essay question Write a 2000 word essay on the following topic... Drawing on relevant literature, critically discuss how you have, as a leader, facilitated the right environment for the success and performance of your team. As part of your discussion, consider how your practice may change if you were leading a larger team and in a more strategic role. The assignment should include: a brief…
The brief Question: Tell a story that encapsulates your leadership approach, including leadership values and style. Your presentation should demonstrate the application of leadership framework(s). I’m going to talk briefly about why I moved into a leadership role and my thoughts on what leadership is. Then I’m going to explain a specific incident and how that has changed my approach to leadership.…
Essay question Write a 1000 word essay on the following topic... Drawing on relevant theory, critically discuss your leadership approach within the context of your organisation’s practice and culture; and identify ways in which you can enhance your practice Introduction The public sector needs reliable leaders who keep their promises, are trustworthy and bring about change (Joyce, 2016). This…
The brief As part of the application I was asked to complete a candidate statement answering 3 questions: What motivates you to further your leadership career? What is it about your approach to leadership that makes you stand out? Why do you think you have the capabilities to make the most of the opportunities on this accelerated development scheme? What motivates you to further your leadership…
As Lou Downe said in What we mean by service design : If your business was making chairs, you’d hire a furniture designer - government needs service designers to design the services it provides But how do we design better services: in areas with conflicting or competing priorities? in areas with multiple leadership teams? with a reliance on politics? across different competent authorities and…
A follow-up to a space for service design . The first Government project I worked on was a licensing service. As part of the project, the license numbers were updated. That change stopped users from being able to log into a different but related service. In summary, our service had broken someone else’s service. I’ve seen loads of examples of similar issues over the last 5 years. Usually the…
Post written for A list Apart Designing for the unexpected A design quote that has always stayed with me is this "Your company's survival is tied to the ability of the products it makes to work in situations you haven’t imagined, and on devices that don’t yet exist" but how can we put that into practice? I’m not sure when I first heard this quote, but it’s something that has stayed with me over…
In April 2019 I wrote blurred lines and job titles . It was about the blurred lines between design and front-end development roles as well as constantly changing job titles. I focused on what was a hot topic at the time thanks to the post Front end design by Brad Frost. Brad’s post matched my career almost perfectly, switching between user experience design and front-end development but never…
Friday the 30th April was the 3rd cross Government meet-up on forms and the second one I've spoken at. My talk this time was called 'Minimum viable design' and was mostly a list of questions I think we need to answer before we start re-designing legacy forms in bulk. Form builders and Defra My first talk was 'Forms, Form builders and Defra' and discussed the 2 separate form builders Defra had…
Read on CSS tricks
We need to get this paper form online, or more commonly we need to get this paper form online fast! Whenever you hear that sentence it usually leads to one or both or these sentences: Just do it (we need this now!) Use a form builder - it will be faster. And occasionally: Let’s start an 8 week discovery to understand whether we need that form at all. Number 1 and number 3 are opposite ends of the…
How do you build a community with small numbers of people in different roles with various work patterns? At our Warrington digital hub there are currently 3 Interaction Designers, 4 User Researchers and one Content Designer. And until recently there was no local Community of Practice (COP) in any of these areas. Why not? Barriers to setting up the community There can be a lot of barriers to…
The great divide and Should designers code? two ongoing debates that seem to split the design and front end developer communities straight down the middle. In front end development it’s a split between traditional front end languages like HTML and CSS and a move towards more complex JS libraries and frameworks. The design debate crosses role definitions, designers should definitely understand the…
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. I also unintentionally, (at least at first) removed all traces of Sass from my codebase. This was not something I set out to do…
Every day more and more users interact with businesses and organisations online, to register for a service, book an appointment, apply for a licence or to submit information. Often these digital services are direct replacements for legacy paper based services. This digital transformation provides organisations with the perfect opportunity to redesign these legacy forms making it quicker and…
Originally posted on A List Apart It started off as an honest problem with a brilliant solution. As the ways we use the web continue to grow and evolve, we, as its well-intentioned makers and stewards, needed something better than making simple collections of pages over and over again. Design patterns, component libraries, or even style guides have become the norm for organizations big and small.…
Giving users the ability to control the way they see content improves the accessibility and usability of a site. This is traditionally achieved with a user stylesheet (although this is no longer supported in Chrome without the use of additional plugins). In site features that allow a user to change the way content is displayed are nothing new, but with CSS custom properties are much easier to…
CSS gets a lot of stick, the internet is full of articles describing ways to fix one, or all of it's so called failings. Most of the time however, these criticisms are unfair, untrue or both. This post aims to highlight some of the common misconceptions or myths around CSS and it's capabilities. 1) CSS is broken So first of all CSS is not broken, it just isn't a programming language and so should…
Designing new products or services can be a daunting or even intimidating process at times. How do you create an experience that works well for everybody? How do you design for edge and stress cases you don't yet know exist? What if people don't like, or worse cant use the service? There are many fears that need to be overcome in order to create a successful user experience including... The fear…
On Friday the 27th of May I attended the front end developers conference UpFront in Manchester. There were 7 speakers along with 3 flash talks on a range of subjects including Accessibility, Design patterns, legacy JavaScript and component systems. Below are just a few of the key points I took away from these talks... Accessibility starts with design Derek Featherstone spoke about web…
Before diving straight into PostCSS it is first necessary to look at CSS processing in general. Processors like Less, Sass and Stylus allow you to start re-using CSS properties and patterns, keeping stylesheets DRY and easier to maintain. Each preprocessor has a slightly different syntax but all support the original vanilla CSS syntax as well. Benefits of Pre Processors Fewer HTTP requests with…
PostCSS makes it possible to transform or extend syntaxes and features of CSS. Nothing groundbreaking there then, but unlike existing pre-processors PostCSS aims to improve the usability of CSS by solving long standing issues with CSS at scale such as global scope and inheritance. PostCSS is not an all or nothing tool, plugins can be added to what is an otherwise clean slate allowing developers to…
A follow up to Surviving CSS, using Naming Conventions and CSS Methodologies to separate CSS into meaningful layers, aiding scalability, performance and organisation. Many of the CSS issues discussed in my previous post can be easily avoided with the use of an appropriate CSS strategy. In this article I will look at the benefits to be gained from using a Methodology and/or a Naming Convention.…
The ultimate goal of any CSS is to style the intended element with selectors that do not introduce side effects to the rest of the code base. Seemingly a simple request, but on large projects that lack structure or guidelines this task can lead to some pretty ugly usage of CSS. …the single hardest problem in CSS: Getting your rules to match the elements you want, without them accidentally matching…
Article originally posted on Sitepoint . An example of the code used can be found on Codepen . In this post a common text color function will be extended to work with gradient backgrounds. The effect is achieved by first creating a gradient background from a list of values. The function then appends corresponding color values to a new list to create a text gradient. A little background… The…
Article originally posted on Sitepoint . Sass creates Syntactically Awesome Style sheets, or at least thats what it is supposed to do. When used effectively, Sass helps to build scalable and DRY CSS. When used incorrectly however, Sass can actually increase file size and add unnecessary or duplicate code. Below is a series of hints and tips to help you get the best out of Sass… 1. Structure…
The original Maze framework was written in 2013 with the aim of removing column markup and creating a more semantic system. The grid was also developed with flexibility in mind aiming to create a basic starting point for any responsive layout. Maze was able to support any grid column size, with configurable margins and push values that could be updated from row to row. The direction in which…
This post looks at the role HTML can play in producing more optimised CSS. When discussing issues with CSS bloat, specificity and selector limits, focus is often drawn to the misuse of Sass. It’s true that refactoring your Sass can go a long way however paying attention to your website markup can be just as effective. Going back to basics and creating meaningful class names could dramatically…
Sass, as well as making style sheets awesome, was created to take some of the pain out of writing css. It s main purpose is to make code easier and quicker to write, modify and build upon. There are a lot of features within Sass which help achieve this, Variables, Lists, Mixins and loops to name a few. Nesting however does none of the above and has to be my least favourite and least used feature…
Sass variables are used to store information that you want to reuse throughout your project. Using variables allows you to make site wide changes by adjusting just one value, making updates much simpler and quicker. Despite being one of the most basic features of Sass variables are still often misused Good variable usage $color-primary: #ffa600; h1{ color: $color-primary; } button-checkout {…
Following on from this post Separate Your Layout and skin Sass files I put together a larger working example to further demonstrate the theory. Base stylesheet style.scss Style.scss is used to pull in all the usual folders for base styles, framework mixins, modules and vendor includes. There is also a folder for each page or section of the website which is broken down into 3 sections, layout,…
One of the greatest things about Sass is the ability it provides to separate large files in to more manageable chunks of code. When working on large or complex sites and future proofing code this becomes even more significant. Without adding any additional requests to the web site s head or effecting site speed and load times, css can be split out in to easy to manage folders and files. Developers…
When building the website for Maze I wanted to display the content on one page with a downward scroll. Each section or slide would therefore need to have a different background colour to emphasise the content change. To achieve this I took advantage of some of the new features in Sass. Firstly using variables I was able to store my colour values $orange: #ffa600; $blue: #82d2e5; $green:#c1d72e;…
After numerous rants regarding my disliking for Bootstrap and most other front end frameworks, I decided to have a go myself. The results can be found here www.get-maze.co.uk , an easy to customise grid built using Sass and HTML 5. My aim with Maze was to produce a simple to use set of mixins enabling percentage widths to be assigned to any selector in any layout. Why? I decided to build the…
Pop is a simple to use, responsive jQuery tooltip with css animations. The jQuery is written below and includes a click function as well a hover to support desktop and touch screen devices. View demo $(document).ready(function () { $(".button").mouseenter(function () { $(this).prev("div").fadein("slow"); }) .click(function () { $(this).prev("div").fadein("slow"); }) .mouseout(function () {…
Back when front end frameworks like Foundation were built using css instead of Sass the class names were presentational as opposed to semantic. The mark up used in grid systems was similar to the code example below. <div class="row"> <div class="small-2 large-4 columns"></div> <div class="small-4 large-4 columns"></div> <div class="small-6 large-4 columns"></div> </div> This code is neither user…
When setting up a new web project getting things right from the beginning is hugely important. Using Sass, style sheets can now be split into more manageable chunks without adding extra http requests. The Bear boilerplate (created following this earlier post) splits CSS into the following 5 sections Vendor Base Framework Modules Theme Vendor This folder contains third party Sass files such as…
As a Front End Developer I am reluctant to use a framework on any of my web projects. I have spent a lot of time looking at the various options including things like Bootstrap and Foundation. I guess one reason for this is that I m protective of my code and my projects, I want to write the code myself and ensure it s as compact and as scalable as possible. What s The Problem? Front End Frameworks…
Over the last few years along with most website designers I found myself increasingly using css3 properties such as text shadow, box shadow and rounded corners. Although subtle these features add style and depth to a website s design and allow for that little bit extra in terms of detail. In the past a first thought has always been how is this going to look in older versions of IE? . I…
Over the last few months I have found myself reading more on more about conversion rate optimisation and thinking much more about how a websites layout can help improve a users journey and encourage them to either make a purchase or an enquiry. In almost all of my recent design work I have decided to use a sidebar navigation instead of the usual horizontal nav across the header of a site. The main…
With the current focus on conversion rate optimisation, load time and page speed it may finally be time to move away from the currently over used jQuery sliding banners. Having a full width image slider has almost become standards practice over the past few years, often with poor navigation and large amounts of important content hidden from view. Not only do sliders increase page size and limit…