Redesign: The out of order sign that was out of order

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!
​