From paper prototype to mock-up

Paper prototyping is a low-cost and helpful method to design a user interface for an application. In this blog we report on a case study from smart energy project that describes the process of going from a concept, via a paper prototype and mock-up to form the basis of a requirement document.

In the EU-FP7 CoSSMic project (Collaborating Smart Solar powered Micro-grids) we do this in a user-centered manner. We have held a series of workshops which aimed at developing a paper prototype of a system for smart management and control of solar energy. The first workshop was previously reported in our blog

This blog post is based on deliverable D2.2 of the EU-FP7 CoSSMic project, and also uses some notions reported in [1]

In CoSSMic, user-centered design is characterized as a multi-iteration problem solving process which not only requires designers to analyze and foresee how users are likely to utilize a product, but also to test the validity of their assumption habits with regard to user´s behavior in real world tests.

The process consisted of 3 main iterations each with their associated workshop. The main goals are:

1)      Create a paper prototype by playing innovation games(reported in the blog post mentioned above). One of the results is shown in the figure below.

CoSSMic paper prototype

2)      Receive feedback on the paper prototype from a group of users.

  • Explain the purpose of the project and the prototypes
  • Presenting the paper prototypes
  • Receive feedback on what to change/improve
  • Consolidate the feedback into a mock-up (see below)

CoSSMic mockup

3)      Receive feedback on the mock-up

  • Present the mock-up, an improved version of the paper prototype
  • Conduct an interview with each participant
  • Fine-tune the user input and use the result as the basis for the design concepts.

Workshop 1


Based on the results from the first workshop, the CoSSMic project team created a first iteration of paper prototypes. Such a paper prototype is a very rough depiction of a GUI aimed at showing the functionality of the future system. The main point of the roughness is to get feedback on the content rather than the look and feel.

Workshop 2


During the second iteration, end-users in two sperate locations (Konstanz, Germany and Caserta, Italy)were presented the project vision and images of the artefacts produced during the first workshop, as well as the idea behind paper prototyping. The end-users were selected based on criteria such as demographics, private households/companies and interest in smart use of solar power (which implies that they already own a PV system or are willing to install one in the near future).With this background information, they understood our aim and were then presented the paper prototypes and were told how the prototype was envisioned to work.

Users responded to the presentation with questions and comments such and they provide us feedback on missing features and unnecessary features. They also suggested enhancements to come features.

Results from both workshops were collected and used as a basis to develop mock-ups for the third iteration of our work. We created a digital version using the Balsamiq online tool (

Workshop 3


The workshops in the third iteration were again held in Konstanz and Caserta . The involved user groups had many of the same participants as in the second iteration.

The processed output of workshop of the second iteration was used as input for getting feedback similar as was done in the second iteration using the paper prototypes. Again, the users give their input and suggest improvements. The suggestions were presented as digital post-it notes and projected on the wall in order to ensure that the feedback was understood correctly. After these local workshops, the feedback was used by the CoSSMic team as input for creating the design concepts and requirements for the CoSSMic technology to be used in a trial towards the end of the project.

Acknowledgement: Balsamiq kindly provided a one year free license to use for our project.


[1] Wienhofen, Lindkvist, Noebels, User-centered design for smart solar-powered microgrid communities. Proceedings of I4CS Reims, France, June 2014. IEEE








Leave a Reply

Your email address will not be published. Required fields are marked *