North Vancouver Museum

Waters_Edge_Plinth_Render_v05

UI/UX, Visual & Interaction Design

 

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.

NVMA-brand-1

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).

NVMA_whiteboard_sketches_image

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.

NVMA_wirefames

 

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.

NVMA_user_flow_chart_images

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.
Bottom_Menu_Period_Select_Animation

After getting signoff on the overall UI flow, I proceeding to start wireframing each of the different screens that the user might encounter. I took those wireframes into Axure and created a basic demo to walk the client through the steps. I kept the design and colours minimal so that they could focus on the navigation only.

Axure_Wireframe_Animation

(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.

NVMA_original_UI_images

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.

NVMA_new_UI_concepts_images

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.

Waters_Edge_Final_UI_Animation

 

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.

NVMA_icon_designs_images

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.

NVMA_maps_image

 

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.

NVMA_popup_story_image

 

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!