digital product designer — photographer

italiaDesign—11th Edition



italiaDesign is an 8-month undergraduate field school offered by the School of Interactive Arts + Technology at Simon Fraser University that contributes to the discourse of Italian design, art history, and culture. I was one of twelve senior design students selected to participate in this legacy project; our team conducted in-field research and interviews which were produced into a series of films. These films emphasize the personal design philosophies of 18 designers that can be viewed on the italiaDesign—11th Edition website.

Contribution —
Art Direction, Portrait and Landscape Photography, Videography, Visual Design, UX Design, Video Editing

Team —

Shannon Boyd, Elizabeth Chan,
Tobi Cheung, Kosuke Futsukaichi, Sean Leach, Michael Lo, Sabrina Ng, Summer-Lee Schoenfeld, Mark Strathern, Sonia Yau, Rana Zokai, Russell Taylor



art direction

The art direction strategy behind the production of italiaDesign—11th Edition was to capture an intimate view of each designer and their personal design philosophy. This was a new approach to field school films as the interviews produced in the past were predominantly project-focused.

The Process:
In order to translate this direction into film media, I was inspired by the short video “Private View: Pla-Narbona” by Anna Pla-Narbona to create similar visual sequences and framing for our content. Many of the scenes in this video often conveyed through film his personality and a level of intimacy by following the artist interacting with his work in his studio. I thought this was compelling visual approach the field school team could apply to our interview videos. Furthermore, through on my observations on “Portrait of a Place: Doku-Tur” by André Dip and José Menezes, I noticed that slow, long takes of subjects and landscapes had an immersive quality that captivated and drew in viewers.

With these two approaches combined, the concept of a “film portrait” became an underlying principle to guide the overall art direction strategy across the imagery, films, and narratives for the project. A film portrait supported the idea of maintaining emphasis on the interviewed designers which later drove many of the design decisions in the creation of the website specifically on the visual design, user experience, and content strategy. The immersive quality which was intended to be achieved through film first, was then translated into the website’s interaction design.

portrait photography

Prior to commencing this project I was already exploring several concepts based on photography precedents I observed and found intriguing. For one particular direction, the examples all shot their subject from afar, using their silhouette as a way to anchor the overall composition of the image.

photo precedents that inspired the direction for the team portraits

photo precedents that inspired the direction for the team portraits

My visual exploration of this idea began through my personal photography endeavours when in Italy. I was interested in seeking aesthetic compositions that evoked a sense of marvel and revealed beauty. The concept began to fully develop when I captured several photos of my team members within open architectural landscapes and realized this approach to the team portraits could build upon the established art direction strategy.

From a compositional perspective, the results from their photographs were visually compelling as it highlighted the person within the space while also emphasizing the context of their surroundings. This subtle, distant portrait of the team members not only showcased the (architectural) places experienced in field school, but also contrasted how the designers were being represented.

The portraits of the designers were captured at much more intimate scale intending to reveal their personality and character, whereas ours were a way of reflecting our field school experience. From this process, the idea of contrasting scales was incorporated into the art direction and became a key concept during the website design process as a way to minimize our presence and maintain emphasis on the designer.

visual design

In addition to following the art direction strategy, the visual design of the website was strongly influenced by Massimo Vignelli’s design principles in his book the Vignelli Canon. The design team was particularly intrigued with his approach on Intellectual Elegance, Ambiguity, and Visual Power which these principles ultimately became identity guidelines for our ideation process.

The team began by collecting external assets that we were inspired by to form a physical moodboard that was taped onto the wall. These assets were then consolidated into four distinct themes the design team wanted to pursue. Through this tactile ideation process, it was evident that we were interested in designing a website that used a print paradigm and challenged the range of legibility through typographic scale. Although the design team was inspired by these interpretive graphic approaches to creating a website, the visual design also had to lead to clarity in content organization and UX to ultimately produce a well-structured and visually-compelling digital experience.

Physical moodboard: identifying four different directions for the visual design of the website.

Physical moodboard: identifying four different directions for the visual design of the website.


video production

Videography Strategy
I implemented a videography strategy to achieve the art direction and also address the feasibility of the project as our team had limited skill and experience with videography. In order to accomplish a successful production outcome, I compiled a comprehensive document outlining the type of shots, interview shoot logistics, and technical information for the video team to follow when filming. From the practice interviews in Seattle, the team learned that more time was needed on set to achieve the concept of an intimate portrait of a designer, which was then implemented in the in-field interview production schedule. As the lead videographer, I filmed the majority of designer-in-context scenes as well as framed and filmed the interview shots.

Post-Production Responsibilities
For post-production, I was responsible for editing all the films in collaboration with the Lead Video Editor Sonia Yau. My tasks involved 1) assembling b-roll and interview footage 2) sourcing external assets and 3) colour correction to create a visually compelling sequence that aligned with each video’s narrative.

Behind the scenes image of the Armando Milani interview captured by Summer-Lee Schoenfeld

Behind the scenes image of the Armando Milani interview captured by Summer-Lee Schoenfeld

