Project KOKORO – a mental health coach for teenagers

In the summer of 2015 we worked with mental health care organisation Ixta Noa on a project codenamed KOKORO, a mental health coach for teenagers and a life skills teaching tool for educators. The goal of the project was to help teenagers gain greater insight into and control over their thoughts and feeling. The idea was to provide teenagers with a digital tool that would allow them to help themselves deal with the everyday challenges of adolescence.

A coaching app and a teaching tool

We created a prototype of the coaching app and the teaching tool. The aim of the prototype was to enable Ixta Noa to (1) test wether the chosen approach would be engaging and effective and (2) convince potential partners to support the further development of the product.

The coach takes the form of a mobile chat app. Teenagers check in with a character called Noa and talk about what is bothering them. Noa offers support by helping them structure their thoughts and feelings and formulating courses of action. The conversational user interface is immediately recognisable and fun to use.

Screenshot of coaching app

The teaching tool contains lesson programs which supports teachers in the training of life skills in a classroom setting. It also provides teachers with insights from the data collected by the digital coach. Such data is anonymised and none of it is collected without prior consent from teenagers.

Screenshots of teaching tool

The coaching app also ‘knows’ which parts of the training teenagers have completed in the classroom and connects these to the issues a teenager reports to be struggling with. In this way life skills are contextualised by each teenager’s unique situation.

Workshopping, prototyping and playtesting

To kick off the project we ran a design workshop with the client in which we used our engagement loop model to collaboratively sketch out possible approaches to the problem. The workshop outcomes were synthesised in a design document.

We also interviewed teenagers individually about how they deal with life challenges and what things they already use to do so. This provided us with wonderful sources of inspiration some of which found their way into the product quite directly. Most notably, we included the idea of outputting aspirational images at the end of sessions for them to save and share. This acted as both a fun reward and also as an authentic word-of-mouth marketing mechanism.

Example of aspirational image in the coaching app

After the workshop and the interviews we proceeded to design and develop a prototype over the course of two sprints, each lasting roughly three weeks. Halfway through we ran a playtest and we finished the project with a demo.

We tested the prototype with a group of teenagers from different schools and backgrounds. We brought them together in one room and invited them to all bring their own device (most of them affordable Android smartphones). We began with an open-ended conversation about the subject which surfaced the broad range of individual experiences. After the discussion we invited them to use the prototype as we walked around and quietly observed and made notes on their behaviour. We finished the session by collecting feedback from each teenager individually, organising it and discussing it. The playtest outcomes provided us with the raw materials for the second sprint’s backlog.

Playtesting the coaching app

Technology and next steps

The prototype runs in any browser, is designed mobile first and requires no server side logic. The conversations were written in Gingko because of its unique branching model. We developed our own JSON format and Javascript engine for conversations. The frontend was rapidly developed using the ZURB Foundation framework and CodeKit.

Screenshot of the JSON format

The project provided Ixta Noa with a clear way forward for the product’s development. An independent team has been spun off from the organisation which is now planning the product’s further development. Our work has enabled them to test assumptions early and in a brief timeframe. They have also gained deep understanding of the resources they will require in order to move forward. We look forward to seeing the results.

Posted in Articles, Making-of, Projects | Tagged , , , , , , , , , , , , , , , , , , , , , | Comments closed

Project KUMA – a learning and recruitment game for KLM Care Team volunteers

During the second half of 2014 and the first half of 2015 we worked on a project codenamed KUMA. We helped KLM Business Campus understand and explore the potential of game-based learning for the purposes of recruiting and training KLM Care Team volunteers. Care Team supports victims and their next of kin in the case of an incident.

The central question explored in this project was if and how games could help potential volunteers understand what the work of a Care Team member entails and why they should consider signing up.

In this project we created a brief, a concept portfolio and a production plan. Subsequently, we created storyboards and mockups for one game concept selected from the portfolio. Our efforts helped KLM Business Campus make informed decisions about how to best make game-based learning a part of their broad range of learning technology innovation initiatives.

