Lift Me Up

FIELD SCHOOL WEBSITE | JAN. '18 - AUG. '18

italiaDesign—11th Edition

italiaDesign is an 8-month undergraduate field school offered by the School of Interactive Arts & Technology at Simon Fraser University. The purpose of field school is to expose students to an authentic design culture and teach the discipline of design in a different context. I was one of twelve senior design students selected to participate in this legacy project, as our team conducted in-field research and interviews which were produced into a series of films. These films are encapsulated in a website that we created after our experience in Italy.

This is a documentation of the key decisions made throughout the creation of the site in addition to my contribution to the project. Please check it out.


TEAM

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

CONTRIBUTION

Development, UX Design, Interaction Design, Visual Design, Motion Design


01

CONCEPT / STRATEGY

Ambiguity


Precedent Study

We began by studying the past. In one of our interviews in Milan, Armando Milani told us, “Pay attention to the evolution, not the revolution”, so we did exactly so.

Precedents

Each site visually captures the team’s voice in their own unique way without compromising the overall user experience of the site. The past sites were executed very well, so we didn’t want to break the existing information architecture. Our challenge was to establish our own identity while crafting an engaging user experience that aligned with our specific film content, as our films were more focused on personal design philosophies instead of the designers' work like past field school films had done.


“Pay attention to the evolution, not the revolution.” — Armando Milani

The Vignelli Canon

With this challenge in mind, we established design principles to guide our decisions. We saw an opportunity in the Ambiguity section from The Vignelli Canon. Massimo Vignelli was a designer who was respected by the team, as well as some of the designers we interviewed, so we wanted our site to pay homage to his legacy.

The Vignelli Canon

We also kept the copy in mind from the beginning of the design process rather than leaving it as an afterthought. With this approach, we set the tone of our identity through the copy while iterating through the visual identity. An example of this was the decision to refer to ourselves as '11th Edition', rather than '2018' or 'Gruppo 11', or calling the team page 'Credits', instead of 'Team'.


“I have a positive interpretation of ambiguity, intended as a plurality of meanings, or the ability of conferring to an object or design, the possibility of being read in different ways - each one complementary to the other to enrich the subject and give more depth.” — Massimo Vignelli

Ambiguity, from The Vignelli Canon

The concept of Ambiguity, reinforced by the use of contradictions, lead me to ponder about the current climate within the discipline of design. Here's my interpretation of Ambiguity:


All these "UX Trend" articles, create a perception that designers must follow a pattern and work a certain way, as if there's a template to become a good designer. Though there's no such thing as a single design practice that all designers should follow in order to achieve quality; those are only the fundamentals. All the desigenrs we met had their own design practice. Their work reflected their personal design philosophies.


The form we design and the problems we solve varies depending on the context and the people we design for. Our job, as designers, is to share our unique interpretation of the world to creatively solve problems within the given context. Isn’t it this designer’s interpretation that makes the work we do exciting and meaningful?

Ambiguity, from The Vignelli Canon

Design begins with making sense from the ambiguity and reading between the lines of what people say they want, and what they really need. For this project, I noticed that there wasn't much intention behind the film orders in the previous sites, so the challenge was: How strategic and meticulous can we be with the given content without breaking the existing architecture? To do so, I aimed to introduce a radical element within the Home page to spark curiosity and convey the importance of thinking beyond the template.


“It’s a detached way to see things and represent it in a very... I won't say funny, because irony is not about funny things ― it's a clever interpretation of our reality.” — Giorgio Biscaro

02

BRAND / IDENTITY

Respect the Canon


Mood Board

The process began with gathering a mood board as the team shared inspirations and explored different possibilities. The mood board consisted of visual inspirations, mockups of potential form, approaches to the content organization, and potential interactions. This helped us get a sense of what everybody had in mind and got the team on the same page.


We then condensed the mood board into different approaches that we could possibly pursue. The design team split into each of these approaches and created mockups of the home page.

Mood Board

Brand Guidlines

We used Neue Haas Grotesk as our typeface on a dark background to align with the Vignelli style. The specific shade of colors were chosen by our Art Director to compliment the tone of the photography.


“Always respect the Canon.” — Armando Milani

Brand Guideline

Visual Exploration

These are some of the early iterations I mocked up for the Home page. What’s consistent among these mockups is the content organization. With our designer-focused films, I thought it would be interesting to strategically categorize and order the films.

Visual Exploration

By grouping and ordering the films with intention, we implied a linear narrative while providing multiple starting points for people who aren’t familiar with the content. Grouping the films and giving each category a title was our attempt to evoke curiosity and give people an incentive to watch the films.


“How can we be more radical?” — Jekyll & Hyde

03

DESIGN / DEVELOPMENT

Establish the Pace


The Foundation

This is the iteration prior to the final design of the Home page. As you can see in the previous iterations, when creating mockups for the home page, I had aimed to contain all the information on the landing screen to remove the friction of scrolling. Though I realized this was simply a false constraint that limited our opportunity to challenge people’s expectations.

Home Page - Iteration

It’s important to reduce friction to achieve an intuitive user experience, but I also value the emotional impact that we evoke through interactions. This emotional impact is what resonates with people and influences them to revisit the page, as a collection of positive interactions grow into a memorable experience.

Final Design

This is the final design of the Home page. The design team shared insights and refined the presentation of content as well as the visual design of the film series based on the previous mockup.

Home Page - Iteration

