italiaDesign—11th Edition is an inquiry into italian design, history, and culture that documents the philosophy of the 18 designers we met throughout Italia.

Context
italiaDesign fieldschool
Jan 2018 — Aug 2018

Contributions
Lead UX Designer
Visual Designer
Content Strategist 

Gruppo
Shannon Boyd, Elizabeth Chan, Annette Cheung, Tobi Cheung, Kosuke Futsukaichi, Sean Leach, Sabrina Ng, Summer-Lee Schoenfeld, Mark Strathern, Sonia Yau, Rana Zokai, Russell Taylor — Field School Director

Placeholder

The project

italiaDesign — 11th Edition

An eight month long inquiry into italian design, history, and culture

italiaDesign is an undergraduate field school offered by Simon Fraser University which immerses students in Italian design, history, and culture. Through a competitive entry process, I was fortunate to be selected as one of twelve senior design students to embark on this experience.

Over the course of the field school, our team conducted in-field interviews which were developed into a film series that document the design philosophies of 18 designers. The accumulation of what we learnt, discovered, and experienced is presented on our website italiaDesign—11th Edition.

The scope

01 | Pre-Field Research

Three months of in-depth research into Italian design, history, and culture, as well as establishing an approach for the art direction of our films

02 | In-Field Living

Two months of living and working in Italy, where we conducted interviews with 18 Italian designers and began developing our content strategy for the films

03 | Post-Field Production

Three months of post-production work which involved developing a website and editing seventeen films

italia-sites

The concept

Continuing the lineage

italiaDesign is a legacy project that builds upon the work of previous field schools. Each group that embarks on this journey continues this lineage by crafting a website that conveys our experiences, stories, and interviews.

At the beginning of the process, each group has an unique opportunity to differentiate their project from past years by deciding how they want to represent their values through the website. With this in-mind, the design team established three guiding principles that served as the foundation for our approach towards the content strategy, art direction, and experience design of the project.

Honour the designer

All decisions should be focused on honouring the designer's essence with accuracy and care. By focusing on the designers, we wanted to reduce the misperception that italiaDesign is about the field school team.

Respect the content

The content we convey is the most consequential part of the project because it is a reflection of the designer's essence.  Therefore, the content strategy should lead in driving the form of the website. 

Embrace Ambiguity

Inspired by Massimo's Vignelli's definition of ambiguity, we wanted our website to inspire a sense of curiosity by having a "plurality of meaning". In order to achieve this, we embraced the challenge of walking the fine-line between clarity and ambiguity. 

Visual design

"Respect the Canon"

A visual identity inspired by modernism and italian design

The team began the visual exploration process by gathering a diverse collection of visual design inspiration, interaction models, and approaches to organizing the content we had accumulated in-field. Afterwards, the design team consolidated similar inspirations into three directions, and decided on which key concepts we wanted to further pursue.

p1

After converging on three directions, the design team diverged and created visual explorations of the homepage based off of these three key concepts we had aligned on...

01 | Exploring typographic scale

How can we use contrasting typographic scales to achieve a sense of visual power? Our desire is to achieve the elusive beauty of intellectual elegance through visual strength — not impact. 

02 | Reflecting a print paradigm

Many of our design inspirations stemmed from the graphical work of our interviewees, such as Armando Milani, Jekyll & Hyde, and Sean Wolcott. Since we were already exploring typographic scale, how might we translate the print paradigm into digital in order to make our visual design feel more tactile?

03 | Telling a linear narrative

From our observations of previous field-school websites, we noticed that no previous teams had  attempted to construct a cohesive structure for the content. Therefore, we wanted to explore whether the visual design of our website could imply a narrative sequence?​​​​​​​

p2

After our divergent visual exploration, the design team came back together to converge on a singular identity guideline. Ultimately, the visual design of the website was strongly influenced by the design principles expressed in Massimo Vignelli's book —The Vignelli Canon.

Our design team was particularly intrigued by his commentary on Intellectual Elegance, Ambiguity, and Visual Power. These principles ultimately became identity guidelines for our ideation process, and the standard in which we used to refine the details of our website. 

p3

UX design

UX Design Lead

Translating the concept into form

For the post-field portion of field school, I was fortunate to be selected as the lead UX designer for the project. Therefore, I had the opportunity to help influence the overall experience of the site alongside the rest of the design team. (Kosuke Futsukaichi & Annette Cheung). The following sections break-down our key UX decisions, and how we translated our guiding principles into the user experience of the site. 

Landing Screen

Framing the Experience

From observing previous field school websites, we felt that past teams had overlooked the importance of framing the purpose of field school. With this in-mind, our goal was to create a headline that would frame the website's experience, which we emphasized through the dramatic use of typographic scale.

By bleeding the typography off the page, we wanted to create a sense of ambiguity, prompting people to scroll through the headline and discover the films series at the end. In doing so, the headline acts as a threshold that guides people from the initial landing page into our collection of interviews.

Film Series List

Crafting a Linear Narrative

Within the Film Series List, we utilized large-scale typography to categorize the films into discrete volumes. The numbered volumes indicate a linear narrative for the series, thus creating an accessible entry point and a suggested viewing order for the films. 

To provide context for each interview, we used a hover interaction to reveal additional content, such as the film title's name, volume description, and designer's portrait. This method of revealing context removes the friction of not knowing who the designers are, and clarifies the volume’s over-arching narrative. By crafting a linear narrative, our goal was to provide a comprehensive understanding of Italian Design, and how each designer fits within a larger story

Beyond the Film

Providing Additional Insights

italiaDesign is intended to be a resource for both students and professionals within the design community, where they can access content about Italian design through the lens of design, history, and culture. To further achieve this goal, we developed Beyond the Film - a section that showcases additional projects, artifacts, and insights that reinforces the design philosophies of each particular designer. 

We designed Beyond the Film as an overlay to the video, so that viewers can easily access the content at any point while they watch the interviews. By providing these additional insights, the desired outcome was to compliment the film content by illuminating viewers on how each designers translates their design philosophies into their work

Credits Page

De-emphasizing our Presence

In past field school websites, the team page was typically dedicated to highlighting each team member and their personal experience of field school. For our team page, we wanted to de-emphasize our presence, because their was a growing misperception that the field school website is about the group - as opposed to the designers who we interviewed.

Therefore, our Art Director, Annette Cheung, opted to minimize our presence by not shooting traditional headshots. Instead, she chose to highlight our presence within an intimate space, in order to provide a glimpse of the various environments we experienced through out Italy. This approached aligned with our guiding principles, which included exploring a contrast in scale, embracing ambiguity, and honouring our designers. 

Behind the Scenes

Sharing our Process

After user-testing our credits page, we discovered that field school alumni still had a desire to learn more about our team. To accommodate this desire, we decided to create Behind the Scenes - a new section that provides a glimpse into our in-field production process. By creating this new section, we were able to maintain our principle of minimizing or presence on the site, while accommodating the request of our users.

 Similar to our credits page, the layout and experience of Behind the Scenes is inspired by the concept of scanning through a film strip. By using the same interaction of horizontal scroll, we had the opportunity to reveal a small moment of delight by introducing the new section towards the end of the credits page. As users press the call to action, they are seamlessly transitioned into Behind the Scenes, where they can view a collection of photos and videos of our team during our production process.

iphoneitalaitest3

Michael Lo — Digital Product Designer

Open to new opportunities
vvichael@gmail.com

Instagram
Medium
Linkedin