Pretending to be a designer
Part 2
The next few posts are about design, building the site, and putting it on the web. I’ve grouped them by theme, but don’t let that fool you. In reality, we were way less methodical, doing it all simultaneously.
Graphic design isn’t my strong point
The first thing on our to-do list from Part 1:
Design and build the simplest possible thing that does the job
Problem: neither of us are designers. I decided to pretend to be one.
Graphic design is my passion
Luckily for me, the designer on my team at work (Chris Basha) has also been furloughed. He’s been super generous with pointers.
He recommended I download a design tool, Figma, which is apparently what all the hip designer kids are using. It has a generous free tier and has been pretty easy to get to grips with.
I’d not used it before, but I had used Sketch a bit and the core experience is pretty similar.
Design problems
The point of our furlough calculator is for people to be able to figure out if furlough is financially viable for them.
As any working member of society could be furloughed, it’s gotta be easily understood by all sorts of people accessing the site on all sorts of devices and browsers.
With that in mind, here are some beats we wanted our design to hit:
- It should answer the question “could I afford to go on furlough?”.
- It should be as clear and simple as possible
- 1. and 2. should be equally true for any of our users, independent of their demographic, device, or choice of browser
One website that’s great at accessibility is gov.uk. It also does a similar job to the sort of job we want to do (giving advice to the general public).
So the plan was to steal from gov.uk. Their design system is great and they’ve documented the whole thing.
Problem designs
Attempt 1
I tried to design the simplest thing I could think of.
Here is that thing:
👍
- If you put in your yearly salary, it tells you how much furlough pay you get per month.
- As it can be made with basic HTML and a small amount of CSS, it should be accessible by default and easy to make responsive to different devices.
- It has a disclaimer so that people are aware that this is just an estimate based on some javascript that a couple of guys wrote in an hour.
👎
- It’s not clear where the bit that says your furlough salary ends and where the disclaimer begins
- It’s not clear which bit you should be looking at for your furlough salary. It’s a bit hidden in the flow of the text
Before solving those problems, I got excited about how cool it would be to have a place for users to give feedback and designed that too.
👎
- It looks like clicking submit will submit that salary that we’ve entered to some unspecified place. Scary!
- Also, where exactly is my feedback going once I hit submit?
- And why is that button green? It grabs all my attention.
Attempt 2
Attempt 2, and there’s a new feature: we’ve added the “after tax” calculation.
We want to enable the user to answer the question “could I afford to go on furlough?”. My thinking was that to do that they’re going to have to mentally deduct tax from their pay, which seems like a problem we can easily solve.
The same goes for national insurance, but I forgot about that in these first designs. Oops.
Here’s what Chris and I came up with:
This is starting to feel not embarrassing!
How are we doing against our design problems?
- It’s clearer where the bit that says your furlough salary ends and where the disclaimer begins ✅
- It’s a bit clearer which bit you should be looking at for your furlough salary, but still not that obvious. We could do a little more here 🤷♂️
- The feedback form is now a link to email us. The copy makes it clear that that’s what we’re doing and there’s no button that looks like it might submit your salary somewhere ✅
Not perfect, but good enough to go live and start getting feedback from real people.
In Part 3 we’ll turn these designs into something worth showing off.
If you read past the tapir, chances are you read the whole thing. If you dig it, give us a few claps. It’ll help others find this too.
