HTC Touch Diamond
The HTC Touch Diamond™ featured a unique touch-based 3D user interface called TouchFLO 3D. This interface allowed users to interact directly with the content on their device, and view information in visually rich, animated presentations. The main content areas included; Home clock, People, Messages, Email, Internet, Photos, Music, Setting and Programs.
The creative approach to this interface was to allow the user to interact directly with content as they would in the real world — flipping through CDs at a record store, spinning through contacts in a roladex, or shuffling through pages of mail.
Role
Creative Direction
Interaction Design
Visual Design
Motion Design
3D Design
UI System Design
Brand Visuals
A Revolutionary 3D Interface
The HTC Touch Diamond™ featured a unique touch-based 3D user interface called TouchFLO 3D. This interface allowed users to interact directly with the content on their device, and view information in visually rich, animated presentations. The main content areas included; Home clock, People, Messages, Email, Internet, Photos, Music, Setting and Programs.
The creative approach to this interface was to allow the user to interact directly with content as they would in the real world — flipping through CDs at a record store, spinning through contacts in a rolodex, or shuffling through pages of mail.
This tactile interaction was a key element of the design, and created a unique opportunity for rich animated feedback. For example, as the user drags up or down on their contacts, the interface visually responds by rotating the rolodex carousel of people. In Messages, as the user flicks up or down, the lines of text come apart and flutter away like the words in a conversation. This tactile experience was continued in Music, where the user could flip through album art as they would flip through a stack of CDs.
"It's an incredibly graphic piece of software that is highly intuitive to use."
Innovative Sliding Tab Navigation
The main navigation of the device featured a prominent ‘tab’ at the bottom of the screen, that could slide back and forth to select each major content section. As the tab slid across the screen, the content icons would slide in the opposite direction.
This unique innovation created the opportunity to present more nav items that the space would normally allow. Rather than being confined to the visual width of the screen, the navigation could be much more extensible. In addition, by positioning the main navigation control slider at the bottom of the screen, the user was ergonomically situated to navigate the device one-handed.
Rich Animated Visuals
Another key feature of the design was a delightful use of rich animated visuals. One of the most fun and innovative was the variety of different weather graphics and animations. For rainy conditions, the user would see the cloud graphics gather and rain start to fall. Then drops would ‘stick’ to the inside of their screen, and shortly be cleared by a ‘virtual’ windshield wiper. In sunny conditions, the clouds would part and the sun graphic would shine though. When the displayed weather condition temperature dropped below freezing, ‘virtual frost’ would gather at the corners of the screen.
Moments of Delight
The interaction model and motion design centered around the idea of tactile interactions with ‘real world’ physical objects — flipping thru music CDs, flipping thru a rolodex of contacts. The project also featured fun and unexpected animations rain drops spattering on the inside of the device screen, designed solely to provide ‘moments of delight’,
