Rosetta Stone Mobile Projects

TOTALe Mobile Companion: our first iOS project, the Mobile Companion app is free to Rosetta Stone TOTALe subscribers. We worked with the TOTALe product team to simplify and reduce functionality to the bare essentials that would translate well to a mobile experience. For the iOS this app, we focussed on speaking, pronunciation and vocabulary development.

Once a lesson starts, the experience is driven forward by the user's voice; its even possible to go 'hands free'. This is in keeping with Rosetta Stone's philosophy of immersive learning.

Not visible in these static screen shots are the custom transitions and animations we specified for the product. These were prototyped in Flash, and previewed on the device using LiveView.

ReFLEX Companion for Android: ReFLEX Companion is an Android app that provides stories and reading activities to subscribers of Rosetta Stone ReFLEX.

Rosetta Stone ReFLEX

Smackerel recently finished a big project for Rosetta Stone, that we've been working on steadily for nearly 2 years. The product is called Rosetta Stone ReFLEX, and its currently available only in Japan and Korea, so we'd like to share a few screens with you here. Rosetta Stone ReFLEX is a new language learning product, made for developing advanced conversational English skills.

We started working on ReFLEX back in August of 2010, when we met with ‘Labs’, Rosetta Stone’s internal R&D team, to learn about some rough ideas they had for a new product. The product would be for learners who have some English, but lack the confidence and spontaneity to speak it in the real world.

The Labs team aimed to build the learners' confidence by exposing them, repeatedly, to conversation scenarios. In each training session, the learner rehearses a conversation with the computer, then s/he performs a similar scenario with a live language coach.

From earliest stages, we visualized ideas with the Labs team, gradually turning their pedagogical philosophy into a design language.

As we continued to refine the product, the interface began to disappear. We realized that, at certain points in the product, graphic interface is unnecessary. Below, the learner experiences a completely voice-driven interface; the conversation progresses as they speak.

Later, when Labs turned the product over to Rosetta Stone’s internal development team, we stayed with the project, smoothing the transition from exploration to development. The emphasis was now on developing a viable prototype, to test to core pedagogical ideas, and assess the strengths and weaknesses of the product. The alpha went live in September 2011, and for the next 10 months the roadmap has been informed by user feedback. One notable addition was the ‘report card’ features, allowing users to track their progress, and identify areas to work on.

From one thing to the next

We enjoyed the article Mission Transition, in which Mark Cossey explores and illustrates the role of transitions in user experience design. One example shows iOS transitions in slow motion revealing subtle choices that are simple but not obvious.

In the pre-web early 90s we were very focused on creating short simple transitions that helped users move from one state to the next, maybe even with a smile. We had a VHS tape of SIGCHI demos exploring the role of animation in user interface.

From that tape we pieced together the following truthy guideline:  "It takes the brain about a second to move from one state to the next. Any animation that takes about a second and helps the user understand the relationship between the new state and the previous state creates greater user confidence and satisfaction. Any animation that takes much longer is wasting the user's time."

—

The web shifted the focus of interactive media design away from niceties like animated transitions to clearly designed pages and navigation schemes. The browser handled transitions completely. Initial interaction with hypertext was snappy but once you clicked the web browser would serve up a big blank page and a wait, sometimes long enough to forget what the previous page looked like.

For a while nifty transitions got a bad name because people mostly only saw them in Flash apps that boasted little else.

Modern web and mobile apps, along with speedy processors, have put transitions back into designer hands. It's great to see designers thinking about them in detail. 

We do keep in mind that transitions that are nice on a small screen can be unsettling on a large screen. It took me a while to get used to some of the full screen transitions in OS X Lion. As it turns out I was not the only one to experience motion sickness with the new UI.

Productivity and the 40-hour work week

Great article in Salon (via boingboing) about the damage done to productivity when teams are over-worked and over-tired. Many of the studies cited apply specifically to knowledge workers.

The Business Roundtable study found that after just eight 60-hour weeks, the fall-off in productivity is so marked that the average team would have actually gotten just as much done and been better off if they’d just stuck to a 40-hour week all along. And at 70- or 80-hour weeks, the fall-off happens even faster: at 80 hours, the break-even point is reached in just three weeks.

