Bridging UX and
Data Visualization to Build
Smarter Dashboards

[Aric]

Well, good day everyone. We’re back for another Zion & Zion webinar and I am Aric Zion, CEO and partner at Zion & Zion and today I have with me Amanda and Ashley. Would you guys like to introduce yourselves and your titles?

 

[Ashley]

Yeah, absolutely. I’m Ashley Rousselle. I am a Business Intelligence Strategist here at Zion & Zion.

 

[Amanda]

And I’m Amanda Johnson. I’m a Senior CX UX Strategist.

 

[Aric]

All right, and today we’re going to talk about a very interesting topic, one that definitely I would say 95% of the organizations we encounter don’t even remotely explore, which is the real formal intersection of UX and data visualization. Really, really interesting topic. And I often find that the intersection of functions, you can create new knowledge and new opportunities.

 

And I think our team has a pretty good track record of doing that. So without any further ado, why don’t I start by asking you, Ashley, talk to us about the role first that dashboards play for clients and the kind of key information clients generally request and require. I know a lot of this is table stakes, but it’s good background before we get into the UX implications of this.

 

[Ashley]

Yeah, absolutely. And I would say dashboards and data visualization is really important for our clients because there are very few teams across an organization that are going to be in the data warehouse querying the data themselves. So having a data visualization and dashboards really might be their only access point to the specific data, especially if within that data warehouse, you’re using different data sources and joining them together.

 

So it really could be the only access point to that data that you have. So those data visualizations are going to be really important for our clients. And with that, also just data visualization in general is really important.

 

We see even in our everyday lives that data visualization plays a role. If you wear an Apple Watch and you track your fitness, you can see if you’re tracking towards your rings, which would be your move, stand and exercise goal. So not only is data visualization important just in the context of our careers, it’s really important and it’s growing in our everyday lives as well.

 

So the kinds of data that we’re putting into dashboards really varies across the board. I mean, we work with lifecycle marketing, we work with ad sales, we work with employee utilization data. So there’s really no data that we don’t touch that we’re putting into dashboards to help the end user answer the questions that they have very quickly and efficiently.

 

[Aric]

And Amanda, over to you for a second. So talk to us about the fact that, at least my observation with clients, but I’m curious as to yours as well, you just don’t see that formality in UX testing applied to data viz, especially on the client side a lot. Talk to us about what you see and kind of what’s missing and how one would go about that, because I think it’s easier than a lot of people think.

 

[Amanda]

Yeah, I think there’s a lot of opportunity to integrate UX into the data viz world because they’re so similar, but it’s really easy to skip over that. So because a lot of these data visualizations are so often internally used, it’s very easy to skip over the testing aspects that we might focus on for more of a customer-facing product or tool. So when a client’s coming to us and we’re building a website, we’re going through rigorous testing of actually putting that website in front of panelists and having them go through specific tasks and observing their behavior.

 

And that’s what influences how we build out the user journeys for a new experience. And that step just so often gets missed when we are creating these dashboards, even though many people are in these tools often, maybe every single day, multiple times a day, and it’s a very interactive tool. So there really is that opportunity to bring in moderated testing, observing users of these tools and kind of just updating them to mimic that user behavior and optimize them in that aspect.

 

[Aric]

Yeah. And I think that, I mean, from what I’ve seen from the projects you guys and other team members here have worked on, it can be pretty simple, right? I mean, running some of that moderated testing with your own internal or unmoderated with your own internal stakeholders, recording that video feedback.

 

I mean, sometimes those tests can be as short as what? I mean, minutes?

 

[Amanda]

Yeah. I mean, I think, you know, nowadays you could jump on a Zoom and something like a shadow where you’re just watching someone interact and having them verbally talk through what they’re thinking in their head. You know, I’m clicking here because I’m trying to look at X, Y, and Z.

 

Understanding how they interact with the dashboards, understanding the kinds of information they’re looking for helps us observe their behavior. That could be done in, you know, as little as a few minutes or longer for a day, depending on, you know, how long people are in there, but any kind of insight is valuable to make those kinds of optimizations for sure.

 

