Overview

Touchpoint Interaction Design Conference is a part of Simon Fraser University and the School of Interactive Art and Technology for the Interaction Design Research Centre. Touchpoint is ran annually with each year having its own visual identity. I was one of the designers to develop the brand and identity and create the website for Touchpoint 2019.

Concept

The concept of the brand was to introduce a playful identity that reinterprets an idea from the past. With this, we saw an opportunity in the origin of modern design: the Bauhaus. A movement that taught art's relationship to society and technology, while understanding design as something that should be accessible to all.

We experimented with key visual elements from the Bauhaus graphic design that helped reinforce our message in order to translate the Bauhaus spirit of primary exploration onto a web experience.

Brand

We created a visual element that represent the playful attitude we wished to express. The familiar yet obscure form allowed for numerous interpretations that made people wonder. With a signature motion sequence, we established a visual language that became a foundation of the brand.

The concept and form of Avenir Next aligned with our aim to reinterpret an idea from the past in a modern context. Avenir represents the transition of a period in typography as Frutiger aimed to hint aesthetics of the 21st century. Frutiger's ambition to foreshow the future was something that resonated with us as we take inspiration from both, today and the past.

Execution

The driving concept of the user experience was 'Function & Play'―to design a practical and sensible web experience with playful moments that stimulate the audience. We experimented with various colors and motions to execute on this concept.

The first impression sets the tone for the rest of the experience, whether in person or on the web. On landing, we introduced a memorable motion sequence that reinforced the brand.

Since the audience was not familiar with the speakers, we wanted the site to act as a digital handbook for those attending the conference. We designed and developed mobile-first to prioritize the practicality of the site so people can enjoy using it at the conference.

The navigation bar was placed at the bottom of the phone screen with consideration to ergonomics so people can access the menu with ease when holding the phone with one hand.

Dark Mode was integrated as we thought a dark interface would be nice to have in a dim conference room. Dark Mode also introduced a new color scheme that became a pleasant surprise for the audience.

“By 'post-modern', we refer to the culture which absorbed the lessons of the Bauhaus, emptying its forms of their avant-garde aspirations and investing them with new ones.”

— J. Abbott Miller