Mobile Designs

Weight & Balance - a simple aircraft weight & balance app for mobile smart phones. It supports a wide range of small aircraft configurations from single seat airplanes to four place aircraft. The application also supports up to three baggage areas. Once the application is installed to the device home screen, no internet connection is required. Aircraft settings and load data are saved between uses.

The goal of this application was to deliver a native mobile application experience but without the need for installing the application or entering into a contractual relationship with the various Application Store vendors. At the same time, the mobile web solution needed to appear as an installed application and work with or without internet connectivity.

Web Solutions

Here are a few examples of my work. They represent both my methodology for design and implementation.

Smarter Solutions - a rapid prototyping and storytelling site to show what is possible when visualization and analytics are brought together in a mobile solution.

The challenge was to convey both internally to the customer and externally to their customers the power of "information in context". Traditional slide presentations and Photoshop renderings were not fully demonstrating the vision. The decision makers needed to see, touch, and "play with" the concept.

The solution was a rapid prototyped mobile web application with realistic dynamic data. I leveraged a combination of web applications frameworks, the customer's preferred mapping technology, and AJAX with JSON for the generated data. Additionally, to facilitate telling different industry stories, I created a map marker generator to reduced the design requirements of the map markers by a factor of 25.

This prototype has had four major iterations and has been used hundreds of times by executives and with customers. It proved the viability of a web application solution and has influenced the complete user experience for a family of products.

details for the final solution are available at ibm.com

Fly 53VG - an FAA designated private airport located on the Eastern Shore of Virginia. It provides a fun excursion to the general aviation pilot looking for the experience of taking a "roll on the grass".

The client goals for the website were to be accessible from mobile devices, provide an instructional video, and address the limitations in public information that often occurs with private runways.

This site provides the prospective pilot an overview of the facility, live area weather and an instructional video of what to expect if visiting.

The project included website design, logo creation, branding recommendations, and full video production and animations.

IBM @ AFCEA - pick all the information, papers, demonstrations, and more without packing lots of paper at the end of the conference - just scan the QR code !

The client wanted to provide conference attendees with all of the product literature, slides, background materials, case studies, and contact information. Given the conference location, dynamic nature of the material and the number of staff covering the conference, traditional print media was cost prohibitive. Additionally, past experience showed that most of the print media became post consumer waste.

The solution was an information sharing website storing the PDFs, slides, videos, still images and staff contact information (in the form or vCards). A QR code image with logo was created and visible around the conference.

The client was able to add fresh content before, during, and after the conference. Additionally, visitors could easily follow up with staff, even when they were not covering the conference booth.

Dynamic System Flow Diagrams - documentation and system diagnostics no longer need to reply on static system diagrams or complex rendering solutions. Now, trouble shooting guides can be rich, dynamic, easy to use web based solutions.

The client needed to a troubleshooting guide for a complex integrated "system of systems". Their information development team would create the necessary documentation but wanted to have the associated diagrams to show the actual point of failure.

The solution was to generate the diagrams dynamically and to allow a set of "problem points" to receive custom styling. The final implementation use the HTML5 canvas with JavaScript to generate the diagrams. The diagramming solution supports scaling and si suitable for both desktop and mobile devices. In addition to the specific diagrams needed for customer, the project also delivered a reusable library of standard diagramming objects.

the Salmon Farm - a personal content management solution with a significant repository of multimedia materials and customer branding.

The customer (me) wanted a self hosted site for a wide range of content. The goals were loosely defined so the solution needed to be easily customized and to support evolving over time.

The solution was to leverage a highly scalable, stable content management system with a large developer community for various customizations.

As the site grew and alternative social media solutions became popular, traffic to the site stagnated. The challenge was to avoid repeating content authorship. Through the use of modular code and a standard set of published interfaces, the site automatically performs cross posting to Facebook, Twitter, and Google+. This solution tripled the site traffic and maintains a high SEO ranking for the relevant topics of the blog.

In addition to the site development, the project included brand development, logo creation, and the development of print stock media.

Friends of the RV-1 - a 501(c)(3) public charity, organized and dedicated to the historical preservation of the VanGrunsven RV-1 and for the purpose of supporting, fostering, and engaging in aviation and aerospace education.

The client had the three goals of promoting the North American tour of an important aircraft; recognizing the corporate sponsorship of the organization, and preserve the historical record of the aircraft and its journey.

The design focused on delivering all of the client goals using a responsive design and built on an industry standard content management solution.

The sponsorship, being the most important goal for the client, is top center and adjusts to both tablet and smartphone screens. The project included the logo design with the seamless integration to the sponsorship.

