Background

Touchpoint Interaction Design Conference is a part of Simon Fraser University and the School of Interactive Art and Technology. Touchpoint is ran annually with each year having its own visual identity for their website. My friend Mark Strathern and I volunteered to design and develop the website for Touchpoint 2019 as a fun project.


Visit website: http://www.sfu.ca/idc/2019

Concept

We formed our point of view on what the 2019 site should look like by first looking into past Touchpoint websites. Based on the constraints and the patterns we saw, we wished to introduce a playful identity that reinterprets an idea from the past.

As a design direction, 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 reinterpret the Bauhaus spirit of primary exploration onto a digital medium.



We chased for a visual identity that represent the playful attitude we wished to express. After some exploration, we landed with a familiar yet obscure form that allowed for numerous interpretations. With a signature motion sequence, we established a visual language that became a foundation of the identity.

When choosing a typeface, the concept and form of Avenir Next aligned with our goal 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.

Splash page exploration

Some handpicked explorations I did for the splash page prior to narrowing down on a concept.


Mobile-First

We designed and developed mobile-first considering that people will visit the site on their phones to view the guest speakers. We wanted the site to act as a digital handbook for those attending the conference.

The driving concept of the user experience was 'Function & Play'―to design a function-first web experience with playful moments that stimulate the audience. One of the additional requirements for the 2019 site was to include guest bios, so we explored a variety of ways to present the content without crowding the mobile screen.



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 implemented since we thought a dark interface would be better suited in a dim conference room. Dark mode also introduced a new color scheme that became a pleasant surprise for the audience.

Landing Sequence

The first impression sets the tone for the rest of the experience, whether that's meeting someone or entering a building. I believe this applies to visiting a website as well. On landing, we wanted to take a moment to engage the audience while reinforcing our concept of Play.

Intro video

A small clip I made for fun to play at the start of the conference. Music: Roses by Outkast.

Website

http://www.sfu.ca/idc/2019


In collaboration with Mark Strathern