Video Editing: Including External Assets
A significant shift that I implemented in the video editing strategy was including external assets into our films. This approach is particularly evident in the interviews of Giorgio Biscaro, Stefano Giovannoni as well as the documentary on Studio Boggeri. This shift was due partly to the fact that our team was limited to the external footage we could use. However, I also recognized that including external assets such as archival imagery was an opportunity to visually support portions of the narrative that referenced to Italian design history.

By utilizing external imagery, graphics, and video clips it allowed us to feature discussions with designers which were more high-level (eg. their mentors, inspirations, critique etc.) that were weaved in together with interview and contextual footage to create a cohesive story.  This was especially a challenge for me as incorporating imagery was not part of the initial plan but regardless, needed to be seamlessly inserted in the narrative without feeling visually jarring or seem like a photo slide deck. I looked to the documentary film Design Canada by Greg Durrell which served as a key precedent on how to create captivating visual sequences with archival imagery, graphics, and short videos clips. Through my observations, I thought that images that had rich backgrounds as opposed to flat e-commerce product shots seemed to be more visually intriguing. This insight drove the process of sourcing imagery where I spent many long nights surfing the Internet searching for the right (and accurate) image to use, that was then meticulously documented and cited by my team members Summer and Rana.

Some of the external images used in the italiaDesign films

Some of the external images used in the italiaDesign films

homepage—film series

Within the Film Series section, the visual design utilizes large-scale type for the numbers that categorize the films within discrete volumes. The numbered volumes prompts a linear order of viewing the films with a clear entry point to the series. To incentivize the viewer to watch a particular film, a descriptive title and an explanation on the volume’s theme, as well as a captivating image of the designer is surfaced through a simple hover interaction. This method of structuring and revealing content removes the friction of the audience not knowing who the designers are and clarifies the content’s purpose into three distinct sections. With this linear narrative arc, viewers can hopefully gain a fuller understanding on the contemporary discourse of Italian design.

To see initial mockups that the team created of the homepage click here.

slow immersive interactions

Contrast in the scale of the visual design and hover interactions were the primary methods used for creating a slower and more immersive user experience in engaging with the content. This is seen most prevalently on the Homepage where the extremely-scaled type of the headline copy bleeds off the page which prompts viewers to gradually scroll down and discover the film series.

The hover interaction reveals deeper content on the page through a fade in/out effect, which was the selected method of subtly establishing a slower pace when viewers navigate throughout the website. The density of content and the way it is revealed prompts the viewer to linger on the page and setting an exploratory mindset for the viewer. With interviews that had multiple designers, a timer was implemented so that a portrait of each designer could be revealed within one hover interaction.

legacy page

As this website is a legacy project, this page provides viewer access to the websites and interviews conducted by previous field school groups from italiaDesign and dutchDesign. I was responsible for redesigning this page; it was an adaption of dutchDesign 2017’s legacy page that was iterated to streamline the user experience. This design provided the ability to toggle between the two field schools—italiaDesign or dutchDesign— which gave way to greater clarity on the specific websites and related content viewers would access. This design rationale also afforded additional negative space within each row providing the opportunity to reveal a list of past interviews by each former field school team through a hover interaction. By organizing content within a lateral structure, viewers are able to easily navigate from the year number to a specific linked video of their choice.

user testing—credits page

The most valuable insight the user testing revealed was that the Credits Page did not meet the expectation of most field school alums. This was partially due to the page’s initial design which utilized a full-bleed card-style layout with slight hover interactions that often misled viewers into thinking there was deeper content to reveal on ourselves. In past websites, this page was typically dedicated to highlight each team member and their personal experience of field school. Our team chose not to reveal any personal content since it did not align with the principles established in the art direction and content strategy. However, this way of representing ourselves did not meet the desires of field school alums who were interested in learning more about each of us.

initial mockup of Credits page

initial mockup of Credits page

Through the feedback gained from user testing, we realized it was important to shift our perspective on our audience to include field school alumni as stakeholders in this project. We needed to arrive at a solution that met their needs but also upheld our team’s values that were established for our project.

As a result, the team redesigned the layout and user experience of the page to include a behind-the-scenes section that showed a glimpse of us in production. By introducing a lateral way of navigating as well as separating our name and title from our portrait, we removed the expectation that deeper pages could be accessed. The layout and experience of the page adapted the concept of scanning through a film strip which guided the visual design and interactions. This concept was also an opportunity to reveal a small moment of surprise and delight by featuring the behind the scenes section towards the end as additional material.  

evoking emotion through visual storytelling

The website evokes emotions primarily through visual storytelling complemented by the interactions. The designer portraits are a key part of the visual narrative use as a tool to portray the designers’ personality. Revealing the portraits through hover interactions establishes a threshold that creates contrast with the type-driven visual design. This is intended to promote an engaging experience when viewers navigate through the volumes which allow viewers to feel more immersed in the content.

Additionally, videos are used within a series of photographs in the ‘Behind the Scenes’ section to further enhance the immersive quality. The first five photos establish an expectation that the page consists of a reel of photographs, but the gifs of similar in-studio moments become a pleasant surprise for viewers when scrolling through the content.

La Fine! If you want to know about my personal experience in-field, I’d be happy to chat over coffee. To see my behind the scenes adventures in Italy, head over to my Instagram highlights through this link :)