Part 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!
















