Adaptive Path Blog

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!

Part of the Smart.fm iPhone App Story
By our talented summer associate Dane Petersen

The smart.fm website offers a number of fun learning games that help you master all sorts of world knowledge, from Japanese to French to European birds. Like a sophisticated stack of flash cards, the games learn and adapt to your performance, and constantly tune themselves to providing you with the optimal learning environment. As you progress through the stack, items that you have obviously mastered will automatically appear less frequently than items that you are still trying to learn.

The flash card analogy works well for describing the functionality of the smart.fm learning games, but it provides an impoverished account of their more experiential qualities. In particular, BrainSpeed’s pulsing icons, flapping wings and exploding pufferfish all work together to create a gaming environment that feels face-paced and zany. In designing the look and feel of the learning game portion of the smart.fm iPhone app, we knew we had to create something that would be more engaging than a stack of index cards.

When working on the experience design project for smart.fm, one of our guiding design principles was that the new website would be a fun and open space that invites play. Bringing this concept to the iPhone, we wanted to make the mobile learning game lightweight and playful, easy to start and easy to put away, while still delighting users with fun interactions. People would likely find themselves playing the game during those odd dull minutes of the day, perhaps while waiting for the bus, and we wanted to make sure that these short bursts of play offered a rewarding experience.

In reflecting on these goals, we generated numerous sketches and ideas for ways we could represent the timed, multiple-choice nature of the mobile learning game in a richly experiential manner. We explored metaphors for different ways to show questions and answers, represent time running out, and communicate the user’s progress towards learning an item. We considered the materiality of the game-space, and imagined ways to introduce tangibility through unique interactions. In this video I present a brief walk through my sketchbook, and talk about these explorations:

I took the results of these exploration sessions into a bit more detail, generating a number of sketches that depict potential design directions for the learning game. “Sore” is the Japanese word for “that, that one,” and I oriented this series of sketches around a screen where the user is trying to learn this word, and select its correct response from a series of choices. I talk more about these sketches in the following video:

We thought about an “Advent Calendar” approach, where the user would swipe to open paper doors on multiple-choice items to select their desired response. We also considered a “Scratch-Off” concept, inspired by lottery tickets and scratch-and-sniff stickers, where the user would use their finger to scratch off a response.

Going further afield, we mined the Pogs fad of the 1990s, and cooked up a direction that would involve throwing a “slammer” at an anthropomorphized stack of Pogs in order to select a response. Our interest in Pogs came from a desire to give the user some sort of token as a tangible reward for a correct response. We distilled this concept down into another approach, with Pogs that represent possible responses scattered across a hardwood table. The user would grab the correct response Pog and drag it into a drawer, where they were collecting all of their correct responses.

Finally, we explored a rich metaphor with the natural world, considering a concept where people would interact with a button-based game overlaid on a landscape. As the user answered questions correctly, this world would fill up with small items representing their responses. These items might start as autumn leaves, for example, but as the user answered more questions correctly the world would progress through the seasons, switching to snowflakes, flowers or fireflies. Instead of a conventional timer, the countdown for each individual question would be represented by a rising and setting sun… you’ve run out of time when the moon and stars come out, and another day has passed in your world!

Exploring all possible design directions in these highly generative sessions is an important part of our design process. By keeping the fidelity low and at the sketch level, we are able to entertain a massive number of ideas while still producing a tangible artifact that we can share with other members of the project.

Our pal Jeffrey Veen just posted a talk he gave at this year’s Web 2.0 Expo. Those who attended UX Week 2008 got to see a version of that talk seven months earlier (and you can see it here).

Given the coverage that Jeff’s talk is getting, I thought you might be interested in a couple other talks from UX Week 2008 that look at interface and interaction innovations. The first comes from Michal Migurski at Stamen, discussing their approach to data visualization (17 minutes):

Michal Migurski | UX Week 2008 | Adaptive Path from Adaptive Path on Vimeo.

The other comes from Darren David and Nathan Moody of Stimulant, sharing how they approach the design of large-scale multitouch interfaces (25 minutes).

Darren David & Nathan Moody | UX Week 2008 | Adaptive Path from Adaptive Path on Vimeo.

What’s most exciting for me is that Michael, Darren, and Nathan will all be teaching hands-on workshops at UX Week 2009. This will give you a chance to learn directly from these experts, and prepare you for the imminent design future. (Use the promotional code BLOG and get 10% off the registration price!)

It’s exciting to see smart, thinky people’s ideas hit the uber-big time. And if they are visual-thinky types, it just makes my heart go pitty-pat all the faster.

So we’re thrilled that Dan Roam’s book The Back of the Napkin is culling kudos from across the digital realm. We first met Dan in September, when he spoke at Adaptive Path about his inspirational ways of integrating visual communications for solving business problems. His insights are intriguing, fun and insightful, and the event was a hit.

Now we get to congratulate Dan for his major wins in the publishing arena:

• Amazon:  #5 of the Top 10 Books 2008 : Business and Investing
• Business Week : Best innovation & design books of 2008
• Fast Company : Best Business Books of 2008
• Best of BNET : #4 of the Best Business Books of 2008
• Business Pundit: #4 of the 10 Best Business Books of 2008

Sad to have missed the September event? No worries! Dan will be speaking at MX 2009 : Managing Experience through Creative Leadership, March 1-3, 2009. It’s your chance to hear what all the buzz is about, and to claim your inner visual practitioner.

Congratulations to Dan, and please join us in March to see him up close and personal at this marvy Adaptive Path event.

You can register for MX 2009 here.

(psst! Between now and the end of the year, you save 15% off our already discounted registration fees with the promotion code RNSB (Register Now Save Big.) But don’t tell anyone else. It’s just between us…)

mmmmmmm. The smell of Fall is in the air. Every September, I get that “back to school” urge to stock up on art and school supplies. This fall, armed with our trusty pencils, sharpies and paper, we’re knee-deep in exploring how lo-fi pen-and-pencil techniques can impact our work.

As I talk about in the essay The Joy of Sketch, there’s a lot of activity at Adaptive Path around analog visual methods. Below are some of the inspirations we’ve found helpful in exploring different approaches.

1) Hand Sketching for drawing people, places & things

We’re inspired by:

• Mark Baskinger, and his article in Interactions Magazine
• Rapid Viz : A New Method for the Rapid Visualization of Ideas by Kurt Hanks and Larry Belliston
• Thinking with a Pencil by Henning Nelms
• The Art of Field Sketching by Clare Walker Leslie

2) Hand Sketching for drawing abstract concepts & ideas

We’re inspired by:

• Dan Roam’s site for The Back of the Napkin
• Indexed: Clarity and humor bundled into insightful and simple diagrams
• The VizThink conference
• The Periodic Table of Visualization Methods (an oldie but a goodie)

3) Graphic recording and Graphic facilitation

We’re inspired by:

• The Grove consultants
• International Forum of Visual Practitioners
• Graphic recordings on Flickr

4) Mind Mapping

We’re inspired by:

• The Mind Mapping Book by Tony Buzan
• A selection of mind maps from Tony Buzan
• Mind maps on Flickr

5) Sketchnoting

We’re inspired by:

• Mike Rhode, well-known for his SxSW sketchnotes, and his thoughts on the practice
• Everyday matters by Danny Gregory
• Sketchnotes on Flickr

And if you’re in the back-to-school mood yourself, check out David Gray’s web-based Visual Thinking School.

What methods and approaches have you found that have furthered your practices? Please share them in the comments. New tools are always welcome!

A couple of weeks ago Sebastian Heycke interviewed Mike Migurski (Director of Technology) and Tom Garden (Interaction Designer) from Stamen Design about their upcoming workshop for Adaptive Path’s UX Week.

Stamen has established a reputation for creating compelling interactive design and data visualization projects. Their most recent success was the Oakland Crimespotting Project, which is an interactive map of crimes in Oakland, and a better way of understanding crime in cities.

Sebastian: Is there some sort of underlying principle that you try to convey with every Stamen project that you undertake?

Mike: I think there are definitely a few principles that connect everything; the idea of showing everything, I think is one. We try to just get it all out there; not to editorialize off the bat, but just put every single point on the map or put every single data in the display. We try to start from a position of great abundance and information, to show the vastness or the liveness. I think live, vast, and deep is some of the terminology that we’ve been using lately in a lot of our talks. I think that would probably be the most important sort of binding principle. A secondary one would a sense for choosing problems well.

Sebastian: I would like to talk a little bit more about the Oakland Crimespotting project. Could you explain how you came up with the idea, how you approached it, and what your intention was?

Mike: It came out of a degree of frustration with the way that the Oakland Police Department currently communicates their crime statistics information. I started the project as a personal experiment over winter break a year and half ago. Just kind of looking through their information. Trying to see whether it could be extracted or chopped or minced in some way. They have a fairly limited web presentation for the staff and it’s difficult to get a sense of what’s going on around your house. We started with the idea of trying to figure out whether that information could be turned into a more web friendly format. Later everybody else got involved and it became more of an information design and an interface design problem.

Tom: I came to the project really quite late on. Mike had been collecting that data, and it’s about his hometown. He knew a lot more about whether the data was relevant and what stories it was telling. There were also a series of experiments that Mike did on his blog to start teasing out particular stories from the data, thinking about metaphors for explaining the passages of events through time and how you might present crimes like serious assault or murder in a way that doesn’t take away from them but also doesn’t try and hide them behind layers and layers of interface. As a third party presenting that data we don’t have anything really to hide. Mike has some personal pride about Oakland. He doesn’t want to make it look bad but we don’t have any problem showing everything from the last month or all of the murders in one month. That’s what I found most interesting about the project.

Sebastian: What makes your information visualizations so successful and in what direction do you want to push it?

