Small screen UI Experiment

Project Context:

Internally, General Dynamics C4 Systems-Viz had invented a multi-platform, User Interface programming language.  Engineers could use a single programming language to implement applications for the desktop, web, and Android platforms. With a common UI toolkit, the same components would display similiarly across all platforms. The also language supported responsive design and multi-device design, displaying an appropriate UI based on the screen size, screen resolution, and device.  This new language had not been put into practice yet and there were internal questions about it’s ability to meet the designers’ needs.

Project Description:

This project evaluated the new UI programming language by drafting an experimental set of UI sketches with Balsamiq.  These sketches were analyzed in terms of feasibility.  The UI sketches used the constraints of a small screen (~200 pixels wide) and assumed no right click, contextual menu support. Both of these assumptions were drastically different from the current, desktop-only application version of the software.  The desktop application is used with dual and triple monitors in the field and relies on extensive contextual menus.  The sketches considered content management tasks, like browsing and searching for data/visualizations, organizing data/visualizations, and creating new data/visualizations. The sketches also explored tasks for viewing and editing data on the small screen.

Analyzing the sketches in terms of the new UI programming language revealed gaps. For instance, there was no support for badging an icon or layering images over icons. There was also no support for a display-only view of the data, without all of the editor widgets. Coordinating with engineers, numerous improvements were made, including support for badging & display-only views.

User-centered design methods:  Storyboards, Interaction Design Patterns, Competitor Analysis


Create data from Home screen using a favorite template

A UI sketch for creating new data from the Home screen using a favorite template.

Create data from Home screen, not using a favorite template

A UI sketch for creating new data by searching and filtering templates.

Create data from an editable collection, using the selection as the contents

A UI sketch for creating new data based on the currently selected data.