Rosetta Stone HTML5 Mobile Demo

Rosetta Stone's web traffic has been increasingly shifting towards mobile devices; unfortunately, their demo experience uses Flash technology extensively-- something not available for most mobile users. It was time to build an HTML 5 demo from the ground up; not only to reach mobile users, but also to optimize how to communicate Rosetta Stone's proven methodology more effectively.

MY ROLE

As the senior interactive designer who specialized on all mobile-related projects, I helped craft the new HTML 5 demo experience
making sure that the integrity of usability and best practices are intact throughout the demo experience.

Cross-referencing amongst the different personas that our UX Research and Agency partners have determined, we made sure that the entire experience would serve our different learner profiles: The world traveler, the ambitious professional, and the family-oriented learner.

WHAT NEEDS TO BE SOLVED

Rosetta Stone was relying on old technology and old messaging that didn’t address the shifting landscape like traffic sources and unclear methodology 


  • Traffic was shifting towards predominantly mobile and the only Rosetta Stone demo was stuck in using too much Adobe Flash technology


  • Over reliance on the old marketing phrase “Learn a new language, like you learned your fist” but more and more prospective learners are still in the dark as to how it actually works.

The old Rosetta Stone Desktop Demo

CONSTRAINTS

Not all aspects of the Rosetta Stone language learning methodology, especially some of it’s most impressive elements (like speech recognition) can be showcased through the HTML 5 Demo due to technical limitations but they are still crucial parts in the language learning method.

HOW DO WE DEFINE SUCCESS?

  • Demystify the language learning methodology of Rosetta Stone and why it is gold standard


  • Improve lead collection through e-mail sign up

  • More free trial sign ups

PROCESS - HOW WE DID IT

The entire project took about the entire second quarter

mobiledemo_sketches.jpg

SOLUTIONS - TACKLING THE PROBLEM

Solution:
Entire demo experience needs to be in HTML 5 utilizing CSS and Javascript for motion/animation


Impact:
Considerably more prospective language learners were able to access a Rosetta Stone demo since they could do it right there and then on their mobile phones instead of needing to remember to follow up on their desktop computers




Solution:
Use a very simple yet clear explanation and example of how the methodology works and how everything builds from the earlier lessons (interactive part)

Impact: 
Demystified the Rosetta Stone methodology and clearly demonstrate what we mean by “learning a new language like you did your first”.

Solution:
Optional voiceover audio that can be turned on and off by the user

Impact:
Assisted in having the user understand the learning methodology compared to them just purely reading through an albeit optimized copy.


Solution:
For RS features that we can't demo interactively, make sure we make room to clearly explain how they work and help with language learning (TruAccent and Tutors). Offer an optional opportunity for them to sign up for a free trial so that they could experience the product and all of its features.

Impact:
Drove significantly more free trial sign ups compared to landing pages that just asked for customer information cold, before delivering any sort value.

CHALLENGES - NOT EVERYTHING GOES AS PLANNED

  • Fine tuning web animation via CSS/JS was very challenging and more time consuming that originally estimated


  • Compounding the web animation challenges was the requirement to have the motion sync with the the voice over audio narration


  • Jumping back and forth between sections proved to introduce a lot of unexpected bugs

THE NUMBERS - ANALYTICS