Adaptive Path Blog

Part of the Smart.fm iPhone App Story

Update: The app was just released. Download it from iTunes now.

When last we posted about the Smart.fm iPhone app the team had moved from design into development. In the few months since we have been hard at work bringing our ideas to life. The combined team, working across many time zones and many miles of ocean collaborated almost daily. We tackled issues on the server side. We tackled issues on the device. We tested scenarios and we tweaked the design when implementation revealed new ways to solve problems. During app development I’ve taken note of some themes that arose time and again. Here’s four that stood out.

A great experience is responsive

Software that looks good and works right will fail if it is not fast. With a mobile experience this is especially true. Mobile devices are inherently more resource constrained than PC’s. Users expect to dive into an app on their phone, complete a task and then get out. Seconds count. Heck, milliseconds count. In building the Smart.fm iPhone app the team likely spent more time on performance tuning than anything else. As an Internet connected service, the app is constantly downloading information over the network. We had to find techniques to download just what’s needed in the moment. API tuning improves download times and client-side caching reducing the amount of downloading needed. The final design for data synchronization results in the user seeing some shorts bursts of network activity while browsing around. Taking advantage of this pattern, the team came up with a clever “loading” animation. If we did our job well, the burden of waiting for a download will actually help to make the app feel even more fun!

A great experience is correct

The Smart.fm app is designed to work a lot like the iPod app. A user 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 state needs to be saved and resumed at a later time. In addition, the user’s study progress needs to be synced back to the Smart.fm web site so that they can continue learning on a PC. And wait! What if the user studied that same goal, or another one in the mean time… download that progress and figure out the user’s total progress across all goals. And wait! Since goals are “alive” other users might have added new items, so download them too.

What seems like a pretty simple app design on it’s surface reveals quit a bit of complexity during implementation. I think we all know of applications that offer plenty of utility are are unusable due to bugs. It goes without saying that errors in software are not a good experience. During the development of this app we worked diligently to test and remove bugs…. and test and test and test. The hope is that our users get an error-free experience that lets the fun shine though.

A great experience is choreographed

Brandon Schauer always talks about the cupcake. In fact, I find it hard to get him not to talk about it. And to be honest, I love the metaphor; it’s infectious. The concept is this: a cupcake, a birthday cake and a wedding cake are each perfect in their own scale. A cupcake may be smaller than a wedding cake, but it is no less delicious. You take a bite and are completely satisfied. The cake, the icing and the decoration on that cupcake is just right. Perhaps you’d like a second helping, but you don’t wish you were eating a slice of birthday cake. The cupcake is small, but complete.

During the development of this iPhone app the team had to cut some features due to time and resources. In deciding what to remove, and how deeply to cut, we need to ensure that the app was still tasty and satisfying. A Smart.fm app that didn’t allow a user to study would be incomplete for sure. But what about some of the social network aspects of the service? Could those be removed from the first version without it feeling lacking? What about multiple types of quiz games… do we need those too? What’s the cupcake of a Smart.fm iPhone app?

A great experience ships!

I’m happy to say that the iPhone app has been submitted to Apple and is very close to being in your hands. There is always a time at which a developer must decide that their work is refined enough for customers to use. The hope of course is that this time is not dictated such that the application is incomplete or full of bugs. Our team was able to work towards a ship date that allowed both the freedom to “do it right” and “just get it done”. Screenshots of the app are available at http://smart.fm/iphone. Early in November we anticipate seeing a smiling Smart.fm owl sitting in the iTunes app store. Thanks for all of your interest and patience!

On a personal note, I want to say that it has been a joy working with the Smart.fm team. Not only does the service live up to it’s name, but the folks who work behind the scenes are some of the brightest I’ve met

Part of the Smart.fm iPhone App Story

We’ve been quiet lately, as we’ve been hard at work developing the Smart.fm iPhone app. Dan will be sharing more about his experiences soon!

In the meantime, our friends at Smart.fm have proposed two panels for South by Southwest: Crash Course: Is E-ducation Making the Classroom Obsolete? and Going Mobile: Web to App Do’s and Don’ts.

If you’ve enjoyed this series of blog posts, please consider voting for these panels — especially the latter, which will essentially be taking this project blog and bringing it to life for the South by Southwest audience! We’d love to have the opportunity to share what we’ve learned from taking this app from web to mobile with the South by Southwest audience.