Workshops

Our approach was highly collaborative. We were not just concerned with creating high quality deliverables but also with maximising knowledge transfer from us to the KLM Business Campus team. To this end we organised a number of workshops at our Utrecht studio. Each workshop had a specific focus, ranging from understanding applied game design fundamentals, through generating game ideas, all the way to planning a game development roadmap.

The workshops were lead by our principals but we brought in help from our associate Sebastian Deterding and from illustrator Agnes Loonstra. Sebastian’s deep expertise in game-based learning proved invaluable as he he critiqued our deliverables and provided valuable input. Agnes joined us for the workshops to rapidly visualise game ideas as they emerged.

Workshop under way

One of a series of game idea visualisations by Agnes Loonstra

One of a series of game idea visualisations by Agnes Loonstra

Mockups

After completing the workshops and delivering the brief, concept portfolio and production plan we went on to select one concept and develop its design further through storyboards and mockups. We invited artist Tim Hengeveld to join us for this effort.

We outlined the story we wanted to be able to tell using the mockups, storyboarded it and finally produced highly detailed screens. In parallel we wrote the copy to be used in the screens. At every step we spent time with KLM Business Campus to review and refine the work at hand.

One of a series of game design concept mockups by Tim Hengeveld

A player is invited to experience what it is like to work as a Care Team member.

One of a series of game design concept mockups by Tim Hengeveld

The player must observe the living situation of a customer closely to provide them with the right support.

One of a series of game design concept mockups by Tim Hengeveld

The satisfaction of Care Team work is derived from really being able to help people. We wanted to get this across in the game.

The outcomes of the workshops and the visualised game concept together hugely increased KLM Business Campus’s understanding of game-based learning. After working with us, they were able to confidently make important decisions about the mix of learning technologies they would employ for the training of KLM Care Team going forward. And they had acquired skills and knowledge enabling them to start developing game-based learning solutions in-house.

Posted in Articles, Making-of, Projects | Tagged , , , , , , , , , , | Comments closed

Project TEDASUKE – a self-development and self-organisation tool for volunteer children’s book readers

VoorleesExpress is a project by social innovation agency SodaProducties. Volunteers read books to children in need of extra help learning the Dutch language. The project is a huge success. It operates in 100 municipalities, employs 4000 volunteers who read 3700 families annually.

In the summer of 2015 we worked with SodaProducties to develop a design concept for a new tool for VoorleesExpress volunteers. We designed a responsive web application which helps the volunteer readers keep track of their work with their families, supports them in the development of their reading skills and connects them to other volunteers.

Our design concept was broken down into three deliverables: a user journey map, mockups and a functional specification. Together, these provided SodaProducties with the necessary input for them to create a plan and budget, acquire funds, and find a development partner. Our work laid a solid foundation for the tool’s further development in 2016.

User journey map

Our user journey map tells the story of a volunteer’s work with VoorleesExpress, from signup, through the 20 weeks of reading to a family, to celebrating and sharing her accomplishments. It sheds light on the goals, activities, thoughts and feelings of the volunteer at every step in their journey. For each step it also describes what the future tool will provide her with to support her in her work.

We produced the map in collaboration with SodaProducties leadership and experts. During a discovery workshop we sketched out a first draft of the map. In the studio we refined the map over several iterations and used data from a wide range of research reports to enrich the story. Even before completion the map was already in use by SodaProducties to tell the story of their plans to their partners.

Sketching the user journey map during the discovery workshop

Part of the finished user journey map

Mockups

Using the user journey map we identified a number of key screens to visualise. We iterated on the mockups with frequent review sessions at the SodaProducties offices, going through rough hand drawn sketches and more detailed wireframes. Finally, we brought in frequent collaborator Simon Scheiber to create highly detailed mockups.

We built on the existing VoorleesExpress brand and developed it further into a visual language suitable for responsive web applications. We also included examples of realistic content in the mockups so that they could be used alongside the user journey map to tell the story of the tool as if it was already real.

