Challenge

The twofold design challenge presented to Moto Development Group where I was the visual interaction designer at the time.
1) Redesign within the technical constraints, leaving the only option of changing the CSS stylesheets.
2) Deliver a design system that can be understood and easily implemented by the engineering team

Approach
Working within the existing UI, I quickly noticed how the information on certain screens were densely packed and text with the current typeface overflowed and was truncated by the text container. The previous UI used the same typeface as the Kaleidescape logotype so it possessed substantial character width. 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.It was an quick and easy change in CSS but had to prove it with concise Photoshop mockups and guidelines. I worked 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 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 from 2009 stood the test of time since it is still being used  today. I would have like to redesign the entire UI for to show less dense text and more visuals. The remote could also be simpler with less buttons. While I wish more could have been done, the challenge of the project was how to make the most impact with very little scope and lots of limitations.