The Concept

1999. At some point during my tenure at Organic Inc. I envisioned a central repository where all media was stored and accessible through a custom media player using Flash. At that time I was into military radios for their utility, rugged builds and unconventional interfaces. I wanted to combine new front-end technology with the look and feel of hardware from by-gone eras.

The Jukbox and associated components. Click to see a larger image.

The Research

I'll usually start a round of research encompassing an image search of themes I'm interested in. In this case I lept from military radios to army green and red to propaganda and landing on Mao Zedong's Cultural Revolution.

Cultural Revolution propaganda imagery. An older figure with strong yet soft features interested me.

Cultural Revolution propaganda imagery. Prosperity, technology, innovation, peace.

A military radio as my template. In my search for radio imagery I looked for flat imagery like this so I could easily trace the forms in Illustrator. I would take pieces from different radios and combine them into a single design.

The PDA

The project had multiple views to get to the primary interface. The PDA is what you saw at load time. Clicking the locks on the side of the PDA would open it and turn it on and take you to an introductory screen inside the PDA UI. From there the user would click into the scene and load the media player.

From here the user sees the introductory scene clicking to see the radio UI.

Notation of PDA UI. Click to see a larger image.

Introduction Screen

It was at this point I felt giving the media player a context was an important step in deepening the user experience. So I created a fictional "in the field" instance with a radio operator while on maneuvers as the main character of interest.

I found imagery of a background scene, character and vehicles that I used to trace in Illustrator.

Introductory scene. Progression of adding elements in illustration.

Duplicated Jeep with subtle scaling, rotation and translation.

Added vegetation on trees and throughout the landscape.

Adding Character

The radio operator below is a combination multiple photos I found in my research.

The tracing process is pretty simple but I believe highly effective in communicating exaggerated color, line and forms. I trace the photo in Illustrator using a set amount of shades for each color. Accuracy isn't as important as long as the impression of the object is communicated. Since I'm working with vectors scaling to fit additional imagery is seamless.

Illustration of main character.

Final view of introductory screen.

Interaction event notation overlay. Click to see a larger image.

Audio event notation overlay. Click to see a larger image.

The Jukbox

Here's the primary interface the user would navigate. The left component houses all the complex forms and navigation throughout the media player (see below for notation). On the main body we have the meta information display, timer, power button, peak, and voltage meter - e.g. a waveform modulator. Below that the user could open up the "output" speaker and change options for outputting sound. To the right of that are "stations". These are user-defined preset playlists.

Primary media player interface. Click to see a larger image.

Interaction design notation. Click to see a larger image.

Audio events notation. Click to see a larger image.

Primary interface with the playlist displayed. Click to see a larger image.

Playlist detail.

Playlist with notation. Click to see a larger image.

Beneath the Hood

Since this was just a concept, it never saw the light of day as an app. If I were to go through the same exercise today I'd change quite a bit. I'd remove the superfluous elements, focusing on getting the user to the media player experience quicker. The PDA view and introductory sequence would be removed. A lot of the elements are non-essentials to the core user experience and would either be condensed or thrown out all together.

I'd deliver it as either an Adobe AIR app or website which a flexible data-model to support local content or links to outside repositories.

Outlines of the Illustrator design. Click to see a larger image.

My creative process is focused around the Lean UX / Agile methodology; instantly bringing a design into focus and delivering amazing experiences. This takes shape by stripping a deliverable down to its core components, providing a level of detail necessary to kick-start development. The goal is to get ideas quickly visualized and in front of the team, showing work early and often.

The key is collaboration, which becomes critical to the success of the team and ultimately, the product. Not your stereotypical solitary designer "lone wolf" - I'm in your implementation team, co-mingling with subject-matter experts or conducting a contextual inquiry with customers. Here conversation occurs dynamically, with laser beam energy. Work is printed up, displayed on walls available for review sessions, adhoc conversations, ideation or inspiration.

If you're looking for a user experience designer who delivers in short, iterative, fast-paced cycles, integrating feedback from all members of an implementation team, leading to high quality product experiences, we should talk.

Take a look around. To the right you'll find retrospectives on some of my most popular projects. The links below are a few deviations I've explored. Feel free to reach out to see even more recent and relevant work.

 Home

 Level Design

  Illustrations

 Archive

2D Design
3D Design
Animatics
Audio / Remix Sessions
Autodraw
Discography
Drawing
Interaction Design
--------------
Sustain Ability 2005
Resident Evil: Apocalypse

 Resume or (805) 907-6873