... The other thing about knowledge workers is that they’re exquisitely sensitive to even minor sleep loss. Research by the US military has shown that losing just one hour of sleep per night for a week will cause a level of cognitive degradation equivalent to a .10 blood alcohol level. Worse: most people who’ve fallen into this state typically have no idea of just how impaired they are. It’s only when you look at the dramatically lower quality of their output that it shows up.

Bring back the 40-hour work week

Smackerel's second meet-up

Smackerel had its second meet-up last night. Friends, collaborators, and clients dropped by for some beer, wine, cheese and conversation. We're going to make this a regular thing, so don't feel bad if you couldn't make it last night. Going forward, we'll be having people over on the last Thursday of every month. Hope to see you February 23!

Smackerel opens brand new headquarters

Thursday December 1 was the soft launch of the brand new Smackerel HQ. A few folks came by our new collaboration space in Kensington Market at 250 Augusta.

At Smackerel we believe that there's more to being social than just social media.

PS We have a new web site coming soon.

Remembering You Don’t Know Jack

In the CD-ROM era there were a few brilliant titles that we referred to often for inspiration and illustration. The lush worlds of Myst (Cyan, 1994) and Puppet Motel (Voyager, 1994) relied on beautiful graphics. Sound was integral to the experiences, but the visuals came first.

When Jellyvision’s You Don't Know Jack came out the next year our minds were a little bit blown. You Don't Know Jack is an irreverent trivia game that makes you feel like you are part of a taping of a live game show. The simple type heavy graphics were smart and snappy, tailored to the limitations of the early pcs. The bigger revelation was how immersive sound, story and great writing can be. Much of YDKJ works with your eyes closed. To people who grew up with radio drama this would seem obvious, and we assumed some of those people were on the Jellyvision team.

For the next few years, when speaking to students at Sheridan College or OCAD, I would take along YDKJ and make the following proclamation: “Three of you are going to play this computer game and the rest are going to watch. And you will all be entertained.” In a post Guitar Hero big screen world it’s common to gather and watch people play games, but in the 1990s this was a great demonstration.

After a short game of YDKJ a room would be full of energy and we’d talk about what makes great interactive digital media.

Over the years Jellyvision has kept the game alive on the web, and has adapted its multiple-choice-made-fun approach to training applications. There was even an effort to make it into a real TV show. This January they are launching a new version for all the various game platforms, getting it into the family game room where it belongs.

(The link for Puppet Motel above links to a pretty good and short video demonstrating and describing features of the original CD-ROM experience, created by Laurie Anderson and artist-programmer Hsin-Chien Huang. There are no better descriptions online and not even a Wikipedia stub. It’s hard to guess how many, if any, Puppet Motel discs are anywhere near a computer that will run the software. More on this later.)

The latest and greatest Rosetta Stone release

Smackerel is excited because Rosetta Stone TOTALe version 4 just launched and the world can see some of what has been keeping us very busy this year. And learn a language along the way...

Smackerel designed the user experience of Rosetta Stone TOTALe, in collaboration with our awesome clients at Rosetta Stone. The latest and greatest release, available in 24 languages, combines all the best aspects of the standalone CD-ROM and online editions into one complete package, with many upgraded features and all-new activities. Self-paced immersion based learning is supported with interactive coached sessions with native speakers, as well as language learning games and activities designed to get you talking.



Smackerel has been providing user experience leadership to the Rosetta Stone team for four years, helping create the overall look and feel of multiple generations of their award-winning language learning software. We’re proud of our work with Rosetta Stone, helping shape the skilled efforts of hundreds of people into a great learning experience. Our efforts are a tribute to all of them.

Congrats to the whole team on this huge release!

Please visit RosettaStone.com and try an interactive demo of the course. We’ll be posting more extensive case studies of our work with Rosetta Stone this fall.

Express yourself by changing the world

This weekend I learned of a game called Minecraft. The first I saw was a YouTube video being discussed at Metafilter.

In the video a game player is showing off the house he has built out of giant 3d pixel cubes of a virtual world. As he shows how to use flint to make fire, the fire unexpectedly spreads. He turns to his pool and grabs giant blocks of water to throw on the fire. This effort fails and he flees the burning house.



