A tabletop system to paper-prototype for mobile applications

Minor Thesis
Innovation and Entrepreneurship

A tabletop system to paper-prototype
for mobile applications

Francesco Bonadiman
367681

EIT Digital Master School
Université Paris-Sud
Technische Universität Berlin
2015

Table of contents

1. Introduction
1.1. The Business Idea
1.2. Research Background
1.3. Methods to Use

2. Literature Analysis
2.1. State of the Art
2.2. Market Need: I&E Problem

3. Analytical Essay
3.1. Competitor Analysis
3.2. Market Differentiation
3.3. Value Proposition
3.4. Business Proposal
3.5. My Contribution

4. Summary

5. References

2

1. Introduction

1.1. The Business Idea

Both in research and industry environments, Paper-based Prototyping (simply known as
Paper-Prototyping) is an essential step in the development process; indeed, although related
technology has highly evolved in the last 50 years, it is still incredibly useful to easily generate
an effective UI prototype at early stages of design and at almost no cost. Paper-Prototyping
consists in creating paper versions of User Interfaces and letting users test these versions
instead of a real software UI, as described by Carolyn Snyder in her book [1].

This technique saves a huge amount of time for (possibly wrong) development which,
especially for companies and enterprises, means money: therefore, the less they invest in a
prototype, the less concern they will have about throwing it away and starting from scratch.
Further details and advantages, together with thoughts and opinions about this method, will
be discussed in the Literature Analysis.

As said above, technology has extremely changed in recent times; for example, desktop and
laptop computers are being replaced by smartphones, tablets and smartwatches in everyday
life. However, this change is not being reflected on the way UI prototypes are generated.
Viewing this problem from an I&E perspective gives us a clearer idea of what this can mean:
there are no adequate tools to effectively paper-prototype for mobile devices.

This is due to several reasons (which will be illustrated in the following sections): either these
tools are too complicated to be used, or they are not fast and light enough, or maybe they have
no focus on mobile usability testing, or even they do not allow to reuse hand drawings. This
inadequacy can be clearly noticed by only looking at the market, where prototyping tools are
mostly for desktop/laptop UIs and, at the same time, extremely few products are designed to
integrate Paper-Prototyping sketches, forcing designers to manually take pictures of their
designs and therefore breaking the creative process.

In order to solve this problem, I am currently working at Telekom Innovation Laboratories on
my Master Thesis Project, which is about ways to improve the user interaction with a tabletop
computing system designed to paper-prototype for mobile devices. Thus, in this thesis, I am
going to perform both a market and a competitor analysis for the environment which my Major
Thesis is based on. Afterwards, I will illustrate the business idea and explain the value
proposition that differentiates my solution from the other products listed in the Competitor
Analysis, proving how my proposal should take advantage of the market differentiation.
Finally, I will describe the initial steps of the business idea itself, explaining the reasons of the
chosen target and introducing an initial pricing strategy for the product. I will conclude this
Minor Thesis work by presenting my contributions to the Master Thesis Project.

3

1.2. Research Background

I am an Italian student about to complete my double degree at the EIT Digital Master School in
Berlin after spending my first year in Paris: this I&E Minor Thesis represents a part of my final
thesis for the Major in Human-Computer Interaction and Design. These two years, indeed, have
made me become extremely passionate about concepts such as Design Thinking, Usability and
User Experience (UX); at the same time, thanks to the Innovation and Entrepreneurship part
offered by this Master, I am able to put my ideas into a business context. Therefore, I decided
to couple this thesis to the work content and the topic of my Major Thesis.

Being mostly interested in pure HCI and, especially, in (Paper-) Prototyping, I decided to focus
on this area for my Master Thesis: thus, I started working at the Quality and Usability Lab of 1
the Telekom Innovation Laboratories in Berlin, which is a research and development institute 2
established by Deutsche Telekom in order to “develop innovative products and solutions while
working in close cooperation with science and industry” . 3
More precisely, I am working with Benjamin Bähr on his Doctoral Project, named Blended
Prototyping . Here I implement and evaluate ways to expand and enhance interaction 4
techniques in a tabletop computing system that was developed previously in the research
project. In this Minor Thesis, I analyse the market for prototyping tools with the purpose of
finding the perfect positioning and target for possible later products.

1.3. Methods to Use

