Enhancing in-person VIFF experience through an interactive microsite
This project was completed for the Information Design course at Simon Fraser University. Our team was tasked to propose a digital intervention for a local non-profit organization.
Our final product includes a Digital Passport microsite with various interactive features (VIFF Passport and VIFF Wrapped) designed in Figma to help Vancouver International Film Festival (VIFF) enhance in-person experience for the younger community and bring Gen Z attendees together in the digital era.
View PrototypeProject Type
Interaction Design (Academic Project)
Year
June 2023 - Jul 2023
Team
Jae Eun Kim, Md Safwat Qurib Ifti, Valeriya Ten, Annie Vo, Kate Luong
My Role
- Product Design
- Content Strategy
- Visual Design
- UI Design
Complete website walkthrough (00:35)
VIFF at risk of becoming outdated due to lack of digital infrastructure
After conducting thorough research, I proposed Vancouver International Film Festival (VIFF) to be our client for this project. Based on my findings, the Internet has vastly changed the film exhibition industry over the past two decades, and fundamentally shifted the role of festivals. According to VIFF’s Strategic Plan, they are currently at risk of becoming outdated and uncompetitive due to lack of digital infrastructure.
Declining youth attendance across festivals
Based on secondary research, there has been a decline in interest in attending in-person events like Vancouver International Film Festival, especially for younger generations. According to a report on the Sundance Film Festival, 27% of the audience was aged 26-35, 18.3% were between 18 and 25, and only 0.3% were under 18. This trend highlights a significant challenge in maintaining relevance and engagement with youth.
Attendee Age. 2020 Report on the Sundance Film Festival
Target audience - Gen Z
To address this issue, our team decided to create a microsite that will target Gen Z, who are at the forefront of cultural trends and adept at navigating technology. By focusing on this demographic and in-person engagement, VIFF can potentially expand its audience base.
Problem Statement
How can we enhance in-person festival experience for the younger community and bring them together in this digital era where organic connections are often lost?
Generating microsite ideas
Initial Concept: Community Focus
Initially, we chose to focus on the community aspect of the festival and create a microsite dedicated to the upcoming VIFF 2023 featuring movie and event line-up. However, this concept seemed too static and lacked interactivity, failing to resonate with the Gen Z.
Figjam Brainstorm Session
Critique & Feedback
During our second round of brainstorming, we proposed to incorporate interactive features like polls and surveys, where attendees can actively participate online during or after the event.
However, based on in-class critique, the site did not have an effective and unique content strategy to spark an interest from the young generation, prompting us to pivot to a more engaging concept.
Digital Passport Program
Finally, our team came up with a Digital Passport idea. Taking inspiration from the National Museum of Singapore where visitors collect stamps as proof of in-person presence, we thought that Vancouver International Film Festival could benefit from a similar strategy. We wanted to modernize the process by introducing a digital passport and stamps collected through scanning custom QR codes during any in-person event.
Content Strategy
As a starting point, I proposed to create a landing page which users could visit before accessing the main Digital Passport page. This strategy aims to provide users with a comprehensive overview of the program and prevent confusion for first-time users. Additionally, I created a custom sitemap to establish a clear hierarchy for the microsite’s structure.
After the landing page, users can navigate to the Digital Passport page (My Passport 23’) to view featured VIFF events. Once they log in or register for the program, they can start collecting digital stamps by attending the in-person events listed on the site.
Introducing VIFF Wrapped
Aside from the Digital Passport, we decided to add a new functionality called VIFF Wrapped in order to enhance overall experience. Inspired by Spotify, VIFF Wrapped is a data analysis tool that compiles insightful statistics based on the films and events attended by users throughout the festival, providing a fun, shareable summary of their festival journey.
Spotify Wrapped Inspiration
Initial Design Process
During the design process, I collaborated with Valeriya Ten to create the first mockup iterations. Together, we selected the color scheme and typeface based on our secondary research and the overall feel we wanted to achieve. Additionally, I created custom moodboards to assist us in making further design decisions.
The main visual theme of our microsite is nostalgia
In line with the current trends, Gen Z is notably attracted to the visual aesthetics of earlier decades, embracing vibrant colours, fashion styles, and old school design elements that characterize those time periods. This informed our initial moodboard selection.
.png)
Moodboard (1st iteration)
Initial Mockups
Landing Page Walkthrough (1st Iteration)
.png)
My Passport 23’ (1st iteration)
Design mismatch and lack of playfulness to resonate with Gen Z
Our teaching team highlighted the microsite's lack of playfulness and nostalgic elements, particularly for engaging younger generations. In addition, there seemed to be a design mismatch between the landing page and the program page. The landing page failed to effectively convey information about the program and its incentives, necessitating a significant visual overhaul.
Final Design
How did we improve our design after feedback?
After discussing the feedback, I redesigned the moodboard to align with the playful and childlike aesthetic we want to explore for our microsite, integrating more saturated colors and retro graphic elements.
 iteration.png)
Moodboard (2nd iteration)
Final Landing Page
We collaborated on the final landing page mockup, revising the initial version to match the playful retro style of the program page. This was achieved by incorporating a vibrant yellow as the main background colour and adding visuals, including festival tickets, the passport itself and relevant imagery.
.png)
Landing Page (2nd iteration)
I proposed the idea of incorporating a storytelling element into the landing page. Now, we present information in a structured manner, with sections explaining the participation process, merchandise prizes, and the program's backstory.
Landing Page (2nd iteration) Walkthrough
Digital Passport Program page (My Passport 23’)
The Digital Passport Program page allows horizontal scrolling to view the timeline. Each circle represents a corresponding event at Vancouver International Film Festival 2023. On click, circles display a pop-up window (designed in an old browser style) with detailed information and a stamp (if collected) or a stamp placeholder (if not collected).
My Passport 23’ Page Walkthrough
VIFF Passport & VIFF Wrapped
At the end of the timeline, users can navigate to the VIFF Digital Passport to view all stamps and VIFF Wrapped to see a custom data analysis based on attended events. Both pages are encouraged to be shared on social media in order to help generate more buzz online.
VIFF Passport & VIFF Wrapped Walkthrough
Learning Takeaways
I thought that this academic project served as a great introduction to interaction and web design. It has greatly contributed to my growth as a designer, enhancing my skills in wireframing and prototyping as well as emphasizing the significance of human-centered approach (i.e. the needs of Gen Z demographic in this case). I took this class during the summer and had a great team, which most likely played a significant role in the project's success. Huge thanks to our teaching team (Paul, Zaac, and Nafira) who provided us with lots of feedback sessions both in class and during office hours! :)
While overall the project was successful, I still thought there was room for improvement. Reflecting on the experience, I realize the potential benefits of initiating more frequent team brainstorming sessions and experimenting further with the visual design, particularly focusing on optimizing for mobile view.