From the discussion I learned that Minecraft is a multiplayer creative sandbox game where players can mine all kinds of materials and make many different useful things. Oh, and there is a day/night cycle. Night brings monsters. Hopefully you planned for this during the day.

What I also learned from the discussion was that people love this game.
It’s been gaining increasing exposure and fans. For the last few months over a thousand people have been buying the game every day, and in the last weeks it has been five times that (stats). This weekend many, including me, got to try it out for free, and the word is spreading. (As of now you still can at the Minecraft site.)

At first a game of Minecraft seems like an early 3D shooter, but it’s just using a visual language we understand already. This isn’t a premade maze of surfaces with texture maps, it’s a world of building blocks and physics. Every giant 3D pixel – I feel pretentious using the word ‘voxel’ – is an object with properties and rules.

The enthusiasm for this game makes Smackerel smile. Years of graphics improvements in 3D shooters didn’t really make them much more fun. (Marathon is still our fave.) Graphically, Minecraft is barely Castle Wolfenstein, but the world is endlessly interactive.

The simplicity of the graphics makes this different from virtual worlds like Second Life. Your avatar is too low res to really matter; you express yourself by changing the world.

For examples of the creative possibilities check these YouTube videos of rollercoasters made in Minecraft.

Android 'App Inventor' based on Scratch

Have you heard of Scratch? Its a point and click programming environment for kids developed by the Lifelong Kindergarten Group at the MIT Media Lab. Now Google has basically adopted 'Scratch' as its new Android DYI app maker. Its got a more grown up look, and its called AppInventor, but as far as I can tell its the same thing as Scratch.
Which basically means that first movers on the AppInventor wave are 10 or 11 years old today.

Here's an column on 'Seeking Alpha' about Google's App Inventor. Follow the link for more screen shots.

Tom Wujec speaks at TED

I just saw this video of Tom Wujec speaking at the TED conference in 2009. In the video, Tom delivers a very entertaining lateral-thinking parable. Different teams are given the task of building a tower out of sticks of spaghetti. Apparently, young kids are 3 times better at this task than business school grads.
via Boingboing



We worked with Tom a long time ago, and its great to see him doing well. Back when beveled edges where cool, Tom Wujec ran the Interactive department at the Royal Ontario Museum. In 1993 he hired Mackerel to collaborate on 'Light and Gemstones', a touch screen exhibit for the ROM's Gem gallery (pictured below). It ran for more than a dozen years, and was finally taken off display when the museum was renovated.

Good news / bad news

