1 Department of Informatics and Telecommunications, National and Kapodistrian University of Athens, Greece
3. The design of the digital innovation colours
The main goal of Innovation Colours™ is to help players discover their unique talents that enable them to interact effectively with other people and unlock the potential of their group to innovate. At the core of the game is the notion that everyone has the ability to innovate, each person in their own way. Knowing, therefore, and reflecting on one’s character traits, can support an individual in using them to better contribute to a team; teams can explore and combine their talents, work better together and deliver results.
The original, paper-based card game consists of a deck of fifty unique cards, each representing a personality trait. In the beginning, each player is dealt five random cards. Then, the player is called to sort her cards, to exchange cards with her teammates and finally to swap cards among those remaining in the deck until the most representative set of 5 cards is reached. The final deck of cards collected by the player is then interpreted by the human coach according to the colour(s) that dominate the collection. In the digital version of the game, this interpretation is offered along with a visualisation of the results presented to the players, through which they can discover the innovative talents of their character, as well as the talents that they can bring to the table when cooperating with other team members.
The game is accompanied by a model, which stems from research in innovation management. Optimal collaboration requires proper communication between team members, and effective communication requires the simultaneous presence of four key elements within the team. The coexistence of all these elements is examined through the successive stages of the game. In particular, each card bears a feature that can contribute to innovation. The Innovation colours™ model maps out the relationship between colours to the four stages of innovation: blues to analyse business opportunities, greens to create ideas on how to capture a business opportunity, reds to engage the ecosystem needed for this innovation to happen and yellows to manage the innovation delivery. In more detail, the basic colours in the card deck are:
Blue – represents the ability for strategic thinking, and recognition of opportunities.
Green – includes the talents of producing new ideas and proposing solutions to existing problems.
Red – talents in this category relate to interpersonal relationships and inclusion of people on new work models.
Yellow – includes talents concerning team leadership, plan creation, and implementation of actions in the framework of a team.
This model is often referred to as the four Ws of Innovation: Why? What? Who? hoW? (Shapiro, 2010).
The digital game consists of three phases (Figure 1) through which players try to find the trait cards that are closest to their temperament. The phases are:
“Ready” – In the first phase, players get the five cards dealt and sort them, placing in a higher position the cards that better represent their character.
“Set” – Players exchange cards with each other (or the system), trying to keep those closest to their character. The card each player offers for exchange must be agreed upon by both players in order to complete the exchange.
“Go!” – Players swap cards with those presented in the deck. The players can make adjustments to their final set by selecting cards that fit their character and releasing those that don’t. The final set of cards reveals the player’s prevalent and secondary colours, which correspond to elements on how best to work with others and what tasks can be done more effectively.
Georgios Danezis, Maria Roussou and Vali Lalioti
The challenges faced in designing the digital counterpart of an existing game-like business tool were more than initially met the eye, on both a conceptual and a human-computer interaction level. The initial separation of cards into groups, for example, had to be made in a way that was understandable to players without, however, referring to gambling, which would contradict the ideology of the game. An additional difficulty relates to the important requirement of addressing responsive design, i.e. adjusting the interface and interaction to different, form factors and modalities (e.g. clicking, tapping, displaying tooltips, etc.). The game elements and actions were numerous, competing for the user's attention and challenging our attempts at minimalist design.
In the following section, we present the process of designing the game, from low fidelity sketches to a working prototype.
Figure 1: Screenshots of the final prototype showing different phases of the game
3.1 Design iterations
The success of the digital version of the game, or any product for that matter, is directly related to its usability, including its learnability, but also to its playability (user experience or UX). For the digital counterpart of Innovation Colours™, we followed a user-centred design approach in which the users’ needs are taken into account from the start and remain central in shaping the final environment. In our case, the users we had to work with were both the consultant who has conceived and uses the game in her practice, and her clients, the players of the game. Hence, to ensure that all stakeholders’ needs are properly met, we built on the considerable expertise of our client (the consultancy) in administering the paper-based card game with their clients.
Working closely with the consultancy, we first elicited their requirements and expectations from the digital product. We then painted the picture of the end-user, i.e. the player that the digital game targets, by creating a persona. A method utilised in the design and evaluation of digital products, personas are essentially fictitious individuals constructed by designers to represent a typical end-user (Roussou et al., 2013). Rather than simply creating an average user (Chang et al., 2008), we created one persona with a unique combination of characteristics, which, however, are based on real data provided by the consultancy according to the profiles of its corporate clients.
The use case scenario for our persona was then developed and formed the basis for the creation of the first low fidelity prototype, i.e. the initial mockups made to outline the various design options, the basic game mechanics, and the elements that play a key role in integrating players into the meaning of the game. In a true iterative design fashion (Schell, 2014), we practiced multiple design-evaluate-redesign cycles to continually evolve this first prototype through measuring and iterating.
The development of further game prototypes was done in four iterations (Figure 2), checked at the end of each phase against usability heuristics (Nielsen 1994) as well as with end-users, whose comments triggered a new design cycle to correct any problems that occurred. Because the game can be divided into distinct phases, these prototypes allowed for formative evaluation to take place during the design of each stage.
Georgios Danezis, Maria Roussou and Vali Lalioti
In the earlier design phases, our focus was on resolving usability issues identified during the heuristic evaluation, aiming to reach a working prototype with the best possible usability levels. In parallel, numerous user interface and interaction elements were examined, such as a carousel, or a card sorting mechanism incorporated into the player's “hand”.
Figure 2: From left to right, screenshots from three different iterations, showing different approaches for sorting cards
The results of the formative evaluation at each stage quickly highlighted design choices that deviated from our initial decisions. In summary, some indicative changes made as a result of the design-evaluate-refine cycle of iterations include:
Understanding instructions. Initially, some players took more time to understand the instructions presented in each phase. They relied on specific elements to understand each goal and sometimes they had to read the text more than once. Thus, we proceeded to simplify instructions while keeping them short.
Distinguishing gameplay phases. Many players had a hard time correlating the names given to each phase with the respective goal. So, the phase names were changed from the more general “Ready”, “Set” and
“Go!” to the more specific “Sort”, “Exchange” and “Refine”. Additionally, the static bar indicating the phase in which the player is in was distracting and some tried to interact with it, so it was changed to look more like a progress bar.
Feedback. The progress bar was “filled” as the players moved from one phase to the next in the game and served multiple purposes: to communicate the name of each phase, the percentage of completion and the next phases to come. The bar was initially placed on the top of the screen but our tests showed that most players did not notice it or understand its purpose. It was thus placed next to the phase transition button so that there would be a rational grouping, according to the Gestalt principles of design5.
Interaction feedback. Some players omitted a phase by mistake when clicking on the phase change button multiple times. The transition from one phase to the other was not easily perceived due to the lack of sufficient colour contrast on the screen. The addition of a different background colour as well as sound effects during transition were the changes implemented to deal with this issue.
Changes from physical to digital. During the “Refine” phase players had to exchange cards between the frame on the right and their “hand” so that they could keep the cards they considered to be a better match.
The exchange was performed by dragging a card from the right to the left and the new card always replaced the last one on the player’s hand. This way of exchange reflected the way the physical game is being played on a tabletop, but it did not seem to resonate with players in the digital version as they had to re-sort their
5 Interaction Design Foundation, https://www.interaction-design.org/literature/topics/gestalt-principles (accessed May 24, 2018).
Georgios Danezis, Maria Roussou and Vali Lalioti
cards every time. The solution we implemented was to perform the exchange by dragging the card from the right frame directly over the card eligible for exchange. This exchange mechanic was preferred by most users in subsequent evaluations so it was kept.
Presentation of results. The results had to be instantly visible, so the players could reflect on them and complete the game with immediate tips on how to increase their productivity. The initial approach of presenting the results was via a bar chart, with each bar depicting the quantification of each color that the player had in hand when finishing a game. Under the bar chart there was a text that explained the importance of colours and the way players could exploit their character’s traits for a more efficient synergy and achievement of the group goals. Most players felt that this form pf presentation was more general and expressed their preference for something more to the point, i.e. customized to their particular result. The presentation was thus modified to refer to the two most dominant colours of the player. The rest of the colours were also shown but in a secondary manner.
These and other changes had a considerable positive effect on the experience and the overall perception of the game by the users.
The low fidelity prototypes were developed using a commercial wireframing tool while the high fidelity working prototypes were created using the final HTML5 platform used to implement the game Construct 2 by Scirra Ltd.
and JavaScript. In addition to an online version of the game, an executable has been produced for Windows, Mac, and iOS.