Zatar – Avatar Builder

In an effort to provide relevant tools/resources to Zatar’s developer community, it was suggested that a separate application, “Avatar Builder” and a possible “Developer Community” website (also featured in the portfolio) be created outside of Zatar. The design I proposed for Avatar Builder is a stand-alone iOS application allowing users access from the Zatar application.

The Avatar Builder will eventually function as an integrated tool within the Zatar developer portal (website) and also accessible from the Zatar PWS (public website). The wireframes created exhibit a universal app with both iPad and iPhone form factors.

The essential goals for Avatar Builder include:

  • Enable registered Zatar developers to create a new generic avatar definition without writing code
  • Enable developers to add a new device type to their Zatar account (onboard a device)
  • Enable 3rd party developers to create and manage new device types based upon the generic avatar without the help from Zatarians

The main functionality of Avatar Builder include:

  • Copy
  • Edit (later version)
  • Save
  • Delete


Zatar – WineRack

For this year’s IoT World Forum, Zatar was asked to host an office informational night as a “kick-off” to the IoT World Forum which took place in Chicago (2014).

The Zatar Wine Rack was demo’d and the screen seen here illustrates the connected wine rack as an avatar within the Zatar application. The avatar details include temperature, humidity, capacity, and sensors for detecting open/close door status. The technology included is RPI (Raspberry Pi) for connectivity to Zatar, RFID for temperature, humidity and closure sensor tracking along with Haier for cooling.

Zatar – Avatar Builder

The Avatar Builder will eventually function as an integrated tool within the Zatar developer portal (website) and also accessible from the Zatar PWS (public website). The wireframes created exhibit a universal app with both iPad and iPhone form factors.

The wireframes seen here are for the mobile version of the application, the application allows for the users to execute 1 of 2 functions, create an avatar definition from a set of pre-defined properties as well as create an avatar. The top row illustrates the workflow for creating a definition while the bottom illustrates the workflow for creating an avatar.

Zatar – iBeacScan Color

Here are the color options presented for the app in the previous post. In doing a color study, the dark with light colors offer more contrast on screen, with the nature of the app being used on a hand held device and most likely during day light hours, glare from the sun’s rays may decrease the usability for a “muted” color option which is shown top left.

The second option, shown top right, does offer more of a contrast than the previous, however the gray tonal hues wash out the design when large bodies of text are present also making the application unreadable.

The more pronounced color group which appears in the lower portion of the comp is based on the Zatar theme and brand colors seen on the application. The final color option has not been chosen and further color exploration may be done.

Zatar – iBeacScan

Beacon Technology has become the buzz as of late with it’s ability to leverage the power of Wi-Fi and Bluetooth for proximity and detection via smart phones. Opportunities for retailers to target consumers and personalize their interactive experiences now exist while other industries such as healthcare and logistics, are able to proactively engage their audiences, streamline processes as well as monitor and track behavior and activity patterns.

The scanner app created for Zatar as an integrated product, was based on a specific use case, the app was designed to be used in a logistics scenario in which users of the app are able to scan for beacons associated with a supply chain, communicate with Zatar via cloud technology and retrieve information from Zatar regarding properties and data for that logistics chain.

The secondary functions of the app allow for onboarding beacons as avatars to Zatar as well as initiate or terminate data logging for the exchange of info between the cloud and the application.

Zatar – Dev Community

The concept of the Zatar developer community is to offer a platform that enables and encourages development of third party applications on Zatar. Like most developer communities, documentation and application tools are typically featured and available for use. For the Zatar developer community, Avatar Builder, one of three tools to be featured at the time of launch, is an Avatar definition manager to assist developers in creating and managing definitions for devices that have been onboarded to Zatar.

Featured, the style guide known as the “developer UI cheat sheet”, is created to assist the developers with the UI specs, conventions and interactions for the application that is being built.


Zebra – Link-OS

The realized designs coincide with the wireframes in the previous portfolio post.

Design support was given for a wizard workflow which included copying a profile, sending a profile to a device, removing a profile, editing a profile (settings, objects, commands, firmware). The current user interactions that existed were explored and some UI elements were added to the profile list, modification on “search” and “filter” were not included however there was design consideration for “sort”.

UI Analytics Kit

The flat UI analytics kit it pretty self explanatory.  The UI kit a .PSD file with multiple layers for ease of editing, included are various color options and UI elements for seamless integration. Most of the designs for the widgets were inspired from the Zatar Analytics application which is viewable further along in my portfolio. Initially the UI kit was to be used in conjunction with a style guide for the application but somehow morphed into a usable UI kit for any analytics app.

The graphics in the kit include:

  • Line graphs
  • Bar Graphs
  • Stacked Bar Graphs
  • Circle graphs (Percentages)
  • Radar Graph
  • Custom Calendar
  • Menu Selection