To realize this I&E Thesis I intend to integrate in this document various sources and methods:
● Literature review on HCI and prototyping topics: to get a broader and more complete
view of the problem I am going to analyse, it is essential to have a deep understanding
of the State of the Art regarding prototyping and why this technique is fundamental in
the design and development environments;
● Articles about prototyping: in order to get enough significant data about the topic and
the several prototyping tools present on the market, I am going to include relevant
parts from some articles on online newspapers, blogs and HCI communities;
● Comparison of similar products: the competitor analysis is going to be realized by
taking into consideration the different players on the market, while the proposition
value will describe what differentiates my proposal from theirs;
● My Major Thesis: since I decided to tightly couple my Minor Thesis to my Major one, I
am going to refer to the latter for all the technical and HCI-related part. This I&E Thesis,
in a way, is a direct consequence, because it intends to use the former study to create a
business and examine the market where this is meant to be launched.
1
Quality and Usability Lab website: http://www.qu.tuberlin.de
2
TLabs website: http://www.laboratories.telekom.com/public/Deutsch/Pages/default.aspx
3
TLabs on Wikipedia: http://en.wikipedia.org/wiki/Telekom_Innovation_Laboratories
4
Blended Prototyping: http://www.blendedprototyping.de
4

2. Literature Analysis

2.1. State of the Art

To completely get what the added value of our system is, I first need to introduce some
concepts we only briefly mentioned in the previous Introduction and which are highlighted in
the title of this Thesis: “paper-prototype for mobile applications”. This leads us to divide this
State of the Art section into three subsequent and connected parts, which gradually become
more and more detailed and specific for the setting we are going to analyse. Therefore, in
order to fully understand the product environment, our literature research is going to have
three main topics: first of all, what Prototyping means; secondly, why Paper-Prototyping is
that essential; lastly, why we mainly focused on Mobile devices.

Prototyping

The word prototype is composed by two Greek terms, proto (first) and typos (impression): by
simply looking at its name we can understand its meaning. A prototype, indeed, is an initial
design which offers a “first impression” of a not-yet-developed product [2]; it is “a concrete
representation of part or all of an interactive system”, “a tangible artifact” [3]. The process of
building prototypes is obviously named Prototyping. This way, other designers and users can
get a feeling of how the envisioned idea should look like once realized; not only that, but they
can even try it out, test it, express concerns and give feedback. Moreover, a prototype helps to
“find a new perspective and experience on one’s own ideas”, giving it a precise and “ordered
structure” [4]: that is to say, it is definitely useful to clarify someone’s mind.

As introduced above, a prototype has two main objectives: testing different design solutions
and collecting opinions and suggestions about them. This method, anyway, is totally different
from normal testing, since it is performed in an early stage of development, i.e. before starting
the coding phase: it is therefore immediate to understand how this technique saves time and
cost (and we will go back to this point later when discussing about Paper-Prototyping).
Another advantage of a prototype is its iterative nature, as it can be changed and optimized
several times, according to feedbacks, usability testing and discussions, until a satisfactory
user interface design is achieved.

Prototyping techniques can be divided according to their fidelity, which means “the degree to
which the prototype accurately represents the appearance and interaction of the product” : this 5
can be high (computer-based functional simulation with refined graphic design), medium
(pretty detailed but with approximated objects) and low (mostly rough and schematic sketches
with little or no functionality) [5]. We are going to concentrate on this latter type.

5
Research Methodologies in HCI: http://grouplab.cpsc.ucalgary.ca/saul/681/1998/prototyping/survey.html
5

Low-fidelity (Lo-Fi) prototypes are generally used to express design solutions, to generate
alternatives and to quickly represent ideas, whereas the functionalities and the user interaction
are usually of less importance. Indeed, the main purpose is to demonstrate the idea to the
users, exchanging thoughts and collecting feedbacks, by showing them the desired “look and
feel” of the interface. A Lo-Fi prototype can be obtained by only sketching on paper with a
pencil, which leads us to our second category: Paper-Prototyping.

Paper-Prototyping

Paper-Prototyping is a “widely used method for designing, testing and refining user interfaces”
according to Carolyn Snyder. As she describes in her book, this technique was probably born in
the early 1990s, when it was “used by a few pockets of usability pioneers”, but it rapidly gained
popularity and became a standard in the development process of big companies in the
following years. What is surprising is that, almost 25 years and some technological revolutions
later, this technique is still essential, widely used and has (nearly) not changed since.

