Hi! I'm Brian and I am a User Experience / Product Designer! I can also Code and have expertise in Digital Video.

I'm a multidisciplinary designer with a holistic and human-centred approach. I've had the opportunity to work on a diversity of digital and physical projects and have a comprehensive range of knowledge, skills, and experience. My passions include Wayfinding, Usability, Interactive Installations, Tangibles and Urban Design.

More about Brian »

Let's talk. Coffee's on me.
» Contact Brian


Sustain-a-Stack by Octobox

An interdisciplinary design studio project where my team, Octobox, developed from beginning to end, an innovative product. Our process began with many brainstorming and idea generation sessions, which lead us to the idea for Sustain-a-Stack. We took this concept, and it developed forward by performing crucial research, interviews and market feedback. This collected data was analyzed and applied to grow the ideas. In the second phase of the project, digital-physical prototypes were developed. Starting from early proof-of-concepts, interactions were carefully developed and materials and technologies were chosen through rigorous experimentation. The final result was a fully working physical prototype with carefully developed digital interactions and experiences was developed.

Octobox.org - Team Octobox Development Blog

Concluding Project Presentation
(note slide images may take a moment to load)

Concept Presentation
(warning:lengthy loading time)

+ Brian Quan
+ Kurtis Beard
+ Kiks Chua
+ Sammy Jayetileke
+ Derek Pante
+ Manuel Pineault
+ Andrew Thong

weBlimp is a social, crowd controlled flying airship. It conceptually miniaturizes participants and places them inside the gondola of a remote controlled blimp.

The purpose of this project is to explore the concept of crowd collaboration, and how it can occur in the context of navigational controls in an embodied manner. The project attempts to bridge the gap caused by the disembodied relationship between the remote control and the device. The weBLIMP is intended to play with participant's sense of scale. weBLIMP is a blimp, controlled by participants in a room (located away from view of the blimp). The navigators play in a room with a projector showing, at wall size, what the blimp is seeing, and the blimp embodies what the participants do. The participants react to what they see on screen, and the blimp reacts to what the participants do. This project is an example of embodied interaction, which plays with scale and social interaction.

Project Website

Quan, B., Thong, A., Waddington, N., Wu, A. "weBlimp", ACM Creativity and Cognition 2009 Conference, October 27-30, 2009, Berkeley, CA. Poster session.

+ Vancouver 2010 Olympics - Surrey Celebration Site - February 17-22, 2010
+ SFU Surrey Annual Open House - Dale B. Regehr Grand Hall - March 4, 2010
+ International Digital Media Arts Association Conference 2010 - November 4-6, 2010

+ ShawTV - [Television Interview]
+ Fast Company
+ DesignBoom
+ Surrey Leader - [Newspaper Article]
+ Green Diary
+ Gizmo Watch
+ Technabob

+ Brian Quan
+ Andrew Thong
+ Nathan Waddington
+ Anna Wu

A photographer drops his camera.
A video short, created out of digital still images, playing with the relationship between still images and sound. Digital photography, video compositing + effects, custom audio.

Brian Quan
Josef Liu

Project: Consume Now Think Later
A large scale project where I was the project manager of a 50+ member team. Calling ourselves BlueBox), over four months we developed ideas and concepts and pushed them into a polished series of immersive experiences that educated youth on the environmental.

The project, called 'Consume Now, Think Later', was a large scale interactive installation / exhibition that addresses issues surrounding the environment. The structure of the installation comprises of four rooms that focus on the issues of over consumption, pollution, and urban sprawl. The final exhibition of 'CNTL' took place at Fraser Heights High School, interactively educating hundreds of teenagers on environmental issues in a unique, innovative, and fun way.

For more on Consume Now Think Later, please take a look at the Project Brochure
or visit the project website www.ConsumeNow.com.


Project: Sodom & Gomorrah

An interactive installation, titled "Sodom and Gomorrah," addresses and modernizes the themes generated by the biblical tale of the same name. The installation involes a participant in a variety of visuals and audio that relate to themes of 'good and evil'. The installation changes according to the interactions of the participant, who is put into the role of the all-seeing, all-knowing being - God.
Custom surface touch sensors, Multi-projector anti-occlusion projections, Camera tracking, and sensor-projection processing.
Please see the Project Blog for more information.

+ Kurtis Beard
+ Kawi Cho
+ Derek Pante
+ Brian Quan

Project: Floral Function

