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.
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 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.
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.
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.
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.
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.
I strive to deliver memorable and emotional experiences through my understanding of the relationship between art and technology and explore those in the context of user interfaces and interactive experiences.
My core competency is User Experience Design for web and mobile applications. I'm bound by the motive for creating simple, efficient user experiences while lovingly guarding the rights of the user.
I have a passion and love for music composition, game design, and illustration.
Take a look around. The links below are the quickest way to see what I've been up to. To the right you'll find case studies for some of my most popular projects.
Traditional Drawing
Interactive Design
2D Design
3D Modeling
Autodraw
Animatics
Discography
Audio & Remix Sessions
--------------
Sustain Ability 2005
Resident Evil: Apocalypse
+1 408-306-2947
hello@michaelkosmatka.com
Resume 
Tel: +1 408-306-2947 | Email: kosmatka@gmail | Skype: ubiquityxx
