I designed the visual identity for ZebraZapps.

Each object in ZebraZapps is smart. They can be connected to each other with “ribbons” and “wires”. OUT ribbons (outputs) in one object can be wired to IN ribbons (inputs) in another object to trigger actions, and PROPERTIES between objects can be linked.

Answer tables, state tables, and calculations can be wired with objects to evaluate user responses and provide feedback.

Objects can be wired together to simulate real-world tasks and teach performance skills. In this example, you can prototype a gauge with sketches to construct the simulation.

Increasingly complex interactions can be created by grouping components into “gadgets”. They are a visual form of object-based programming.

ZebraZapps allows multiple pages, or events. Multiple events flow together to create a complete project. Objects can be wired to events, or to objects within different events to control the flow of the application.

To help users jumpstart new projects, I designed a series of templates with distinct styles and interactive components.

In my role as a UX and UI Designer, I developed sketches, wireframes, and documentation to test assumptions, guide concepts, and support development.

I used multiple tools to design interactions and prototypes. This example shows a concept created with Balsamiq Mockups.

As needed, I developed high-fidelity, annotated documentation to describe object behaviors.

I developed the development documentation and style guide for ZebraZapps’ primary workspace and navigation, including states and edge cases.

For the IN, OUT, and PROPERTY ribbons attached to each object, I maintained the taxonomy, vocabulary and messaging information.