David Glock | Wires

There is currently a wide range of tools available that make it very easy for users to create interactive prototypes starting with screen designs. Development of projects that incorporate hardware - such as IoT projects - require specialized tools that are largely incompatible with the existing design and prototyping workflows.

If one wants to prototype IoT projects like Smart Home Apps, a lack of applications that connect both screen design and hardware becomes apparent. That's why we decided to tackle this issue and develop an easy to use tool that connects UI design with hardware prototyping.

Research

To kick off our project we analyzed existing prototyping software as well as hardware. We categorized their features with the Kano model. We used our own experience and reports from other students. After collecting enough information we compiled it and generated different solving approaches, which we tested in use cases to find the remaining difficulties and problems. Afterward, we modified our results and tested them again. With this process, we generated our product. Wires.

What is Wires ?

Wires is a Node-based Prototyping Tool which connects screen design with hardware prototyping. It enables everybody to easily build IoT prototypes. To create prototypes, even if no real sensors are connected to the prototype, Wires is able to generate placeholder data where sensor input would normally occur. We decided to use a node-based system because many of our potential users are not familiar with code-based prototyping tools. The screen designs for the Prototypes can be imported directly from Sketch or Photoshop.

Patches Groups Hardware Debugging Share

Our Nodes are called Patches. Patches can be created by clicking the ‘+’ button or specifically searching for a patch via the search bar. The search gives a preview of the patches' in- and outputs and a brief description. Layer patches can also be created by clicking the 'Add' button next to a layer in the sidebar. Patches can have many different elements from simple text fields to checkboxes.

To simplify the prototype patches can be combined into a group. Groups can be shared as prefabs with community members to include in their prototypes or stored in your own library. The in- and output pins of the group can be set by the user. This ensures that the group patch has only the pins that the user really needs and prevents confusion.

Wires can communicate with an Arduino board to get real-world data for the prototype. to connect a board the user just plugs it in and presses the Arduino button at the top. A board preview makes it easy to recognize the correct pins the sensors need to be connected to. Warnings indicate unset pins.

To help the user with the debugging of their prototypes we visualized the data flow of the prototype. Running in debug mode, small pearls move along the connections to give a visual representation of the data flowing through it. The flow can be paused and patches can be marked as breakpoints to stop the prototype. With this method, the user can easily see if the data flows like expected.

The finished prototype can be exported as a standalone app or as a screencast. Users can decide if they want to include the necessary packages to run with hardware or set new pins for another Arduino so the client or team members can test the prototype on their own without any deeper knowledge of code.

All the Patches are color-coded. Grey patches contain logic and other basic functionality, purple patches control properties and animations. Screen elements are blue. Patches that communicate with connected hardware are turquoise, referencing the Arduino board color. Properties can be added to them via a plus button. Values can be set manually or are variable via their text field or with a connected input source respectively. If the option placeholder pin on an Arduino Patch is used the patch itself will generate random values between set bounds.

Full Dokumentation

* Dokumentation is written in german