A self-explanatory visual programming tool for the Internet of Things, pairing modules such as sliders, buttons, lights, and servos, while ensuring accessibility for users aged 8 and above.
SAM Labs aimed to bring their innovative visual programming environment—previously available only on desktop—into the hands of a wider audience through a mobile app.
Overview
My challenge was to adapt the desktop app experience to a mobile platform with limited screen real estate and touch-only actions, within the constraints of time and budget.
The solution needed to translate the SAM Labs desktop app’s functionality into a mobile environment, offering a smooth experience with subtle visual cues for users unfamiliar with IoT programming.
Research
We conducted qualitative, over-the-shoulder research sessions with students roughly aged 8 to 17 at the International School of Brussels, mapping their drives and interests and how would they become interested in the product.
These provided invaluable insights into how young users interact with digital tools, their expectations for ease of use, and the challenges they faced when engaging with IoT modules.
Photo: isb.be, illustrative.
Ideation and Prototyping
This formed the app flowchart pictured above, which in turn informed a series of low-fidelity prototypes, enabling rapid iteration and feedback from both the internal team and young audiences. These prototypes focused on simplifying the core interactions:
- Pairing IoT modules, renaming, sorting and grouping
- Dragging (adding/removing) from drawer to canvas.
- Creating or severing connection between modules,
- Establish behaviours, triggers, ranges, etc.
Minimalistic test for bottom drawer activation, internal pagination for navigating an inventory of modules with minimal obtrusion to the full-screen canvas or virtual "circuit board".
With handheld devices' constraints, I prioritised these mechanics as the foundation; focusing on tap-based interactions and subtle visual cues. Once these core mechanics were more defined, I progressed to high-fidelity prototypes to further test more comprehensive mechanics.
Interaction Design Refinement
Next, I focused on designing and prototyping the main navigation elements between main pages.
Inequivocal transitions between the profile, homepage (projects' list), and an opening a project canvas.
Drawer interactions: Adding modules by dragging, and remove one by selecting it first. Purposeful transitions and animations communicate the sequence and impact of each action.
Navigation mode allows panning, zooming, etc. Connection mode allows tapping, drawing, adding or severing a connection. (Tappable areas are indicatively shaded only for this prototype)
While it ideal use case would be on tablet, we ensured minimal usability benchmark for small screens, running prototypes like this one, pushing the limit to make complex visual programming in a handheld device feasible.
Scalability and Design Decisions
Following a small-to-large screen approach ensured scalability to tablets. This sought to met immediate user needs while keeping the design future-proof.