Contemporary Art Gallery
Collaboration with Post Projects to map out and prototype a new website for the Contemporary Art Gallery in Vancouver
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8001 5.12012C8.55857 5.12012 5.12012 8.55857 5.12012 12.8001V115.2C5.12012 119.442 8.55857 122.88 12.8001 122.88H115.2C119.442 122.88 122.88 119.442 122.88 115.2V12.8001C122.88 8.55857 119.442 5.12012 115.2 5.12012H12.8001ZM64.0001 113.6C91.3934 113.6 113.6 91.3934 113.6 64.0001C113.6 36.6068 91.3934 14.4001 64.0001 14.4001C36.6068 14.4001 14.4001 36.6068 14.4001 64.0001C14.4001 91.3934 36.6068 113.6 64.0001 113.6Z" fill="currentColor"/> </svg>
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M117.778 90.2286C118.698 91.1484 118.698 92.6396 117.778 93.5594L93.4907 117.847C92.5709 118.767 91.0797 118.767 90.1599 117.847L10.2218 37.9087C9.30207 36.989 9.30207 35.4977 10.2218 34.578L34.5093 10.2905C35.429 9.37077 36.9203 9.37077 37.84 10.2905L117.778 90.2286ZM90.2297 10.3602C91.1494 9.44046 92.6407 9.44046 93.5604 10.3602L117.708 34.5082C118.628 35.428 118.628 36.9192 117.708 37.839L91.7217 63.8256C91.7025 63.8449 91.7025 63.8761 91.7217 63.8954C91.741 63.9146 91.741 63.9459 91.7217 63.9651L63.8964 91.7904C63.8771 91.8097 63.8459 91.8097 63.8267 91.7904C63.8074 91.7712 63.7762 91.7712 63.7569 91.7904L37.7703 117.777C36.8505 118.697 35.3593 118.697 34.4395 117.777L10.2915 93.6291C9.37177 92.7093 9.37177 91.2181 10.2915 90.2984L36.2782 64.3117C36.2974 64.2925 36.2974 64.2612 36.2782 64.242C36.2589 64.2227 36.2589 64.1915 36.2782 64.1722L64.1035 36.3469C64.1228 36.3276 64.154 36.3276 64.1733 36.3469C64.1925 36.3662 64.2237 36.3662 64.243 36.3469L90.2297 10.3602Z" fill="currentColor"/> </svg>
Project Overview
Contemporary Art Gallery is a comprehensive information architecture and wireframing project for the Contemporary Art Gallery in Vancouver, BC. Working in collaboration with Post Projects, who handled the full rebrand and website development, I focused on creating a flexible system to host diverse content types including events and exhibitions.
This project required developing an information architecture that could accommodate the complex needs of a contemporary art institution while providing clear pathways for visitors to discover and engage with various types of content and programming.
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8001 5.12012C8.55857 5.12012 5.12012 8.55857 5.12012 12.8001V115.2C5.12012 119.442 8.55857 122.88 12.8001 122.88H115.2C119.442 122.88 122.88 119.442 122.88 115.2V12.8001C122.88 8.55857 119.442 5.12012 115.2 5.12012H12.8001ZM64.0001 113.6C91.3934 113.6 113.6 91.3934 113.6 64.0001C113.6 36.6068 91.3934 14.4001 64.0001 14.4001C36.6068 14.4001 14.4001 36.6068 14.4001 64.0001C14.4001 91.3934 36.6068 113.6 64.0001 113.6Z" fill="currentColor"/> </svg>
UX&UI
Art Institution User Experience
I designed user experiences that serve the diverse needs of art gallery visitors, from casual browsers to serious collectors and researchers. The interface needed to accommodate various levels of art knowledge while providing access to both current exhibitions and historical programming information.
Content Discovery & Navigation
The user experience design focused on creating intuitive pathways for discovering exhibitions, events, and educational programming. Key considerations included clear categorization, search functionality, and visual presentation that enhances rather than competes with the artwork.
Multi-Audience Design Strategy
The design needed to serve multiple audiences including general visitors, art professionals, students, and researchers, each with different information needs and browsing patterns. The interface prioritizes accessibility while providing depth for those seeking detailed information.
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M117.778 90.2286C118.698 91.1484 118.698 92.6396 117.778 93.5594L93.4907 117.847C92.5709 118.767 91.0797 118.767 90.1599 117.847L10.2218 37.9087C9.30207 36.989 9.30207 35.4977 10.2218 34.578L34.5093 10.2905C35.429 9.37077 36.9203 9.37077 37.84 10.2905L117.778 90.2286ZM90.2297 10.3602C91.1494 9.44046 92.6407 9.44046 93.5604 10.3602L117.708 34.5082C118.628 35.428 118.628 36.9192 117.708 37.839L91.7217 63.8256C91.7025 63.8449 91.7025 63.8761 91.7217 63.8954C91.741 63.9146 91.741 63.9459 91.7217 63.9651L63.8964 91.7904C63.8771 91.8097 63.8459 91.8097 63.8267 91.7904C63.8074 91.7712 63.7762 91.7712 63.7569 91.7904L37.7703 117.777C36.8505 118.697 35.3593 118.697 34.4395 117.777L10.2915 93.6291C9.37177 92.7093 9.37177 91.2181 10.2915 90.2984L36.2782 64.3117C36.2974 64.2925 36.2974 64.2612 36.2782 64.242C36.2589 64.2227 36.2589 64.1915 36.2782 64.1722L64.1035 36.3469C64.1228 36.3276 64.154 36.3276 64.1733 36.3469C64.1925 36.3662 64.2237 36.3662 64.243 36.3469L90.2297 10.3602Z" fill="currentColor"/> </svg>
Systems
Flexible Content Architecture
I designed a flexible system to host diverse content types including events, exhibitions, artist information, and educational programming. The architecture needed to accommodate various media types and content formats while maintaining consistent presentation and navigation.
Information Architecture Design
The system includes sophisticated information architecture that organizes content in ways that make sense for both visitors and gallery staff. This includes clear content hierarchies, cross-referencing systems, and flexible categorization that can adapt to changing programming needs.
Collaborative Design Process
Working closely with Post Projects, I ensured that the information architecture would integrate seamlessly with their visual design and technical implementation. The system was designed to support both current needs and future expansion of the gallery's digital presence.
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M62.0919 6.23565C62.3946 4.74827 65.6056 4.74827 65.9084 6.23566C68.3076 18.0226 73.3083 35.8078 82.7504 45.2499C92.1924 54.6919 109.978 59.6926 121.765 62.0919C123.252 62.3946 123.252 65.6056 121.765 65.9084C109.978 68.3076 92.1924 73.3083 82.7504 82.7504C73.3083 92.1924 68.3076 109.978 65.9084 121.765C65.6056 123.252 62.3946 123.252 62.0919 121.765C59.6926 109.978 54.6919 92.1924 45.2499 82.7504C35.8078 73.3083 18.0226 68.3076 6.23565 65.9084C4.74827 65.6056 4.74827 62.3946 6.23566 62.0919C18.0226 59.6926 35.8078 54.6919 45.2499 45.2499C54.6919 35.8078 59.6926 18.0226 62.0919 6.23565Z" fill="currentColor"/> </svg>
Visual
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M64.0002 113.657C91.4248 113.657 113.657 91.4248 113.657 64.0002C113.657 36.5755 91.4248 14.3434 64.0002 14.3434C36.5755 14.3434 14.3434 36.5755 14.3434 64.0002C14.3434 91.4248 36.5755 113.657 64.0002 113.657ZM64.0002 122.88C96.5187 122.88 122.88 96.5187 122.88 64.0002C122.88 31.4816 96.5187 5.12012 64.0002 5.12012C31.4816 5.12012 5.12012 31.4816 5.12012 64.0002C5.12012 96.5187 31.4816 122.88 64.0002 122.88ZM63.5376 96.4165C81.696 96.4165 96.4163 81.6962 96.4163 63.5378C96.4163 45.3794 81.696 30.6591 63.5376 30.6591C45.3792 30.6591 30.6589 45.3794 30.6589 63.5378C30.6589 81.6962 45.3792 96.4165 63.5376 96.4165ZM63.5376 105.64C86.7899 105.64 105.64 86.7901 105.64 63.5378C105.64 40.2855 86.7899 21.4358 63.5376 21.4358C40.2853 21.4358 21.4356 40.2855 21.4356 63.5378C21.4356 86.7901 40.2853 105.64 63.5376 105.64ZM78.6159 63.7414C78.6159 71.9563 71.9564 78.6158 63.7415 78.6158C55.5266 78.6158 48.8671 71.9563 48.8671 63.7414C48.8671 55.5264 55.5266 48.8669 63.7415 48.8669C71.9564 48.8669 78.6159 55.5264 78.6159 63.7414ZM87.8392 63.7414C87.8392 77.0502 77.0503 87.8391 63.7415 87.8391C50.4327 87.8391 39.6438 77.0502 39.6438 63.7414C39.6438 50.4326 50.4327 39.6436 63.7415 39.6436C77.0503 39.6436 87.8392 50.4326 87.8392 63.7414Z" fill="currentColor"/> </svg>