National Gallery of Canada App

Description

Mauve Studios developed this mobile application for the National Gallery of Canada (NGC). The gallery raised some concerns regarding declining admissions and asked us to come up with a solution in the form of a mobile app. The application we developed for the NGC is a navigation app that directs gallery goers to the correct rooms and exhibits. The user is first asked how long they wish to stay at the gallery. The application then generates a list of tours that cover different topics that are slightly shorter, equal or slightly longer than the limit the user set. The instructions on where to proceed pop up in the form of “Google” style cards. Mauve Studios produced a paper prototype beforehand and tested with users on the best UI layouts and possible enhancements to the UX. We also conducted interviews with test subjects to recieve feedback regarding their user experience.

IMG_0194
IMG_0191

Design

Inspired by the Google maps card style which displays the map on top and the instructions on the bottom with a great amount of white-space. We found a CSS library called Materialize which allowed us to replicate this style in the form of a website. My personal contributions towards the design include the paper UI mockups for the Route Selection page and the maps. I also designed the maps and created the instruction cards.

Development

Mauve Studios used HTML and Materialize (CSS library) to create this application. Starting off by creating paper prototypes allowed us to see the weaknesses in the UI as well as the strengths. Valuable feedback was recieved on areas of improvement. Those comments considered, we produced the working prototype of the application using the tools mentioned.

ngcscreencap2
ngcscreencap