Home > Vol. 27, No. 2

Suggestions for an Online Service Prototyping Tool for Co-creation
: Focused on Mobile Applications
  • Young-Jun Ko : Department of Design, Seoul National University of Science of Technology, Seoul, Korea
  • Hoe-Jun Jung : Department of Design, Seoul National University of Science of Technology, Seoul, Korea
  • Kwang-Myung Kim : Department of Design, Seoul National University of Science of Technology, Seoul, Korea
  • Keum Eun-Byeol : Graduate School of Industry and Engineering, Seoul Tech, Seoul, Korea

Background In the service prototyping process, an efficient co-creation tool is necessary for stakeholders to easily access service prototyping. However, a system satisfying such needs has not been realized yet. Conventional online prototyping tools have limitations in being applied to service design since they are mostly developed for UX design. Therefore, this study aims to present a prototyping tool which can be used for co-creation without the limitations of time and place.

Methods For this study, we investigated the features of 10 online prototyping tools for service design and selected six of them to analyze their features and functions. We also interviewed five professional service designers to identify the requirements concerning service prototyping. Then based on insights gained from the above research, we proposed a service prototyping tool with a co-creation feature which is applicable to mobile application in service design.

Results The proposed service prototyping tool has the functions of ‘chatting’, ‘white boarding’ and ‘file sharing’ to provide faster communication and real-time user feedback. The ‘library’ in the tool provides four iconized components such as stakeholders, stakeholders actions, service objects and service scape, all of which are essential for service prototyping.

Conclusion This online prototyping tool will facilitate the co-creation of a service concept by providing useful functions so that even stakeholders without professional knowledge of service design will be able to participate in prototyping.

Service design, Prototyping tool, Co-creation, Mobile application.
pISSN: 1226-8046
eISSN: 2288-2987
Publisher: Korean Society of Design Science
Received: 06 Nov, 2014
Revised: 24 Jan, 2014
Accepted: 24 Jan, 2014
Printed: May, 2014
Volume: 27 Issue: 2
Page: 5 ~ 17
DOI: https://doi.org/10.15187/adr.2014.
Corresponding Author: YoungjunKo (yjko@seoultech.ac.kr)
PDF Download:

This journal was supported by National Research Foundation of Korea Grant Funded by the Korean Government(MEST)
이 학술지는 2013년도 정부재원(교육과학기술부)으로 한국연구재단의 지원을 받아 출판되었음
Citation : Ko, Y. J., Jung, H. J., Kim, K. M., & Keum, E. B. (2014). Suggestions for an Online Service Prototyping Tool for Co-creation: Focused on Mobile Applications : Archives of Design Research, 27 (2), 5-17.

