When JD Dillon (@JD_Dillon) tweeted this photo last week, I'm not entirely sure he expected people to actually fully redesign the thing, but I just couldn't help myself. The sign was hard to read from far away, the text was in dire need of some visual organization to make things clearer, and that half-finished instruction to the next nearest ATM wasn't helping anybody. And so, in about 5 or so minutes I quickly put together the following redesign.

I first wanted to make it substantially easier to see from far away that the ATM was out of order. The red header and the large "Out of Order" at the top of the sign make it pretty clear something isn't okay with the machine. You might not even need to walk up close to it to decide to pass it by.

Next, I wanted to give some clarity about the situation and break the information up so it would be easier to ingest. I added a small amount of text to explain the ATM wasn't working and cheerfully suggest an alternative - an ATM just a short walk away. To make things even clearer, I added in the street address of that ATM (obviously made up in this case) and also included a map (hooray for reusing an asset I had made ages ago).

Finally, I'm Canadian, so the sign absolutely had to include a slightly reworded version of the apology from the original sign, now separated from the rest of the text so it could stand out more.

I may have cranked this out in about 5 or so minutes, but I think even this quick idea is a vast improvement. But what you design in that short a time and how you're able to refine it over time are two different things. After I posted my initial sign redesign, @signalitsm commented that they thought the first line of the body copy could be edited out -  the big Out of Order header was enough to signal the ATM wasn't working - and suggested that stating "We're sorry for the inconvenience" would be more powerful than saying "Our apologies for the inconvenience".

While I'm still touch and go on whether or not the different apology wordings seem more or less powerful to me (this may be my Canadian-ness... not really sure), the point about the first line of copy was definitely something I spent some time pondering. I had originally felt the sign needed that line to make it seem less blunt... but did it really? 

So I reworked the sign with both suggestions.

Turns out, I liked this a lot and the shorter copy didn't in the end feel as blunt as I was initially worried it would. This is a good reminder that it's always useful to get another set of eyes on your design (especially when it's something you speedily crafted in a just a few minutes for a Twitter conversation).

Now, this is where I expected this redesign story to end, except that when I reached out to JD to get his permission to use his original photo he told me an intriguing bit of additional information: he had found this sign on an ATM at Toronto Pearson Airport. And that made my brain go in a pretty different direction.

First, Pearson is my home airport, so I'm very aware of what their colour palette and graphic design tends to look like. That made me think about how to shift my original design to have it better align with the Pearson look and feel. Second, that gave me a better sense of what tone the copy should have so it would feel right for the location. It could be a bit conversational (but not too informal) and since it was in Toronto it definitely needed to emphasize the apology.

​With that in mind, I worked on a rough idea for a new version of the sign.

I couldn't confirm what font the Toronto Pearson Airport uses for printed signs, but their website uses Trebuchet so I went with that to make this feel more on brand. Along those lines, I also swapped out my original map with one based on the terminal maps available on the Pearson website and adjusted my colour palette to better match it and the website colours .

In the original Twitter conversation, one thing I had noted was it might be handy to know how long the ATM was going to be down for. Would it be just a few hours, in which case you wouldn't need to plan around the problem in the future? Or would it potentially be broken for weeks as they waited for a repair appointment, in which case you'd perhaps want to skip this ATM entirely for the next while? Because of this, when I reworked the copy I added that information in. It added more text, but I thought the tradeoff was worth it.

While revisiting the copy I also took another look at the apology wording. Adding in the line about the maintenance date gave me some room to move the apology right up to the front without making it grammatically awkward. That move also allowed me to shift the wording to something more conversational, but still appropriate for the situation.

Once again, this is just a rough idea (I'm still on the fence on how effective I think the more washed out brand red works in this context), but I like where it's going. It feels like it belongs to the location it's in without having to include busy formal branding and logos, it quickly communicates the information a person needs to solve the problem, and it has a nice human touch.

Admittedly, pretty much anything was an improvement over where we started, but this was a fun exercise in thinking about how simple design choices can make information more clear.

The great thing about design is there's almost never just one right approach. Have some other ideas for how you might have redesigned this sign? Leave them in the comments below!
​

Wouldn't it be nice if there was some unified theory of design that could just give you a single approach that would work in every single situation? Do this with the fonts, that with the alignment, and another thing with the colours and done! If you're a newbie to visual design, this "one design formula to rule them all" is the kind of solution you might hope to find.

Unfortunately, the sheer number of variables at play means... well... that's never going to happen. And to be honest, it's actually one of the fun parts of design once you get more experienced with it - the challenge of looking at a design problem and considering what the best approaches for that unique request might be.

But if you're new to visual design, no worries. There are thankfully some stable concepts you can consider to help simplify your thought process as you narrow down what the best design options might be. And one good concept to start with is to think about the context for what you're about to create.

Lucky for all of us, I bumped into a fine example of how context impacts design a few months ago on the Toronto subway. We start our story with a sign about a temporary closure on the line.

At first glance, this sign probably strikes you as smartly designed. They've pared everything down to just the information you need and nothing more, so it's not overwhelming you with details. The text looks large. The colour choices are simple. There's a handy little graphic to help you better understand which stations exactly are going to be effected by the closure. There's also a ton of whitespace around everything, so the sign doesn't look cluttered. In theory this seems like a solid design and you have to believe it looked pretty smart on someone's computer screen. 

But when you take into account the context of where and how people will be viewing it, that's where things start falling apart.

Up close, the sign is great. But because of where it's displayed, it's not something most people are going to see at that distance. Instead, they're going to see it from way down a hallway as they follow that orange arrow I added to show you the traffic patterns of how people scurry around this corner to get down to the subway platform. When it's in your sightline, it's VERY unclear what the sign says (let alone that it's communicating important information) and as soon as you get close enough to actually read the thing properly almost everyone's eyes have shifted to the right towards the stairs. What's an effective design up close just doesn't work so well in the situation it needs to be used in.

Thankfully, our subway system figured out a simple, yet effective, solution: they added a second sign.

Sign number 2 is even simpler. It's goal isn't to communicate all the information you need - it's to get your attention from far away. 

n.And this pairing works rather well. The sign on the right grabs your attention from far away and tells you something important: there's going to be a subway closure this weekend on part of the line. Subway closures are a complete pain, so this is likely to make people want to know more. You get closer and then you have the sign on the left with the additional details you'll need to plan your life around this (still, thankfully, presented in a simple manner)

Is it perfect? Probably not. Personally, I think the black background on the right sign doesn't help it stand out enough and I do wonder why the two signs weren't swapped given that English reads left to right, but generally speaking it's a good solution that takes into account the context of where the design will live and how people will move around it in order to accomplish its goals.

​No matter what you're designing, you always want to consider context to ensure what you've made actually functions the way you want it to in the real world.