Maxxi Museum Microsite
A virtual, post-event experience to relive the Superstudio 50 exhibition.
01
Overview
In an introductory interface and visual design course at Simon Fraser University, our team designed, prototyped, and pitched a microsite idea to industry professionals and course lecturers.
Tasks
Art direction, visual design, interaction design, content strategy
Timeline
5 weeks
tools
Figma, Adobe Photoshop, Adobe After Effects
Team
Tim Chen, Varjot Dhilion, Manpreet Sarna
02
My role
01
Art directed our visual design based on Wolfgang Weingart’s design practices and philosophy.
02
Designed our web interface based on our graphic assets and our analysis of Maxxi Museum's existing information architecture.
03
Developed graphic assets and microcopy based on our research and analysis of Superstudio's history.
Create a website for our client
We were tasked to develop a website for Maxxi Museum’s 2016 exhibition of Superstudio 50. Beyond the given client, we were assigned a designer, Wolfgang Weingart, to study, embody, and derive graphic assets and design qualities from.
04
Design challenge
Post-exhibition microsite
The objective of the microsite is to convert one-time visitors of Maxxi Museum into recurring visitors. To achieve this purpose, the microsite enables past attendees to relive the exhibition again by viewing images and videos shared by the Museum. After the virtual experience, the user is guided to view short snippets of upcoming exhibitions and is encouraged to plan another trip to the Maxxi Museum.
05
Art direction
Wolfgang Weingart's best practices
Reflecting on Weingart’s best practices in Swiss Typography and grid layout, we approached our graphic assets with the intent to deliver content on an unorthodox grid system to encourage the exploration of visual depths and dynamic positioning.
Keywords
Curiosity
Projection
Tension
Discovery
Challenging Perception
Graphic assets developed based on our art direction.
06
The Web experience
With our established design qualities from our graphic exploration, we implemented the principles into our interactive microsite.
Landing on the microsite
Starting off with a simple layout of the page (after an animation sequence which can be seen in the demo video), the user scrolls down to begin viewing the content.
Perspective grid + 2D grid
Challenging the user’s perception by viewing content and copy at a different angle to drive curosity and dynamic movement.
Plan another visit
After experiencing the post exhibition, the user is prompted to view snippets of upcoming events at Maxxi Museum and is encouraged to begin planning their next visit.
07
Reflection
Receiving weekly feedback from the teaching team, alumni, and industry professionals has taught me an important lesson of designing in a lateral process and to fail fast, fail often.
As perfectionists, my team and I struggled with moving on from ideas quickly. For the first week, our team failed to experiment and explore merging different design qualities, causing us to produce similar graphic pieces. However, after gaining feedback on our design process from our professor, we were guided back on track and were beginning to take more risks and let ourselves be inspired by other designers, including Anna Kulachek’s diverging process in typographic exploration. Our lateral process in typography soon created a ripple effect, enabling us to experiment with color theory, texture, and perspective grids.
Being new to presenting weekly updates on our design process, I struggled to communicate our design intent in a concise manner, which made it difficult for the teaching team and my peers to understand the context and my ideas. However, with weekly practices, continual feedback, and listening to TEDx presentations, I began surfacing the content at a quicker pace and was able to communicate ideas effectively.
Avatars designed by Amritpaldesign
