Interface design
The screens and steps of a web app. Drawn and built by the same person, so nothing gets lost between the design and the browser.
UX design · Colorado Springs, CO
UX design
Screens you do not have to think about.
I design the screens and I build them, so nothing gets lost between the two. And I test them with UX Testing, a tool I built into CrawlStat that checks whether a page does the one job it is there for.
- 2002
- Building the web since
- HEC
- MicroMaster in UX Design
- 9
- Page types CrawlStat tells apart
01 UX Testing
New in CrawlStat
Does this pagedo its job?
Most UX checklists treat every page the same. But a booking page and a shop page have different jobs. So UX Testing starts by working out what the page is for.
You give it one page. It works out what kind of page it is, and what it asks people to do: book, buy, sign up, or get in touch. Then it picks around 60 checks for that kind of page and tests it against that one goal.
What you get back is a list of what to fix, in order. The order comes from a simple sum: how much it hurts, times how many people it hits, times how sure the test is, divided by the work to fix it. The worst problems go straight to the top.
What it works out
- Reads as
- Local business or service, 85% sure
- Goal
- Booking (worked out from the page)
- Main action
- Schedule an Appointment
- Because of
- Business details in the code, a tap-to-call link, a street address
What it found
18 of 41 checks passed
- CriticalLinks with no name a screen reader can say125
- HighBroken links60
- LowPage title is too long40
4 not tested. Three needed a real browser, and one would have meant sending a form. It says so, instead of calling them a pass.
PassFailNeeds reviewNot testedBlockedFive results, never squeezed into one score.
Judged by its own goal
Nine kinds of page, each with the one thing it exists for. A page is tested against what it is trying to do, not a list made for every page.
Proof, not opinion
Every finding shows what was seen, where in the code to look, how to see it yourself, and what the test could not see.
Fix it, then prove it
Run the test again after the fix. The new run is linked to the old one, so you see what now passes, and so does your client.
Stays on your computer
It runs on your own machine. Nothing about your site leaves it. Reports hide emails and private codes.
02 Design system
One set of parts,used everywhere.
A design system is a short list of choices that every page follows. How much space goes between things, how big the text is, which colors to use, what a button looks like when you cannot click it.
I start with the small settings, called tokens. One for the space around a page, one for the width of the text, one for the gap between sections. Change a setting once and the whole site changes with it. Type the same number by hand in ten places and you spend the next year hunting for the copies.
This site runs on its own design system, built on the Artelier Design System. Every section on every page has the same width, the same spacing and the same left edge, because they all use the same few settings.
- Page spacing
- One value, every section
- Text width
- One width, every page
- Text sizes
- Headline, body, label
- Color
- Black and grey. Color only for things like errors
03 Attention
Where peopleactually look.
Everyone has an opinion about layouts, me included. I got tired of arguing about what catches the eye, so I built a tool to measure it.
It opens a set of pages the way a browser would and records where people look as they go. What you get is not a pretty heatmap for the wall. It is a list: what got looked at, in what order, and what got skipped.
What it changed most is the order of things. Often the headline everyone argued about was fine. The real problem was that nothing led the eye from it to the next step. That is a layout fix, not a wording fix, and you only see it when you measure.
It is a tool I use, not something I sell. I run it on my own sites, and on client sites when a page is not working and nobody can say why. Building it taught me more than reading about it ever did.
- 01
Open each page
It loads each page fully, not just the code, so what gets measured is what people actually see.
- 02
Record
Where people look, and in what order.
- 03
Change one thing
Fix the order, move the button, cut a step. Then measure again. One change at a time, or you learn nothing.
04 Practice
Design that ships.
Before any screen comes the plan for what goes where: the menus, the page names, and how pages link to each other. That is called information architecture, and I do that too.
Design systems
Shared settings, parts and the rules for using them, written down well enough that someone else can pick it up.
Attention audits
I run the eye tracking tool over your pages. You get a plain list of what people look at and what they miss.
Front end build
Built in Nuxt and Vue. Easy to use for everyone, including people with screen readers, and fast enough that speed never becomes the next project.
Got something that is not working?
Send me the page and tell me what it is meant to do. I will tell you what I think is getting in the way, and whether it is worth paying anyone to fix it.
Start a project
Tell me what you want to build.
Pick what you need and see the price right here, or just send a few lines. I read every message and reply myself.
What happens next
See all prices and what each includes