This is an Open Access article distributed under the terms of the Creative Commons Attribution Non-Commercial License (http://creativecommons.org/licenses/by-nc/3.0/), which permits unrestricted educational and non-commercial use, provided the original work is properly cited.

1. Introduction

It is important to select proper service prototyping tools to express service design concepts as it affects the quality of a service prototyping and furthermore service design itself. Among service prototyping tools, frequently used are those in which stakeholders participate in role play and experience a service, and simulate situation of a service by using mock-ups. Though these tools are useful for service prototyping, they have limitations in being used for co-creation as the stakeholders should meet together for prototyping. This study is to propose a prototyping tool usable for mobile device, which allows various stakeholders to generate and share ideas and get quick feedback from each other whenever and wherever they want.

We limited the scope of study to the development of online prototyping tool to be used in the early stage of a service design process for them to quickly test service design concepts. This prototyping tool is low in fidelity compared to one used at the latter stage of service design process which is useful for making high quality service prototype. For this study, first, we investigated 10 online prototyping tools which can be utilized for service design. Through reviewing functions of each tool, 9 key words were extracted and used to analyze features and functions of prototyping tools. Secondly, among those prototyping tools, we experienced six tools and analyzed their functions and features. Thirdly, we identified user requirements in interviews with five designers working in service design agencies. Lastly, based on the case studies and user interviews, we came up with design concepts and then proposed an online service prototyping tool to be used for co-creation in mobile environment.

2. Service Prototyping and Co-creation
2.1. Definition of Service Prototyping

On online material for Service Design Tools (2009) service prototyping is defined as a tool for testing a service by observing the interaction of the user with a prototype of the service put in the place, situation and condition where the service will actually exist. According to Marc Stickdorn et al(2010) service prototyping is the process of making service prototype, which is a simulation of a service experience. These simulations can range from being informal roleplay style conversations, to more detailed full scale recreations involving active user-participation, props, and physical touchpoints. During service prototyping by means of role play, each participant takes a role of stakeholders such as a customer and a service provider described in service scenario. To facilitate the role play, physical prototypes of objects and backgrounds depicting service situations which are made from paper, cardboard, or Lego bricks etc. are used. Instead of physical prototypes, computer modeling of objects and backgrounds can also be used. Service prototyping is necessary because service stakeholders cannot evaluate a service without experiencing it in person. While reenacting the scene of a service with various tools, we are able to identify problems and set directions to improve them.

2.2. Prototyping in Service Design Process

Methods of service prototyping depend on which stage of a service design process a prototype is made. A prototype made in the early stage of a service design process is quickly created with simple materials and used for service stakeholders to test, modify and develop service ideas. The prototype made in the early stage has characteristics of low fidelity and high speed, and information gathered from prototyping can be reflected in next design process. On the other hand, a prototype produced in the latter stage of service design process is characterized by high fidelity and low speed. This high fidelity prototype is appropriate for evaluating a service concept in detail and mostly used to present final design of a service.

2.3. Co-creation in Service Design

Co-creation involves anyone from staff, designers, executives or customers working collaboratively in order to examine and innovate a given service experience. (Service Design Council, 2011)Co-creation in service design is useful for reflecting stakeholders’ opinions. It is a good opportunity for users as well as designers and service providers to be able to come up with solutions to problems concerning a service while they are sitting together and talk about the service. Co-creation is usually progressed in the form of a workshop. If users concerned with a certain service have an opportunity to participate in a co-creation workshop for a project, they will feel strong affinity for the project and become its supporters.

3. Cases of Service Prototyping Related Tools
3.1. Case Study

In order to get insights for design concepts, we conducted a case study on existing online prototyping tools which we thought it had relation to service prototyping. To do this, through the internet, we collected 10 online prototyping tools and identified their characteristics based on the contents introduced on their homepages. Though these 10 prototyping tools are used mainly for producing UX prototypes of web site and desktop application, we thought that they could also be used for service prototyping. Considering the participation of stakeholders who are not good at prototying and the facilitation of co-creation between stakeholders, we selected 5 low fidelity prototyping tools and 5 tools which are high in fidelity but have functions related to co-creation.Based on information introduced at their homepages, we identified main features and functions.

Table 1
Online prototyping tools

3.2. Function Analysis through Case Studies

Through case studies on functions of each prototyping tool, we drawn9keywordsto be neededfora service prototyping tool. Such keywordswere used as criteria for function analysis of service prototyping. (Table 2)

Table 2
Features used as criteria for function analysis

Features Functions Description
1. Co-Creation Annotation Enter footnotes or commenst on works
Export png, jpg, pdf, & e-mail attached Send data which are converted to transmission mode by email
Cloud service Sharing data on cloud service
SNS Sharing data on SNS
Real-time chat Real-time chatting with participants during prototyping
Real-time co-work Real-time co-work on the same page of a prototyping tool
Real-time comment & feedback Enter footnotes or comments in real time for co-work
2. Library Component Visual elements provided as basic components
 Stakeholders Group or member who affects or can be affected by a service
 Stakeholders actions Stakeholders actions relating to a service
 Service objects Objects used to describe a service situation
 Service scape Images to describe the background or scene of a service situation
Template Sample or format provided as basic components
3. Demo & test Demo(link) Function for connecting a page to other pages
Presentation Allow users to preview or test a view
Embed Provides shared address and source code
4. Compatibility Import Function for bringing files from external sources during prototyping
Export With this function, results of a work can be converted to various types of file
5. Easy operation Drag and drop Allow users to grab an object and then place it to a different location
Grid /guide Baseline function used to arrange or locate objects
6. Back up Auto save Function by which work data is automatically saved
7. Storyboard View mode Graphic organizers in the form of illustration or images displayed in sequence
8. On/off line Online Web program which can be used on the internet based environment
Offline Program which can be used on the PC
9. Style Analog drawing Produce outcomes in sketch style drawings
Digital drawing Produce outcomes in elaborate and sophisticated drawings

The service design related prototyping tools commonly have functions related to co-creation such as ‘share’, ‘chat’ and ‘real time’ and those related to the ‘library’ allow users to easily make prototypes by providing built-in components and templates. Also with the ‘link’ users are able to connect a page to other pages. The ‘compatibility’ allows users to change results of work into different format. With the ‘drag and drop’, users are able to easily bring components to canvas when they want, and arrange and locate them. They, however, have limits for creative works because they only provide users with the ‘component’ and ‘template’ without functions for users in person to make sketches and prototypes.

3.3. Characteristics Analysis

Among the 10 online prototyping tools collected for the case study, 6 tools were chosen for characteristics analysis as they were identified to be comparably good in usability and co-creation during the case study on prototyping tools. Time required for the analysis is another reason we only chosen 6 out of 10 tools, We asked four university students(2 male, 2 female) to asessscharacteristics of them according to the criteria of ‘applicability to service design’, ‘reproducibility’, ‘acceptability’, ‘production speed’, ‘usability’and ‘stage’ where a prototyping tool is used. These criteria were created by modifying criteria developed by Eun-ByeolKeum et al. (2012) to analyze service prototyping tools. In their paper, the‘acceptability’, ‘production cost’, ‘production speed’ and ‘tool utilization’ had been proposed as criteria for tool analysis. Using the criteria, the students assessed the tools on a four-point scale. Table 3 shows the result of such analysis. According to it acceptability, usability and production speed of the low fidelity prototyping tools are considerably high even though their reproducibility is lower than that of the high fidelity prototyping tools. From this we realized that the co-creation prototyping tool for service prototyping should have features of low fidelity, high speed, high acceptability and high usability.

Table 3
Characteristics analysis ofonline prototyping tools

Classification Applicability to service design Reproducibility Acceptability Usability Production speed Stage
Low fidelity Balsamiq Mockups 1.75 1.25 3.5 3.75 3 Early stage
Wireframe Early stage Sketcher 2 1.75 2.25 2.75 3.25
Mockingbird 1.75 1 3.75 3 3
High fidelity Justproto 1.5 3.5 2 1 1.25 Latter stage
inPreso Screens 1.25 3 1.75 1.75 2
MockFlow 1 3.25 1.25 1.75 1.75

4. Research on User Requirements
4.1. User Interview

To identify user requirements for developing mobile applications of service design prototyping tool,user interview was conducted for five professional designers working in service design agencies. In the interview we asked their co-creation experiences during service design process and gathered things required to carry out service prototyping by using mobile based application. From the collected information, we elicited user requirements which are applicable to future design work.

Figure 1 User interview

4.2. Elicitation of User Requirements

A result of the interview shows that there are many requirements on the efficiency of prototyping works and usability of tools. There were opinions that unnecessary things should be minimized and hassle of using various tools to do one work should be reduced. Among user requirements elicited from the user interview, elements which are applicable to the development of mobile application were selected as follows.

Table 4
Elicited user requirements

Elements Description
High speed Allows users to quickly make a prototype with basic functions while getting rid of unnecessary functions.
Real time Allows users to conduct co-creation in real time.
Chatting function and file sharing With this function, users are able to make prototypes and quickly share necessary files while chatting.
Scenario, scene, sequence of storyboard By making scenarios and storyboards with scenes, users are able to identify overall prototyping flows.
Co-creation with participants It allows coworkers to get various feedbacks by modifying and giving opinions each other.
Whiteboard function Things which are difficult to describe by words can be expressed by drawings with whiteboard function.
Library Visual elements for service design prototyping are provided forpeople participating in co-creation to use.
Drag and drop With drag and drop function, participants in co-creation are able to place various icons and elements.

5. Mobile Application Design for Co-Creation
5.1. Concept of the Mobile Application

By combining elements resulted from tool analysis and user requirements drawn from the user interview, we finalized design elements applicable to service design mobile application.

This mobile application is a prototyping tool to be used in the early stage of service design process and allows users’ quick communication with high speed, high acceptability and easier usability. For co-creation, it provides white board and file sharing function to facilitate various stakeholders’ smooth communication and real time feedback. Especially the white board helps participants communicate smoothly with others by expressing service concepts with drawings when there is no icon to use in the library of the prototyping tool and when it is difficult to describe them in sentence.

With the mobile application, it is possible to reenact and test service situations by adding the elements of service prototyping to basic functions of existing service design related prototyping tools. In the library of the mobile application, it provides the icons of ‘stakeholders’, ‘stakeholders action’, ‘service scape’ and ‘service objects’, which are basic components of service prototyping. (Young-Jun Ko et al, 2012)According to them, the ‘stakeholders’ refer to people participating in service prototyping, including customers and service providers of a service. The ‘stakeholders action’ implies actions of people participating in a service prototyping by playing the role of customer or service provider based on a service scenario, which includes customer action and service provider action. The ‘service scape’ refers to space and place where a service is occurring. The ‘service objects’ which are utilized for stakeholders to use them when doing role playinclude real objects such as products, and mock-up or simulation which substitute for real objects.

Figure 2 Service prototyping elements

5.2. Functional Structure of the Mobile Application

The mobile application consists of the functions of ‘library’, ‘edit’, ‘import’, ‘co-creation’, ‘view’ and ‘export’. The ‘library’ provides the icons of stakeholders, stakeholders action, service objects and service scape and the edit function allows users to move and cut icons. It also can help users bring photographs and images which they took or saved, and bring templates made in open projects. With functions for the co-creation, they can do chatting, reply to someone and use white boardwhich is useful to explain service concepts to somebody in simple drawings. The view function is provided in ‘list’, ‘thumbnail’ and ‘flow’ form. Final result can be saved and shared in mobile device.

Table 5
Functional structure

Library Edit Import Co-creation View Export
stakeholders action
service objects
service scape

5.3. Prototyping Process

In order to conduct co-creation with the mobile application, after logging on it, users either continue their project which they have been doing or open a new project. When opening a new project, they need to enter project name and decide whether they open it or not to the public. Then they add cocreators to it. After creating a new scene they are able to make prototypes with the functions of ‘text’, ‘image’ and ‘library’ and modify them with edit function. Co-creators can also add opinions to the scene with ‘reply’ function, and conduct co-creation with ‘chatting’ and ‘white board’ functions and ask some co-creators to participate in the same scene when they are seeing other scenes or doing other works. If the scenes are gathered, it can be a story board. The story board can be saved in PDF form or sent via email and shared with others on Twitter or Facebook.

Figure 3 Prototyping process

5.4. Wireframe

Prior to making a prototype for the mobile application we made simple wireframes by using ‘Wireframe Sketcher’ tool. The Wireframe Sketcher is a wire framing tool that helps designers and developers quickly create wireframes for desktop, web and mobile applications. (Wireframe Sketcher, 2012) It has been used to propose the structure of the mobile application. In the process of making wireframe shown in Figure 4, we are able to identify overall flow of prototyping and review ideas.

Figure 4 Prototyping wireframes

5.5. Mainframe

Based on screen structures made with wire frames, a main frame using graphic application program was developed. Display size of the main frame is 1024 pixel by768 pixel, which is the resolution of i-pad. It consists of ‘window’, ‘button’, ‘icon’ and ‘text’ etc. Followings show data flow which startsfrom user log in to the end of prototyping (Figure 5) and screensof the mainframe(Table 6).

Figure 5 Data flow

Table 6
Screens of the mainframe

6. Conclusion

This study was carried out to create a prototyping tool for people to be able to conduct co-creation whenever and wherever they want with the mobile application. To do this, we studied 10 online prototyping tools and asked four people to analyze characteristics of 6 tools out of 10 tools. We also collected co-creation experiences and user requirements through interviews with professional service designers. Combining insights elicited from the analysis of tools and user requirements, we proposed a co-creation prototyping tool applicable to mobile application for service design prototyping.

This tool facilitates co-creation of stakeholders by providing quick communication, chatting and whiteboard functions with high speed, high acceptability and high usability. The white board makes participants communicate smoothly with others by describing service concepts with simple drawings when there is no icon to use in the library of the prototyping tool or when it is not easy to describe them in sentence.It also help stakeholders participating in service prototyping easy to create various service scenes by drag and dropping library icons of stakeholders, service objects and service scape. Unlike the libraries of most online prototyping tools which consist of icons of mobile devices such as buttons, displays and arrows, the libray of the prototyping tool have abundant icons of stakeholders, stakeholders actions, sevice objects and service scapes so even a novice user can participate in service prototyping. It also offers storyboards with sevice scenes that allows participants be able to identify overall prototyping flows.


This study was supported by the Research Program funded by the Seoul National University of Science and Technology(2014-0488)

  1. 1 . Keum, E. B., & Ko, Y. J. (2012). Analysis of Prototyping Tools for Service Design, 2012 Korea Society of Design Science Spring International Conference.
  2. 2 . Keum, E. B. (2013). Suggestions of Prototyping Tool for Service Design Co-Creation: Focusing on Mobile Application, Master’s thesis, Seoul National University of Science and Technology.
  3. 3 . Blomkvist, J., & Holmlid, S. (2010). Service Prototyping According to Service Design Practitioners, Second Nordic Conference on Service Design and Service Innovation.
  4. 4 . KIDP(Korea Industrial Design Promotion). (2012). Service Design Trend and Policy Direction.
  5. 5 . Kim, K. M., Ko, Y. J., & Jung, H. J. (2013). Development of Service Design Prototyping Guideline, Archives of Design Research, 26(4).
  6. 6 . Stickdorn, M., & Schneider, J. (2010). This is service design thinking: Basics, Tools, Cases, BIS Publishers, Amsterdam.
  7. 7 . Service Design Council. (2011). Service Design Council Workshop Toolkit.
  8. 8 . Service Design Tools: Communication Methods Supporting Design Process. (2013). Retrieved from Service Design Tools: http://www.servicedesigntools.org/24.
  9. 9 . Wireframe Sketcher. (2012) Retrieved from http://www.wireframesketcher.com.
  10. 10 . Ko, Y. J. et al. (2012). The Development of Supporting Technology for Service Integrating Design Consulting to Upgrade Service Industry, Ministry of Knowledge Economy.