The tools, indeed, are always the same: paper, pencils, glue, scissors, highlighters and so on.
Thus, the users are given a task, which they will try to accomplish by interacting not with a real
software interface, but with a paper version of it (as the name suggests): a team member
(“computer”) will simulate the dynamic behavior of the interface, by changing and moving
papers and sketches according to the user’s input. Since the handcrafted work does not need
to look perfect and using the tools is such a basic and intuitive action, the groups can be
created by gathering people from different backgrounds and disciplines, hence stimulating the
collaboration and enhancing the generation of ideas.

Paper-Prototyping is usually described with two adjectives: fast and cheap.

● Fast because it allows designers to quickly express concepts, generating a myriad of
diverse solutions and trying them out with users straightaway [6]. This due to the fact
that Paper-Prototyping is based on an iterative process, where design solutions are
continuously generated, tested with the users and then either discarded or improved.
Moreover, by reducing the specifications and the details of the interface it is possible to
save an enormous amount of time, which is vital especially in the early stages of design.

● Cheap, for many reasons. As already said, saving time is usually equal to saving money.
Then, Paper-Prototyping avoids wrong development choices by identifying mistakes in
an interface before it is coded. In her book, Snyder even states that “the benefits from
early usability data are at least ten times bigger than the benefits from late usability
data”; however, still several people do not believe to “get enough information from
something that simple and that cheap”. Moreover, such an iterative and participatory
task smoothes the transition between the ideation and the consequent development.

6

Anyway, what is even more interesting and surprising about Paper-Prototyping, is the freedom
of thought and critique felt by the users. As described by Bähr [7], “a polished interface
increases the users’ hesitation to critically communicate their experiences”, since they might be
“shy to describe their problems and issues with the software. These people will be more likely
to discuss their opinions, when they are presented with a simple diagram, or even childish
looking paper-based sketch interface representation”. In other words, an interface with a
sketchy look might provide more useful and spontaneous feedback than a highly detailed one,
where a developer has put work and effort that would get wasted . 6

Moreover, a vast number of published research papers shows that not only “paper-prototypes
are as effective as high-fidelity prototypes at detecting many types of usability issues” , but 7
also that the usability problems discovered were the same [8][9][10][11].

Mobile

As discussed above, Paper-Prototyping offers a number of important advantages to the
development team. However, as introduced at the very beginning, after about 25 years almost
nothing has changed, despite some technological revolutions: this, if on one hand makes the
learning process easier, on the other might not offer an adequate solution for some new and
emerging technologies. Mobile devices are one of these examples: indeed, while
Paper-Prototyping works definitely well inside a laboratory, applying this method to mobile
testing is proven to be problematic for a number of reasons.

First of all, the term “mobile” by definition indicates something taking the design process out
of the lab, by testing and evaluating the applications in real-life scenarios and settings. This
variety of usage contexts and environmental conditions is therefore an additional challenge for
the UI, which has to remain usable all the time while adapting to unstable user attention [12].
Moreover, for the same reasons, the monitoring itself of the interaction with the mobile device
is definitely more difficult than for an in situ testing.

Finally, a hardware-related issue. There is a tremendous number and a huge variety of mobile
devices, which have different potentialities but, at the same time, hardware limitations and
constraints that are difficult (if not impossible) to fully simulate through a paper-prototype.
Furthermore, a normal paper-prototype is likely to “deteriorate during outside evaluation” [13].

For this reason, de Sá and Carriço tried to apply the concept of Paper-Prototyping to the
context of mobile testing: they then built identical reproductions of mobile devices, but made
of wood or plastics, replacing the screen with a drawer where paper representations were
inserted. However, even if these tools were at least testable out of the lab, several inherent
problems occurred and this technique never reached the market.
6
SpyreStudios article: http://spyrestudios.com/whysketchingandwireframingideasstrengthensdesigns/
7
Usability.gov Blog: http://www.usability.gov/getinvolved/blog/index.html
7

2.2. Market Need: I&E Problem

Even if an ultimate numerical evidence cannot be given, it is undeniable that a huge demand
for prototyping tools and, obviously, for Paper-Prototyping ones too, exists. But unfortunately,
there are no official percentages about which companies, startups, research institutes or even
freelancers use these techniques daily for any user-centered design process. Lacking a market
share analysis, however, there are other factors which are relevant to express how crucial this
market need is.