The other panel on Web Companies Disrupting Innovation also sounds interesting: It features entrepreneurs from education startups who are out to revolutionize the way we learn. It’s a chance to spread the word about new paradigms in online education.

I hope you’ll join us in supporting the wonderful people at Smart.fm by giving their panels a thumbs up!

You can also check out the panels Adaptive Pathers and friends are proposing at South by Southwest.

Part of the Smart.fm iPhone App Story

While Dan is busy coding away at the iPhone App, I wanted take this time to share about our first project with smart.fm, a project to reimagine the smart.fm web experience!

What’s in a name? What we call something can have a profound impact on the way we think about it. And changing the way we think about something can have powerful implications on what we design and how we evaluate it. For smart.fm, the ah-ha moment came when we realized that it’s about Goals, not Lists.

Smart.fm is a learning community founded on a powerful technology that equips users to memorize anything — from the Capitals of the World to Japanese Vocabulary to the names of various Heart Murmurs. Today, you learn using Lists. A List is a set of content about a topic that is typically managed by a single person or a content partner. While Lists are a straightforward organizing principle, they don’t form natural hubs of activity. It’s hard to rally around a list.

Smart.fm partnered with Adaptive Path to transform the site into a “motivating, social world of learning.” Collaborating closely with smart.fm, our team (Me, Brian Cronin and Kate Rutter) sought out new ways to bring people together and engage them in collaboration and competition around learning. Through a series of exercises where we envisioned what the experience of using smart.fm could be like, the answer that emerged was Goals.

Instead of organizing content around topics, which people may study for many different reasons, content will soon be organized around Goals that people can form communities around. But before I get into the exciting implications of this shift, I wanted to share some of the experience-minded tools that led us to it:

1) We described the experience we wanted to aim for.

Using our Elevator Pitch “mad-lib” template, we brainstormed ways to fill in the blanks: “For people who… the new smart.fm is… It’s different because…” Ideas that emerged included “Smart.fm is like a pickup basketball game — it’s easy to jump right in and participate.” We refined these ideas into guiding principles that described the ideal smart.fm experience: “a friendly social world of learning” that “invites play” and “reveals and celebrates progress.”

2) We dissected the experience and brainstormed new metaphors for its parts.

From the experience mapping and metaphor brainstorming exercises that I wrote about previously, we selected some of the most compelling metaphors.

3) We imagined some possible experiences inspired by these metaphors.

We then explored how they could be applied to the major activities of the smart.fm experience — discovering, learning, celebrating, collecting, making and collaborating — and communicated the resulting ideas through “Concept Posters.” These posters enabled us to describe what an experience should feel like without getting into interface details. Aspects of the poster showing how “Smart.fm is like a scavenger hunt for knowledge” particularly stood out to the team — especially the idea of challenging users to create content through collaborative scavenger hunts.

4) We pictured the future.

We then used sketches of “The Homepage of the Future” to explore the best concepts further. Since a well-designed homepage tells the story of what you’re all about, sketching potential homepages can be a great way to boil a concept down to its essence using a value proposition, some featured content, and a presentation of core features or “how it works.”

5) It all came together in “Goal-Based Missions” — or simply, Goals

These explorations culminated in the idea of “Missions,” which we articulated through sketchy diagrams illustrating an exciting, game-like smart.fm where social activity is embedded into everything.

As the new activity hubs, Missions brought both learning material and social activity together in an elegant and cohesive way:

• Missions are about shared goals. While people may learn English for many reasons, people who want to “Spend a Week in the US,” “Impress their friends” or “Pass the TOEFL” will have much more in common with each other than everyone learning “English Vocabulary I.”
• Missions are social by nature. The shared goal is what brings people together. Instead of “signing up” or “enrolling,” you can “Join” or “Participate” in a Mission, competing or collaborating with other team members who share the same goal.
• Missions can be about creating content, not just learning it. The scavenger hunts idea from the concept posters manifested itself in the “Fact-Finding” aspect of Missions: If you want to learn enough Japanese for a week in Japan, but don’t know enough to build a list of stuff to learn — you can challenge others to create content for you.

