This website is now archived. To find out what BERG did next, go to www.bergcloud.com.

Blog posts tagged as 'kendrick'

The Michel Thomas iPhone app: behind the scenes

Project Kendrick is in the world! As Matt Webb mentioned before, it’s a new iPhone app for language learning we produced with our friends at Hodder Education, and is the latest addition to a best-selling range of language learning products called the Michel Thomas Method.

Michel Thomas was a celebrity linguist with an amazing life story. Escaping from concentration camps during the Second World War; tortured by the Gestapo; teacher of celebrities such as Doris Day, Woody Allen and Barbara Streisand — it even says his “last known identity” was that of Michel Thomas. Awesome. What a brief to work with. I’ll come back to him in a sec. Here’s a little clip of the finished app in action:

The mighty Nick Ludlam and I brewed it up together, with direction, input and advice from the rest of the BERG crew. And I’d like to tell you a little about the behind-the-scenes stuff — the craft of making and thinking — that went into it.

Kick-off

Nick and I began the main building work late last year. As you can imagine, we had a brilliant brief to work with. Schulze, Webb and Jones presented us with a huge swathe of thinking. The big-picture strategic vision; the sites, situations and contexts these apps could find themselves in (“can we make this as useful for 30 seconds on the bus as it would be for 30 minutes of concentrated listening at home?”); even little napkin sketches of UI details. All gourmet brainfood. Now all we had to do was get it into the world.

The Learning Room: beautiful, ambient, immersive

One of the first things that struck us (and probably you, if you’ve ever tried one of the CD box sets) was Michel Thomas’ voice. It’s utterly captivating, and can feel quite hypnotic at times. Have a listen again, without the visuals:

Immediately, we all agreed that whatever user interface we came up with would have to complement — even celebrate — this listening and learning experience without getting in the way. The idea of a ‘Learning Room’ quickly emerged — somewhere ambient, immersive, and hypnotic, where you could concentrate for substantial lengths of time without getting bored or distracted. And of course it would have to be a pleasure to use. Matt Jones came up with a cracker of a challenge by asking us to “Make The Best Pause Button In The World.” Brilliant.

Here, I was doing some drawing while listening to Michel Thomas’ voice for the very first time. Looking back, this one pretty much laid the foundations for the next few months’ work.

Michel Thomas iPhone app - early sketching

Look at the notes. KITT from Knight Rider immediately came to mind. A talking play/pause button. Products as People, I guess. And it’s interesting that those little geometric doodles started to happen straight away as well. I imagine there’s a really primal link between hearing sound and seeing patterns, and this was probably something I hoped we would touch on later.

Immediately after the first drawing, I put together a little animated sketch of how the Best Pause Button In The World might work.

The main goal here was for me to do just enough to describe the idea, so that Nick could take it and iterate it in code. He’d then show me what he’d built; I’d do drawings or further animations on top of it, and so on and so on. It’s a fantastic way of working. Before long, you start finishing each others’ sentences. Both of us were able to forget about distinguishing between design and code, and just get on with thinking through making together. It’s brilliant when that happens.

Then we tried this. A kind of pastoral landscape with a floating, talking pause button. And speech bubbles. Too much.

Michel Thomas iPhone app - early sketching

And then an idea about using generated bokeh effects and imperceptible zoom effect that never reaches a climax. Too strange.

Here, we were exploring how to use animation and interactivity in a small portion of the screen (to save precious processing power), and make it seem to be operating in a bigger space than it actually was.

Michel Thomas iPhone app - Learning Room sketching

Originally, we wanted to use a pond-like rippling effect (that one below on the left), but it turns out drawing transparent, overlapping filled circles, as well as streaming audio and animating the pause button, took too much juice. The little blue flower at bottom right was the first step toward the final design.

Michel Thomas iPhone app - Learning Room sketching

Here we developed the little blue flower, adding texture and depth to give it a bit of tactility.

Michel Thomas iPhone app - Learning Room sketching

And here’s how you draw a procedural petal.

Michel Thomas iPhone app - Learning Room sketching - petal math

The pause state was really important to get right too. Here you can see us getting a bit too Bang & Olufsen before dialling it back to something more approachable, shiny and Apple-y.

Michel Thomas iPhone app - Learning Room sketching

Michel Thomas iPhone app - Learning Room development

And of course this is where we ended up:

Materials and tuning