Firstly, there are thousands of blogs, articles and websites discussing about prototyping tools,
testing and ranking them according to different parameters and trying to choose the best one:
I am going to use these references for the following competitor analysis. What matters at the
moment is to understand that, even if there is such a considerable number of prototyping tools
on the market, there is not a monopoly and new ones are continuously emerging. This not only
indicates that the market is extremely dynamic and open, but also that the market need is still
there: this is of course a problem, but at the same time is an opportunity for us and our system.

Secondly, it can be easily assessed by simply looking at the website of any company offering
prototyping tools or services: on their customer page they have a number of clients, many of
whom are big and well-known companies. The funny and maybe surprising thing is that some
of these customers appear on several of these companies’ websites: this can only indicate that
large enterprises have to use multiple prototyping tools in order to try to satisfy their needs.

Thirdly, recently more and more of these tools are offering a mobile version of their service or,
thanks to the incredible boom and development of mobile technologies, new companies are
basing their tool directly on a mobile app. This way, by checking the number of downloads and
installs, the reviews and the ratings, it is already possible to have an idea of the product itself.

Anyway, at the moment we are mostly focusing on the market of prototyping tools in general.
But what about Paper-Prototyping? Is there a real need for this kind of tools? Of course there is.
And this is simply proven by the trend of the market in recent times: several of the new apps
and services released in the last few years, as we will see in the next section, are designed with
the purpose of creating digital versions of sketches and helping the Paper-Prototyping process.

Moreover, a few years ago Rosenfeld Media ran a survey about prototyping, with almost 200 8
participants (mainly from the US) who “represented a mix of roles in the UX community”. This
survey revealed that, surprisingly with the 81% of preferences, the most common tool and
method for prototyping was none other than Paper! Therefore, this survey strengthen what has
been said up to now (and in the previous State of the Art).
8
Rosenfeld Media survey: http://rosenfeldmedia.com/prototyping/firstprototypingsurveyresul/
8

On top of that, it highlights that “there are a lot of tools used in combination to produce
prototypes” and that “the most important factor for using a tool is time and effort to produce a
working prototype” (the main features of Paper-Prototyping), “followed by a prototype usable
for testing” (which is what our system aims to do).

Thus, after this long and detailed report we can definitely have a clear and precise idea of the
specifics and the requirements that the product we would love and use should have. This ought
to allow designers to sketch quickly, generating several versions of the same design without
forcing them to express too many details; and, straightaway, to explore and discuss these
designs with the users through a collaborative process. Finally, these prototypes should be
suitable for being tested outside the lab, in a real-life scenario and in a myriad of different
usage contexts.

The curious fact is that such product does not exist (yet), while the market is overcrowded by a
plenty of similar competitors, where some of them only differ in minimal functions or details.
Of course, some work better than others and are somewhat close to the specification above;
however, given that these have not built a monopoly and that still multiple products are being
used at the same time, implies that we are still far from perfection.

3. Analytical Essay

3.1. Competitor Analysis

As described a number of times in the previous sections, there are several tools on the market
and everyone has its own features and peculiarity; nevertheless, very few of these address the
specific needs of mobile devices, being this still a recent and immature field of research.
Thus, this Competitor Analysis will be in reverse order respect to the one adopted in the State
of the Art: which means, I will first start presenting the more mobile-friendly products, followed
by the ones connected to Paper-Prototyping and finishing with classic prototyping tools.

I was initially inspired by the evaluation conducted by Emily Schwartzman back in 2013, which
generated a chart containing 10 different prototyping tools . According to what she wrote in 9
the article, she managed to create a prototype with each tool, but each one “has features that
support slightly different tasks and needs”, therefore some of them worked better than others
for a certain task and in different situations. She then decided to constantly update her chart
with the new-born products. I used this chart as a reference and combined it with articles , 10 11 12
posts on blogs and my experience so far. 13
9
Designer’s Toolkit: http://www.cooper.com/journal/2013/07/designerstoolkitprototestingforprototypes
10
Designer’s Toolkit Prototyping Tools: http://www.cooper.com/prototypingtools
11
UX Prototyping Tools: http://www.core77.com/posts/39834/6NewUXPrototypingToolsforDesigners
12
Top Interactive Prototyping Tools: http://www.coderewind.com/2015/06/top7interactiveprototypingtools
13
20 Free “Must Try” Solutions: http://blog.templatemonster.com/2015/08/19/listofprototypingtools
9

