Touchtones

Collaborative multi-user music sequencer

Project Background

Role
Visual Design, Art Direction

Company
Stimulant, Microsoft

Tools
Photoshop, Illustrator

Team
Sound Designer, 2 Developers, Visual Designer (Me)

Microsoft Surface was an interactive table device and was unveiled in May of 2007, five years before the Surface tablets and laptops we know today. When the Surface was first released, it was a big deal. It was one of the first non-desktop, non-mobile multi-user interactive devices to come to market and it was a huge opportunity to make something different.

Our collective passion for music and interaction led to the creation of Touchtones, a multi-user collaborative music sequencer that doesn’t require any musical knowledge in order to make something beautiful. The instrument took advantage of Surface’s unique camera-based system to leverage finger orientation as well as touch position. 

Responsibilities — I helped develop the concept and was responsible for all visual and UI design.

SURFACE VERSION 2

Touchtones for Microsoft PixelSense

Up to four people can make music together on four instruments distributed across four octaves, all playing to a master tempo. Each color represents a different instrument. Instead of the typical 16-note grid, we created a free-form set of rotatable “mirrors” – sounds travel in a straight line until they are reflected and bounce off in a new direction. Each time they hit a mirror, a note is played.

TouchTones-table-hero-2
TouchTones-Feature-2
TouchTones-3

Design Concepts

Various ideas for the node. Originally designed for 720p resolution, later adapted to 1080p. All created in Illustrator.

TouchTones_redesign_v1r100
TouchTones_redesign_v1r150
TouchTones_redesign_v1r200
TouchTones_redesign_v3

SURFACE VERSION 1

Touchtones for Microsoft Surface

TouchTones for Surface v1 was a proof of concept of sorts. It was the first app that we designed and developed for the original Surface table. It was 720p magic! It was received well and that's why we were asked to redesign it for the updated PixelSense table a few years later.

TouchTonesV1-02
TouchTonesV1-03

Touchtones for Windows Phone7

Inspired by the success of our multi-user Touchtones table application, we wanted to bring a similar playful composition app to the mobile space. We completely retooled the UI for the mobile context, while retaining the core concepts of ease-of-use, simplicity and unexpectedly beautiful outcomes from any input that made the original so fun to use.

Responsibilities — I was responsible for all Visual and UI design.

TouchTones-Mobile_splashscreen_v1r008
TouchTones-Mobile_trialMode_v1r001a
TouchTones-Mobile_interface_record_v1r013a
TouchTones-Mobile_interface_record_v1r014a_trial
TouchTones-Mobile_interface_record_v1r013b
TouchTones-Mobile_interface_v1r013a
TouchTones-Mobile_interface_v1r013b
TouchTones-Mobile_interface_v1r013c
TouchTones-Mobile_gridAssets_v1r001

Design System

TouchTones-Mobile_buttonStates_v1r001