UX Engineering, written by a practitioner

Notes from the space between Figma and production.

Hi, I'm Kingsley, a UX Engineer in Accra. I write practical, no-fluff pieces on design systems, accessibility, and the frontend details that make products feel good to use.

Illustration of a friendly sign-up form with a focused phone field, a helpful email error and a numeric keypad
Featured
5 min read

Designing Forms People Don't Hate

Forms are where users actually give you money, data and trust. A field-by-field guide to making them faster, friendlier and far less annoying, with the HTML to back it up.

  • Forms
  • UX
  • Accessibility
Illustration of a spinner, a skeleton screen and loaded content laid out along a timeline
5 min read

Your Spinner Is Lying: Designing Honest Loading States

Spinners, skeletons, optimistic updates and progress bars each tell users something different. Here's how to pick the right one, and the timing tricks that make an app feel fast.

  • Performance
  • UX
  • React
Illustration of a CSS file using :has() and @container next to deleted JavaScript files
4 min read

Modern CSS That Lets You Delete JavaScript

Modals, tooltips, responsive cards, form validation styles. Things we used to need JavaScript for that CSS and HTML now handle on their own.

  • CSS
  • Frontend
Illustration of a phone on weak signal next to a network waterfall and an over-budget JavaScript meter
5 min read

Build Like Your User Has Two Bars and a Budget Phone

Your MacBook on office Wi-Fi is lying to you about how fast your app is. A practical guide to testing and building for the conditions most people actually use the web in.

  • Performance
  • Frontend
Illustration of primitive color tokens flowing into semantic tokens and then into components
4 min read

Creating Design Systems That Scale

Most design systems don't fail because of bad components. They fail because nobody uses them. Here's how to build one people actually want to adopt.

  • Design Systems
  • Frontend
Illustration of a button in a Figma frame with redline measurements, the matching CSS, and a row of its states
5 min read

From Figma to Code: Bridging the Gap

Handoff isn't a moment, it's a conversation. Here's the checklist I run through before I write a single line of code from a design.

  • Workflow
  • Design Handoff
Venn diagram of design and code overlapping at UX engineering
4 min read

The Intersection of UX and Frontend Development

What a UX engineer actually does all day, why the role exists, and how to grow into it if you're a designer who codes or a developer who cares about design.

  • Career
  • UX Engineering
Illustration of a usability test: a task card, a phone with hesitant tap marks, sticky-note findings and a 4 of 5 stuck score
5 min read

User Testing Techniques for Better Products

You don't need a research lab or a big budget. Five users, a laptop and the discipline to stay quiet will teach you more than a month of internal debate.

  • UX Research
  • Product
Illustration of a confirmation dialog with a visible focus ring, keyboard keys, a screen reader announcement and a contrast score
5 min read

Designing for Accessibility: Beyond the Basics

You've added alt text and checked your contrast. Great. Here's the next layer: the practical stuff that actually makes interfaces usable for everyone.

  • Accessibility
  • Frontend