2012 Perceptual Edge Dashboard Design Competition: We Have a Winner! I was pleased and frankly surprised to receive 91 submissions to my dashboard design competition. To give dashboard designers an opportunity to test and further hone their skills. To provide me with many fresh examples of dashboards that were all designed to serve the same audience and purpose—a teacher who needs to regularly monitor the performance and behavior of her students—that I could include in the second edition of my book Information Dashboard Design. To showcase examples of exemplar dashboards that could actually be used for an important purpose: to improve educational outcomes. All three purposes were well served by this rich and varied collection of entries. Now, let’s get to the winners. Each criterion was weighted according to importance, producing a total possible score of 100. At no time during the judging process was I aware of the competitors’ identities.
After scoring the top eight dashboards, to get a final reality check I sent them and a record of the scores to a couple of friends who both support better uses of data in schools. They both concurred with my judgment. Having finalized and double-checked the selection, I asked for the identities of the competitors. And the winner is Jason Lockwood. His dashboard received the highest score of 90. This morning when I sent an email to Jason to congratulate him, I learned that he currently works as a usability and design consultant for IMS Health and is based in Switzerland. One of the first things you probably notice is its fine aesthetics. Its use of color, layout, and reduction of non-data-ink make it pleasing to the eye in a way that enhances usability. In the course of my work as a UX engineer, I have the chance to try to bring good data visualization practices to my clients. Seeing this competition, I was delighted to be able to try my hand at a real dashboard.
It was a very challenging and satisfying exercise, during which I learned a lot. I have designed this purely as a visual mock-up in Photoshop. There is a lot of information contained within the data sheet, so one of the major challenges would be how to be able to display all of it in a clear way, on a single screen. I felt that all the information was pertinent to the goal of the dashboard, so did not want to exclude anything. That led to the compromise of designing to a slightly higher screen resolution of 1400px width than what perhaps may be standard. I usually base the overall colour palette on the visual identity of the client. As this was not provided, I invented the idea that the school colours were blue and grey. I would therefore use monochromatic shades of blue for data representation, grey for text and labels. For the background, I am using an off-white with a slight orange tint.
This creates a subtle compliment to the blue, making the data stand out a little bit more. I chose Avenir as a font as it provides a good contrast between upper and lowercase letters for good legibility, as well as very clear numerals. I kept a 12pt font size to provide consistency. Breaking down all the data in the excel sheet was an interesting exercise. First step was to prioritize the information. With the grades I grouped together the other pure assessment information: last 5 year assessments, last 5 assignments. I sorted the students by their current grade, from worst to best, so the teacher can view the problem cases first. Secondary sort is on difference from current grade from target. Having ordered the information, the next step was to visualize. The grades lent themselves very well to a bullet chart, efficiently portraying the target, current and previous scores.
I used dots to represent the counts, as I find these are clearer to view than straight numbers. I chose to try to represent not only the amount of the tardies and absences but also their temporal occurrence. Hopefully this can allow the teacher to identify patterns not just for each student, but for the entire class. This ends up almost like a scatter chart. Last up for the behavioural data are the detentions and referrals, which again I represent as dots, with past term information in a lighter shade and to the left of the implied axis for comparison. Once all the student information was portrayed, I decide that some sort of aid was needed to help the user view the information in rows. I combined the information from the summary tabs to create two graphs: a dot graph to show latest median assessment scores and percentage of students’ assessment scores in percent groups.