For my work with the Canadian Museum of Architecture, I designed a digital interactive display for use on a gallery floor. The project involved several phases and included digital and physical design. We hope to make more like it.
One of my first steps was to create a task flow which attempted to portray user actions on one device affecting the pages displayed on another.
The difficulty was in designing something that made it clear what was happening concurrently on two different screens. I suspect there are better ways to show this, but I ended up with a task flow which was useful enough for our programmer to work with.
Once a general look was settled on between myself and the product owner, I created a wireframe demo.
The demo was tested with a handful of individuals to test the concept. Insights were gained on matters such as the location of buttons, wording on prompts, and the general flow of the app.
After some iteration, I created a high-fidelity version which was handed off for coding. That first version of the app was then tested again, and I gathered more design feedback.
The biggest design challenge for me was finding a suitable way to depict the data needed on each card at the end of the survey.
We wanted to show the user’s rating for each building, as well as the average and the distribution. Various configurations were tried, and it took a while to settle on one that we felt worked properly – that is, it was easily understood and visually pleasing.
The eventual solution was to combine both graphs in one and choose a distinct way for showing the user’s rating and the distribution. A blue circle similar to the rating buttons replaced the blue bar to show the user’s rating.
The distribution became a line graph with a lighter, transparent blue tone that shows well behind the darker blue selection circle without overpowering it.
The survey app had to conform stylistically to the rest of the overall display. It also had to fit into the flow of the whole display as the culmination of the experience.
1. The visitor first sees a large panel that explores the different elements of architectural aesthetics: concepts such as balance, motion, context, and colour.
3. After viewing the models, the visitor sees the backside of the panel with the mounted TV, and the plinth holding the touchscreen in front of it. A text label invites them to have their say and rate the attractiveness of various buildings.
4. The visitor approaches the touchscreen plinth and begins the survey.
After determining our model of TV and Touchscreen, I made a diagram to help understand the cable layout and power needs.
I have found that the few prompts included on the top of the touchscreen are often overlooked by the player, whose eyes are drawn to the images and other more visually stimulating elements on the screen.
This was most relevant on the results page, where they are instructed to select individual cards to view more about them. I found that about 50% of players would never click on the cards and would simply look at the graphs provided on the results page. In future I will try to rework the prompts to be more visible and perhaps more clearly worded.
A few things were noted concerning the plinth construction and computer setup:
The plinth door should have a lock protecting it from tampering, but which is easy enough to unlock for gallery staff to attend to the display at a moment's notice.
The PC should be in a kiosk mode, but that proved difficult with this model of mini-PC, and Windows only allows you to use Microsoft apps while in it. I’m sure there are solutions to this but I haven’t found them as yet.