While my high school sister loved the idea of “24-like” Missions, proposing there be “Objectives” and “Directors” and spy tools, the idea of collaborative Missions lives on under the more neutral name, “Goals.” Since the final wireframes were delivered, Smart.fm has already enabled collaborative list-building, and soon you’ll be able to do much more, including:

• Collaborate with others who share a goal (say, “Become culturally literate”) to create and collect learning material that will help you achieve it.
• Challenge other users to contribute content about a certain topic (such as “Hip Hop Artists” or “Internet Memes” — you can actually add content to these lists today!).
• Ask questions about things you want to learn (“How do you say ‘Experience Design’ in Japanese?”) and get answers from others.
• Earn badges for completing your goals and responding to challenges.
• See how you’re doing compared to others who are pursuing the same goal, others in your hometown, and perhaps even others who share your first name!

These are just a few of the exciting possibilities that reframing Lists as Goals has afforded, and we look forward to seeing both the name change and mindset change taking shape on smart.fm!

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.

Part of the Smart.fm iPhone App Story

In his last post, Dan shared an overview of the smart.fm iPhone app project, but I wanted to expand on what he shared by offering some guidelines for anyone taking a product from web to mobile.

Don’t think “mobile version of a website,” think “mobile component of a larger experience” The smart.fm iPhone app should not be a pared down version of the smart.fm website — a path that thinking of it as a “mobile version” might lead us down. Instead, we want the iPhone app to complement the website — not replicate or miniaturize it — and to support the larger experience of learning anytime and anywhere.

Put experience first, not features. Taking the list of website features and prioritizing them might seem like an obvious starting point for designing a mobile app based on an existing site. But because a complementary iPhone app may or may not include features from the website, before we looked at features at all, we took time to think about the mobile experience independently. Why might you use this app in a mobile context? What are some scenarios where you’d use it?

Get into the mobile mindset. When you’re sitting in a meeting room, it can be hard to think beyond obvious mobile uses. So much so that taking the team on a walk through the neighborhood, mobile-sized sketchbooks in hand, has become a regular part of mobile workshops I’ve facilitated and participated in in the past.

On another project, I took the team on virtual walks, where we first listed the breadth of contexts in which you’d use the mobile device (in bed, in front of the TV, while shopping, on a plane, etc.) and then imagined how we’d use the mobile device in each of those contexts.

For the smart.fm workshop, we free-listed not only mobile contexts, but also the characteristics of mobile experiences. We clustered these characteristics and then used these as starting points for imagining use cases for the iPhone app.

Get into users’ minds. From this emerged dozens of ideas for new, uniquely mobile uses for the iPhone app. We voted on the top use cases and clustered them based on the mental “mode” a user would be in when engaging in that activity: Are they in a “Study” mode? A “Reacting” mode? A “Look Up Something” mode?

Once we’d defined the major mental spaces, only then did we bring out our pre-printed sticky notes featuring every action you can do on the website. Talking through each feature one-by-one, we discussed whether and when you’d want to do that thing in a mobile context, and if so, which mental space would you be in.

Think system, not standalone. To continue to remind us all that the iPhone app will be part of a system, not a standalone app, we intentionally called the bucket for features that wouldn’t be included in the iPhone app “Stuff the website is better at” rather than “Other” or “Discards” or something like that. While we do want people to be able to engage with the app without having to use the website, realizing that the website is simply better for some tasks made us all feel better about leaving some features for the site to handle.

While it can still be hard to let some possibilities go, knowing what the mobile is best at and doing that well can result in a much more compelling mobile experience than a “mobile version of Smart.fm” could ever be.

By getting everyone into the mobile mindset, we were able to develop a solid set of priorities that we’ve been continuing to flesh out through user flows and wireframes. We look forward to sharing our progress soon!

For now, here’s a summary of activities teams can engage in when engaging in a mobile prioritization work session:

1. Write mobile contexts and characteristics on stickies and cluster them on the wall.
2. Based on these contexts and characteristics, imagine how you would use the app in a mobile context. Add use cases to the wall near the characteristics from which they emerged.
3. Dot vote on which use cases are the most compelling.
4. Cluster the most compelling use cases based on which mental mode the user would be in when engaging in that activity.
5. Referencing a list of all of the existing website features, determine which activities fit into these mental spaces and which are better left for the website.

