Mapping the Water’s Edge

Designing An Interactive Touchtable



Project Summary

I was commissioned to develop the visual design and interaction flow of an upcoming touchscreen exhibit for the North Vancouver Museum & Archive. Their goal was to entice visitors with a stylish, interactive map that demonstrates the evolving settlements and historical events that occurred along North Vancouver’s sprawling shoreline over the span of 150 years.

As part of my work, I researched touchscreen methods of interaction, as well as iconography and imagery that can be found along North Vancouver’s shorelines. I developed numerous visual mockups, interactive wireframes and paper prototypes to determine what the best experience would be for the museum’s visitors. I created user flows that would help clarify the experience of navigating between stories and time periods. Finally, I incorporated real assets, such as old maps, into the final interface design in order to give the exhibit a historical feel.

Sketching / Prototyping

For the first phase of the project, I had to wrap my head around a novel experience for users. Based on rough wireframes from the project lead, I developed several low fidelity prototype/sketches that would help illustrate how the interface might look at full resolution (in this case, understanding the ergonomics of a user interacting with a 46″ touchscreen television).

My biggest challenge was deciding whether the time periods menu should be on the top, bottom, or lefthand side of the screen. Ultimately, it came down to familiarity with user conventions that lead to its final position along the top, just below the title. I refined the whiteboard sketches and produced solid wireframes in Illustrator. These also included the first iteration of what would become the Popup Stories: the historical notes that would popup when users tapped the Point-of-Interest icons.

Interactive Wireframing

I initially sketched out the user flow for visitors to make their way through the menu items. I wanted to keep the levels of engagement simple, so as not to overwhelm the viewer at any one stage.

At this point, I was also exploring the idea of affordances, and whether using the familiarity of old pull-down maps would help signify to the user that they could “pull” down virtual time periods. Later, when it was revealed that the tv would be lying on a pedestal, the pull-down motif no longer made sense.

At this point, I was also exploring the idea of affordances, and whether using the familiarity of old pull-down maps would help signify to the user that they could “pull” down virtual time periods. Later, when it was revealed that the tv would be lying on a pedestal, the pull-down motif no longer made sense.

(You can view the whole interactive wireframe here)

Main User Interface

This was probably the toughest design challenge of the project. I initially designed the UI to resemble an old mariner’s table. Maps and marine objects would be placed around the edges, as if the user could take a peak at a captain’s quarters and peer over maps from different periods in history.

After the initial pitch, the client clearly disliked the old, archaic feel, and preferred something modern and elegant looking. After going back to the drawing board, I came up with a mood board, as well as some new concepts that would support the clean and uplifting feeling that the client wanted to impart.

The client most preferred the tidepool concept (bottom right image). After several more iterations and refining, a finished version of the UI was approved. It features light wooden handles and a scrolling map interface. The background is a looping video of caustic reflections and dappled sunlight.

Icon Design

The map needed a way to show users they could click on icons to activate the stories that took place along the shoreline. These icons, or “Points-of-Interest”, took inspiration from maritime themes and motifs, as well as time-specific harbor items, like ships and anchors. You can see several iterations down below, until I arrived at the final look.

Time Period Maps

The biggest part of my job was incorporating the museum’s archived images of maps into the interface. They were provided at different resolutions, different color spaces, and most importantly, different regions of the north shore. In order to unify them for the developers, I created a 4k resolution master map with a grid, and used that as a basis for photoshopping the other maps into the correct positions. I filled missing areas with the same pattern and texture in order to give each map an organic, handmade feel that reflected the time it was made.

Popup Stories & Text

For the Popup Stories, I designed a window that would display the title, main story, as well as related media. Museum visitors would be able to both navigate stories chronologically, as well as geographically. My directive was to keep the interface fonts simple, with a serif / sans serif font pairing of Oswald and Merriweather as the header and main text fonts respectively.

In Summary

The project took approximately two and a half months, and all of the visual assets were delivered to the developers in February of 2016, including a 25 page interaction design guide that specified how the menus should animate and transition.

Overall, it was an exciting opportunity to work on a historic project that represents the untold history of the North Shore in a spirited and engaging way!

Back to Portfolio
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google