[Aric]

Yeah. Yeah, definitely. I mean, there’s absolutely a lot of value there and it’s such an easy obstacle for an organization to overcome.

 

If an org just said, hey, we’re rolling out a new dashboard, a new view or whatever, we’re going to do testing. I’m going to allocate 30 minutes to this task, right? They could make progress.

 

Yeah. So, Ashley, I think you brought an example of a before and an after and why the after is the after, et cetera, after going through, you know, some of this testing. I wanted to talk to us about that and show us your examples.

 

[Ashley]

Yeah, absolutely. So, Amanda and I have a before and after to share with you. So, I will share the before now and just walk you through the dashboard.

 

So, what we’re looking at in this dashboard is going to be a fictional baseball team, their data. So, basically what we’re looking at is streaming data. And this is all anonymized data just for the sake of this practice.

 

But what we’re looking at here is we really wanted to create an alert system, which basically says I want to be alerted when this team is above or below the threshold that we set. So, when you first look at this, you see a bunch of teams in the middle. You see the red down arrows.

 

So, that quickly grabs your attention. But you also see on the left-hand side, there is quite a bit of filters. There’s a threshold, a type in, and then you also see the buttons right below it.

 

So, what we’ve done with the before is basically how do we clean this up to make it less redundant and how do we make it so when you first look at this, it makes a little bit more sense. Because I think Amanda can agree that there is probably some confusion when you’re looking at the buttons on the side, like what do those do? Are those filters?

 

So, I’ll let Amanda speak through those a little bit.

 

[Amanda]

Yeah. So, really here, the first step was kind of what UX best practices are we missing here that we can apply? Because at the end of the day, the people using this dashboard, they’re users, right?

 

So, we can apply just basic UX best practices and optimize this quite a bit. So, a few things that kind of stand out right off the bat here and that we’ll kind of focus on today. The first in that bottom left corner, you see those button features, the minute stream, the users, the tune-in rate.

 

And the appearance of those, they almost look like what you would expect on maybe like an e-commerce site where they’re like a filter. So, you would almost expect by looking at those that by clicking on one of them, that you would have maybe a slight shift to the graphs on the right-hand side, maybe, you know, just some of the wording might change. But in reality, the way that those function is they’re actually more, they’re changing the entire right-hand side information.

 

That’s an entirely new screen. So, what we can see from a UX standpoint is that the expected behavior based on the visual display of those buttons and the action that’s taking place is not really cohesive. So, we’ll look in a moment of how we adjusted that on the after and kind of how we transitioned that to be more aligned with that expected behavior.

 

So, that’s the first example. The second, right above that, we have the threshold filters there. So, we have that first one saying threshold met true and then the threshold percent there.

 

That was another area that just kind of doesn’t really align with user behavior and how they’re actually interacting with this tool because many of the users aren’t actually even adjusting that true false filter. So, that kind of eliminates the necessity of that. And then, that threshold percent, another big thing here was proximity in these dashboards.

 

So, really often something I see that’s missed when creating these dashboards is the proximity of the filter itself to the information that’s changing on the screen. So, with this specific filter, changing that threshold percentage was actually updating information that would be outside of where the user was looking at that point or where their mouse was. And that might not even cue the user that there’s been a change on their screen.

 

So, that’s just kind of another thing that’s going against what we would expect in a UX best practice. And then, the last thing just that we’ll kind of focus on for the sake of this before and after was the actual information that’s being presented here within the teams of, like Ashley mentioned, we have those red arrows calling out that decrease, which is a really great visual cue. But then, all of the text that’s after that is really a lot to read.

 

And it’s a lot of repetitive information over and over again. So, from someone who, a user who wants to log into this dashboard and really quickly find an insight, it’s just not optimized for them to be able to do so very quickly. So, those were kind of three areas that we focused in on just as a starting point here for a discussion.

 