● Pop: Prototyping On Paper (popapp.in): I started with this app since it is the closest to
our system and one of our most serious potential competitors [14]. It allows designers
to use existing sketches as a starting point, which makes it perfect for
Paper-Prototyping (as suggested by the name), and to convert them into working and
testable prototypes by simply connecting them through hotspots. It was launched at
the end of 2012 and raised an angel round of $700,000 from investors.
Strengths: extremely fast and easy-to-use, perfect for mobile interaction.
Weaknesses: the interactivity is limited to hotspots for moving between screens.

● Invision (invisionapp.com): similar to Pop, it is definitely one of the most popular of the
new prototyping tools. It transforms a static project into a quick click-through prototype
that can be shared and tested on the phone or on a computer. While it has no drawing
or image creation tools, which makes it really easy to learn, it offers a strong set of
cloud storage features, transitions, integrations and gestures to support prototyping.
Strengths: really intuitive, fast-growing community, features constantly added.
Weaknesses: not as paper-focused as Pop, it only works with existing mockups.

● Marvel (marvelapp.com): I would call it a “copy” of Invision (or vice versa), even if some
functionalities might be a little more difficult to use. Otherwise the features are the
same as its previous competitor: linking screens, adding transitions and gestures,
sharing the project and saving it on the cloud. It is again really similar to Pop, but has a
slightly different scope, not being primarily focused on paper sketches.
Strengths: easy-to-learn, it provides frames for several devices.
Weaknesses: as for Invision, only existing mockups can be used.

● Flinto (flinto.com): again, much the same as above. What Flinto focuses on, however, is
the capability to test the design from the very beginning, applying adjustments on the
go and replacing sketches with mockups through a simple drag-and-drop. This way, the
final prototypes will look like real things.
Strengths: it automatically creates scrollable areas; it just needs one click to share stuff.
Weaknesses: there is no control of individual elements and gestures are not supported.

● Balsamiq (balsamiq.com): one of the oldest and still one of the best for creating
mockups and prototypes. The main key strength is its simplicity: the choices are so
limited that it is impossible to waste time on useless details, which on the other hand
makes the task often inadequate. Anyway, it is really easy to generate a clickable
prototype: its “sketchy” look helps focusing only on the content and the interaction.
Strengths: it seems to be sketching on a whiteboard, but using a computer.
Weaknesses: limited functionalities and import/export options.

● Solidify (solidifyapp.com): this app is perfect whenever needed to run usability testing
on a clickable prototype and get a good number of feedback. Indeed, it is specifically
designed for user testing, in order to “track and display number of clicks, time spent on
10

each page, and other testing metrics”.
Strengths: features for running usability tests, collecting feedback and creating reports.
Weaknesses: no animations, creation or editing of individual elements in the tool.

● Justinmind (justinmind.com): an elegant and flexible prototyping tool with powerful
features, which works well for click-through prototypes and with existing design assets.
It is possible to create prototypes from existing mockups and building new screens too.
It offers design templates for graphics and all the effects, animations and transitions
are regulated through an intuitive panel.
Strengths: it supports gesture-based interaction and can easily drag-and-drop assets.
Weaknesses: one of the youngest, thus fewer people using it and less documentation.

● FluidUI (fluidui.com): a browser-based tool used mainly to design mobile interfaces, but
has libraries to support desktop ones too. Prototypes can be created both from existing
mockups and by building screens from scratch by arranging pre-built widgets into a
drag-and-drop editor, which uses a Zooming User Interface and an infinite canvas
layout model for content display.
Strengths: various elements and libraries for many different devices.
Weaknesses: moderate learning curve, plus some features that are not easy to find out.

● Pixate (pixate.com): live prototyping tool for native iOS and Android apps. Ideal to
experiment with complex animations, interactions and gestures right on the mobile,
while being able to see the updates on the devices in real-time. There are no UI
elements within the tool, but only layers, actions and animations.
Strengths: live simulation of the prototype and updates in real-time on the device.
Weaknesses: medium learning curve and impossible to preview prototype on desktop.