The content management system allowed volunteers to submit news, updates, photos, and personal stories during the tour. During the course of the 4 month tour, I provided administration for the site as well as assisted with some editorial chores. Nearly all of the content was submitted by the volunteers - few of which has technical backgrounds. The easy of use of the underlying CMS in addition to the options available for content authoring and submission was elemental to the "one size does not fit all" reality for the customer.

There is also a short writeup on what went into the project.

Industrial Designs

Aircraft Cockpit Panel - a traditional aircraft cockpit has not changed significantly in the past 40 years. However, with new FAA mandates and the rapid evolution of technology, very different aircraft panels are now possible. This has both good and bad consequences. The new technology provides more valuable information to the pilot and integrates them more seamlessly with air traffic control. At the same time, there is a steep learning curve to these new panels.

The challenge for this project was to work with the limited space available and leverage as much of the existing hardware as possible. At the same time, the design needed to allow easy upgrade to FAA requirements expected in 2015 and 2020. Additionally, the new design needed to reduce pilot workload while simultaneously providing greater information and control.

The solution was first to identify common characteristics of equipment and technology trends. For example, industry manufacturers have standardized on a common width for most avionics. By creating two standard width areas in the panel, legacy equipment may be replaced with future equipment as requirements mandate. The final layout was a direct result of maintaining flexibility while controlling manufacturing cost.

The pilot workload was both a human factors requirement as well as a safety requirement. By identifying integration points between systems and applying the latest thinking to automation, the pilot has a lower workload with fewer opportunities for errors and for simplified operations in both normal and emergency procedures.

modular, upgradable, aircraft panel

Publications

Patent 20040145608A1 USER INTERFACE FOR CONDUCTING CHATS OVER A NETWORK

Smartphones have limited screen size and need alternatives to traditional desktop design elements - such as drop down menus and dialog boxes - for their user interface. Even the use of a status bar for operational information is inappropriate given the screen space wasted by this element. The "Tab UI" has been considered an option for providing navigation.

In this disclosure, the position of the tab is altered to maximize its functionality and navigation specific to small screens. The functionality of the tab is greatly enhanced by implementing status 'dots' on the tabs. These dots provide dynamic status to the contents referenced by the tabs.

The Tab UI with Status and navigation is suitable for a wide array of applications where navigation, information, and status are needed and where a minimum of screen real estate usage is desirable. The design was first implemented as part of an instant messaging client in 2002.

In the first diagram, all tabs are closed; the middle tab is displaying status, indicated by the blue dot. In this example, the blue dot indicated the user is "on-line" and "available" for text chats.

In the second diagram, the top most tab has been expanded to display the tab contents. In this example, the content is a user's buddy list for an instant messaging client.

The third diagram shows the third tab with two white dots, one red dot, and a blue indentation. The indentation links the tab status to the main window, indicating the active content. The other dots indicate status for other windows. In this example, the red dot indicated new content is available in a window that user has not yet visited while the white dots indicate other windows. Touching or clicking the tab would open the it (as in diagram two) and provide more information, status, etc. about each window (as represented by the dots). In this example, the additional information displayed when the tab is opened includes the name(s) of the people involved with the corresponding chat. Navigation to the other "windows" is achieved simply by tapping or clicking on the dot associated with that window. Optionally, the window may be reached by opening the tab and clicking on the names of the participants.

the "Tab UI with Status" is shown in various states in the three images

Paper on Responsive Design (May 2012)

Tip: Create a desktop wallpaper that depicts the different screen resolutions you and your colleagues use regularly (or save the image below and use it). Keep this as your screen wallpaper with a ration of 1:1. The next time you are looking at an icon, graphic, or design element, notice how much or how little of your wallpaper is covered by the element.

Samples

A picture is worth a thousand words and an example is worth dozens of pictures. Click on any of the example images to view the live sample. Don't forget to look at the freebie too.

Stereoscopic scrolling text - inspired by the opening sequence from Star Wars, this is a creative use of CSS3 to give the preception of text scrolling back into infinity. read more ...

Responsive Design - using CSS media queries to adjust a multi-column layout based on the browser viewport. This example takes advantage of wide screen displays. read more ...

Canvas Layers - a recreation of traditional cartoon layer animation using the HTML5 canvas and JavaScript. (also try it on a tablet in landscape orientation). read more ...

Media Query - media queries can also be used to change other display characteristics beyond column layout. This example changes color, layout, and informational messages.

Diagram Generator - a JavaScript block diagram generator which creates media queries can also be used to change other display characteristics beyond column layout. This example changes color, layout, and informational messages.