If we’re good to jump ahead to the after, I can show how we kind of took these insights and transformed that into apply those UX best practices. So, we’ll go ahead and get that after dashboard up now. So, here what we can see, we have the three pieces called out.

 

So, the first in that top right-hand side is going to be that first insight that I mentioned about those buttons that were previously placed in the bottom left corner. As I mentioned, those actually switch out the information that’s appearing on the rest of the screen. So, rather than taking kind of that button filter approach, we’ve adjusted the visual UI here to have that more of a tabbed approach.

 

And what that’s going to do is cue to the user of this dashboard that they’re actually going to be getting a new screen, new information showing. So, adjusting the placement of that information, adjusting the visual display of that, and the functionality of that, really just optimizing this for UX best practices. The second thing with that percentage threshold that was on the left-hand side previously, we talked about the proximity between that percentage and the changing information.

 

So, we just went ahead and moved that percentage input field actually to be in line with where the user’s eye would go. So, if a user now were to adjust that, it’s just updating the information on the screen within their viewpoint, make it a lot easier for them to see when information is changing. And then the third change that you’ll see here is actually in that copy that’s, you know, with the teams and with the insights there.

 

And as I mentioned before, it was that really long sentence of text. And now we’ve just taken out a lot of that repetitive information. We’ve done some visual rearrangement in the UI of bringing in some of that text into new lines, really emphasizing that decrease, increase, calling out that win.

 

Just making that visual change just helps someone using this dashboard deduct that information that much quicker. So, like I said, these are just three examples. And obviously, with testing and with all of the different tabs here, there’s a ton of more UX improvements that we can always look at.

 

But this is just three examples of how we can apply some of those UX best practices to these and have big impact on how these work. So, hopefully that’s helpful.

 

[Aric]

Yeah. So, I mean, this is really, you know, people would say, well, you know, oh, the before, the after, et cetera, at first glance, you know, does it look that much different? It’s kind of like wearing a shoe, one that has a little pebble in it and the other that doesn’t completely impact your ability, you know, to walk.

 

I mean, it’s the same reason that people go through comprehensive UX testing on a website or why people do A-B testing to move this thing here or there, you know, looking for those improvements. So, I mean, it’s great that you’re practicing this because there are so many people that would say intellectually, sure, I get it. We’re not going to have the time.

 

But, you know, as you guys have already mentioned, this can be minutes of work when worked into a process and have really, really big impacts. And again, I don’t want to opine on this too much myself, but I think especially when you’re talking not just usefulness to a team, but executive dashboards as well, those people, you know, if internal teams are saying, well, how do I get the bosses to appreciate what we do, et cetera? Well, this is a way to really get them to appreciate it, engage them, get the feedback, hear how their minds work, and then adapt the UX of these things for their needs.

 

There’s no better way probably to get executive buy-in in 30 minutes for a whole team’s value than to go through something like this.

 

[Ashley]

Also, Aric, to your point, when we’re talking about these changes while small and they didn’t take a lot of time, when we’re thinking about cognitive load and the brain power that we have to process information, the changes between the before and the changes to the after make a huge difference in just how we process information. With the before, your eyes immediately are going to those different shapes. They’re going to the different colors.

 

And so that’s taking a lot of brain power away from actually being able to dive into the data within the visualizations. So, I think while the changes seem small from a brain processing perspective, I think the second makes it so much easier. There’s way less confusion with what any of those buttons mean.

 

So, while small changes, they really do make a huge difference in how we process the information and how quickly we can go from, okay, I see the colors, I see the navigation, to, okay, what is this data actually telling me? What are these visualizations actually mean? So, the time to insight would actually be a lot quicker in that after versus before, even though the data itself did not change.

 

[Aric]

Yeah. Yeah. Absolutely.

 

Well, this is really, really interesting work. I’m curious, so, again, you guys have done this a bunch, but when somebody from the UX side and somebody from the database side, let’s say first kind of walk into a room, a virtual room, let’s say together, and say, okay, we’re going to work on a project like this together for the first time. Let’s start with you, Ashley.

 

