MOTO: Kaleidescape REDESIGN
Kaleidescape specializes in luxury home theater systems. The UI NEEDED A facelift and a DESIGN SYSTEM
Project
MOTO Development Group
Role
Visual Designer
Date
October 2008
CHALLENGE
The twofold design challenge was presented to Moto Development Group where I was the visual interaction designer at the time:
Redesign within the technical constraints of CSS
Deliver a design system that can be understood and easily implemented by the engineering team
PROCESS
Through a design audit, I noticed how the information on certain screens were densely packed and layout margins were not balanced. The character widths of the fonts also occupied significant horizontal space thus truncating lots of the title text. Transition animations were not consistent from screen to screen.
While these were easy CSS adjustments, I created concise Photoshop mockups and guidelines as a proof of concept. I collaborated with the front-end engineer to change the stylesheets and ran several on-screen audits to test the durability.
The next design challenge was much more taunting, designing input via remote control. I made a quick 2D animation prototype using Flash. Pressing and holding the buttons on the remote would trigger different screen transitions on the right side of the remote. Once finalized, I worked closely with the engineer to adjust the final animation on the device so the speed and velocity were as specified.
DESIGN
Typography Parity
I convinced the client to replace it with a better designed typeface system, Univers. Univers was designed specifically for various purposes from wide to narrow, and still co-exist together in one layout.
Layouts Optimized for Scanning
The next step was to create key screens and provide pixel dimensions as a style guide for engineers. Each UI element was given consistent spacing to make scanning content easier
Consistent Animation Speeds
The next design challenge was much more taunting, designing input via remote control. I made a quick 2D animation prototype using Flash. Pressing and holding the buttons on the remote would trigger different screen transitions on the right side of the remote. Once finalized, I worked closely with the engineer to adjust the final animation on device so the speed and velocity were as specified.
Watch the demo of the actual Kaleidescape remote control in action.
Outcome
Overall, the visual refresh stood the test of time since it is still being used today. While I wish more could have been done, the challenge of the project was how to make the most impact with technical constraints.
With a UI style guide, the Kaleidescape engineering team can implement quickly and not waste hours making design decisions.