a tabletop system to paper-prototype for mobile applications

16
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

Upload: francesco-bonadiman

Post on 12-Jan-2017

379 views

Category:

Design


0 download

TRANSCRIPT

Page 1: 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   

 

Page 2: A tabletop system to paper-prototype for mobile applications

 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 ­ 

Page 3: A tabletop system to paper-prototype for mobile applications

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 ­ 

Page 4: A tabletop system to paper-prototype for mobile applications

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 asDesign 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.tu­berlin.de 2 T­Labs website: http://www.laboratories.telekom.com/public/Deutsch/Pages/default.aspx  3 T­Labs on Wikipedia: http://en.wikipedia.org/wiki/Telekom_Innovation_Laboratories 4 Blended Prototyping: http://www.blended­prototyping.de 

­ 4 ­ 

Page 5: A tabletop system to paper-prototype for mobile applications

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 anearly 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) andlow (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 ­ 

Page 6: A tabletop system to paper-prototype for mobile applications

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 ­ 

Page 7: A tabletop system to paper-prototype for mobile applications

Anyway, what is even more interesting and surprising about Paper-Prototyping, is thefreedom                         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 ofusage 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/why­sketching­and­wireframing­ideas­strengthens­designs/ 7 Usability.gov Blog: http://www.usability.gov/get­involved/blog/index.html 

­ 7 ­ 

Page 8: A tabletop system to paper-prototype for mobile applications

 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 isnot a monopoly andnew 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 amobile 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 thanPaper! 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/first­prototyping­survey­resul/  

­ 8 ­ 

Page 9: A tabletop system to paper-prototype for mobile applications

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 istime and effort to produce a                                   working prototype” (the main features of Paper-Prototyping), “followed by aprototype 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/designers­toolkit­proto­testing­for­prototypes  10 Designer’s Toolkit ­ Prototyping Tools: http://www.cooper.com/prototyping­tools 11 UX Prototyping Tools: http://www.core77.com/posts/39834/6­New­UX­Prototyping­Tools­for­Designers 12 Top Interactive Prototyping Tools: http://www.coderewind.com/2015/06/top­7­interactive­prototyping­tools 13 20 Free “Must Try” Solutions: http://blog.templatemonster.com/2015/08/19/list­of­prototyping­tools  

­ 9 ­ 

Page 10: A tabletop system to paper-prototype for mobile applications

● 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 definitelyone 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 ­ 

Page 11: A tabletop system to paper-prototype for mobile applications

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 ­ 

Page 12: A tabletop system to paper-prototype for mobile applications

● 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 onlayouts and wireframing or due to theirsmaller 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 ­ 

Page 13: A tabletop system to paper-prototype for mobile applications

As can be seen from the graph above, the green area indicates thatthere is actuallyspace 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 acomparable 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 thesame 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 tocollaboratively                         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/understanding­your­competition  15 Bill Buxton’s website: http://www.billbuxton.com  

­ 13 ­ 

Page 14: A tabletop system to paper-prototype for mobile applications

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 thetesting 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 toprogram 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 tentativerevenue 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 ­ 

Page 15: A tabletop system to paper-prototype for mobile applications

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 andscientific 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 followingDesign 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 possibleways 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 thebusiness 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 ­ 

Page 16: A tabletop system to paper-prototype for mobile applications

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 ­