With the content strategy in mind, we also wanted to explicitly communicate what the Field School site is about. Many people in the community who haven’t experienced Field School struggle to understand the true value of committing 8-months to the Field School program. Past sites emphasize the team aspect more than the films that contain the experience and learnings, and these sites have represented Field School in their own unique ways, though we wanted to be clear about our intention. This concept is also portrayed on the Credits page, in which our Art Director chose to showcase the architectural landscapes and create contrast with how the designers were being represented.

Landing Screen

With this perception in mind, I wanted to directly apply the concept of Ambiguity by making the landing screen itself ambiguous at first. Though as people scroll down the page, more information is revealed and will begin to understand the site in a linear order.

By boldly increasing the size of the copy and creating a void on the landing screen, people were required to scroll down to read the entire description. I operated under the assumption that people will scroll, and that requiring an interaction with the page would increase the likelihood of people taking the time to read the copy while creating visual impact. After user-testing, all of our participants scrolled after seeing the landing screen, and was fully engaged with the copy.

Interaction Design

The visual impact of the designer portraits were powerful so we wanted to leverage these portraits and introduce a nice surprise on hover. This is where the experience lies. We saw this section of the site as an opportunity to entice people to dig deeper into the site.


To boost the visual impact, we took a specific typographic approach that doesn’t distract away from the portraits while revealing information that evoke people’s curiosity. In the form of 3 anchors, we revealed the Volume description and the film title that hinted what the film is about. For films that contain multiple designers, we added a circular timer with the portraits to automatically swift through the portraits every 3 seconds.

The intention behind the interaction design was to establish a slower pace for the audience. This pacing was first established by people scrolling down the large copy, and then the slow entrance of the portraits in the film series section. At first, there were no transitions, though by creating a fade-in transition from the side, the interaction became more dynamic and prevented people from quickly hover down the list. Because the portraits were part of the visual narrative, we wanted people to take the time to enjoy each portrait.

Video Player

This was the final design of the video player that people land on after clicking on a designer’s name. The designer page was primarily designed by our UX Lead. My contribution to the designer page aside from development was the visual/interaction design of the video player and providing insight on the ‘Beyond the Film’ section from a design/development perspective. I was also given the opportunity to create the title sequence for the films.

We wanted the films to be the first piece of content people engage with since watching the film was also the easiest way for people to learn about the designer. It was also because our experience and learnings were encapsulated in these films. Because our films were designer-focused, we saw value in including the remaining content, the designers’ projects, underneath the films as extended content for people to visually see how these designers apply their design philosophy onto their projects; hence ‘Beyond the Film’.

Designer Page Iteration

This was the initial design of the ‘Beyond the Film’ section. We wanted to create visual impact by making the images full-bleed and revealing related quotes via interaction.

Designer Page - Iteration

Though through user testing, we noticed that the interactions we implemented weren’t working as well as we had anticipated. We experimented with click/hover in order to reveal the quotes related to the project, since we didn’t want to overwhelm people by presenting too much information in one view. Though majority of our user testers either didn’t bother to click or was caught off guard when the cursor naturally hovered over the image while scrolling.

Beyond the Film

Based on these findings, we scrapped the initial interactions and replaced it with a full-page vertical carousel. With this approach, we were able to imply a linear narrative through the projects while presenting necessary information one-by-one. Though instead of immediately showcasing projects and quotes, we provided an overview of the section first to let people follow the narrative as they interact with the page.

The problem with the click/hover interaction was solved by presenting the quotes and graphics together so people have visual cues while they read. One of the feedbacks we got from multiple user testers was that they wished they were able to multi-task and briefly skim through the content rather than having to interact with each image.


After evaluating the test results, we chose to respond to this by creating real estate for the quotes without distracting away from the image. By doing so, people were given visual cues while they read the quotes. We included multiple quotes per image with the use of anchors within anchors for sections with multiple key insights. From a content perspective, this approach afforded a more engaging experience, as we were able to present one project/quote per view and guide people through the designers’ work in a linear order that wasn’t imposed since they also have the option to skip by navigating through the anchors.

Volume Preview

At the end of each ‘Beyond the Film’, we included a ‘Volume Preview’ section that showed one key quote that acted as the threshold to transition to the next designer. These quotes allowed us to hint the purpose behind the grouping of each Volume while conveying the bigger picture concept of the linear narrative.

Mobile Design: Home Page

This is the mobile design of the Home page. With the left aligned typography and the use of full bleed portraits, the site was able to translate seamlessly on mobile. The biggest challenge for the mobile design was translating hover interaction into touch interaction. How could we reveal the portraits when people tap on the names? What information could we remove on mobile?

Mobile Design - Home Page

The initial approach was that people could see the portraits when they hold on the names and will be taken to the designer page once they released their finger. Though after user testing this interaction, we learned that people aren’t expecting a portrait to pop up, the likelihood of people holding on the names were low. Therefore, we chose to make it a double-tap in which the first tap reveals the portrait and the second tap sends them to the designer page.

Mobile Design - Designer Page

Mobile Design: Designer Page

This is the mobile design of the Designer page. In the earlier version, we had placed the anchors horizontally at the top, though after user testing, we realized this layout implied a horizontall swipe when the actual interaction is vertical. Thus we placed the anchors vertically on the side, which made the navigation clear while creating more space for the content.

Reflection

Wow... that was fun... I continue to digest what I learned over time, as everything I exprienced within that 8-months dissolved into my memory as an archive of life lessons, gradually sharing each insight through my interpretation of the world.


“The reason for design is actually 'why design?' Well there's lots of reasons why... how it can help and make things better, but I think the most core reason of why design is 'because'. Because I want it to be. So just kind of that point of conviction is where good things happen.” — Sean Wolcott