The good news is smackerel has been really busy this winter, (though we're always available to talk about your future projects.)

The bad news is, our own website needs a major spring cleaning. We promise to give it some loving attention as soon as we've hit some big deadlines in March.

Blackberry wireframe stencils

As mentioned here a few weeks ago, Blackberry lacks a community of designers such as the iPhone has — people who freely share their assets and make their entire community more efficient. I made these wireframe elements in September, while working on a series of Blackberry apps. At that time I found nothing useful to help me get started; having created this work from scratch, I resolved to share what I could, in the hopes of making your process a bit less painful. I finally got around to cleaning up these stencils and making them ready to share this morning. Let me know what you think.
Thanks Sal Taglib for converting my OminGraffle stencils into Visio.
Blackberry Wireframe stencils, Visio
Blackberry Wireframe stencils, OmniGraffle
If there are any obvious issues, let me know right away, and I will see if its something I can address.


Blackberry wireframe stencils by David Groff is licensed under a Creative Commons Attribution-Share Alike 2.5 Canada License.

Mark Sigal on Android

If you have the budget to develop for two mobile platforms, its iPhone and what? Clients say 'Blackberry', because every exec is issued one on their first day. Their consultants say 'Android' because of charts like this one, that show only two platforms are gaining audience.

On the O'Reilly blog, Marc Sigal took a good hard look at Android, and wrote this 1800 word essay on what's good (carrier agnosticism) and what's missing (built-in media player like iTunes). Definitely worth a close read.

Blackberry versus iPhone

Last summer, iPhone’s App Store had over 50,000 apps; Blackberry’s App World had just 2000. Today, there may be 100,000 apps for iPhone. What's behind this dominance? Are iPhones that much better?

Recently, smackerel was working on a series of mobile apps for both Blackberry and iPhone. Designing for both platforms, side by side, gave us some perspective on the 25:1 preference for Apple’s platform.

We saw that Apple is much better at nurturing a designer/developer ecosystem. Blackberry is reasonably supportive of their developer community, but they seem to have little understanding of designers. Yet designers come before developers in the product cycle, and more designers would presumably put more apps in the pipeline. RIM needs to support both developers and designers, for the sake of the quality and quantity of the app design on their platform.

WHY DO DESIGNERS LOVE iPHONE AND NOT BLACKBERRY? — Lets get the obvious out of the way: the iPhone is the richer platform. Esthetically, its still breath-taking, more than 2 years after its initial release. This is important, but does it account for 25:1 advantage in apps? I don't think so. Historically, creators have had no trouble embracing the lower fidelity medium -- think video vs film for example. Because video was more accessible, creators didn't mind lower fidelity. The trouble for RIM is that Apple has made the iPhone more accessible to designers. Much more.

GETTING STARTED — Its easy to get started designing iPhone apps. There are dozens, perhaps hundreds, of ready-made design templates and stencils for Visio, OmniGraffle, Photoshop, Fireworks, Balsamiq, etc. These templates act as training wheels for designers working on their first app. They shave weeks off of your learning curve, and get you started directly visualizing your app, instead of fussing with questions about standard UI elements.
I have searched, and found exactly zero ready-made templates for Blackberry. Obviously these assets exist, but no one is sharing them. Designers working on Blackberry apps, apparently don't see themselves as part of an community the way iPhone designers do.

DOCUMENTATION — Perhaps the iPhone has a community of designers because Apple takes the trouble to speak to them in there own language. Their UI documentation, 'iPhone Human Interface Guidelines' , is no mere catalogue of UI elements and behaviours. Its all about creative inspiration. The first chapter is all about how decide what 'style of app' you feel like making today: "If you have a subject you’d like to explore, think about the objects and tasks related to it. Imagine the different perceptions people have of that subject. For example, consider the subject of baseball. Baseball brings to mind, among other things, teams, games, statistics, history, and players. Baseball is probably too extensive a subject for a single application, so consider just the players. Now imagine how you might create an application that relates to players—for example, using their likenesses on baseball cards."

Blackberry's UI Guidelines are very different. It begins, "Applications designed for BlackBerry® devices should provide a balance between the best possible user experience and a long battery life." The document is written for the engineering department. Designers don't appear to exist in RIM's app development universe.

DRINKING THE KOOL-AID — Designers love Kool-aid; they love aligning their work with a broader mission. The iPhone stands for something: they're changing the world by bringing the richest touch-and-gesture-based interactivity to a smart phone. Its the kind of mission that designers can get excited about.

I used the know what the Blackberry stood for: they were the corporate smart phone that does practical things really well. Its not as stirring, but its a mission. I can get behind designing practical tools to help practical people do their jobs. But now the water is muddied. RIM says they want Blackberry to be a consumer platform, and their new models like the Pearl and Storm don't do practical things like text input very well at all. I don't know what the Blackberry stands for anymore.

WHAT DOES RIM HAVE TO DO? — Lots of things; but from a designer's perspective, we can see half a dozen good moves they can make: Reach out to designers, and communicate a coherent mission to them. Bake that mission into your UI documentation. Taylor those documents for designers, by structuring the document to support the questions, tasks, processes that are common to designers. More pictures wouldn't hurt either. Make it easier to get started by providing UI templates in Visio, Omnigraffle, and any other tool you can think of. And finally, make it easier for designers to prototype basic interaction, on the device, without having to code in Java. Sounds like a lot of work, but they could knock off everything but the prototyping environment in about 2 months, and it would make a big difference.

Rosettastone.com wins design award

Congratulations from smackerel, to our client Rosetta Stone, and their marketing agency HZDG. From over 1,400 entries, the Rosetta Stone website won Best Web Design (Non-Flash) in the semi-annual American Design Awards. We're thrilled to have a firm like HZDG helping to tell our client's story! Visit www.americandesignawards.com to learn more about this honour.