Back in 2011, I was challenged to test the usability of a navigation bar for the digital platform Sapo Campus before the coding fase. The platform was aimed to provide a social network to the entire campus — students, lecturers and researchers. When I tried to engage the first 6 participants in actual design practice, I soon realised that none of them was comfortable with sketching and the simple use of paper prototypes was not enough to properly test the usability, lacking the interactivity and feedback of digital mockups.

Therefore, I tried a different approach, using cardboard to replicate the overall aspect of the navigation bar, together with movable cards to display the menus. In the second session, with a lot more participants, I realised that besides getting better feedback and concrete answers for the improvement of the navigation bar, the participants were willing to express themselves, engaging with original insights while “playing” with the mock-up. From then, I started to explore the possibilities of using enhanced low-fi prototypes to boost participation in the design process.

I am a big fan of Bill Buxton and an advocate of sketching the UX. 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.

Besides designing the mobile application interface I was given the opportunity to finally collaborate on a project involving gestural interfaces. The Mesh-t interactive wall was the perfect set to go from theory to practice, following my studies on gestural interaction into a real project to be fully implemented with kinect.

The navigation schema was straightforward, using two axes to explore a photo library, X for the timeline, Y for the localisation. So, the real challenge was to validate the gestural interaction model before spending countless hours developing and calibrating the equipment. To achieve that, we came up with the idea of using a video to capture the gestures while simultaneously moving a grid into a frame. It took us no more than one hour to produce, with satisfactory results.

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.

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.

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, share and improve.

Could this be a valid design tool to improve the design process and UX?

Research proposal

Following the work done we propose to evolve iPrototype into a version 2.0 that will be based on video recognition and augmented reality technology, empowering the system with the ability to generate html code and bringing continuity in the design process, from low to high fidelity functional prototyping.

Using video recognition technology, each design unit of the construction kit may be represented into wireframe, which may be used to communicate and discuss the different design configurations obtained. Additionally, the system may also be used to facilitate the transposition of the wireframe to code HTML/CSS, providing structural elements equivalent to the layout achieved with the physical construction kit.

By allowing the transposition of the low-fidelity physical layout to a digital functional high-fidelity prototype with style and content integration, we expect the iPrototype 2.0  to be able to give continuity to the developed work with the physical components, from an analogical frame to a digital one. We also pretend the new version to be more effective, with an agency capable of mediate distinctive cultural backgrounds, the ability to surpass semantic barriers and the capacity to empower social involvement in the project. The resulting prototype will be tested within the scope of design education and participative design.