HybridFlightHeaderUX
 
User eXperience
|
|
|
|
 

 

Cisco Systems OrangeGrey
Smart Home Energy Lab Character Development & Flash Site Design
pixel pixel
pixel
pixel   pixel  
SmartHomeEnergyLab01Sm SmartHomeEnergyLab02Sm SmartHomeEnergyLab03Sm SmartHomeEnergyLab04Sm
       
    pixel  
SmartHomeScientist pixel

The Smart Home Energy Lab is a family friendly Flash site that was created as an educational story-driven section of a larger energy web portal.

Starting from the story ideation, I worked on the overall feel of the environment and the character development of the main character, the Scientist. As the topics of energy usage and conservation are often abstract to younger viewers, I created something that was a bit more fun, yet still conveyed the key concepts. What resulted was a steampunk-esque world where clicking on each of the objects played a brief animation illustrating related lessons and tips.

Responsibilities: Character and Story Development, Illustration, Animation, Final Production
Tools: Photoshop, Illustrator, Flash, Audacity, AS3

pixel GuitarPicks

 

 

 

 
Okapi: Mobile Speech Wireframes UX & UI Design
pixel pixel
pixel   pixel  
Okapi01Sm Okapi02Sm Okapi03Sm Okapi04Sm
       
     

Okapi is a fictional name I used for a confidential client. I was asked to create a quick series of spec wireframes for a high level user experience using speech on a non-specific mobile handset.

With a loose set of guidelines, I worked on a quick medium-fidelity flow of a typical experience for most mobile devices -- listening to music. Above are just a sampling of the overall flow. In addition, I created a more polished, but still general look & feel image for presentation.

Responsibilities: Wireframes, UI look & feel
Tools: Photoshop, Illustrator

 

 

 

 

 

 

Kiha Software
AroMobile: Android App Suite UX & UI Design
pixel pixel
pixel   pixel  
Aro01Sm Aro02Sm Aro03Sm Aro04Sm
       
     

AroMobile is a Android platform suite of applications using a semantic recognition technology making your mobile experience faster and smarter.

Working on the in-house Creative team at Kiha (a Vulcan project), I worked on the UI and specifications of the Calendar and Contact applications, as well as designs for the Dialer app. In addition, I created Marketing videos for CES '11 that showed off the speed and intuitive-ness of our node-based user experience.

Responsibilities: UI, design specifications, final asset creation and delivery
Tools: Photoshop, Illustrator, AfterEffects, 9-patch

 

 

 

 

 

 

Intermec
OrangeGrey
Delivery Truck Client: Wireframes UX & UI Design
pixel pixel
pixel   pixel  
TruckConcept2 TruckConcept3 TruckConcept4 TruckConcept5 TruckConcept6
         
    pixel  
TruckConcept1

I was approached by Intermec to help them build a deck of proof-of-concept images for a (confidential) refridgerated delivery truck company.

Working offsite, my contacts at Intermec and I worked through potential concepts for an application on tablet devices, that drivers would carry with them, as well as have a way to mount inside the cab of their truck. The end users would not only be the drivers to help them through their route, check orders and supplies, but also the customers who could use the tablet to see specials, food pairings, or play coupon-based games. Shown here are a sampling of the final medium fidelity wireframes to present to the client.

Responsibilities: Wireframes, UI look & feel
Tools: Photoshop, Illustrator

 

 

 

   

 

PurpleGrey
Project Confidential UX & UI Design
pixel pixel
pixel   pixel  
UI01 UI02 UI03 UI04sm
       
     
UI05

These are a series of studies into some unique interactions, transitions, and UI.

 

Responsibilities: Wireframes, UX, UI look & feel
Tools: Photoshop, Illustrator, After Effects

 

   

 

Personal
PurpleGrey
Record Groove Motion Graphics
pixel pixel
pixel   pixel  
RecordGroove01sm RecordGroove02sm RecordGroove03sm RecordGroove04sm
       
    pixel  
RecordGroove05

Sometimes, on a rainy day, in a rainy city, the right tunes can turn everything around...

In progress short, based on original story.

Mix of 3D and 2D motion.

Responsibilities: Design, Direction, Animation, Motion Graphics
Tools: Cinema 4D, After Effects, Photoshop

 

   

 

T- Mobile
Fresh Face Illustration & Icon Design
 
   
     

Fresh Face adds the ability to customize backgrounds and icon sets with theme profiles on the myTouch3g and G1 phones.

Working with Filter Studios and T-Mobile, I focused on two of the themes in this customization pack. I created original icons and application drawer pulls for the Traveler and Movie Buff themes, and a seamless background for the Traveler theme.

Check it out on Androinica!

Responsibilities: Illustration, background, icons, application drawer pull
Tools: Photoshop, Illustrator, Expression Design

 

 

 

 

 

Microsoft:Surface
Mobile Connect UX & UI Design
 
       
     

Mobile Connect gives users the chance to enhance their phone experience, allowing them to share, play, and download content-- ringtones, images, contacts-- onto their own personal physical journal-like organizer. Through this Surface WPF application, partners are able to customize content to give users a meaningful return value.

Beginning to end, I drove the "Rock-Star," youth focused visuals. Making it an enjoyable experience for users to browse content, download new photos and songs, and enter a Photo Contest, by pulling their best shots into a physical guitar case.

See it in action on YouTube!

Responsibilities: Look & Feel, final IxD, visual assets, preview movie, icon
Tools: Photoshop, Expression Design/Blend, After Effects

