Tim Stutts Design Process Portfolio


This portfolio contains examples of Interaction Design and Creative Development work for mainstream mobile, tablet, and web applications, along with some special installations. These deliverables offer a behind-the-scenes look at select projects completed from my project portfolio.

Approach-wise I am focused on applying the principles of Interaction/ Experience Design to emerging platforms and technologies, while updating the metaphors of tried-and-true user interface/ presentation elements (i.e. an arrangement of buttons, labels, fields, etc./ a composition of images and sounds), which will remain a part of applications/ productions for years to come.

An interactive challenge, whether existing in the business or art world, is best met with an understanding of a complex system, whose meaning is distilled through layers of usability, communication of content, aesthetic presentation, and technical foresight into what is possible for enhancing the other three. The technical success of a design can often benefit from a designer's activity in front-programming or further still in the realm of 'creative coding,' a design process involving the use of programming as a mechanism for brainstorming, prototyping, and in some cases creating code that lives within the final product. This process can sometimes lead a designer to discover solutions that an engineer may not, while also keeping them abreast of the latest technologies, and better able to manage a vocabulary for communicating ideas to development. It is certainly not an approach that a designer should take on every project, but rather a tool for when such exploration can benefit a project.

A Possible Process: Application Design Planning, 'Creative Coding' / Development, Deployment

For further inquiries, contact tim@pushpopdesign.com

Another Process: Art Directed Programmed Visuals

One way I can approach application design is writing programs which employ algorithms to generate graphics assets that would be too time-consuming to create with traditional design tools. These elements have been inserted as motion graphics elements in commercials, still elements in print, websites, installations, and more. Sometimes the clients are given the actual programs. Other times they are just given the media generated by these programs. For these projects I depend on creative coding frameworks like OpenFrameworks (C++), Processing (Java), and Three.js (JavaScript) that use OpenGL or WebGL. Often rather than working with a lead engineer, my efforts have been managed by an art director.

UI Design, Programming and Audio for Kinect-controlled Audio Sequencer Application

What is it?
A way of arranging music samples onto a timeline, controlling volume of individual tracks over time, beats per minute, and play/pause functions entirely through the use of hand gestures detected by an IR-sensor connected to the computer running the application.

My Involvement:
• Visual interaction design for the entire application, from static graphical elements, to controls, and cues associated with gestural hinting and boundary detection.
• Selecting hand gestures (e.g. open hand, fist, trigger finger) and required motion (X, Y, and Z axis) to perform each action.
• Conceptualize a two additional demo concepts beyond this (totaling three).
• Programming the application in C++ with OpenGL, the Cinder library and proprietary libraries for computer vision.
• Choosing a select number of audio samples for the application (final version had eight).
• Presenting several live demonstrations of the application in action.

Wireframes describing gestures for a couple of the demos, in addition to other wires for navigation, bounding, and activation.

Summary of Challenges and Outcomes:
Coming soon.

UI/UX Design for a Visual Programming Language

What is it?
A visual programming language for building dynamic, interactive, in-browser data visualizations, and then publishing them to the web.

My Involvement:
• Documentation, Tutorials, User Experience Design, plus some interaction design pre-initial release of the application.
• UX Strategy for second release of application refining use-cases, customer communications, and overseeing the creation of compelling visualization examples.

A slide sighting visualization solutions and wireframes for list modules, improved table readouts, library redesign, data structure management, and data visualization for offer comparison.

Summary of Challenges and Outcomes:
Working on a Visual Programming Language has been an interest of mine for a long-time, especially to end of it being a tool to help non-programmers program. Specifically the idea of a VPL being used to generated data visualizations was interesting and challenging. From linking to data sets, to performing math operations, to setting up data visualization modules, to establishing interactive controls to filter, to finally styling and publishing results, the challenge of thinking about how to improve the usability of this application proved to be very rewarding. I also enjoyed refining the use-cases for such a tool that would allow users to harness the power of 'big data' to drive decision-making in business.

UI Design for Museum of Science iPad Experience

What is it?
An interactive iPad experience, showcasing an array of museum exhibits.

My Involvement:
• Interaction Design and Front-End Development in HTML5/Javascript/CSS3 via Sencha Animator
• Creative Direction for graphic design and copy

Two early wireframes I created, followed a by a visually treated wireframe for the main navigation screen.

Summary of Challenges and Outcomes:
Working with a beta version of the software used to create this experience (Think Flash application, though for HTML5 export, rather than SWF), meant giving UI feedback to the engineers developing the program, whilst designing an developing in the tool myself. In this particular project, there was also the challenge of suggesting a 3D space, while keeping the interaction layer 2D. In the end, I was very satisfied with the way things turned out, particularily the use of circles over the more illustrative orbs, which functioned as buttons and keyed the users to into which points of the application could be touched. It was also fun to work with CSS animation to bring life to the interface.

Concept Design for Walk-through Installation

What is it?
An installation allowing users to interact with data surrounding the sport of tennis and share it across their social networks

My Involvement:
• Created user experience design concepts for installation

three of the installation concepts

Summary of Challenges and Outcomes:
Conceiving of ways to visualize data related to the sport of tennis in ways that inspired a user to share their discoveries/scores via social networking platforms, was a fun challenge.