An interactive installation where movements of a participant affect the presented environment.
The idea for the project was derived from the current issues of global warming, deforestation and human's impact on the environment. We as a group of artists wanted to come up with a creative way of highlighting this message. The artistic approach to this issue was to create an interactive installation that would send out a message illustrating this idea of the Man's destructive impact. The idea is an Interactive installation that features real time growing floral art projected on a wall. Each time someone passes in front of it the plant would degenerate and wither back down or away from the being. This idea will be the basis of our Installation.

Floral Function project website

+ Brian Quan
+ Aaron Liu
+ Abe Lo
+ Steve Cutinho
+ Gail Wu

Takeout for Two
A short film about a radio host who finds himself trapped in an unending loop, doomed to relive the same moments over and over again, until he can learn to take his own advice.

First place winner of the 48 hour Quick flick challenge. "QFC" is a 48 hour film festival, where your team is given an "inspiration package" containing a character, a location, a line of dialog, a prop, and a CD of music, all of which must be used to create a 5 minute long film over the course of 48 hours. Our inspiration package included: Character: radio host; Location: dead end road; Prop: "Takeout for Two" box; Phrase: "The game takes over your life".

Right This Way
After an eccentric billionaire starts his own left-handed Utopian society, Rod, Andy, and Lewis try to solve their financial crisis by signing up. However, they soon find out that being left-handed is not as easy as they thought.

Production Crew:
Brian Quan, Jackson Chan, Hosea Cheung, Tim Kong, Nabil Lam, Josef Liu, Justin Mah, Jeff Tay

IMDB - Internet Movie Database (link)

'Telescope' - by Shalini

I had a great time working on a music video for up and coming Canadian singer, Shalini, set on the theme of bullying and released for Pink Shirt Day. Working with first time director Vik Prasad, I was consulted on all aspects of the production as well as being behind the camera and cinematography.

Assistant Director, Assistant Editor, and Director of Photography

Process: The project began as discussions with Shalini and Vik, the Director, with the concept of a come-to-life Bunny companion of Shalini. Working with Vik and Shalini, I helped direct and manage the creative process in the development of the concept, song choice, and ultimately to the nitty-gritty pre-production: creation of shot-lists, storyboards, crew recruitment, scheduling, equimpent, and location scouting.

The shoot itself took place in 5 cities in Metro Vancouver and took four full days. The project also worked with and feature kids from The West Program, one of the Vancouver School Board's alternative education programs.

Seattle Alaskan Way Viaduct Study and Intervention

The Alaskan Way Viaduct in Seattle has divided the city center from it's waterfront since its construction in the 1950s and as a result has created pockets of land that have been underutilized, underdeveloped and is unwelcoming to the residents and visitors of Seattle.

Click for slideshow

Our proposal for the space is to create interventions that will parallel Seattle's development plan - to grow and develop for the future. This is done through the nurturing of the city's core values, investing in the future - the children of the community, and creating a space to encourage creativity and innovation to meet the challenges that the future will bring. The proposal includes a 'Rain Park', an Education, Training, and Community Center, a 'Pseudo Beach', and a central public space and pathway.

Danese Milano at Railspur Alley, Granville Island

Click for slideshow

A showroom proposal for client Danese Milano in the context of Granville Island, located in Vancouver, Canada.
The project site is a challenging narrow alleyway in Granville Island known as Railspur Alley.

Pi Light - 3.14 Lamp

For the Math, Science, and Typography enthusiasts, Pi Light is designed to create a sense of experience. People will not only be experiencing light, but also the shadows and patterns created by the infinite numbers of Pi. The light is designed to have a soft low light effect, with its number-pattern shadows “clothing” the tables and walls.


Production Images:

This light and it's images have been used in serveral banners, websites, brochures, and other promotional materials for SFU and SIAT.

User Experience and Organizational Web Strategy

Developed an organizational strategy for UX and management of CLEBC's web properties. Included development of next-gen responsive alpha site with overhauled Information Architecture.

Self-Paced eLearning Platform

Winner of 2014 ACLEA's Best Award in Technology!

Video-quiz based eLearning platform for CLEBC, based around video and quiz content.
User Experience Design for customer facing and administrator facing interfaces.
Liason and communicator with developers to ensure platform was developed to spec and within budget.

WESA Resource Centre

User Experience and development of CLEBC's first responsive website. Portal was created as a resource for the legal profession to access information and education on a new legislative change, the new Wills, Estates & Succession Act in British Columbia.
Involved User Experience Design, research and discussion with stakeholders, Mobile Responsive Design, HTML5 / CSS / Bootstrap / Apache, Videography & Video Post Production.