Tom: I think some of our most successful projects have tackled live data. It is about finding some structure to collect the different variations of the data over time and get a picture of what’s happening at that moment. I think that’s going to be the secret with live visualization. That’s what made the Digg Labs project successful. It is not just interactive, it’s live.

Mike: Things that would be considered really bizarre or adventurous a year or two ago are now becoming fairly commonplace as people get more accustomed to them. You get used to the idea that things can be moved and dragged. When you think about how mapping online changed when Google Maps was released. The main thing that they introduced wasn’t a particular technology, it was just the expectation that you could drag the thing. That’s something that we now use in almost all of our map-based projects, which we didn’t before.

Sebastian: What are you going to cover in your upcoming workshop for UX Week?

Mike: We’ve come up with a loose framework for how we deal with projects. We’re going to convey the chronology of that in the workshop. We’ve got three hours and what we’ve noticed in our work over the past couple of years is that our projects very frequently tend to fall in three phase processes so we’re dividing up the workshop into three chunks.

The first one is all about exploring information. That first portion of the project where you get a giant raw dump of information or you come into bucket loads of crime information or transit information. What are the tools, processes, and questions that we bring to just understand what it is that we have in front of us.

The second portion is about taking that exploration and figuring out what you actually want to do with it. During a project we did with a US residential real estate company, we decided that mapping the construction date of homes around the country was the particular thing we wanted to focus on. That second part is really about building the product.

There’s always this month at the end where you think you’re done but really you’re making some of the really important decisions concerning polish, detailing, and applying a veneer of believability and stability to the piece.

Sebastian: Thank you very much for this conversation!

Register for UX Week to see Mike’s and Tom’s workshop by June 30th to get the early bird price. And even better, use code BLOG when you register for an additional 10% off.

We’re still buzzing about the insights and inspirations from the MX conference in April!

We’ve gotten a lot of comments about the graphic recording notes that were taken during the conference, so we’ve compiled them into a graphic guide.

It was a pleasure to connect with all the folks who attended, and the presentations and conversations provided great food for thought that will nourish our brains until we can meet up again at MX 2009.

See you then!

• You can download the guide here:
  MX 2008 Graphic Guide [pdf 13mb]
• The individual images of the graphic recordings are here:
  mx conf graphic guide on Flickr (19 images)

Like most folks in the office, I’ve joined the Twitter bandwagon. I find it’s an easy way to keep in touch with folks I don’t see on a regular basis. And learn new things about those a I do see.

Just now I checked out Twist, a site that lets you chart how much folks are twittering about a topic and plots them against each other, over time. It’s a neat way to see how topics ebb and flow. I thought it would be neat to see how much the five senses are talked about on Twitter.

I think it’s fascinating that folks Twitter the most about things they see so much more than any other sense. I would have thought that smell would have ranked higher. I wonder if it’s because we are used to sharing things we saw with our cell phone cameras. Or if it’s just part of human storytelling. “You’ll never believe what I saw on the way home today…”

Last weekend, the LA Times staff went on a retreat to map out their future. What was interesting to me is the output of that retreat.

This poster has all the hallmarks of a graphic recording exercise and is likely the result of a roomful of people and an intense discussion led or recorded by a graphic illustrator.

A few months ago, several of us had a chance to participate in a graphic facilitation workshop, put on by The Grove. I can barely draw a stick figure, so it was a great opportunity to broaden my horizons. Over the course of two days, a dozen of us learned a multitude of tricks for simple, evocative drawing. It was a remarkable experience to learn how to capture ideas with figures instead of just words.

One of the useful things about graphically facilitating – or recording – a discussion is that the creation of a poster during the discussion serves a few purposes. First, people remember things better if they can tie an idea to a picture. Second, in some cases it is very useful to have an instant artifact showing the outcome of a discussion, whether it’s the brainstorm or a roadmap.

Some of my co-workers who are much handier with a marker than I will be graphically recording some of the talks at MX next week, so those of you attending will get a chance to see the process up close.

Even more about graphic facilitation: The Center for Graphic Facilitation

Dolores Blog showed thousands of colors to people and asked them to name the colors they saw. They then plotted those names on a color Wheel, printed in the color. They have a blog post describing the project. The resulting image is beautiful. They then added a filter so you can search for different color names and see where it is on the wheel. It’s based on a study to test the universality of language.

When I first saw this, I thought it looked like a type of tag cloud. I like how their filter let’s you expand and contract the colors that appear on the wheel. It certainly helps to illustrate how ambiguous language is. I love that there are at least four different colors all called “chocolate.”

It also started me thinking about what other types of visualizations could be done. There are certainly lots of things that could be done intersecting it with other data, depending upon what you are interested in. Being able to see the color names along with if the namer was colorblind, their gender, native language and other demographic data would be interesting. I found myself wanting to click on a color name to get more information like how many times that name was used for this color.

What ideas for visualizations do you have?