Sketch, wireframe and mockup of a screen side-by side

Functional specification

Being strong believers in agile planning, we proposed to not create a detailed functional spec but in stead to write a list of user stories. These user stories were based on the user journey map and mockups but also covered functionality available to SodaProducties through the tool’s backend. We also estimated the ‘weight’ of each story using t-shirt sizes. By extrapolating from our own experience designing and developing similar products we could subsequently provide SodaProducties with an estimated budget, which they used to benchmark proposals from potential development partners.

Part of the functional spec

The user journey map, mockups and functional spec together paint a sufficiently detailed picture of a tool that helps SodaProducties take the next step in growing VoorleesExpress and helps volunteers develop themselves and organise their work in a hassle free and fun manner.

Paying close attention to volunteer motivation proved key—as it does in any Hubbub project. VoorleesExpress readers do the work because they enjoy becoming a better version of themselves and feeling useful to society. Volunteering is a great expression of autonomy and we were very careful not to make any design choices which would negatively affect this sense if autonomy. This is challenging, because of course there are certain things a volunteer must do. Volunteer work is not without commitment. Our strategy was to connect such chores to learning activities. As readers improved their skills through various digital resources and reflected on their own development, they also automatically recorded the data required of them. In short, the perceived chores were given a new context and in this way were made meaningful.

We think much volunteer work can benefit from digital transformation similar to project TEDASUKE. Our collaboration with SodaProducties has provided them with new experience that will help them not only transform their own organisation but conceivably makes them well-positioned to help others in the field make progress. We look forward to seeing the results.

Posted in Articles, Making-of, Projects | Tagged , , , , , , , , , , , , , , , , , , | Comments closed

Engaging sleep mode

First of all, best wishes for the new year.

Before looking ahead, a quick look back. 2015 was great for us. In our end-of-year review of 2014 we said we wanted to balance creative success with more commercial success. And we did. Business was good in 2015. We did much more consulting compared to the year before and we worked on one big production project throughout the year. We also continued to find time to continue work on our own projects.

Not a bad place to start the new year, right? But after six years of running Hubbub we feel our configuration as a boutique playful design agency and perhaps more importantly the frames of ‘serious games’ and ‘gamification’ have outlived their usefulness. Paradoxically ‘games’ itself feels averse to our main interest: the role of play in the design of humane technology.

After some soul-searching we have decided to significantly scale back our day-to-day investment in the organisation. Effectively this means Hubbub is going into hibernation for the foreseeable future. We won’t take on new engagements in 2016. It goes without saying we will be honouring our prior commitments to clients and we will continue to promote and sell our own products Bycatch and Cuppings.

But the principals, that is to say me and Alper are free to pursue other paths. Alper has joined ResearchGate in Berlin as a software engineer. Kars is spending half a year in Singapore and has returned to freelance consulting.

We look back with great fondness on these past six years and are proud of all the work we have done. We are grateful to all the people who put their trust in us as clients and to all the people who chose to collaborate with us. The core of Hubbub may have remained tiny throughout the years but the circle of talented individuals who became part of our network has continuously grown and remains its greatest asset. A big thank you to everyone involved.

And finally our thanks to you dear reader for joining us on our journey for however long it has been. Here’s to new beginnings in 2016.

Posted in Announcements, Featured | Tagged , , , , | Comments closed

Week 331

Hope you had a lovely Christmas.

Due to the holidays this was a very short week for us. Alper continued to put the final touches on an upcoming release of Cuppings. He also fulfilled some more Bycatch orders. Other than this we took care of some end-of-the-year administrative stuff and that’s about it.

Have a good New Year’s Eve, and see you back here in 2016.

Posted in Weeknotes | Tagged , , , | Comments closed

Week 330

With the big push I reported on last week behind us, we took it easy in week 330.