GuitarPicks

 

 
Microsoft:Surface
Logo & Loading Animation Motion Graphics
   
LogoAnimation01 AppCenter02Sm AppCenter03Sm AppCenter04Sm
       
     

Light. Energy. Motion. And Emotion. Attributes that inhabit the Microsoft Surface logo. With the colorful lockup getting more notoriety, it was time to give some extra flair, fire, shine, and a comet-like presence.

With my background in motion graphics, I was able to create a blazing motion logo treatment. In cooperation with Microsoft Studios, I used Cinema 4D and After Effects to create the animation. The new treatment bursts onto screen (or table), exciting and preparing users for the Surface experience.

Responsibilities: Motion Graphics, final visual assets
Tools: Cinema 4D, After Effects, Photoshop

 

 

 

LoadingAnimation01Sm LoadingAnimation02Sm LoadingAnimation03Sm LoadingAnimation04Sm
       
     
LoadingAnimation05Sm

On the occasion that a Surface Application needs to load additional data, there needed to be a subtle animation that continues the light and movement of the Surface Logo designed by Razorfish.

The solution was an evolving dimensional elliptical light source that revolves in 3D space. Using Cinema 4D and After Effects, I created the soft glowing pulse of light to inform users that their Surface experience was moments away.

Responsibilities: Motion Graphics, final visual assets
Tools: Cinema 4D, After Effects, Photoshop

 

 

Microsoft:Surface
Newsreader UI Design
   
Newsreader01Sm Newsreader02Sm Newsreader03Sm Newsreader04Sm
       
     

This was a joint venture between our internal team, vendor Infusion, and MSNBC. The Newsreader gives users the ability to browse, read, and interact with news, information, using gestures on a fully 3D globe UI.

My role was to create visual studies, elements, background assets, as well as additional design support and final preview movie.

See it in action on YouTube!


Responsibilities: Visual assets, background assets, preview movie
Tools: Expressions Design/Blend, Illustrator, Photoshop, After Effects

 

Microsoft:Surface
Chess & Checkers UI Design
   
AppCenter01Sm ChessCheckers03Sm ChessCheckers03Sm AppCenter04Sm
       
     

Part of the Surface games pack, Chess & Checkers enhances the traditional game and allows users to play, and move pieces using natural gestures. The game can be played with users, AI, or even without rules, allowing users to fling pieces around the screen using real physics.

While the game uses a modern technology, from a design aspect, it needed to relate to the physicality of the traditional game. Employing a natural stone and wood feel, I created the overall visual design, for the Surface Chess & Checkers game.

See it in action on YouTube!


Responsibilities: Look & feel, visual assets, icons, preview movie
Tools: Expressions Design/Blend, Photoshop, After Effects

 

 

Microsoft:Surface
Music/Photos IxD & Visual Design
 
Music01Sm Music02Sm Music03Sm

 

     
Music05Sm.png

The Surface Music experience gives users the chance to select, browse, listen to music, and create playlists. Using natural gestures, users can view albums individually, or by genre and then add and remove tracks to a customizable player.


I was part of the IxD and Visual Design of various pieces including the music album back and supported the overall design process and documentation of the application.


Responsibilities:Look & feel, IxD, visual assets, documentation, preview movie
Tools: Expressions Design/Blend, Photoshop, Illustrator, InDesign, After Effects

 
MusicPlayerFront

 

Photos01Sm Photos02Sm
     
Photos05Sm.png

Using a gestural language, Microsoft Surface Photos gives users the ability to browse, rotate, size through a morphing pod and bar view.


As a designer on the Creative Design team, I helped to support the design process, spec, documentation, and preview movie.


Responsibilities:Look & feel, IxD, visual assets, documentation, preview movie
Tools: Expressions Design/Blend, Photoshop, Illustrator, InDesign, After Effects

 

 

Microsoft:Surface
Addtional Visuals/Icons UI Design
   
Attract01Sm BankPhotos01Sm BarPhotos01Sm
       
     

These are alternative backgrounds I created for the core Surface experience applications.

The first, a more bright, vibrant background for the Attract application. As the name indicates, I wanted to draw people towards the Surface and have them interact with the table.

The other two are backgrounds for different scenarios in which the Photos application might exist. One is a banking background that needed to speak of professionalism, finance, and security. The other background is more playful and would be more suited in social situations such as bars or clubs. The Photos application is a great way for singles to share photos and stories, in a tactile, fun environment.


Responsibilities: Look & feel, visual assets
Tools: Photoshop, After Effects

 

 

VisualStudioIcons ErrorSurfaceIcon DefaultSurfaceIcon CebitFinancialApp
       

 

Postcard_Icons

 

 

Personal
PurpleGrey
Film Noir HTML Website
pixel pixel
pixel   pixel  
FilmNoir02sm FilmNoir03sm FilmNoir05sm FilmNoir06sm
       
    pixel  
FilmNoir01

Always a fan of the classics of cinema, this was created as a study of the film period know as Film Noir, and it's historical roots.

This site was heavy on the creative assets, as I flexed my digital compositing and illustration skills. Locating appropriate period references, and matching the correct angles, textures, and lighting in Photoshop involved a great deal of detail to create the staging of each of the different 'scenes,' and all of the rollover imagery.

Responsibilities: Design, Illustration, Implementation
Tools: Photoshop, Dreamweaver, HTML