# Paul Wilshaw: the full site > Product and design leader in design systems, UX, accessibility and AI. Founder, Designed for Humans. Every page of https://paulwilshaw.com/, as text. The short index is at https://paulwilshaw.com/llms.txt. ## Home (the Willowmere game) URL: https://paulwilshaw.com/ Paul Wilshaw, founder of Designed for Humans: product strategy, UX, design systems, accessibility and AI. Explore the portfolio as a pixel-art adventure, plus free Figma resources. #### About Founder of Designed for Humans, a strategic design and product consultancy covering product strategy, UX, design systems, branding, AI and accessibility. Previously led design and product teams at Barclays, Blue Prism and UKFast/ANS. Winner of 80+ industry awards, speaker at Finovate, Product Tank and FinTECH Talents, and host of the Faster Horses podcast. Focus: Design systems, User experience (UX), Accessibility, Artificial intelligence (AI), Product strategy, Service design, Figma, Design leadership. #### Experience - Founder and Creator, Design Systems for Humans (Present): An AI design system tool that gives UX, engineering and product one collaborative source of truth, so handover stops costing weeks and piling up design and tech debt. - Founder, Designed for Humans (Present): A strategic design and product consultancy that works as your entire creative department, without the headcount. It brings product strategy, UX, design systems, branding, AI and accessibility together as one service. - Advisory Board Member, Blake Mill (Present): Bringing product, digital and innovation thinking to a brand built on craftsmanship (and bold shirts). - Co-Founder, GhostPosts.ai (Jul 2023 – Dec 2025): An AI start-up whose prompt refinement platform helped newcomers to AI write brilliant social posts, with inclusive, accessible writing habits built into the prompts. - Head of UX Design, ANS Group (formerly UKFast) (Jul 2021 – May 2023): Brought in to unify two brands, two tech stacks and 100+ products after the UKFast and ANS merger. - Head of UX and UI, Blue Prism (Jan 2019 – May 2021): Joined a listed intelligent automation company that had grown through acquisition, leaving fragmented journeys, several tech stacks and no UX function. - Head of Creative Technology and Innovation, Barclays UK (Feb 2017 – Jan 2019): Led the function that let the bank test ideas with customers within weeks, before committing to build. - Head of Technology and Design, Order with Fork (May 2016 – Nov 2016): Joined a funded food-tech start-up that had an idea but no product, brand or architecture. - Lead Creative Consultant, Barclays (Jan 2012 – Jun 2016): Led 12+ designers and developers internationally on Barclays Mobile Banking, Pingit and Barclaycard across iOS, Android and Windows Phone. All 5-star rated. - Senior Creative Producer, 2ergo group plc (Aug 2011 – Jan 2012): Designed user journeys, interfaces and HTML5 sites for Pizza Express, Ask, RAC, Phones 4U and HSS. #### Apps and Figma plugins - [Design Systems for Humans](https://systems.designedforhumans.tech): An AI design system tool: one source of truth for designers, engineers and product, with accessibility built in, generated documentation and an MCP server for AI coding tools. - [Design Systems for Humans for Figma](https://www.figma.com/community/app/1599118824542268787/design-systems-for-humans): The Figma app that builds your design system's variables and components for you. - [Icon Foundry — Designed for Humans](https://www.figma.com/community/plugin/1667641341513843373/icon-foundry-designed-for-humans): A Figma plugin for creating consistent icon sets. #### Free Figma resources - [The Value Proposition Canvas](https://www.figma.com/community/file/1561006873165651714/the-value-proposition-canvas-designed-for-humans): Map customer jobs, pains and gains against what your product offers. - [Transparency and feedback roadmap](https://www.figma.com/community/file/1162332250280117911/transparency-and-feedback-roadmap): A public-facing roadmap that shows customers what's coming and what you heard. - [Product lifecycle journey mapping](https://www.figma.com/community/file/1302216922511531847/product-lifecycle-journey-mapping): Map every stage of a product's life, from discovery to retirement. - [A Better Opportunity Canvas](https://www.figma.com/community/file/1302013079704531478/a-better-opportunity-canvas): Frame the problem, the people and the outcome before you design. - [Ultimate technology icon set](https://www.figma.com/community/file/1174649834315399886/ultimate-technology-icon-set-guidelines-and-how-to-guide): A technology icon set with usage guidelines and a how-to guide. - [System Usability Score template](https://www.figma.com/community/file/1151166793210370386/system-usability-score-template): Run and score SUS surveys (with UKFast/ANS). - [Alpha, Beta, Early Access and General Access releases](https://www.figma.com/community/file/1149640096087057670/alpha-beta-early-access-and-general-access-releases-service-design-phases): Service design phases for staged releases (with UKFast/ANS). - [Problem exploration workshop](https://www.figma.com/community/file/1136583025072466618/problem-exploration-workshop): A workshop for exploring a problem before jumping to solutions (with UKFast/ANS). ## About Paul Wilshaw URL: https://paulwilshaw.com/about About Paul Wilshaw: Product and design leader in design systems, UX, accessibility and AI. Founder of Designed for Humans, 80+ industry awards, host of the Faster Horses podcast. Founder of Designed for Humans, a strategic design and product consultancy covering product strategy, UX, design systems, branding, AI and accessibility. Previously led design and product teams at Barclays, Blue Prism and UKFast/ANS. Winner of 80+ industry awards, speaker at Finovate, Product Tank and FinTECH Talents, and host of the Faster Horses podcast. #### Highlights - 80+ industry awards - 33 days from idea to the App Store - NPS 80+ at a 350-year-old bank - 2 weeks from idea to a working prototype #### Speaking and community - Speaker: Finovate, Product Tank and FinTECH Talents. - Faster Horses podcast: Host of the podcast, with 10,000+ downloads. - AI trainer and team coach: Hackathon wins at Microsoft, Google and Meta. - School governor since 2017: At Grosvenor Road Primary School, championing disadvantaged pupils and SEND, with careers days for children with autism and disabilities and AI sessions for Year 6. ## Portfolio: complex products, made human URL: https://paulwilshaw.com/portfolio Case studies from Paul Wilshaw: a shared design language across two brands at UKFast/ANS, building a UX function at Blue Prism, and an innovation lab at Barclays. - [UKFast / ANS: One shared design language](https://paulwilshaw.com/work/ans). Two brands. More than 100 products. No shared design language. - [Blue Prism: Building a UX function](https://paulwilshaw.com/work/blue-prism). From no UX department to a team of more than 20. - [Barclays: Making room for experiments](https://paulwilshaw.com/work/barclays). Test the idea before committing to the build. ## One shared design language · UKFast / ANS case study URL: https://paulwilshaw.com/work/ans Two brands. More than 100 products. No shared design language. After UKFast and ANS merged, teams were working across different technology stacks and… Two brands. More than 100 products. No shared design language. #### The challenge After UKFast and ANS merged, teams were working across different technology stacks and rebuilding similar interfaces from scratch. #### What I did I built a collaborative design system with 1,000+ components, 900+ custom icons and 300+ illustrations. I introduced user research and a shared roadmap framework so product, engineering, sales and marketing could see what was being built, why and when. #### What changed The system gained adoption across the business. Teams stopped duplicating interface work, product consistency improved, and research helped reduce the risk of building the wrong thing. ## Building a UX function · Blue Prism case study URL: https://paulwilshaw.com/work/blue-prism From no UX department to a team of more than 20. Growth through acquisition had left fragmented journeys, different technology stacks and a product that was… From no UX department to a team of more than 20. #### The challenge Growth through acquisition had left fragmented journeys, different technology stacks and a product that was difficult for new customers to learn. #### What I did I built a team of product designers, researchers and UI developers, and created an accessible design system. We brought product and engineering together to simplify journeys and support the transition towards a cloud-based platform. #### What changed The design system shipped and was adopted by engineering. Simpler journeys reduced onboarding time, complaints and reliance on specialist consultants, while shared processes helped teams make decisions earlier. ## Making room for experiments · Barclays case study URL: https://paulwilshaw.com/work/barclays Test the idea before committing to the build. Long release cycles meant opportunities could move on before features reached customers. The business needed a… Test the idea before committing to the build. #### The challenge Long release cycles meant opportunities could move on before features reached customers. The business needed a way to test feasibility and customer needs earlier. #### What I did My team built working prototypes in two-week sprints. We explored emerging technology and tested ideas with customers, including experiments in mobile cheque scanning. Workshops and demonstrations brought senior stakeholders into the process. #### What changed Leadership could make investment decisions using evidence. Experiments that did not reach production still provided learning and removed risk before a much larger investment. ## CV URL: https://paulwilshaw.com/cv Paul Wilshaw's CV: 10 roles across Designed for Humans, UKFast/ANS, Blue Prism and Barclays, with speaking, community work and skills. Product and design leader in design systems, UX, accessibility and AI. #### Experience ##### Founder and Creator, Design Systems for Humans (Present) An AI design system tool that gives UX, engineering and product one collaborative source of truth, so handover stops costing weeks and piling up design and tech debt. - Generates full documentation automatically and bakes accessibility into every component. - A Figma plugin builds the design system for you. - Turns ten years of leading design systems at scale into a product. ##### Founder, Designed for Humans (Present) A strategic design and product consultancy that works as your entire creative department, without the headcount. It brings product strategy, UX, design systems, branding, AI and accessibility together as one service. - Works with scale-ups, SMEs and enterprises mid-transformation. - 5-star reviewed on Clutch; top-rated in Manchester for Product Design, UX and Branding. ##### Advisory Board Member, Blake Mill (Present) Bringing product, digital and innovation thinking to a brand built on craftsmanship (and bold shirts). - Introduced digital twins to cut the time from product concept to sales pipeline. - Helped reshape sales and marketing strategy and set product direction as the brand scales. ##### Co-Founder, GhostPosts.ai (Jul 2023 – Dec 2025) An AI start-up whose prompt refinement platform helped newcomers to AI write brilliant social posts, with inclusive, accessible writing habits built into the prompts. - Gave people a safe space to learn AI tools and build confidence, without needing to be a prompt engineer. ##### Head of UX Design, ANS Group (formerly UKFast) (Jul 2021 – May 2023) Brought in to unify two brands, two tech stacks and 100+ products after the UKFast and ANS merger. - Built a design system adopted across the business: 1,000+ components, 900+ custom icons and 300+ illustrations. - Made user research a core practice, so teams validated before they built. - Created a transparency roadmap framework that gave every department line of sight. - Introduced a pricing strategy that stopped the race to the bottom. - Replaced out-of-date sales decks with always-live online presentations. ##### Head of UX and UI, Blue Prism (Jan 2019 – May 2021) Joined a listed intelligent automation company that had grown through acquisition, leaving fragmented journeys, several tech stacks and no UX function. - Built the UX department from zero to 20+ designers, researchers and UI developers. - Created an award-winning, accessible design system that engineering adopted. - Moved legacy software towards an accessible, cloud-first platform with independent releases. - Simplified power-user interfaces, cutting onboarding time, complaints and reliance on consultants. ##### Head of Creative Technology and Innovation, Barclays UK (Feb 2017 – Jan 2019) Led the function that let the bank test ideas with customers within weeks, before committing to build. - Delivered working prototypes in two-week sprints, so investment decisions rested on evidence. - Prototyped cheque scanning; apprentices pitched the Chancellor to change the law on storing cheques. - Shaped the Digital Wings, Eagle UX and Eagle X programmes. - Helped Pingit and Barclays Mobile Banking reach an NPS of 80+. ##### Head of Technology and Design, Order with Fork (May 2016 – Nov 2016) Joined a funded food-tech start-up that had an idea but no product, brand or architecture. - Shipped a working app to the App Store in 33 days, and Google Play within 60. - Created the product architecture, journeys and brand, and led the crowdfunding campaigns. ##### Lead Creative Consultant, Barclays (Jan 2012 – Jun 2016) Led 12+ designers and developers internationally on Barclays Mobile Banking, Pingit and Barclaycard across iOS, Android and Windows Phone. All 5-star rated. - The apps won 68+ awards across Mobile Banking, Pingit and Barclaycard. - Paired seniors with apprentices on live work; several went on to Apple, Microsoft and Amazon. ##### Senior Creative Producer, 2ergo group plc (Aug 2011 – Jan 2012) Designed user journeys, interfaces and HTML5 sites for Pizza Express, Ask, RAC, Phones 4U and HSS. #### What people say - “Paul has been one of the best things to happen to my design career. I knew meeting him for the first time I wanted to work and learn from him… He helps build you up, really strives for collaboration and safe spaces whilst being forward thinking with design principles, systems and processes - he's truly ahead of the game. I couldn't have asked for a better mentor throughout my time at Blue Prism and I really do hope we get to work together again.” Stacey Ray, Lead UX Designer - “Paul is the best designer and manager I have had the privilege of working with, he is constantly keeping up with new and modern design trends and is always striving to create new and interesting UX and UI with whatever project he is working on. Paul is always pushing anyone he works with to strive to produce the best work possible and has always managed to get the best out of people as well as creating fantastic work himself. It has always been a privilege to work with Paul and I would love to and hope to work with him again in the future.” Si Fisher, Head of Mobile #### Speaking and community - Speaker: Finovate, Product Tank and FinTECH Talents. - Faster Horses podcast: Host of the podcast, with 10,000+ downloads. - AI trainer and team coach: Hackathon wins at Microsoft, Google and Meta. - School governor since 2017: At Grosvenor Road Primary School, championing disadvantaged pupils and SEND, with careers days for children with autism and disabilities and AI sessions for Year 6. ## Apps and Figma plugins URL: https://paulwilshaw.com/apps Apps and Figma plugins by Paul Wilshaw for designers, engineers and AI: Design Systems for Humans, Design Systems for Humans for Figma, Icon Foundry — Designed for Humans. - [Design Systems for Humans](https://systems.designedforhumans.tech) (Web app): An AI design system tool: one source of truth for designers, engineers and product, with accessibility built in, generated documentation and an MCP server for AI coding tools. - [Design Systems for Humans for Figma](https://www.figma.com/community/app/1599118824542268787/design-systems-for-humans) (Figma app): The Figma app that builds your design system's variables and components for you. - [Icon Foundry — Designed for Humans](https://www.figma.com/community/plugin/1667641341513843373/icon-foundry-designed-for-humans) (Figma plugin): A Figma plugin for creating consistent icon sets. ## Free Figma resources URL: https://paulwilshaw.com/resources Free Figma and FigJam templates by Paul Wilshaw: icon sets, usability surveys, release phases and workshops. - [The Value Proposition Canvas](https://www.figma.com/community/file/1561006873165651714/the-value-proposition-canvas-designed-for-humans) (FigJam template): Map customer jobs, pains and gains against what your product offers. - [Transparency and feedback roadmap](https://www.figma.com/community/file/1162332250280117911/transparency-and-feedback-roadmap) (FigJam template): A public-facing roadmap that shows customers what's coming and what you heard. - [Product lifecycle journey mapping](https://www.figma.com/community/file/1302216922511531847/product-lifecycle-journey-mapping) (FigJam template): Map every stage of a product's life, from discovery to retirement. - [A Better Opportunity Canvas](https://www.figma.com/community/file/1302013079704531478/a-better-opportunity-canvas) (FigJam template): Frame the problem, the people and the outcome before you design. - [Ultimate technology icon set](https://www.figma.com/community/file/1174649834315399886/ultimate-technology-icon-set-guidelines-and-how-to-guide) (Figma file): A technology icon set with usage guidelines and a how-to guide. - [System Usability Score template](https://www.figma.com/community/file/1151166793210370386/system-usability-score-template) (FigJam template): Run and score SUS surveys (with UKFast/ANS). - [Alpha, Beta, Early Access and General Access releases](https://www.figma.com/community/file/1149640096087057670/alpha-beta-early-access-and-general-access-releases-service-design-phases) (FigJam template): Service design phases for staged releases (with UKFast/ANS). - [Problem exploration workshop](https://www.figma.com/community/file/1136583025072466618/problem-exploration-workshop) (FigJam template): A workshop for exploring a problem before jumping to solutions (with UKFast/ANS). #### Guides - [What are semantic colours?](https://paulwilshaw.com/research-articles/what-are-semantic-colours): What semantic colours are, why each should do one job in your design system, and how to test them in real screens. - [Making a case for digital accessibility](https://paulwilshaw.com/research-articles/5-simple-steps-to-solve-digital-accessibility): Why accessibility makes sense for people and for business, five quick fixes anyone can make, and over 50 colour contrast tools. - [Making hackathons more inclusive](https://paulwilshaw.com/research-articles/making-hackathons-more-inclusive): A plan for a hackathon that welcomes people who are usually left out: framing the problem, removing barriers and rewarding learning over winning. ## AI, with a human in charge URL: https://paulwilshaw.com/ai How Paul Wilshaw works with AI: making this game with Figma Weave and Claude Code, a Figma widget for Azure DevOps, a UAT skill, a design-system MCP server and more. - [Making Willowmere](https://paulwilshaw.com/ai/willowmere) (This site): A pixel-art portfolio game in two and a half weeks, with Figma Weave for the art and Claude Code for the build. - [UX Tickets](https://paulwilshaw.com/ai/ux-tickets) (Figma widget): Azure DevOps tasks on the Figma canvas: tick a task and the real ticket closes, without leaving Figma. - [UAT](https://paulwilshaw.com/ai/uat) (Claude skill): Checks a live page against its Figma design at every breakpoint, then a person reviews the report. - [Design Systems for Humans](https://paulwilshaw.com/ai/dsfh) (Web app · MCP): A design system with its own MCP server, so AI coding tools build with the real tokens and components. - [Icon and Type Foundry](https://paulwilshaw.com/ai/foundries) (Figma plugins): Icon fonts and installable typefaces, built from your Figma drawings. - [Skills](https://paulwilshaw.com/ai/skills) (Claude skills): Ways of working written down once, so Claude follows the same standards every time. ## Making Willowmere · AI projects URL: https://paulwilshaw.com/ai/willowmere A pixel-art portfolio game in two and a half weeks, with Figma Weave for the art and Claude Code for the build. A pixel-art portfolio game in two and a half weeks, with Figma Weave for the art and Claude Code for the build. Willowmere was built between 19 September and 5 October 2026: 272 commits, 228 of them written with Claude Code. Paul wrote the story, designed the world and made every call on how it looks and reads. The Manchester buildings started as photos and sketches, turned into pixel art by a Figma Weave flow and a Claude skill that cleans each image up (at most 16 colours, a one-pixel outline, signs redrawn in a pixel font) and sizes it against Paul's character. ## UX Tickets · AI projects URL: https://paulwilshaw.com/ai/ux-tickets Azure DevOps tasks on the Figma canvas: tick a task and the real ticket closes, without leaving Figma. Azure DevOps tasks on the Figma canvas: tick a task and the real ticket closes, without leaving Figma. UX Tickets is a Figma and FigJam widget that puts a User Story's tasks next to the design. Ticking a task closes the real Azure DevOps task with a comment saying who did it; the story moves across the board from chips on the widget; comments, renames and new tasks happen without opening Azure DevOps. Each designer's access token stays on their own machine. ## UAT · AI projects URL: https://paulwilshaw.com/ai/uat Checks a live page against its Figma design at every breakpoint, then a person reviews the report. Checks a live page against its Figma design at every breakpoint, then a person reviews the report. The UAT skill reads a Figma frame's real values, tests the build in Chrome at 393, 768 and 1440 px (full-page screenshots, measured layout and 15 interactive states), judges each item within ±4 px with exact copy and colour, and grades issues from Breaking to Low. A reviewer accepts the report before it goes into the ticket. It works to WCAG 2.1 AA. ## Design Systems for Humans · AI projects URL: https://paulwilshaw.com/ai/dsfh A design system with its own MCP server, so AI coding tools build with the real tokens and components. A design system with its own MCP server, so AI coding tools build with the real tokens and components. Design Systems for Humans has an MCP server, so AI coding tools can ask for its design tokens, component docs, accessibility guidelines and approved compositions, check code for compliance, validate tokens, generate CSS variables and sync with Figma. ## Icon and Type Foundry · AI projects URL: https://paulwilshaw.com/ai/foundries Icon fonts and installable typefaces, built from your Figma drawings. Icon fonts and installable typefaces, built from your Figma drawings. Icon Foundry exports icons from Figma and builds the icon font (WOFF2, WOFF and TTF, the CSS, a code-point list and a searchable preview page). Type Foundry turns letters drawn in Figma into an installable typeface, entirely offline. ## Skills · AI projects URL: https://paulwilshaw.com/ai/skills Ways of working written down once, so Claude follows the same standards every time. Ways of working written down once, so Claude follows the same standards every time. Besides the Weave and UAT skills, Paul has written Claude skills for UX User Stories, Azure DevOps tickets and a seven-step design system workflow for building accessible UI against his design system's MCP server. ## Contact Paul Wilshaw URL: https://paulwilshaw.com/contact Get in touch with Paul Wilshaw about product strategy, UX, design systems, accessibility or AI, or find him on LinkedIn. Send a message with the form on this page, or find Paul here: - [LinkedIn](https://www.linkedin.com/in/paulwilshaw) - [Instagram](https://www.instagram.com/thepaulwilshaw/) - [Medium](https://medium.com/@paulwilshaw) - [Figma Community](https://www.figma.com/@designed4humans) - [Designed for Humans](https://designedforhumans.tech) ## Design-system challenge URL: https://paulwilshaw.com/quest Three teams built three different buttons. Build a shared component that people can read, understand and comfortably tap: a small design-system challenge from Paul Wilshaw. Three teams built three different buttons. Build a shared component that people can read, understand and comfortably tap. Related case study: [One shared design language](https://paulwilshaw.com/work/ans) ## Privacy and cookies URL: https://paulwilshaw.com/privacy What paulwilshaw.com stores on your device or sends elsewhere, and why: cookieless analytics by default, and a cookie only if you say yes. This site counts visits with PostHog in its cookieless mode until you choose. If you say yes, PostHog stores a cookie so it can tell a returning visit from a new one. Your game progress is saved on your device. ## What are semantic colours? URL: https://paulwilshaw.com/research-articles/what-are-semantic-colours What semantic colours are, why each should do one job in your design system, and how to test them in real screens. #### What are semantic colours and how should we use them? Semantic colours are basically colours from your brand and they are part of your design system that then do certain jobs and certain things. The way you can think about this is every single colour in your design system should have a definition. What does it do? Exactly the same as like a button or an icon or some other piece of design colours should do exactly that same thing. And why do we do this? Because colours are used, and with accessibility and colours, they shouldn't be used on their own to define things, but colours do have the impact – the same things as tone of voice or repeatable and functional things that help users to navigate your app, your website, your service, or whatever you're doing. “when that translates into code, into development, that colour should be consistent” Paul Wilshaw So colours really define this and what you see a lot of the time with colours, when they defined by brand, you might have a primary, secondary tertiary things like that, don't get me wrong, but, what you need to do in the world of design and when that translates into code into development, is that colour then should be consistent. So what colours are used for backgrounds, what colours are used for fonts? What colours are used, when you're filling out forms, what colours on buttons and things like that. And once you define those colours, Then it becomes easy for your users to navigate your website. Because, they all know , you've got your big call to action shouty buttons are all in bright orange, and, your softer buttons don't even have a background colour, they just have your base font colour and then other things. Then instantly gives your users confidence that they know clicking on something will automatically do a certain action and define that for them. So where you can think about. So yeah. Where I've done design systems in the past, we've named our colours very literally to what they do. Ronseal TV advert “Does what it says on the tin”. So, I talk about the Ronseal approach, and if you don't remember Ronseal, but back in the nineties they had adverts and , it does what it says on the tin and exactly the same colours. They should do exactly what they say. And then this, then if you will then pass on your design system to another person or somebody else, everybody knows exactly what each colour does. So for example, in one of my previous roles, we had a colour called action and that colour was used for buttons, links, anything clickable. And that was a really easy way to then communicate our design system. To anybody else, anybody new coming into it and it's an action. So that colour, it was ring-fenced to just be an actual and not to do anything else that might be shades of it, where we used illustrations and things like that. “Don't make me think” Steve Krug But in terms of the user interface, action did one thing and it did that one thing really well then . You've more popular, semantic colours would be positive, negative error states. And , then you'd have maybe your greens, reds, yellows, oranges, whatever, depending on where you are in the world as well, because colours mean different things in different parts of the world. So bear that in mind, when you're doing something and , why red is a negative colour in the Western world, but actually it's a positive colour in, Eastern continents and South Africa, things like that. That red is quite a positive colour reds, quite a nice colour so when I press stop recording, I know. The red will, stop and change and that, that gives me confidence that I know what this UI is doing and the same thing. If your mobile phone when you end the call because it's a red handset down and instantly you can just scan that screen to know exactly what something does and something in exactly the same place. So just bear that in mind and then you start creating these patterns that then, as the famous Steve Krug says, "Don't make me think" When you create colour patterns you'll make him the same thing, the look around where the world and take inspiration from there, exit signs in cinemas, and things like that, the green because that visible and pass to show you where to go on, what to do, and things like that, how do you want to, tell your users, your customers, what they're doing on your website or on your app so Apple go into this and they talk about in their human interface guides that colours are a very important part to provide visual continuity and communicate status information and give feedback to customers and a lot of time. A layer-cake eyetracking heatmap obtained from 9 study participants shows that they fixated mostly on the subheadings (and buttons) on a page on bacnyc.org.If you think about screens, like not many people read every single word on a screen anymore. Those colours can really help people to visualize what they're going to do and what it can take them to do next look for the colour and that colour scheme and it in part sets without any words, without any logos, that colour becomes part of your brand, part of your identity to just keep on doing that, and use it for communication and the colour is really powerful – then you can call attention to things. You can make things can really important by doing things that are strongly contrasting against each other. So for example, one of the strongest contrast on the opposite end of the spectrum are white and black, if you want to really shout at something, use that really strong colour contrast to say this is really important. You've got to follow these steps, I'm going to take a hundred pounds out of your bank account when you press this button – those kinds of things, and they are really important. Another mistake people, get into is, they use a vast range of colours and you have too many colours and then you get into this confusion, not only as a designer or a UX person, what colour should be used, where, and if there's confusion in your design system or your screens and you're thinking like, oh, should I use this colour here? I should have used that colour there and if you've got too many colours, you can sometimes fall into the trap of, creating a confused and Ling's Cars – a prime example website where you're not quite sure what things do, what things are where, so maybe even consider a, a limited colour palette. Build those colours up every time you might want to start with like four or five colours and think about your buttons are in this, your text, your backgrounds there's three. Warnings, errors positive interactions things like that. So you might want to start with a very subset part of colours. And then you can add to those on time and then you can those those visual excitement and open it up to a wider range of colours as your system grows, as your service grows add to those colours and when you need to, but don't get into the trap of thinking, like you've got to define 300 colours, you've got to define every single shade of this because you may never use it, if you're using something like Tailwind or if you're using other colours you may want to define those shades, but eventually you mean never need those. You may just want to define, you want to use the colour weight of 500, so with Tailwind colours come in, different weights you can apply the lower end of the scale is zero you have a lighter colour at the darker and heavy end, like 900, you have the darkest version of that colour. So you may want to have those, but again, if you've got more of those, you get into confusion, which, if you question yourself, what colour shall I use here and what colour shall I use for this interaction probably – you've got too many colours in your palette and start to be ruthless and trim some of those things out. Semantic colours in action, using a simple pallet of colours to define their use.What, what it does, if you've got an app bar at the bottom with some of your navigations, what are the colour highlights? What the colour that really can brings out your visual identity? But also that confirmation, that comfort for your users to know what they're doing try and think about, colour accessibility as well. The contrast of colours, there's loads of great tools out there. Try the [contrast checker on Design Systems for Humans](https://systems.designedforhumans.tech/contrast): choose the background colour and the foreground colour and it will instantly give you a rating of what that colour contrast is and make sure those contrasts are strong enough. For people to discern, to determine what is strong enough so that you can see it easily – do the squint test as well. Think about, those colours, how they work together, if you squint at a screen are they still visible to each other? Do they still look the same? Maybe, if you can do some user testing and find some users who have colourblindness and, I've worked with a couple of developers and they were colour blind and every time I went to add a new colour, check it with them first, and I'm checking, "oh, does this make sense?" Does this make sense to you? I wanted to add that new thing in, or this is the new colour, I want to add in here. What do you think? Does it go with this? So and a lot of people as well, colour contrast , it's not just text against the background it's other elements like buttons against the background. Illustrations, your brand identity, some logos, if that's against, if they're very similar colours Then people aren't going to be able to read that, going to be able to see it, exactly the same as texts on the background as well – so consider other things as well, not just text on a background, how that works. If you've got focus states for buttons, can you see those focus states? , if you're using yellow and then start putting your buttons on a yellow, or a cream background, then the focus state isn't as visible to loads of people, on those backgrounds – so think about those colour combinations and how you work, and you might want to have colour combo kits. So get a kit and say this, the colour combo on this background, this is the colour combo on this background, and just have three or four colours that just sit on that and then you create this really nice consistency, as designers and as UX people, we don't have to think. We don't have to worry about those particular things, and stress over those. And then our users, then, they get comfortable. They, know exactly what to do and exactly how to do. Think about, if you want some visual decoration and structure, maybe want less colour contrast on those as well. So think about, the structural things, the scaffolding on your webpage, how do you break up sections and how do you break up areas, are you using white space? That could be dark space, could it be shapes, could it be lines? And you probably don't want those as super colour contrasty as other things, because you probably don't want to have like big, full stops with those structure things that really stop the flow of that page. We mentioned it in a previous episode, of [Faster Horses Podcast](https://paulwilshaw.com/podcast), Scrolly-telling. Think about visuals and colours as if you're writing a novel or a short story and how you put those things together. If you're putting big colour blocks in-between, that's kind of like a new paragraph and new chapter. If you're put in more softer thingsto breakup the page, is that a full stop, a new line, or does it break up a few sentences? Things like that, or, are you telling somebody it's a totally different section? And you want somebody to really, take note, this is different, this is an interaction you need to be aware of – so what does that do when thinking about those, and think globally as well, if you've got one colour doing one thing here imagine if you changed the brand tomorrow, how would that affect your website, your app, or however you're going to do it? Would it be easy to change? , could you change it quite quickly? Would those colours, then have a knock-on effect. If you've got six months dev time to kinda like go like, oh, got this colour here, that colour there, you've probably got too many colours. “And don't just think like, oh, this colour looks nice, test it out in scenarios, take a page, take a screen and apply those colours” Paul Wilshaw Think about system thinking and thinking about, how those colours are intertwined in between everything. And don't just think like, oh, this colour looks nice, test it out in scenarios, test it out – take a page, take a screen and apply those colours to that screen then you know, quite quickly, that those colours are going to work. If you abstract it out, like anything, if you abstract colours out ofwhere you're going to use them, then, you can't guarantee that those colours will be used in the right way by everybody else and quite often I hear, "oh, I know the, the rules for using the colours". Well, that's cool, but if you've got to explain those rules to every single person you meet, not only is it super tiresome for yourself, but, then, it's not a good indication of how you can then communicate those to anybody else who doesn't have the luxury of sitting with you or having a Teams call or Zoom chat with you to indicate that and take that through to the next thing. So think about all those things. There's a [palette tool on Design Systems for Humans](https://systems.designedforhumans.tech/palette): choose your base colour and it gives you instantly all the ranges in that colour, and you can see how your palette works and how it interacts. And then there's loads and loads of people who use Figma like me, there's loads and loads of great plugins that can instantly just a few clicks of a button, define your whole styles of colours and all the colours in between, so do check out all those resources i'll put some in the chat below here, also ,share your colours, let's have a look at them, put them out on the web, what are your colours? Let's get a bit of a community. So that's it on colours, what do you think? What are your colours? Share, let's get them out there, let's think about what colours we're doing, what colours are you using and let's think accessibly as well. That's one of the easiest accessibility things you can put in, it's just checking the colour contrast. So let's all do that. Let's all go and get our colours super accessible and that's it. ## Making a case for digital accessibility URL: https://paulwilshaw.com/research-articles/5-simple-steps-to-solve-digital-accessibility Why accessibility makes sense for people and for business, five quick fixes anyone can make, and over 50 colour contrast tools. And 5 steps for a quick accessibility fix Levels of accessibility assistance required (Microsoft 2003) ###### 96.8% of home pages had detected [WCAG 2](https://webaim.org/standards/wcag/checklist) failures! ([https://webaim.org/projects/million/)](https://webaim.org/projects/million/)) ###### More than 1 billion people with disabilities around the globe have nearly zero access to digital products This same population wields market power in excess of £422.38 billion. ([https://webaim.org/projects/million/)](https://webaim.org/projects/million/)) That's a huge number and yet we seem to largely ignore this fact. Making digital products accessible makes a lot of financial sense, why would any business not want to sell its product an extra 1 billion people. Yet this is exactly what happens. #### Accessibility errors on website home pages Colour contrast is one of the easiest accessibility errors to fix. Check it with the [contrast checker on Design Systems for Humans](https://systems.designedforhumans.tech/contrast): test any background and foreground colours, for your text and for other elements, such as forms, buttons and icons. ###### More than 4 million abandoned a website because of barriers they encountered That's a huge number to factor in. If you relate this to a physical experience of a shop, you just wouldn't put barriers in the way to stop people buy a product. For example: Making your point-of-sale hidden behind a wall or putting spikes on the floor to make it difficult to get into. We don't do these things in real-life, yet we accept them in digital experiences. ([https://abilitynet.org.uk/](https://abilitynet.org.uk/)) ###### Worth an estimated £17.1 million in lost sales, in the UK alone, for 2019 The lost sales due to inaccessible e-commerce experiences causes a massive £17.1 in lost sales. With a few minor tweaks and including accessibility early in your development makes good business sense and provides a better experience for everyone. ##### What can we do? (in 5 easy steps) ##### Check your current accessibility score You can quickly check the current accessibility of your website by running a quick check of some key elements. This helps to measure the progress you've made in your accessibility journey, while providing an overview of things that need fixing. While automated testing gives you a good idea of where to focus your efforts, there's no real way of checking everything. For this, consult with an expert , such as, [https://consultseated.com](https://consultseated.com). Lighthouse is built into Chrome's developer tools.Example accessibility score for Medium.com ###### Top tools for checking your sites accessibility [Accessibility insights](https://accessibilityinsights.io): You can use this tool to check your accessibility of Android apps, websites Windows apps. This tool gives you fixes that take less than 5 minutes. [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk/related): Using directly from the Developer Tools in Chrome or by adding the extension made the Google team. ##### Design everything with at least an AA contrast ratio Make sure that all the designed elements have a contrast ration, use the [contrast checker](https://systems.designedforhumans.tech/contrast) to quickly check accessibility between the background and foreground colours. When using colour don't use colour alone to indicate the status of something. For example, green text without an icon or explanation will not look green to everyone. ###### Examples of how colours look with different conditions of colour blindness Normal visionProtanopia visionAchromatopsia visionTritanopia visionDeuteranopia vision ##### Use large fonts Don't be afraid of using a large font, this not only helps with accessibility, but increases the readability of a webpage. People don't read all of your content, they scan pages for relevant and interesting sections. Using large fonts really helps people to scan and find this content. The Neilsen Norman group published the results of a study about how people scan a page, [https://www.nngroup.com/articles/how-people-read-online/](https://www.nngroup.com/articles/how-people-read-online/). Never use light or thin fonts, light and thin fonts don't have the same colour accessibility and readability as regular and bold fonts. This also applies to strokes weights and focus states, for an in-depth guide on focus indicators; [https://www.sarasoueidan.com/blog/focus-indicators/](https://www.sarasoueidan.com/blog/focus-indicators/) Use a minimum size of 16pt, even on mobile devices using a 16pt font helps for a more comfortable read. The last thing you want is for your users to pinch and zoom into text and loose context of are they are in your storytelling. Avoid using UPPERCASE, uppercase letters may give the UI impact, this is a huge problem for your users with dyslexia. 6.3 million people (around 10% of the UK population) have dyslexia. [https://www.gov.uk/government/publications/understanding-disabilities-and-impairments-user-profiles/simone-dyslexic-user](https://www.gov.uk/government/publications/understanding-disabilities-and-impairments-user-profiles/simone-dyslexic-user) Complex words and abbreviations, not everyone is an expert or knows what an MVP is (Minimum Viable Product or Most Valuable Player, depending on who you're talking to). The average reading age is 11 in the UK, so maximise engagement by simplifying jargon and only using long, complex words when absolutely necessary. ##### Use ALT text(when appropriate) Where you're using an image and it's relevant to the story, social media post, PowerPoint presentation, etc. then it needs an alt description to allow screen readers to describe what sighted people can see. ###### Common mistakes when using alt tags Using one of my illustrations I've highlighted a few errors that I see when visiting websites. Using the filename as the alt tag alt=”stockimage54565494” This is just nonsense for the screenreader, image listening to this a few hundred times a day! Not providing a good description alt=”Data holding a gem” Not providing a good description can result in an entirely different message over the intent of the image. Using alt tags on absolutely everything As a rule-of-thumb, only use alt tags when an image adds to the context of your story or page.Icons used multiple times and with text beside them shouldn't have alt tags, instead use alt=” “ or aria=”hidden” so that the screen reader ignores them. Add to the story Describe what's going on in the image, complex images demand more descriptive alt tags, for example: alt=”Commander Data, from Star Trek, holding a giant gem reflecting a laser beam with padlock icons in the background” ##### Keep it simple The average viewing time of a webpage is 15 seconds and that's for everyone. If you haven't generated interest in those 15 seconds, then you're probably not going to. For top tips on how to reduce your bounce rate (the percentage of people who leave your webpage after viewing just one page): [https://www.crazyegg.com/blog/why-users-leave-a-website/](https://www.crazyegg.com/blog/why-users-leave-a-website/) [https://time.com/3858309/attention-spans-goldfish/](https://time.com/3858309/attention-spans-goldfish/) When we remove barriers and have engaging and relevant content our attention span increases. Netflix has a whopping average of 3.2 hours of viewing a day. So, it's not all bad news. However, accessibility frustrations cause people to leave your web page or social media content at alarming rates. And what's even worse, they're unlikely to come back. ###### If you want to watch these tips 5 top tips to All4Inclusion supporters during their digital accessibility webinar. [Watch the five tips on YouTube](https://www.youtube.com/watch?v=dwDxaJkH584) ###### Check your colours Every colour check from this guide is in one place on Design Systems for Humans: the [contrast checker](https://systems.designedforhumans.tech/contrast) for any pair of colours, and the [palette tool](https://systems.designedforhumans.tech/palette) for building accessible colour ranges. ## Making hackathons more inclusive URL: https://paulwilshaw.com/research-articles/making-hackathons-more-inclusive A plan for a hackathon that welcomes people who are usually left out: framing the problem, removing barriers and rewarding learning over winning. Hackathons are great. They do, however, exclude people. I created a plan for a hackathon that includes people who'd normally be left out: encouraging everyone to understand the problem through research, and offering training and upskilling for anyone not confident in coding or design. #### Start with the problem First, define the problem statement and frame it, so organisers and participants share the same understanding. Work through each step, and if you can't give a clear, simple answer, clarify it before moving on: - Goals: do you know clearly what problem you're trying to solve, and what you're working towards? - Understand: do you know the biggest problem you face? - Frame: can you articulate your idea simply and clearly? - Ideas: do you have a range of ideas for solving it? - Evaluate: are the ideas robust? Which is the strongest? - Decide: test and choose the strongest idea. A clear vision makes for an effective solution. For this plan I focused on mental health. In the UK, mental healthcare is in greater demand than ever: one in four people will experience a mental health problem at some point in their lives, a quarter of patients wait more than three months to see a specialist, and 6% wait more than a year (Campbell, 2018). The hackathon's brief: use automation, robotic process automation (RPA) and AI to improve patients' access to mental health services, and raise awareness of RPA with technical and non-technical people alike. #### Why hackathons leave people out Hackathons began as volunteers collaborating on open-source software, but organisations soon adopted them to gather ideas quickly through sponsored competitions (Richterich, 2017). I've experienced the 'contractual transaction' Rodney Folz describes: at a hackathon at Microsoft, days of talks about products came before any hacking, and five days of 12-hour stints ended with a £500 restaurant voucher and good PR for the sponsors. There is a clear contractual transaction of goods and supply: your time, your résumés, and your intellectual labor in return for their dinner, their cheap sunglasses, and their shirts emblazoned with corporate logos. Rodney Folz, 2015 The barriers aren't only the ticket. Delegates are often expected to bring high-spec laptops, phones and other kit, which shuts out people from low-income homes. At the Hearst Hackathon in 2015, around 80% of participants were visibly male (Zukin and Papadantonakis, 2017). Time pressure and prizes reward 'Frankenstein' prototypes and CV-driven choices over what end users need (Jee, 2015). What hackathons do brilliantly is prove ideas quickly; they rarely produce a finished product. #### An inclusive plan The aim was a hackathon where delegates collaborate on the brief rather than compete, and where learning is the reward: - Learning over prizes: mentors and practitioners, in person and online, teach delegates to build an automated process, and everyone who takes part earns an entry-level RPA certificate. Recognition goes to teamwork, participation and acts of kindness, not winning teams. - Many ways to contribute: an automated process, a website, an app, a film, an animation or a podcast can all answer the brief. - Paid tickets for a good cause: free tickets always lead to lots of no-shows, so tickets are paid, with the fees donated to the mental health charity CALM. - Free VIP passes: around 40% of tickets go free to delegates from under-represented backgrounds and low-income households, for example anyone who's had free school meals or a college bursary. VIP delegates attending in person get the software and hardware they need. - Reaching the right people: recruitment targets schools, colleges and universities in areas the English Indices of Deprivation 2019 show to be skills and economically deprived, through their own newsletters, websites and posters. Ticket pricing for the hackathon.The free VIP pass, for delegates who'd otherwise be excluded. #### Talking to humans To keep every channel consistent, I wrote tone of voice guidelines for anyone creating content for the hackathon. Talk to humans, not developers or enthusiasts who already know what a hackathon is. Inform, don't lecture. Ask, don't tell. Cater for different levels of expertise. Keep information bite-sized, use sentence case, avoid italics and light fonts, and spell out abbreviations the first time, like artificial intelligence (AI). Personas, built from anonymised data on behaviour, age and roles, shaped where and how to reach potential delegates. Registration also captured accessibility needs, so the event could plan for them, using a set of icons I designed: I tested the communication with potential delegates for usefulness, efficiency, effectiveness, learnability and satisfaction (Rubin and Chisnell, 2008), and tried different channels: a podcast about my own experiences attending, organising and judging hackathons, and teaser campaigns shaped to each social platform's audience. The website offered two journeys: a creator path for experienced hackers and a learning path for newcomers. The creator journey.The learning pathway. #### What could be done better Hackathons have worked well in retail, banking and travel because hackers can easily reach the people who use those services, often friends and family. Healthcare is different: access to patients is rightly regulated, and reaching people with mental health needs ethically takes real investment. Lasting solutions mean breaking down the barriers between hackers and the frontline practitioners who have the problems to solve (Chowdhury, 2012). The pandemic complicated things further. Face-to-face mental health services were interrupted, and an online hackathon raises the barrier to entry again: every delegate needs broadband, a capable computer and the right software for the whole event. The hackathon could run virtually, but providing equipment and one-to-one support, the heart of its inclusion, would be much harder. ## Idea Graveyard URL: https://paulwilshaw.com/graveyard Habits worth retiring in product design, and what takes their place: lessons from Paul Wilshaw's Idea Graveyard. A resting place for unhelpful habits, and what takes their place. #### Here lies: Accessibility later Build it into the foundations. Contrast, keyboard access and clear language belong in shared components from the start. Retrofitting them creates work for everyone. #### Here lies: The big-bang launch Test the risky idea early. Small working prototypes let teams learn before committing. An experiment that stops a poor investment has done its job. #### Here lies: One more duplicate Share the decision, not just the pixels. A common component language and documentation help product, design and engineering stop solving the same interface problem again.