iPrototype

How it started: a gameboard to design collaboratively

In 2012, I was more than enthusiastic with the opportunity to sketch a full mobile experience from scratch, the Mesh-t — Mobile Museum Guide ⇲  This android application for the Santa Joana Museum, in Aveiro, was sponsored by QREN and developed by the Cetac Media, in DeCA — Aveiro University, in collaboration with Ubiwhere, a tech company. The development team already had an interface concept and an experience flow. The interface was well designed but I felt that some features needed improvement as well as brand identity.

I knew from previous experience working with developers that main changes in the design required general consensus. So, I started to conceptualise a design tool aimed to encourage participation at brainstorm meetings. I came up with a laser engraved game board depicting a navigation tree with holes to be filled with drawable empty cards as well as modular components of graphical interfaces.

The participants were actively engaged in the design process resulting in valuable contributes toward a validated design solution, both in navigation flow and layout.

I knew from previous experience working with developers that main changes in the design required general consensus. So, I started to conceptualise a design tool aimed to encourage participation at brainstorm meetings. I came up with a laser engraved game board depicting a navigation tree with holes to be filled with drawable empty cards as well as modular components of graphical interfaces.

The participants were actively engaged in the design process resulting in valuable contributes toward a validated design solution, both in navigation flow and layout.

A boardgame with a tree navigation for the mesh-t tourism app design

Brainstorming with the boardgame to engage participants in design discussion

The iPrototype — A post-digital interface design tool

In late 2012, I joined the Phd Design Program. My main focus was the value of physically handle tools and material in the design process of physical, digital or hybrid post-digital products. Taking advantage of all the work and experiments with low-fi prototypes and the relevance of modular grid design, I conceptualised a modular design tool, following the same principles and techniques I’ve explored before, and named it iPrototype ⇲.

Combining the physical and structural properties of construction kits with low-fidelity prototyping techniques, the aim of this design tool would be to facilitate the productivity, participation and inclusion in the interface design process for education and project purpose. To empower expressivity and participation of stakeholders in a ludic, inclusive and social way, with no regard to drawing skills or previous knowledge of interface design principles and processes.

Having a modular grid of 8 by 6 for 48 modules, giving 3 functional columns and 4 rows, the designer and participants can iterate a wide range of combinations for 1×1, 1×2, 1×3 … 2×2, 2×3, and beyond.

The final combination can be traced into a wireframe layout that can be used later in the development to render more detailed paper prototypes.

Teaching UX / UI with the iPrototype for fast iteration of possible design solutions

The empirical observation achieved in work sessions suggests benefits for improved exploration, communication and testing of ideas on iterated models;  promotion of interpersonal communication, participation and inclusion;  and enhanced efficiency in teaching and learning theoretical and practical principles of interaction design on the development of graphical user interfaces.

Design exercises with the iPrototype at DeCA Interaction Design Classroom, 2013

Design exercises with the iPrototype at Flag-Coimbra Webdesign Course, 2014

Moving forward!
From physical to digital prototyping
— iPrototype 2.0

What if you could use the iPrototype to generate functional digital mockups? To have a wide record of online interactive mockups, physically assembled by people you’ve been working with, whether a technical, a potencial user, a client or a friend. Mockups you can customize, that could be shared and continuously improved until moving into production.

iPrototype: a tangible design tool to support participative interface design practice

by Helder Santos and Professor Nuno Dias, 2013.
Published in 2º Congresso: design, ergonomia e interação humano-computador.
Natal – Rio Grande do Norte, Brasil.