Every so often we’d catch ourselves talking solemnly and straight-faced about some detail involved in building the Learning Room. Then we’d take a step back. “Dude. It’s a talking flower. How the hell did we end up here?” Looking back, there’s no real process or rationale I could outline. It’s a product of many things — our personalities, references to things we like; doodling; tinkering; sketching; prototyping and so on. But, overall, it was born from the material itself.

How much CPU did we have left after streaming audio and making the pause button animate in response to Michel Thomas voice? Not much, it turns out. We spent a lunch hour thinking and drawing, came up with thirty-odd ideas, tried a few of them out, and the flower ended up sticking around, for a few reasons: Nick could draw it procedurally in code; animate it efficiently at a decent frame rate; the symmetrical, primal pattern looked striking; the visuals adapt to different languages; the flower scales down to icon size nicely, and most of all, using it feels completely unique, yet strangely appropriate. Our friends from Hodder were closely involved right the way through, and ultimately, it was their faith in this design-led approach that allowed us to get these ideas into the world and into your hand.

Overall, I’d say the whole UI — from the Learning Room, to the Store, to the Flashcards — went through five or six complete iterations before we settled on something that felt simple and smooth enough for a release. Then, we tuned, tuned and tuned. Matt Jones has talked about Disney’s idea of plussing before, and again I don’t think it’s possible to describe it as a discrete thing. It just seems to happen when you really get a feel for the material (or rather immaterial) you’re working with. You develop a laser-like focus on ‘rightness’, and devote yourself to getting rid of anything that doesn’t make the experience as delightful as possible.

It’s been a brilliant product to work on, and hopefully it’ll help more people discover the strange, hypnotic magic of the Michel Thomas Method. Why not give it a try? – we’d love to know what you think of it.

Say hello to Michel Thomas. Or bonjour, ciao, ¡hola…

When the Michel Thomas Method language course CDs arrived at the studio, we played them on the stereo immediately. But the post was late so it arrived only the day before we were due to speak with the publishers. We tore up all our ideas and started again.

Michel Thomas teaches with no homework and no repetition. Listening to him, it’s a little like being in a classroom with other students and a little like being hypnotised.

You don’t learn, you flow.

As a design studio, we knew we had to carry the same experience onto the phone, using just the regular audio and a decent respect for the philosophy.

We designed and produced the brand new iPhone app. Check it out in the App Store: Learn a Language with Michel Thomas.

You can learn French, Spanish, Italian and German. It’s free to get the app (you get a preview of each language), and then you buy hour-by-hour as you improve.

In the flesh, the screen on the right is animated. It draws you in as you listen to the voice.

Do a pulsating pause button and tactile flower petals have a place in an audio language course app? Yes. (You have to hear Michel to understand why. I’m not kidding.)

Because mobile phones are, well, mobile, you might want to keep that learning flow going while you’re on the bus. So there’s a flashcard game. You can play one of dozens of preset decks, or make your own from favourite phrases.

This one is from the Spanish course.

There’s also the shop. I like that the “pay as you learn” store is in the exact same place as where you thumb through the course contents. I think we went through 4 iterations until it felt this smooth.

Product invention?

Between this, Popular Science+, and Schooloscope, you can see a little of our philosophy about product invention.

Work in the popular market, and be inventive, beautiful.

Respect the materials. I believe with Michel Thomas we’ve taken what’s best about the experience and made a hybrid with what’s best about the iPhone. We’re best when we partner with people who are just working out what they want to do, and we can discover together.

But what I’m proudest about is that this is a design-led product in a commercial marketplace. This isn’t just for Michel Thomas fans (though there are many). By bringing the feeling of Michel to the iPhone, his courses can find a whole new audience, and a whole load more fans.

Michel Thomas is available for your iPhone and iPod Touch now, at the App Store: Learn a Language with Michel Thomas.

See the official site for more pics and videos.

Congratulations to the team, Matt Brown, Nick Ludlam, and Matt Jones! Thanks also to Guy Moorhouse for the microsite. And, especially, thanks to Vivian and Helen and the whole Hodder team. It has been a pleasure.

A flower is a thing that flows

I wanted to show you one of Matt Brown’s super pretty icons for the project codenamed Kendrick, which he and Nick Ludlam have been magicking up. Kendrick is for learning German.

(Or Spanish, or Italian, or French…)

It’s almost cooked!

Recent Posts

Popular Tags