Dine Out Vancouver v2.0

In 2014 I had created a restaurant tool for myself for Dine Out Vancouver, an annual food festival in Metro Vancouver. I was frustrated in choosing a restaurant to go to with my friends for the last few days of the event. I just wanted to see which restaurants were near the area where we were meeting and which were the top-rated restaurants to try, but these abilities were just not available on the official Dine Out Vancouver website. I was frustrated so much so, that I just went ahead and made my own search tools.

So what I did was place all the restaurants on a map so the information could be browsed spatially, allowing one to pick a restaurant near them or a destination that they will be in. With over 250 restaurants, I also wanted to know which ones were good. So I cross referenced the restaurants with their Yelp scores and placed all the data in a dynamically sortable table, so people can sort the restaurants by the best score, most reviews, or other categories like neighbourhood and city.

For Dine Out Vancouver 2015, I checked to see if the official site was any better, but to my disappointment it was exactly the same. So I reused the code from last year and recompiled the data with the new restaurants and updated Yelp information. That took me an evening, which was mostly spent fixing erroneous Yelp or maps data.

Last year's site saw about 500 views, I had only created it with 4 days left in the festival and sent it to just friends. This year, over the course of the whole festival, the site received over 5300 views!

DOV 2.0 was also picked up by the Vancouver Sun, which ran an article on it!

I have received nothing but positive feedback from those who have seen it, and they really like it. They find it much easier to use than the official DOV site.


Canada Lifestyle & Health Browser

As a part of the Canadian Open Data Experience Hackathon, I worked with two data experts, over a 48 hour period, to produce a useful webapp with mash-up of open data sources, under the competition themes.

The Canada Lifestyle & Health Browser is a map based tool to compare computed lifestyle scores of community regions in Canada. It designed for those curious about Canadian health populations, by city. If you are curious to know if where you live determines a health status, this is the right app for you. You can browse different regions in Canada and compare their aggregate scores. Each region provides a unique insight into health status. This aggregated data includes all sexes, all ages, and with the most recent Canadian data from the CCHS survey. The score, out of 100, is computed from a number of open data sources of health and lifestyle, including life expectancy, instances of disease, and recreational activity. When each region is clicked on, individual scores of each metric is shown. Bootstrap and Google's Material Design was used in the creation and design of the webapp.

Included Open Data Sets:
Health indicator profile, Health-adjusted life expectancy,

Possible future enhancements:
- Methods of direct comparison of between cities, possibly using charts
- Mash up with local recreation resources (recreation centers, community programs)

View the Canada Lifestyle & Health Browser now

fXHL - Freegan Extensible Hobo Language

fXHL - A service that reappropriates the Hobo Language to help encourage waste minimization.

As part of a 48-hour worldwide Service Design event to develop and prototype new services for the shared theme "Hidden Treasure," our group identified business surplus (such as unsold food and expired magazines), as a prime source of treasure. Our proposed service is the Freegan eXtensible Hobo Language (fXHL), a set of symbols and procedures that would make giving away unsold product a more functional and workable process. The concept was inspired by the original hobo language as a means of discreet communication for valuable information, combined with the freegan movement and its alternative living strategies (ie, dumpster diving) to minimize resource consumption, and named in a similar fashion to XML for its self-defining, extensible abilities.

Benefits from widespread adoption of this system would include: restaurants reducing waste by making surplus useful, amelioration of the perception of foraging techniques, safer foraging practices, and the offering of more food choices for freegans.

Judges were highly intrigued by the concept. They noted it had a lot of potential and commended it for its sustainability aspect; however, suggested we could have explored ways to monetize the system. Future development of this project could include online mapping which can be used to show food sources geographically, or show sources based on nutritional information. Anonymous sources can notify freegans of other types of corporate waste (out-of-style clothes, last month’s magazines, etc).

Our proposed 'free' symbol: the double-line money sign ($), modified to appear as if struck out - thereby representing free for taking.

Low-fi scenario setup: the symbol indicates the food is was left out at 8pm

The symbol allows for a variety of possible extensions should adopters wish to offer more specific information.

fXHL Presentation Slides (pdf)
fXHL Scenario Video
fXHL Project Page on GlobalServiceJam.org
Process Timelapse Video

Inspired by the original hobo language for communicating everything from locations of important places to warnings of locals' attitudes.

Journey mapping the user experience