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:

  1. Redesign within the technical constraints of CSS

  2. 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.

Screen+Shot+2020-03-11+at+12.32.52+PM.jpg

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.