Alper took some time off and headed to Amsterdam where he checked out some new spots for Cuppings. He also continued to take care of Bycatch fulfilment.

I finished our work with State of Flux on project HENDO by writing a brief note on how we think the next stage of the project would be best handled.

And that’s it, really. Not much else of note to report.

Posted in Weeknotes | Tagged , , , | Comments closed

Week 327, 328 and 329

It’s been quiet around here due to a big push on wrapping up our current client engagements before the end of the year.

Most of our time was spent on HENDO. I headed over to Berlin to spend a few days with Alper in the same room, filling whiteboards as we worked towards a design concept. I left Berlin with a first draft of a slide doc describing our efforts. The next week, I reviewed the document with State of Flux in Amsterdam. And the week after, I processed their feedback into a second version and also did some sketching to visualise the product’s components and experience of use. The whole thing has shaped up nicely and State of Flux is already making plans for the product’s next stage of development.

Then there is Free Birds. The big news is that, after ten months of design and development, we released the game to the App Store last week. This is a soft launch. Marketing of the app by our client the Dutch Museums Association will probably kick off in the new year once a couple more museums have joined in.

But for now, if you’re curious, you can load up the app on an iPad and take the family to Airborne Museum ‘Hartenstein’ in Oosterbeek and give it a go. (I’m sorry friends abroad, the game is only available in the Netherlands.)

Before we could release Free Birds, we had to take care of a few last small things that resulted from the review of the gold master and then submit it to Apple. The app was approved swiftly, and so now we are done, which feels great.

We’ll write the whole thing up in due course but for now I will just say I am proud of what the team achieved on this project. A special shout-out to our collaborators Tim and Niels for their great work on the game’s art and writing, respectively.

I think we’ve produced a unique museum game: location-based using iBeacons, a conversational UI, cross-generational play, mildly subversive and filled to the brim with big dilemmas.

The final client engagement is NAMI. I’ll keep this short: I had two productive sessions with the people at Tinker Imagineers in which we collaborated on a concept deck. Then, I joined them for a presentation at the client, which was received well. Our contribution has come to and end now that we’ve helped them understand the serious games space. Tinker will go on to plan the next stage, which will be design and development. I look forward to seeing the end result.

And last but not least, we worked on our side projects. Bycatch received a nice bump in orders due to some nice tweets from taste-makers in the field such as Paolo Pedercini and Robert Yang. And Cuppings is inching ever closer to a big new release as Alper and Simon work on some sweet final micro interactions.

So yeah, we’ve wrapped up a lot of things in the past few weeks and what loose ends remain will likely finish before Christmas.

Posted in Weeknotes | Tagged , , , , , , , , , , , , , , , , | Comments closed

Week 326

The big thing this week was us finishing the gold master release for Free Birds and reviewing it with our client, the Dutch Museums Association. Barring a few final small fixes we are ready to submit to Apple after which it’s fingers crossed.

For project HENDO I headed over to Amsterdam for the first workshop with the State of Flux team in which we collectively orriented towards a promising design direction. Subsequently I attended their final cocreation session for temporary spatial improvements to the Buikslotermeerplein area.

In between all this I visited Tinker Imagineers twice to help them figure out the design concept for a corporate onboarding game app.

Meanwhile Alper took care of some housekeeping. The projects we opened up on GitHub now have proper readmes and licenses attached. And we are preparing the long-overdue move of this website to hubbub.eu.

Posted in Weeknotes | Tagged , , , , , , , | Comments closed

Week 324-325

Rolling two weeks into one for these notes, ‘because reasons.’

We completed what is officially the last sprint on Free Birds, getting everything in ship shape. We now have a ‘gold master’ sitting ready for release, which will happen at the client’s earliest convenience.

On project HENDO, we mapped State of Flux‘s current process so that we have a common point of reference. Once we get this wrapped up we can move on to the next step, which is translating this process map into game mechanics.

