Jan 2018 — Aug 2018
Lead UX Designer
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
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.
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
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.
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.
"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.
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?
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.
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.
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
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.