● Axure (axure.com): one of the oldest and still ruling prototyping tools for enterprises.
For this reason, it has a wide user base, an active community and several forums for
support. It is a robust system that offers advanced desktop animations, as well as other
features such as group workflow, version control and responsiveness to numerous
screen resolutions.
Strengths: great support, built-in libraries of widgets and flexible control.
Weaknesses: steep learning curve for a first-time user and no device-specific features.

● Proto.io (proto.io): the tool has an extensive widget library and by drag-and-drop it is
possible to add or remove any element and adjust its settings with a click. Being
difficult to utilize for a first-time user, the tool comes with detailed documentation and
video tutorials. The projects are managed from a dashboard supporting team workflow
with various roles; it is cloud-integrated to allow assets to be added and managed.
Strengths: good training and support documentation.
Weaknesses: steep learning curve and extremely time-consuming.

11

● UXPin (uxpin.com): it was developed “by UX designers for UX designers”. Prototypes
can be created from existing mockups or external files or by building screens using
extensive UI libraries. It is similar to JustinMind, but the dashboard includes elements
from other popular frameworks (like Bootstrap). UXPin has focused on team workflow
and collaboration with features like screen-sharing and VOIP.
Strengths: user testing with prototypes through built-in video conferencing software.
Weaknesses: the performance of the tool can be frustrating and buggy.

Several tools have been excluded from this Competitor Analysis because too similar to some
of the listed products, too focused on layouts and wireframing or due to their smaller user base
and, therefore, market size. The following are only some of them: FieldTest (fieldtestapp.com),
Principle (principleformac.com), Prototypes (prototypesapp.com), HotGloo (hotgloo.com),
Moqups (moqups.com), Mockups.me (mockups.me), Mockflow (mockflow.com), Webflow
(webflow.com), Concept.ly (concept.ly), Wireframesketcher (wireframesketcher.com), Origami
(facebook.github.io/origami), Protoshare (protoshare.com), Briefs (giveabrief.com), Flairbuilder
(flairbuilder.com), Wireframe (wireframe.cc), Codiqa (codiqa.com), Framer.js (framerjs.com),
Indigo Studio (infragistics.com/products/indigo-studio), Form (relativewave.com/form).

3.2. Market Differentiation

After analysing the competitors on the market and, in the Literature Analysis, understanding
what the State of the Art is and what the Market Need looks like from an I&E perspective, it is
now time to combine all these previous concepts and then focus on the Market Differentiation.
Therefore I decided to position all the competitors on the graph below, placing them according
to the two main criteria we are basing our system on: on the X-axis, the ease of use, a
combination of time and effort required to create a working prototype; on the Y-axis, the
suitability for paper sketches and mobile usability testing.

12

As can be seen from the graph above, the green area indicates that there is actually space for
our product! Indeed, it makes the Paper-Prototyping process extremely fast and, furthermore,
it is totally concentrated on the creation of a running mobile version for usability testing. Pop,
as can be noticed, is the most similar product: however, there are some fundamental
differences which distinguish it from our system and that will be the core of the Value
Proposition. Pop and the other first 4 apps on the list are the ones we might call the “direct
competitors” : all of them offer quite a comparable product and service and compete with the 14
same customers. Designers who need a prototyping tool which works quickly, and allows them
to have a testing version in few minutes by starting from paper sketches, can choose one of
these tools and will be definitely satisfied in any case.

On the other hand, the rest of these products (from Balsamiq to UXPin) can be classified as
“indirect competitors” [15], since they allow the user to (probably) obtain the same results, but
by using their resources in a different way (or at least in a way they are not meant to be used).
This is the case of all these (semi-)professional programs, which (mostly) recreate the design
from scratch and so require much more time, since they provide a huge number of features. At
the same time, these tools encourage too much focus on the layouts, the alignments and other
details of the prototypes, which are not relevant in the early design phase. Here, instead, it is
crucial being fast and generating several completely different ideas, testing and merging them
into an ultimate solution.

As Bill Buxton says, you first need to get “the right design, before proceeding with getting the 15
design right”: and computer programs, or electronic tools, are not good at supporting the
multiple ideas and divergent thinking needed to get the right design. Which is why our
system is so different.

3.3. Value Proposition

