Smart.fm: Crafting a Visual Language
by AlexaPart of the Smart.fm iPhone App Story
What if memorizing facts on your mobile device were as easy as listening to your iPod shuffle? It doesn’t demand dedicated attention, you don’t have to worry about what’s up next, and you can tune in and out at any time.
After a day of wearing our mobile hats, we knew this was the kind of experience we wanted to create. Unlike the existing, web-based learning apps, in which you study in 5 to 10 item sessions that have a clear start and end, we want learning on the iPhone to feel continuous. Like radio waves or your iPod shuffle, your learning stream is always playing. You can tune in and answer a question or two while waiting in line, then tune in later and answer a few more. The next-up items are continually downloaded, and there are natural break points between every screen.
But even in a world where learning is journey and not a destination, people still need a sense of progression and achievement.
So as we set out to develop a visual language system for the smart.fm iPhone app, our main question became: How can we communicate progress in an continual learning environment? The flash of insight came when Dan H. likened it to the game experience of Oregon Trail.
While achieving the larger goal of reaching Oregon Trail takes a long time (just like mastering your first 200 Japanese words), Oregon Trail holds your interest by introducing milestones along the way. While you might track your progress towards Oregon in the corner of your eye, you’re generally focused on how far it is til the next milestone.
More complex than Oregon Trail, Smart.fm tracks your learning progress at many levels. In addition to showing your progress towards these milestones, the visual language needed to communicate:
- Item progress (how well you know a fact, from 0 to 100%)
- Goal progress (items you’ve mastered vs. the total number of items needed to achieve a goal)
- The two-part nature of items (like flashcards, they’re composed of a cue and response)
- Your study record (how many items you’ve gotten right or wrong today)
- Milestones (where you’re at now and how far til the next milestone)
Rather than using typical progress meters to communicate these concepts, I set out to develop a coherent visual system that could hold it all together. Thanks to Dane’s Your World concept and Happy Hour conversations with the smart.fm guys, where we chattered about virtual pets and knowledge gardens, I found the answer in a favorite metaphor of mine: The leaf.
I have always loved leaf-themed visualizations. Leaves emerge, mature then fade away if you don’t tend to them — qualities shared by all kinds of personal information, from To Do items, to friendships… to facts you want to memorize!
Through personal explorations and open design sessions — where anyone from Adaptive Path was welcome to sit and sketch with us for an hour including our brilliant “non-practitioners” — we were able to map these qualities to the visual language needs of the smart.fm iPhone app. Here are some visual wireframes showing how it’s coming together:
Item progress is represented by a leaf’s “ripeness” — the more you study an item, the greener it becomes. Once you’ve mastered an item by reaching 100%, the leaf becomes a flower. Throughout the system, green leaves represent items you’ve studied and flowers represent items you’ve mastered.
Goal progress is a visual aggregate of item progress represented by color bars showing items mastered and items studied as a fraction of the total number of items associated with a goal. (By the way, Goals are the new Lists! In the website redesign we worked on with smart.fm, we’re introducing Goals as a new way or organizing learning material around shared motivations rather than topics. More on that soon!)
The two-part nature of items is communicated through the asymmetry of the stylized leaf-shape. The leaf and flower shapes are designed to work both as content-containers and icons. (By the way, this item creation screen also hints at some exciting social features we’re exploring!)
Your study record in the “Now Learning” world is tracked using an Owl and a Beanstalk: For every question you answer, the owl “moves up the beanstalk” leaving behind a green leaf (if you got the question right), a flower (if getting the question right meant you mastered that item), or a bare twig (if you got the item wrong).
Milestones appear every 10 items and give you something to aim for throughout the continual learning experience. Represented by golden eggs, these milestones break open to reveal a progress report, and, if you’ve hit a significant milestone — such as mastering 100, 250, or 500 items — the golden egg might contain an prize! These prizes could be collectible “colorforms” that appear in your little world and provide an ambient visualization of your overall progress in smart.fm.
We are all incredibly excited about this visual system and are already buzzing with ideas about how to take it further in the future (What if the seasons changed every so many items? What if you could arrange your colorforms by dragging them around? Can we still have scratch off answers?).
We’d love to hear your feedback and ideas, and we can’t wait til you can participate in this friendly, social world of learning via iPhone!
Entries (RSS)
June 29th, 2009 at 10:05 pm
Hi Alexa,
Interesting post – fascinating to hear about the thought and considerations that go into designing the app’s visual environment. One thing I would be interested to know is to what extent the app will require a data connection to function. Obviously, some measure of offline functionality would make it far more useful to ipod touch users and iphone users in out-of-coverage areas or on airplanes. Will the app be able to cache items for future learning, and store study data for synchronisation the next time a data connection is available?
June 29th, 2009 at 10:25 pm
We are definitely planning for offline usage! It’s an important theme that emerged from our mobile workshop (especially as Dan and I were wandering around Japan with offline iPhones). We are planning to cache items and study data as much as possible. There are some challenges involved in keeping your online and offline study data in sync, but it is certainly the experience we are thinking about and aiming for.
June 30th, 2009 at 4:13 am
You guys need to reset your goalposts. 200 words is NOT a long term goal. The goal is to learn enough vocab to speak a language, 5000 words at least (and 50,000 would be better). 200 words is only the first milestone along the way.
June 30th, 2009 at 4:27 am
Certainly! But if you didn’t get any feedback or acknowledgment until you reached 5000 words, it could get a little discouraging.
The milestones I listed are examples and the first along the way.
June 30th, 2009 at 4:42 am
“What if the seasons changed every so many items?” I don’t think that would work for me. I see change in seasons as reflective of passage of time not as a measure of progress. In order to see something as an illustration of progress I usually need to know both the goal and the road there.
With your flower metaphor I could imagine that my end goal would be a garden full of different flowers and the road there would mean filling up the different flower beds that needs to be planted. Then a new variety of flower could show that I had progressed to a new part of the garden.
Or if I stick with your Oregon trail metaphor I would figure out what different types of fauna I would encounter along the trail and at certain milestones the type of flower would change accordingly.
June 30th, 2009 at 6:06 am
one of my biggest worries about this program is that will you have to be connected to the internet all the time to use it… AT&T has horrible service in my area so i am using a iPod Touch now… I hope that you will be able to download and save your lists in one section and then you would be able to upload them the next time you are near a wifi point… as a person who has already completed over 5000 items on smart.fm this is really important to me…
July 1st, 2009 at 2:09 pm
I love the idea of leaves, flowers, and bare twigs on the beanstalk. Nice! The owl on the beanstalk baffles me, though. Owls in real life tend to avoid beanstalks and gravitate towards hefty tree branches.
October 29th, 2009 at 1:57 pm
[...] has numerous goals with many items. They select a goal and begin studying it with the learning game Alexa described earlier. If a user leaves the game, either by returning to browse goals or by quitting the app then their [...]