Posts in Events (31)

Happy Chinese New Year from ReignDesign!

We had a busy year of the horse! 2014 was the first year for our new Chile office. We explored iBeacons, helped people swipe through their support tickets, attended cool events like Barcamp, CocoaHeads and GMIC, got kicking for the World Cup, helped a local entrepreneur, made some Shanghai street signs, figured out a more agile way to price apps, discovered two ways to build a pyramid, got ready for the iPhone 6 and 6 Plus, made some awesome educational games, celebrated Christmas, and welcomed our newest team member Anukriti.

Who knows what the year of the sheep will bring? We're hoping it'll be a baaaaaaa-d ass year!

The Barcelona office welcomed the year of the Sheep with beer...and popcorn.
The Barcelona office welcomed the year of the Sheep with beer...and popcorn.

IMG_2958
Singing...yelling, it's all the same at KTV

IMG_2953
Tuo wows Jason with his melodious voice

IMG_2972
Nobody cares what the fox says!

 

 

Educational Games: Not Just Child’s Play

I recently presented at the Game Developers Conference China on the topic of Educational Kids' Apps. Here's a summary of my talk.

Slide01

We all know that kids really love tablets: the immediacy of interacting on them, the games they can play, and the creative opportunities. But what do their parents think?

A lot of parents’ concern is that if their kid uses an iPad too much, they’ll end up looking like this:

Slide05

A lot of research has already been done into how kids use phones and tablets and how their parents react to this usage. In the United States, PBS ran a study on how kids use mobile devices and mobile apps from pre-kindergarten to grade 3.

Slide06

Parents restrict the time their kids spend on phones and tablets.

"A very popular control tactic for parents was to limit the time a child could spend on the device."

A common tactic is to limit screen time. But there's an important caveat:

“As long as their child was playing with what they deemed to be an educational app, he or she could stay on their device for longer periods.”

If you are creating an educational app, you have an exciting opportunity because parents are willing to let their kids play with your app for much longer than they would otherwise.

Let's explore that opportunity in thinking about what makes a great kids app: what is it that really distinguishes the educational apps that reach the top of the App Store from the rest?

I narrowed it down to five things: the CUBED model of educational app success.

Slide10

Creativity, Understanding, Branding, Emotion ...and one more, which I’ll come to later.

C is for Creativity

A friend who lives in Shanghai was recently looking for a coloring book for his child. He went to one of the local bookstores and tried to find a coloring book. Here's a photo of one of the books he found:

Slide12

This is a typical Chinese coloring book. On the right, the child is supposed to color in the bird. However, on the left the book tells you exactly which colors to use and where. Looking through all the books in the bookstore, they were all like this:

Slide13

 

There’s even a notice on the page:

“When coloring, be sure to use different colors for the different parts of the dragonfly’s body.”

Now, what if your child wants to do this:

Slide15

What if your child wants to color over the edges of the lines? What if your child wants to make a dog that is bright pink? Or a sky that is yellow?

When thinking about your app, you must be really careful not to limit the amazing imaginations that children have. Kids won't do what you expect them to do. They won't carefully drag a character across the screen. Maybe they'll smash both hands on the screen at once. Can your app cope with that?

In designing an educational app, there’s a continuum in terms of how much freedom we allow the player to have.

Slide16

On the left hand side, we have a storybook. If you have an existing, printed book it's relatively easy to make an iPad app version by layering interactivity on to your existing graphics. Now, a character will speak when tapped on, or you can trigger an animation when the child taps on an item. I’ve seen a lot of really great storybook apps, but they don’t really make the most of the opportunities the medium allows.

On the right hand side, you have sandbox games. We know kids love real-life sandboxes! And there are plenty of non-digital examples of "sandbox" toys, like Lego. Give children building blocks and you have the potential to unlock a huge amount of creativity. Minecraft is a very popular game amongst kids, as well as being a powerful tool. But launching a new sandbox game is hard. It requires a lot of pre-planning in terms of what building blocks you are going to create, how you’re going to encourage people to create amazing things, and how you can demonstrate the educational value of your app to parents.

In the middle is guided play, as you see in a Piiig Labs app. When you're doing an experiment in Piiig Labs, you aren't told exactly what to do. But we guide the child in the right direction though positive reinforcement. If you’re trying to get the child to do something quite complicated, like building a volcano, designing a circuit, or making a radio, you need to gently guide them in the right direction.

