Everyone Said to Stick with the Blue…A Tale of Colored Text on a Big Screen

I will never forget designing my first mobile application. Flat design was just starting to show up. Metro was cool. I had a client that just did not like “plain” backgrounds and “solid” tiles. I went through so many versions of a design trying to help him understand why using blurred PowerPoint backgrounds and transparent tiles with icons and lots of text was not necessarily the best way to present a lot of data to a bunch of executives on a phone. Ahh, the good old days.

Use of color seems to be something I always end up talking about with clients. When a design just doesn’t feel right to them, it seems like they almost always bring up adding color, taking away color, or maybe putting even more colors. Recently, I was working on a pretty cool opportunity. The client brought our team in to redesign a dashboard for their customer support center. Not only did they want a responsive design that would work on a tablet, a touch screen, or a desktop, they also had a huge wall screen where they wanted to display the information. The design had originally been created for that large screen, in technology that was 10 + years old, with a design to match.

Getting Started — Understanding the Who, What, When, Where, Why

Understanding through observation and questions

We started off getting a good look at what was there. What’s the room set up like? How was the environment? Who was actually using it and why? What was the real purpose for having this huge screen in the room, where people mostly worked on their desktops and phones? What information did they have today? What did they wish they had? What would make it useful? What were they missing? What did they really care about?

We were lucky enough to actually get to see the room where this team worked, plus a view in to where the other part of the team work remotely. We were able to observe and ask questions. Out of this we were able to get a decent picture of who the users were and what they thought they needed.

Defining the What and Where

My favorite part of a project like this is the part where we get to the interaction. For this one, I had the group in the main room talk about what it was they liked on what they were using currently, and what the wish they could get from it. The sentiment in the main room was — this is nice and all, but I really just use my desktop and the reports there. We looked at what they used daily, and what they needed to report on and needed to be able to get to the customers to fix their problems. After talking to that group of users, we had similar conversations with the managers, who used this particular dashboard from their remote offices. We also had to take in to account the customer’s customers. Much of the idea behind this room was to show the customers that they had an up to date view into how the business was running — a wow factor of sorts. So practicality and wow factors meeting the needs of 3 very different user groups.

  • What did the support reps care about? The current group email inbox messages, the critical support cases, the very large clock that gave them a quick way to see when end of shift was.
  • What did the managers care about? Mostly the same as the support reps, with some metrics around progress of cases closed.
  • What did my client’s customers cared about? The wow factor of the moveable map, what directly affected them and their accounts, the fanciness of the design.

Once we had a good picture of who and what, I took that information and sketched it out in blocks — where does the information go so the most important pieces of it are front and center? The problem is — where is front and center on a huge wall screen vs front and center when viewing the same thing from a desktop or tablet. Top left corner? Center? I put it all out on paper, and had the group take a look. We ended up settling on the top and bottom left, as that was what was easiest to see on the big screen (surprisingly enough, the desk set up played in to this — which is just another example of why seeing a user’s real space is likely to feed in to how they view the design).

Sketching it out
Getting some feedback

Something they Didn’t Know

Taking what they already had was fine, but what my client was really hoping for was something they didn’t know the really needed — they had some random graphs on the wall, but no one really knew what they were, or what they really meant to the people in the room. Part of what we suggested was some newer, more informative metrics and reporting so that the support reps could understand how many cases were open, managers could see how the cases were bing cleared, and customers could see some cool numbers.

  • Specific single number easy to read tiles with key metrics instead of a rotating set
  • Seat maps and connectivity of who was in the room, were they busy?

The Next Step — Taking it from conversation and observation to design

Refining the wires and flow

I took it next to wire frames to verify the structure and the potential user flows, since the idea was to not only display this on a large screen on a wall, but also use this on a tablet or a desktop. I wanted to test out how well the information would fit on the actual dimensions of the wall screens, but also how that could reduce down to the smaller screen sizes effectively.

How would the placement on the wall really translate to the rest? Would it still work beyond the drawings on the page?

From 1st wires to last

We started off fairly simple, with the key areas along the top. We tried a few variations, running through some quick testing with the managers and support reps.

First wire frame

First wire frame

But after doing some testing, including putting it up on the big screen, we ended up with a different configuration.

Final Layout

Final Wire frame

User Flow

Annotating the flow

Making it Blue — Adding the Visual Design You can Agree On

When we started talking about the actual visuals included in the design, we talked about appropriate palettes, any standard branding guidelines that we had to adhere to, and the key things we wanted to make sure users could focus on using color cues. We talked about some of the basic dashboard elements that you can use to draw attention to status of the different objects — not only the key metric tiles but also in the seat map, case lists, and map. I was told, half-jokingly, that as long as I stuck with the standard blue used in the organization, then everything would be fine. I laughed. I learned.

Where we started

We started with a few variations of the basic design, just to get a feel for the direction.

A Design Option

I started with using the blue in some key areas, like the headers, and using icons and color to show status of the different items.

More Blue Option

What was interesting is how good the dark black backgrounds looked in the conference room, but when we put it on the big wall, it made the room itself very dark, even with the windows open and lights on. (The current design was using a variation of the “blue” with some shading.)

We heard two things:

  • The black background made the room so dark it would make them fall asleep when they were working the overnight shift.
  • They wish it was blue.

So round two and thereafter, we went with a blue background. Not just because it made the support reps and managers happy, or because it promoted more branding, but because it was more usable in the situation.

What about the colored text?

One the things that was available in the previous version of the design was using colored text to show status, instead of icons. It made it very hard to read on the screen, especially because the contrast between the blue in the background and the red/yellow/green of the text, plus the font style and size made it almost illegible on the big wall and on the desktops. We brought up the icons design to help mitigate some of that and incorporated that into the overall design.

The support reps did not like this change. They really pushed back. So instead of abandoning the idea altogether, we created a switch between the two. When customers were coming in, they could switch the to the more deign friendly look, and if wanted, they could also get the colored text. Not the direction I would have preferred, but a compromise we had to make in the end even after multiple conversations and examples of why it wasn’t the most usable option.

The Colored Text
The plain text

Where We Ended Up — The Final Outcome

So, we ended up with blue, like everyone said I would in the beginning. But this time, I think it really was a better decision. No blurred PowerPoint backgrounds, or freaky clear tiles. It was dark enough to not glare, but bright enough that it would reflect well in the room. Last I hear, the client had customers in and they loved it.

Sometimes, even though you aren’t sure, you just have to stick with the blue.