Boosting participation with enhanced low-fi prototypes Back to Helder profile arrow_upward

Designing the UX with enhanced low-fi prototypes

by Helder Santos · Março 28, 2020

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.

Designing the UX with enhanced low-fi prototypes

by Helder Santos · Março 28, 2020

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.

Exploring the use of cardboard to fast iterate and facilitate user testing
before the development of the Sapo Campus navigation bar
2011, Sapo Labs · DeCA · Aveiro University

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.

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.

Deploy a prototyping gameboard to collaboratively design the navigation of mobile devices  

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.

Deploy a prototyping gameboard to collaboratively design the navigation of mobile devices  

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.

Brainstorming with the boardgame to engage participants in design discussion

Brainstorming with the boardgame to engage participants in design discussion

Modular cardboard components used to rapidly iterate layout possibilities in the context of its related node

Modular cardboard components used to rapidly iterate layout possibilities in the context of handling a smartphone

Final sketches obtained from the iterations with the modular components by all participants

Modular cardboard components used to rapidly iterate layout possibilities in the context of its related node

Modular cardboard components used to rapidly iterate layout possibilities in the context of handling a smartphone

Final sketches obtained from the iterations with the modular components by all participants

A low-fi approach to communicate the experience flow of gestural interaction with a kinect interactive wall 

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.

A low-fi approach to communicate the experience flow of gestural interaction with a kinect interactive wall 

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.

Making of the low-fi mock-up video

Mesh-t interactive wall low-fi mockup video

Making of the low-fi mock-up video

Mesh-t interactive wall low-fi mockup video

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.

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.

Laser engraved cardboard modules of text blocks, images and graphical interfaces

Laser engraved cardboard modules of text blocks, images and graphical interfaces

Professor Ivo Daniel exploring design possibilities with the iPrototype in the iPad frame

Professor Ivo Daniel exploring design possibilities with the iPrototype in the iPad frame

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.

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.

Designing the UX with enhanced low-fi prototypes

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

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

Designing the UX with enhanced low-fi prototypes

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

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

Using the iPrototype in participative design session
at Uatec Health&Design Seminar, 2013

Teaching grid design with the iPrototype
at ESTGA Web Design Classroom, 2014

Using the iPrototype in participative design session
at Uatec Health&Design Seminar, 2013

Teaching grid design with the iPrototype
at ESTGA Web Design Classroom, 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, share and improve.

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

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

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

From physical …

to digital

From physical …

to digital

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.

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.

First, create a layout with cardboard components

Read the QR code of each cardboard component

First, create a layout with cardboard components

Read the QR code of each cardboard component

Upload your content to the containers

Finally, a digital mockup ready to be tested

Upload your content to the containers

Finally, a digital mockup ready to be tested

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.

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.

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.

LOGO OURS
LOGO OURS