U is for understanding

There are two critical things that you need to get right for making an education game for kids:

  1. 1. Understanding your audience
  2. 2. Your audience understanding your game

Educational games have two audiences. There is the parent, who typically is the person who buys the app, the person who leaves reviews, and the person who sets time constraints on the child's use of the app. And there is the child themselves, who wants to be entertained and delighted.

Slide19

So, being an educational game designer, you have to act like a psychologist, getting into the minds of these two distinct audiences.

Slide20

How can we make kids understand your game? One powerful tool you can use is repetition. One powerful tool you can use is repetition. One powerful tool you can use is repetition. Keep repeating something and kids notice.

But isn't repetition boring? When I was a child, I really enjoyed a television program called Postman Pat.

Slide22

It’s about a postman who goes around a village and delivers letters. Every week, I would sit and watch this program, and I really enjoyed it. A few years ago, I was reading Wikipedia and I discovered that only 13 episodes of this program were made.  I’d been watching the same 13 episodes again and again and again as a child! And yet, I never remember finding it repetitive or boring.

And it doesn’t need to be exact repetition. So for example in Piiig Labs, we use a conveyor belt. The conveyor belt is used to bring in the different pieces that are required to solve the particular experiment that you’re currently working on. For each experiment, different sets of items are brought in. By repeating that mechanism of bringing them in on the conveyor belt, that helps children understand how each new kit works.

B is for branding

I was inspired by this quote from James Huggins who runs an educational game company called Made In Me.

“Always think about more than one app with every single idea that you’re doing.”

Why do you need more than one app? Well, educational games are special. While the rest of the industry is heavily dominated by freemium, you can still charge premium prices in kids' categories, but upfront pricing means a lack of ongoing revenue. If you only have one app, you constantly have to find new customers. If you have a portfolio of apps, you can sell more than one app to your loyal customers.

Who does this well? TocaBoca is one of the most popular and enduring kids apps brands. Here's a selection of apps that they’ve made.

Slide27

Why is TocaBoca so successful in branding? It's because, as a parent, if I buy a TocaBoca app, I know what to expect. I know the kind of game play, I know the style, I know it will be educational, I know my child won't be pushed any in app purchases, I know the value I can expect my child to derive from this game.

At ReignDesign, we have published many games, and a few years ago we decided to put these under a single brand called Reign Games. But there was a critical problem that limited the success of this as a branding exercise: all of these five apps were really quite different genres:

Slide28

  • Spot the Difference, a photo hunt puzzle game
  • Pig Rush, an infinite runner action game
  • Zombies and Mummies, a real-time strategy game
  • Flockwork, a quick-thinking puzzle game.
  • Monster Chorus, a kids’ music app.

Without the consistency between our apps, there was no guarantee that a player who had downloaded and enjoyed Pig Rush would also enjoy, say, Spot the Difference.

But build a brand that parents trust and you’ve got a really powerful tool for cross promotion, and for generating a recurring stream of revenue for you to develop your next concept.

E is for emotion

The best kids’ apps are apps that allow kids to experience varied emotions. There’s a tendency with many games to really focus on fun, which is understandable - after all, it’s a game. But look outside of games for a moment: if you read some children’s books or look at children’s television, you’ll see that the characters are not always happy. There are moments in these media where characters are lonely, scared, sad, or frustrated.

Slide30

To create an experience, which is more than an endless "sugar rush", we need those same emotions to come through in our games.

So any character you put into your app needs to be capable of expressing multiple emotions, even something as simple as the light bulb in Piiig Labs. We didn't want the lightbulb to feel like an inanimate object: we wanted him to have some personality. Sure, sometimes he's happy, but sometimes he’s sleepy; sometimes he’s cheeky.

Slide31

So that brings me on to my final letter, D. We have discussed Creativity, Understanding, Branding, and Emotion. But there's one more factor that separates the really successful games from the really unsuccessful games. And that's Dumb Luck.

D is for Dumb Luck.

Slide33