Part of the Smart.fm iPhone App Story

Imagine that you want to learn how to read and speak Japanese. You’ve heard about the web-based learning applications offered by smart.fm and check them out. The site is great (and only getting better) but you’d really like to learn Japanese during those in-between moments of day. What if there was a companion smart.fm app for your iPhone?

Well, it’s coming and Adaptive Path is both designing and developing the app. Later this summer you will be able to download an official smart.fm app from the iTunes App Store and learn at your own pace when convenient for you. This project is unique in many ways, not the least of which is our ability to speak very publicly about the work. The team at smart.fm is happy to have us sharing our thinking and our process during the project. We’ll be posting regularly to the blog. You will get to hear about challenges, accomplishments and insights directly from practitioners. When possible we will bring in the smart.fm team as well to give you the client perspective. Adaptive Path is just thrilled to be able to design in the open like this. We are looking forward to hearing from you as well, so please leave comments!

Domo Arigatō (ありがとう), Tokyo

Alexa and I spent the last week in Tokyo Japan, home of smart.fm. We not only kicked off the iPhone app project but also wrapped up a previous engagement, a redesign of the smart.fm web site. Our time spent working face-to-face with the rest of the team proved to be invaluable.

As you would guess, everyone at the company has a strong opinion about the mobile app and what it should accomplish. We needed to channel this enthusiasm towards the goal of a refined set of tasks that users will actually find compelling.

A core team including developers, designers and product managers gathered for a day of workshopping. We facilitated the brainstorming of the mobile context in which this app would live. For example, we all agreed that mobile phones are great social lubricants (hand it to a friend), great for quick check-ins and great for when you have unexpected downtime. All of the ideas generated were clustered and use cases for the smart.fm learning tools were mapped on top of the mobile context.

The next step was the organization of the resulting use cases into a mental model and the listing of application features under each mental space. Features that were both appropriate for use on a mobile and support a mental space were added. Those features that were better served by the site or that just didn’t fit, went into another pile.

By the end of the day we had the following mental spaces, ordered in priority

1. Study: See what I need to do, do it, and see how I’m doing
2. Capture: Create items that you want to learn, or share items with others
3. Discover: Find something new to learn
4. Look up: Use smart.fm as a quick reference tool on-the-go
5. See what’s going on: A dashboard of your activity in the smart.fm universe
6. Respond & react: Answering questions from other users

In addition to the workshop with a select team, we also spent time interviewing many other stakeholders in the company to get their thoughts.

“If [the app] has the ability to share and teach someone who’s right there with you then it’s a different type of social—physically social. How can it fit into people’s real lives?”
Simon Dennett, Creative Director

With this foundation in place, combined with the detective work from Dane back home in our San Francisco office, we’ll begin defining the structure of the iPhone app.

Of course, what trip to Tokyo would be complete without a little bit of play. Our hosts were terrific about showing us their town. We were able to take in some of the best sights and tastes that Tokyo has to offer. Fresh sushi anyone?

Not Our First Time

This project may be unique in our ability to broadcast it real time, but it’s certainly not our first mobile project. Nor is this our first smart.fm project! The iPhone app will actually be our second major project with the smart.fm team. As I mentioned a bit earlier, we recently wrapped up the experience design of their web site, turning it into the collaborative, social and motivational learning app that users are longing for. Adaptive Path’s learnings on the site design are feeding directly into the upcoming iPhone design. Kate, Alexa, Kumi and Brian worked on this project and look forward to sharing more about it on the blog real soon!

About smart.fm & Cerego

Combining cognitive science with the social and collaborative structure of the web, Cerego empowers people to learn faster, remember longer, and manage their knowledge.

Based on years of applied research, Cerego has built adaptive, web-based applications that accelerate knowledge acquisition. Cerego’s patented core learning engine is driven by algorithms that generate optimal learning schedules for discrete chunks of declarative learning content, called “items”. This intelligent scheduling is achieved by gathering metadata on individual user performance and modeling memory decay patterns at the granular level of every item.

Cerego’s smart.fm platform represents the first phase of a platform that combines personalized learning applications and content creation tools in a collaborative, social environment – a place where anyone can study, create, re-mix, share, and manage learning content of any kind, from foreign languages to medical terminology, from photographs to paintings, from people to sound.