What would you say that the business intelligence database person is going to think or needs to think about when they first meet to work with that UX person?

 

[Ashley]

Yeah. I think the first thing to think about is having some kind of wireframing tool where you can sketch things together is really helpful, but also understanding that there’s a notion that there’s two systems to the brain when processing data. There’s system one, which is what your brain processes automatically without even thinking about things, and then there’s system two, which is more of that thinking, cognitive thinking, where you’re aware that you’re thinking it, and I would say to just keep in mind that system one is really a lot of those UX principles and elements, and oftentimes as designers, we focus on that piece last, but it doesn’t make sense to focus on that last when that’s the first thing that the user is going to be noticing, is things like color, shape, proximity, some of those more UX-heavy design principles, so I would say going into one of those meetings, just understand the importance that the UX side has when it comes to dashboards, because it really could make the difference between your dashboard actually being adopted by the end users or your end user being really confused by the design, being really confused by the load times, different things, so I think keeping that in mind and knowing that this could make the difference between your dashboard actually being used and not being used is going to be a key thing.

 

[Aric]

Yeah, I mean, that’s a really good point. We’ve all definitely seen orgs where the data team just keeps pumping out dashboard after dashboard after dashboard, and the only feedback is a, so guys, let us know if you need anything else, and there is no accountability to the person requesting the dashboard, like going through with them, is this getting them what they need, and not a yes or no, but that moderated or unmoderated testing where you can video clip capture real-time feedback, where you can see that they’re delighted, or they’re stumbling, or it is answering their questions, or it isn’t answering their questions, etc.

 

Yeah, I mean, really, really valuable stuff, so anything else you guys would like to cover?

 

[Amanda]

I think I would just say, you know, the value of these two teams having a shared understanding of the customer journey, and that although the information that’s in dashboards is important, it’s not all important to show at one time, and so that’s really the goal here, is that just by applying these UX best practices, you can really decrease a lot of the friction that we see with these dashboards, and there’s really immense value in that.

 

[Ashley]

Yeah, I would agree with Amanda there, that white space when it comes to dashboards is definitely your friend, and just because you can put a lot of visualizations on one screen does not mean you should, even though it’s like, I want to answer their question that they asked, and the question that they didn’t ask, it’s important to have a balance of not being overloaded by all of the data that is on one screen, so I would just echo Amanda’s standpoint there.

 

[Aric]

All right, well this was fantastic work, so hopefully this will really get some people thinking. I can certainly say that I think anyone watching this, don’t walk away and go, okay, that was interesting, just take a few minutes and do something, and the path to that would simply be the next dashboard you roll out to a team or an executive team, and you don’t need tools like usertesting.com or things like that, you could use those, but keep it simple. The next dashboard you’re going to roll out, set up a 15 or 20 minute session with one to three of the separate sessions, with one to three of the stakeholders that are going to use them, and come up in advance with a list of questions you want to ask, things that they wanted to solve with the dashboard, have them run through it, and then do it moderated, meaning where you’re interacting with the person, not just where you’re, you know, quietly observing, and then ask them, do you see any insights here, what actions would you take, what additional information would you need in order to support an action, what would be your next step after getting this, collect that feedback, and then also watch the difficulties that they have moving around, so there is a silent portion too, where you’re observing it, and I think we can pretty much all guarantee that there’s like a one percent chance that that dashboard that got created doesn’t have useful feedback from the stakeholder, if you follow that kind of process, that will result in some degree of redesign, so it’s that simple, 20 minute Zoom session, give it a shot, you have nothing to lose, do 20, 30 minutes worth of prep, do a 20 minute Zoom session, commit to yourself that you may have to do an hour of rework on the dashboard layout, and it might change your entire company, how they operate, and it might change your own career in terms of how you operate, so thanks guys, Amanda, Ashley, once again, great job, and we’ll leave it at that for the day, and look forward for the next time one of you participate in one of our webinars.