I’ve been attending the GDC conference in Shanghai every year for the last six years, and this is the first time I have given a talk.  For many years, I sat in the audience trying to understand: what really is it that separates me from the people who are standing on the stage? Why is it that all their games are successful, and mine are not?  They must have some sort of top-secret formula for understanding what makes a perfect game.

Slide34

Imagine you throw lots of darts at a dartboard. This is the app market.

Slide37

Look! The yellow one in the middle hit the bull’s-eye. What was special about that yellow dart? Actually - nothing, it's the same plastic dart as all the other darts.

When you only consider the winners, the successful people, the successful games, that's called Survivorship bias.

In World War II, there were many soldiers who flew fighter planes like this one.

Slide36

And it was a very, very dangerous profession.

Many of the people who set out in the planes would be shot down by enemy gunfire and never make it home. And so the General asked some scientists to have a look at the planes and try to find ways to protect the planes to make them safer. And so the scientists looked at the planes that returned back to the base, and they saw that a lot of gunfire (there were a lot of holes), a lot of damage on the wings of the plane, and so they were saying, well, it looks like it’s the wings that are taking a lot of damage. What we need to do is add some extra armor, some extra protection on those wings. But that would have been a mistake. Because then someone pointed out that the planes we’re looking at, the planes with the holes in the wings, these are the ones that survived; these are the planes that made it back home.  The planes that were hit with gunfire in a really critical place, crashed. They never made it back home. So if you look at the battle scars, that’s telling you where not to put the protection.

And people go on stage and say things that are completely wrong. I attended GDC five years ago, and I remember there was an executive from Zynga who was talking about social and mobile games.

So while you’re at GDC, listen to the inspiring stories that people up here on stage are telling you. But don’t think that there’s anything that special about the people. They’re just regular developers like you and I, who did all the right things and then hit it lucky and had a great hit.

Be inspired by the people on stage, but don't feel like you have to copy everything they do. And if you can create a game that kids love and parents love, and that really teaches kids amazing things then you have to be much less worried about this happening: and more about this….putting amazing ideas into the brains of children.

Slide39

Thank you very much.

ReignDesign attending GMIC Beijing 2014

gmic Matt is attending GMIC Beijing 2014 today and tomorrow, and guest-blogging for the GMIC Blog! GMIC is the major mobile internet conference in China, and this year's theme is "mobilising the next 5 billion".

You can read updates from the event on the GMIC blog or follow ReignDesign on Twitter for live updates and photos.

Building a WeChat (Weixin) robot

Matt presented a talk on Building a WeChat robot at Barcamp Shanghai Spring 2014! Here's a recap of the talk, as well as a link to download the source code of the robot.

If you'd like to skip the technical jargon and just play with the real bot, scan this QR code in WeChat and send our bot a message, or just search for "ReignDesign"!

Weixin Bot.006

Now, robots are cool, but building a real robot requires lots of hardware knowledge.

Weixin Bot.004

And one common topic you'll notice in today's talk is that I am quite lazy.

Weixin Bot.003

So when I say "robot" I'm talking about a robot you can build with software: a chatterbot. Send a message to a WeChat account, and get a message back.

Why WeChat? WeChat is ubiqituous in China, and so it's a great way of getting your service in front of as many people as possible, without them having to download another app.

Weixin Bot.005

Now you or I have personal WeChat accounts, but if we want to build a bot we need an official account. There are two types of these, Subscription Accounts and Service Accounts.

Weixin Bot.007

Subcription Accounts are best for marketing purposes. You have the ability to send up to 5 "broadcasts" each month to all your followers - perhaps if you are a restaurant, you want to announce some new specials. The downside of subscription accounts is they are hidden away in the WeChat interface inside the Subscription Accounts section.

Service Accounts are listed in the main WeChat friends list. You're only allowed to send one broadcast a month. But, any time someone sends you a message, you can reply to them immediately, and also send them messages for up to 48 hours. So, if you're trying to do customer service via WeChat, or build a bot, a Service Account is a great choice.

Here's the signup form for a WeChat official account (currently Chinese only).

Weixin Bot.008

You'll need to provide some basic information like name, email address, and which type of account you want. The two pieces of information that may require some effort are the 营业执照 (Company License) and 组织机构代码证 (Organization number). Right now you'll need to have a Chinese company license to apply for a WeChat official account.