A new small consultancy gig (codenamed NAMI) took off as well. I am helping out Tinker Imagineers with design concepts for an onboarding game app they are making for a company in the semiconductor industry. It’s mostly me dropping by their studio a few times a week to go over their progress and offer insights from my experience making similar things.

I published my write-up of a short lecture on how to shift the conversation from gamification to playful design.

And finally, Alper received good news with regards to his Interaction 16 proposal. He’ll be in Helsinki in the new year to share his experiences prototyping and building conversational user interfaces.

Posted in Weeknotes | Tagged , , , , , , , , | Comments closed

Shifting from Gamification to Playful Design

This is a lightly edited transcript of a short lecture I delivered some time ago at an off-site gathering organized by one of NL’s largest construction-services businesses. The event explored the potential of games, game design and gamification for property development and construction. This talk creates a common frame of understanding about gamification and why ‘playful design’ is a more productive approach.

Feedback Systems

Let’s start with a definition of gamification. The Gamification Research Network offers the following: “using game design elements in non-game contexts.”

Foursquare remains the blueprint for most ‘naive’ implementations of this idea. Take a product or service and add features such as points, badges, leaderboards, etc.

However, such features are feedback systems and these are not unique to games.

Now, the assumption is that adding such feedback systems leads to higher engagement and motivation from users.

But from a practical standpoint we quickly run into a problem. In which case should we use which particular system? This grab bag of feedback systems lacks an instruction manual.

If we want to be able to answer this question we need to stop focusing on feedback systems, and instead look at the people we are designing for and the context in which they use our product or service.

Motivation

Like I said, feedback systems are not unique to games. A better starting point is the actual source of what makes them fun: learnable challenges.

Put differently, what we should do is shift from game elements, to a gaming state of mind. This gaming state of mind is also known as gamefulness.

So let’s unpack this gaming state of mind. Learning is a huge source of pleasure in games. We enjoy the experience of competence.

But next to this mastery of systems, exploring game systems and expressing ourselves through them is another huge source of pleasure. We enjoy this experience of freedom. If gamefulness is characterised by the need for competence. Playfulness is characterised by a need for autonomy.

And in both the case of competence and autonomy, we derive pleasure from playing alongside others. We enjoy relatedness.

So these are three sources of pleasure in games and play. In fact, they are innate psychological needs.

Engagement Loops

These concepts give us a starting point for applying game design to products and services. They can be the start of our instruction manual.

The first step is to understand what motivates our particular audience. From these motivations, we can reason back to what feedback systems will provide people with the desired need fulfilment.

The next step is to return to the concept of a learnable challenge. For there to be a challenge there must be goals. These goals are informed by what we want people to do, and what people themselves want to achieve.

If we know what goals users will be pursuing, we can start thinking about what tools and resources we need to give them in order for them to be able to do so.

These tools connect with the aforementioned feedback systems. The feedback systems have already been connected to user motivations and from these motivations we can loop back to the goals we have identified.

The model I have just outlined is what we call the engagement loop, and it is at the heart of how we think about and design for motivation and engagement. It is a much more sophisticated approach than gamification.

Playful Design

So we shift from gamification to playful design. The key idea is that we can make things that are useful, that people use to achieve certain things, but that at the same time allow for a playful attitude.

By focusing on playfulness we remind ourselves that motivation is as much about mastery or competence as it is about creativity. We can design things to allow for both a sense of achievement and a sense of freedom. We can make our designs adaptable to a range of social situations. And so ultimately we can make them more humane.

I can’t emphasise enough how our intent is to add degrees of freedom, not to be more controlling. More control limits playfulness, instead of enabling it.

So in summary (1) instead of feedback systems think learnable challenges, (2) understand that motivation comes from the satisfaction of the needs to feel competent, autonomous and related and (3) use this understanding of motivation to connect goals with tools and tools feedback and (4) playful systems are humane systems. If you care about people-friendly technology, you should care about play.

Further Reading

Posted in Featured, Talks, Thoughts | Tagged , , , , , , , , , , , , , , | Comments closed