It is finally high time to answer the I&E question formulated at the beginning by presenting our
solution. The tool, which is called “Blended Prototyping”, is a tabletop system developed to
simplify and accelerate the design while paper-prototyping [16]. This special tabletop
computing setup offers the possibility to manually sketch and develop interface screens on
regular paper sheets; these screens can then be translated into digital versions and runnable
applications on the target device by only defining “hotspots” on the prototypes. Thus, Blended
Prototyping transfers the techniques of Paper-Prototyping to mobile devices: the product is not
digital since the beginning, but it is sketched on paper and then digitized and enhanced.

This way, this system minimizes the implementation effort and allows users to collaboratively
sketch multiple and different prototype alternatives, which can be automatically converted into
prototype applications able to run on mobile devices and ready to be tested. Therefore, what
14
Small Business BC: http://smallbusinessbc.ca/article/understandingyourcompetition
15
Bill Buxton’s website: http://www.billbuxton.com
13

makes this system so unique, is that it takes advantage of the positive effects of collaborative
paper sketching, by creating a whole environment for discussion and ideation; furthermore, it
is still perfect for the testing on the field. Besides, replicating and distributing the digital copies
of the prototypes is then extremely easy and it is another added value: it solves the problem of
sharing design ideas with people outside the design team (like clients) and it makes it simple
to reuse them and interact with them. In addition, unlike several other existing approaches,
Blended Prototyping enable designers to program functionalities and define dynamic interface
behaviours for the sketched prototypes by simply adding some code in a native programming
language. This ultimately smoothes the transition towards the development phase.

3.4. Business Proposal

This chapter focuses on bringing the previous Value Proposition into the actual market context,
assessing this way the marketability of the idea. First, after discussing how the system works, I
will now explain the two parts it consists of: the hardware and the software part.
The hardware component includes several elements (the so-called tabletop setup):
● a video projector (average price: 700€), located vertically in a central position above a
regular meeting table, which projects the screen models for the prototypes and the
already virtualized ones;
● a webcam (average price: 100€), pointing at the table for barcode marker recognition,
which has the purpose of following the different screens and mapping them;
● a DSLR camera (average price: 600€), used for taking high-resolution pictures of the
tabletop surface, which can then be digitized.
The software part, on the other hand, consists of the Java application (running on a PC) which
controls the projector and all the cameras, automatically capturing the sketches as they evolve
thanks to the barcode markers placed on the top of the sheets. As Bähr describes in his paper,
the interface on the tabletop is ultimately integrated with the virtual semantics projected on
top. The system creates then a digitized paper-prototype: all the paper sheets are shown on
the mobile device display, where the users can perform certain actions and test them out in the
field, in realistic usage contexts.

Being the product a combination of hardware and software, it can be offered to the customers
in a number of different solutions. The following are just initial and tentative revenue streams
(for example, there could be a Basic and a Pro version too), based on the prices of the different
components and compared to the competitor's’ pricing strategy:
● Hardware + Software (one time subscription): 1.999€
● Hardware + Software (yearly rental): 699€
● Hardware + Software (monthly rental): 69.99€
● Hardware + Software (student subscription): 1.499€
● Software Only (one time subscription): 499€
● Software Only (yearly rental): 299€
● Software Only (monthly rental): 29.99€
● Software Only (student subscription): 399€
14

The target would be dual: on the one hand, I would start approaching big companies and
startups, which could definitely invest some money and working space for having such a
system for their business; on the other, I would target research institutes and labs, which
could highly benefit from this tabletop setup for academic and scientific purposes. In this case,
single users (such as Master or PhD students) might take advantage of the discounted price to
personally have the system, either for research or freelancing aims. Blended Prototyping would
then be extremely useful for companies working with Agile Software Development 16
methodologies (like Scrum ), because it surely helps iterative and incremental processes; at 17
the same time, it would be beneficial for businesses following Design Thinking , since such a 18
system would easily amalgamate people from totally opposite backgrounds working in the
same company, by making everyone able to use design methods towards a common goal.

3.5. My Contribution