After submitting all your data, be prepared to wait. It will take about 3 business days for your app to get approved.

Weixin Bot.009

One you're finally approved, you have access to the WeChat API. This comes in two flavours: basic API and advanced API. The basic API provides all that we need to build a basic chatterbot!

Weixin Bot.010

In the Developers section, you now need to provide a URL and Token. At the URL provided you now need to provide a simple web server. This will listen for requests from the WeChat server. So, for example every time someone sends you a message, you receive an HTTP request with the details of their message.

Weixin Bot.012

For our backend server we used a simple stack running on Heroku, with Node.js and Express, but you could use any language and framework, like Ruby on Rails, or PHP.

Weixin Bot.013

When you first register an application with WeChat they will send you an authorization request to your URL. This includes the token you provided earlier, plus various other OAuth credentials, and an parameter called "echo_str", which you should return if everything checks out OK.

As mentioned previously, I'm quite lazy, so to avoid having to figure out the authentication issues, I simply return the echo_str for ALL requests. This should not be recommended in a production application.

Weixin Bot.016

Now, each time you receive a message to your account, you'll get an HTTP request. You may be hoping for a nice JSON payload.

Weixin Bot.017

Unfortunately Tencent decided to use XML, and not very well structured XML at that.

Weixin Bot.018

Here's what a typical incoming message looks like.

Weixin Bot.019

You get a FromUserName and ToUserName. These are actually encrypted so you don't have access to the user's real WeChat ID. There's also a timestamp, the type of message (in this case text, but it could also be image, video or voice) and the text content.

To parse this in Node.js, we install an npm package called express-xml-bodyparser and configure Express to use it.

Weixin Bot.020

Next we implement a method to handle the request. We parse the values out of the XML...

Weixin Bot.021

Then we construct some XML to send back as a response. Notice that we've switched the to username and from username, to ensure the message gets sent back to the recipient. The text of our reply is "Thanks for sending me a message saying (original message)".

Weixin Bot.022

How does this work? Like this!

Weixin Bot.023

Now this is great, but of course version 1 of our robot is pretty stupid. How can we imbue our bot with some more intelligence?

To solve this I turned to the work of Joseph Weizenbaum.

Weixin Bot.024

He was a brilliant German-American computer scientist based at MIT. In 1966 he wrote a program called ELIZA. ELIZA was one of the first programs which tried to interpret and respond to natural language inputs from users.

It did this via some basic pattern matching. ELIZA could be fed with different scripts of patterns, and the most famous of these, called "DOCTOR", imitated a psychiatrist.

Weixin Bot.026

Here's ELIZA in action. You can see that ELIZA picks out certain words in a statement, and is able to formulate a reply using the words.

Weixin Bot.025

Now you're just talking nonsense!
> What makes you believe now I am just talking nonsense?

Weizenburg was surprised to discover that despite the primitiveness of the logic, users became quickly emotionally involved with interacting with ELIZA.

ELIZA is a fascinating episode in computing history, and I was delighted to see that the ELIZA logic is available as a npm module. That means integrating it into my bot was very simple.

First, install the module

Weixin Bot.027

Then, replace the reply logic with a new function.

Weixin Bot.028

Here's the code for replying. We keep a dictionary of ElizaBot objects. That way we can give each unique user who messages us their own instance. That means the message "memory" can be kept distinct.

If this is a new user, we set up a new ElizaBot for them, and request an initial phrase like "Please tell me your problem".

Weixin Bot.029

If this is an existing user, we simply call eliza.transform to get a suitable response, based on the last line of input (and previous inputs).

Weixin Bot.030

Let's see how this works:

Weixin Bot.031

There seems to be great potential for using ELIZA for people who are interested in app development services in Shanghai ;)

Weixin Bot.032

Of course, while this is a fun example, there's lots of cool stuff you could make with WeChat robots. A robot could return weather or air quality data on demand. If a user sends you a picture, you could do image processing on that picture and send them back something really creative. The only limit is your imagination!

Weixin Bot.034

To try out the ReignDesign bot, scan this QR code!

qrcode_for_gh_5108e39bfd75_1280

To download the source code, check out the project on GitHub

Interested in finding out more about what's possible with WeChat, mobile apps, or other new technologies like iBeacon? Contact us!