One of my absolute favourite books as a child was Richard Scarry’s What Do People Do All Day. It’s one of the series of children’s books Scarry wrote and illustrated about a fictional town called Busytown.
I adored Scarry’s illustrations: the architecturally-correct drawings of buildings, the cutaways showing the plumbing and sewer systems, the fascinating mechanical devices, all depicted in minute detail and carefully labeled.
The wireframes I produce as part of a design project share some of the same elements – the annotation of features and functionality for example – but they don’t usually stray very far into the domain of graphic design or detailed information design. A recent project of mine involved a departure from the usual and represented a different challenge for me.
I was working on the design of a “dashboard” interface for the sales team of a large media client. The objective was to give each member of the sales team (from the VP down to the sales reps) an at-a-glance view of how they are doing against specific benchmarks such as quotas for the quarter or overall sales targets. Sort of like a 360 degree view of their performance to date.
As well as giving members of the sales team this bird’s eye view of sales data, the interface also had to provide a bridge to deeper analysis of the data, which currently existed in the form of reports that were data intensive and hard to read. Although many types of reports were available, none of them enabled users to see multiple facets of the data in a single view.
We started with a requirements gathering session with the client, as usual. In this session we identified several different user types (VP Sales, Sales Managers, Sales Reps etc.) and discussed the priorities of each type.
Coming out of this session, we drew up a list of the top 5 or 6 questions each user would want answered when they looked at the interface. Questions such as, “How do my sales this year compare to what I sold for the same period last year?” or “How much do I need to sell in order to meet my quota for the current quarter?” Then, looking at the available data, we identified the best way to answer each question.
These questions and answers translated into a series of modules that formed the bones of the interface. Next, we had to determine how to present the information in the modules. We knew that the presentation of data needed to be heavy on visuals and light on text so that the user would be able to interpret it as quickly as possible.
For inspiration and guidance, I consulted Edward Tufte’s Envisioning Information and The Visual Display of Quantitative Information.
I also looked at a slew of online resources, including some of the information graphics I regularly use, like this one for sailing:
It was challenging to determine the visual display of each module. Based on the information to be presented, which type of visual was best: a pie chart, a line graph, a bar chart, a matrix, or some other custom visual element? How might we use colour to establish relationships between elements or invoke an emotional response? How could we use line weight and style to give certain modules character and texture and add a depth to the page?
When a module really ‘worked’, i.e. effectively communicated multiple dimensions of data in a visually pleasing and easily interpreted way, I felt a thrill of pleasure. The same thrill I feel when I look at the wonderful topographical detail of an ordnance survey map.
Or one of the Richard Scarry drawings I described at the beginning of this post.
At the end of the project, instead of the 15-20 heavily annotated wireframes that comprise my customary project deliverable, I ended up with 6 hi-fidelity graphical wireframes that were as much about visual and information design as about specifying interactions.
As for what I am taking away from this project, I discovered that, in focusing on the aesthetics of the interface as much as its usability, I engaged with the emotional aspects of the user experience – pleasure, satisfaction, fun – in different ways. I plan to explore this relationship between usability and aesthetics further. Reading suggestions welcome!