For my Master Thesis Project I am exploring possible ways to improve the user interaction with
the tabletop system. Once the designers want to digitize the sketches, or perform any action
on the prototypes, they have to use a mobile application on a tablet. This step, even if usable
and perfectly working, is definitely against the principles and the aims of the table: one single
user is obliged to stop (or pause) the ideation process to convert the sketches into virtualized
versions, breaking the collaborative moment and the so-called “flow” . 19
What I am doing, therefore, is trying to find various and different solutions to avoid using the
tablet application: I am mainly focusing on the color detection process, which allows users to
paint (with a marker pen) inside a component of a sketch (more or less the same process as
creating a hotspot) which, according to the color chosen in a control card, is recognized as a
button, a textbox, etc. In the coming weeks I am going to run some user-studies to validate my
choices or reject my assumptions.

4. Summary

As outlined in the Introduction, in this Minor Thesis I described the business idea connected to
the project I am working at for my Major Thesis. After giving a short introduction of the aim of
this work and presenting myself and the methods I would have used, I described the Literature
Analysis related to Paper-Prototyping for mobile devices, focusing on each of these topics by
depicting the technological State of the Art; I then analysed the market and discovered the
Market Need, which is the problem I was trying to solve. In the Analytical Essay part, I started
displaying the Competitor Analysis and, therefore, I illustrated the Market Differentiation and
16
Understanding Agile Methodology: http://agilemethodology.org
17
Scrum.org website: http://www.scrum.org
18
Design Thinking on Wikipedia: http://en.wikipedia.org/wiki/Design_thinking
19
Flow on Wikipedia: http://en.wikipedia.org/wiki/Flow_(psychology)
15

the Value Proposition of our system, followed by the Business Proposal related. Finally I
explained what was my contribution to the whole project.
This Minor Thesis work was particularly inspiring and educational, since it forced me to think
“out of the box”, no more focusing on the HCI and technical side of the topics, whereas seeing
them from an I&E point of view and continuously asking myself: “Could it work? Does it solve a
need? Would people pay for this?”. Moreover, the choice of linking it to the Major Thesis made
me become even more passionate about by thinking at a possible business-oriented future.

5. References

[1] Snyder, C., Paper Prototyping, The Fast and easy way to design and refine User Interfaces,
2003, Morgan Kaufmann Publishers
[2] Bähr, B., Thoughts on Blended Prototyping (in Prototype! Physical, Virtual, Hybrid, Smart:
Tackling New Challenges in Design and Engineering), 2012
[3] Beaudouin-Lafon, M. & Mackay, W., Prototyping tools and techniques, 2002, ACM Library
[4] Preece, J. et al., Human-Computer Interaction, 1994, Addison-Wesley
[5] Rudd, J. et al., Low vs. high fidelity prototyping debate. Interactions, 1996, ACM Library
[6] Landay J., SILK: Sketching Interfaces Like Krazy, 1996, ACM Library
[7] Bähr, B. et al., A Tabletop System for supporting Paper Prototyping of Mobile Interfaces,
2010, “PaperComp” Workshop, UbiComp 2010 Copenhagen, Denmark
[8] Liu, L. & Khooshabeh, P., Paper or Interactive? A study of prototyping techniques for
ubiquitous computing environments, 2003, ACM Library
[9] Virzi R. et al., Usability problem identification using both low- and high-fidelity prototypes,
1996, ACM Library
[10] Catani, M. & Biers, D., Usability evaluation and prototype fidelity: Users and usability
professionals, 1998, Human Factors and Ergonomics Society Annual Meeting
[11] Novick, D., Testing documentation with “low-tech” simulation, 2000, IEEE Documentation
[12] de Sá, M. & Carriço, L., A mobile tool for In-Situ Prototyping, 2009, ACM Library
[13] de Sá, M. & Carriço, L., Low-fi prototyping for mobile devices, 2006, ACM Library
[14] Bergen, M. & Peteraf, M., Competitor Identification and Competitor Analysis: A
Broad-Based Managerial Approach, 2002, Managerial and Decision Economics
[15] Czepiel, J. & Kerin, R., Competitor Analysis (in Handbook of Marketing Strategy), 2011,
Edward Elgar Publishing
[16] Bähr, B. & Neumann, S., Blended Prototyping Design (in Rethinking Prototyping:
Proceedings of the Design Modelling Symposium - Berlin 2013)
16

A tabletop system to paper-prototype for mobile applications

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to A tabletop system to paper-prototype for mobile applications

Similar to A tabletop system to paper-prototype for mobile applications (20)

More from Francesco Bonadiman

More from Francesco Bonadiman (20)

Recently uploaded

Recently uploaded (20)

A tabletop system to paper-prototype for mobile applications