Adaptive Path Blog

An interview with Scott Berkun, author and public speaker on
Show Length: 20 minutes

In 1956 a documentary called The Mystery of Picasso was released, showing two hours of Pablo Picasso doing what he did best: making paintings. This film gave the public a first-hand glimpse directly into this infamous artist’s creative process. Public speaker and writer Scott Berkun and I got together for tea to talk about the film and our own experiences around creativity. As both managers of creative teams and creators of work ourselves, we looked at how our processes aligned with Picasso’s…or where we could learn from him. As the discussion unfolded, we came up with an interesting set of guidelines that enable creativity to flourish.

Listen to podcast on www.TeaWithTeresa.com

In honor of our nation’s founding, and recognizing that, hey, this economy sucks for many people, we’re offering special promotional pricing for UX Week 2009. Register between now and July 4th, and pay only $1,776. Use the promotional code BLOG, and get an additional 10% off.

Main stage talks include:

• Matias Duarte, Senior Director of Human Interface and UX at Palm
• Sarah Jones, Tony Award winning playwright and performer
• Scott McCloud, author of Understanding Comics
• Genevieve Bell, Intel Fellow and Director of the User Experience Group, Intel Digital Home Group
• Temple Grandin, Designer of livestock handling facilities and best-selling author (Animals Make Us Human, Thinking in Pictures)
• Jesse James Garrett, Co-Founder and President of Adaptive Path
• David Merrill, one of the creators of Siftables
• Erin McKean, Independent lexicographer and dictionary evangelist
• Martyn Ware, Sonic ID (and founder of the 80’s band, The Human League!)
• Elizabeth Windram, Senior UX Designer & Bernhard Seefeld, Product Manager for Google Maps

3 days of workshops include:

• Good Design Faster (sketching & sketchboards) with Rachel Glaves and Brandon Schauer of Adaptive Path
• Noel Franus, Manager of the global identity practice for Sonic ID
• Strategy Team of One with Henning Fischer of Adaptive Path
• Content Strategy with Kristina Halvorson of Brain Traffic
• Facilitation & Collaboration with Julia Houck-Whitaker of Adaptive Path and Sarah B. Nelson
• Designing for Mobile with Rachel Hinman of Adaptive Path
• Multitouch with Nathan Moody & Darren David of Stimulant
• Michal Migurski & Tom Carden of Stamen
• Making Things with Jared Cole of Adaptive Path
• Tangible Thinking with Todd Wilkens of Adaptive Path

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!

I just finished working on a project where half of my team was in our Austin office and half was here in San Francisco, which meant 2 different time zones. In addition, our client was in yet another city. Since this was my first time working with such a split team, my learning curve around remote communication, meeting facilitation, and maintaining a strong team dynamic was pretty steep. I thought I’d take a moment to compile those learnings and share.

Tackling Time Zones

• Adjust daily schedule for both offices: A couple of days per week, work on the other team’s schedule/time zone (and vice versa).
• Create a clock for the other time zone on the dashboard of your computer for easy reference.
• People naturally assume you are talking about their time zone, which you may not be. So, make it a habit to always give the time in both times zones when discussing scheduling, no matter what the mode of communication (conversation in the hall, phone calls, IM, email, etc…).

Make It Feel Like Your WHOLE Team Is Right There With You

Use a monitor with dedicated web cam in your project room—sit it at project table (permanently) as if the remote team member(s) is sitting at a spot at the table. It makes them feel a bit more like a real person. (Note: use a Logitec web cam if you can afford it ($100)—quality is much better than iSite webcams.)

Remote Meeting Facilitation

• Adobe Acrobat Connect seems to be a great tool for me thus far. It has video (so you can see the other person/team), document sharing (everyone looks at the same thing at the same time), and the ability to mark on documents (you can point out, specifically, what you are talking about/needs changes).
• During remote meetings, I find that typing live notes about what is said on the shared screen really helps. That way, everyone sees and confirms what was heard and you get double-clarity/reinforcement.
• The downside of Adobe Acrobat Connect: Document resolution is so-so, so don’t use for visual design. Or, send the visual design documents and use the Adobe Acrobat Connect screen simply for reference/orientation during the meeting.

File Sharing

While I don’t like the interface, DropSend.com has biggest file limit out there for the price (it’s free depending on your use).

Shared Calendars

I like creating a shared Google project calendar and embedding it in Basecamp. I give the appropriate people (client team and internal team) the right to add/edit events, meetings, etc. And, you can also make Basecamp milestones feed directly into the calendar.

This is my list of learnings thus far. Please add to this post if you have good tips and tricks to share with the rest of us! And I’d love to hear about tools that you like better than the ones I’ve listed — I’m always on the lookout for better ways of doing things.

Are you working to develop your child’s inner rhetorician?

Farson’s thoughts on management, design and future of leadership.

Maira Kalman wants to tell you everything.

Busy? Then you’ll want to avoid Hobnox’s Audiotool.

For those that like their humor with a bit of darkness, The Terrible Thing of Alpha-9!

Future Perfect insights around technology use in regard to issues of privacy, security and trust.

What happens when a girl gets a chance?

Both beautiful and frightening, 26 million individual road segments defining the “lower 48.”

Tonchidot has plans to help us tag the world around us.

Navi Radjou on how Microsoft Reinvents Its Global R&D Model.

And of course: the white glove.

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.

Until recently, I used to bank with Washington Mutual. One of the things that made WaMu unique was their “Occasio” retail style branch design. Those of you who may have seen Don Norman’s conversation with Peter at UXWeek 2008 might recall that WaMu came up with the design after extensive research, field work and ethnography. They spent considerable time and money studying how people do banking and even created some trial banks to help them study customers. The layout, which included a concierge desk, children’s area as well as “teller towers” was friendly, easy to engage with and emphasized more personal interaction between customers and tellers.

I actually used the branch services fairly often. I liked the layout and openness of the branch. But the details stood out. For example, the checking/deposit slips were clearly color coded and easy to read now matter which side was facing out. They were located on an island right next to where customers stood in line, which meant I could fill them out as I waited. When I spoke with a teller, we could both look at the same screen while we discussed our business. It was little things like this that made the customer experience a pleasant one.

Recently JP Morgan Chase took over my friendly neighborhood bank.  The very first change I noticed, besides the new logo on the tellers shirts, was the checking and deposit slips. The color coding disappeared, and the lettering became harder to read because the new slips didn’t fit in the slots the same way as the old ones. Then they were relocated, along with the pens, away from the queue line. Along with the logo, the little things that made my experience easy started to slip away. Soon the free standing teller towers will be a thing of the past.

According Tampa Bay Business Journal, the towers will be replaced with a “traditional” layout, including teller windows behind glass and offices where bankers can sit with customers to discuss products.”

For Chase, The rational behind this move is simple economics. According to Bank Investment Consultant blog  that overhaul is to bring the new branches more in line with Chase’s strategy of aggressively cross-selling financial advice, business banking and mortgage services.

In short, the branches that were originally designed to be customer experienced focused are now being redesigned to better serve the corporations focus.

Now, I understand that in these uncertain economic times, you have to go with what you know. However, it seems to me that the trend for many successful companies lately has been on improving the customer experience. In an industry that has typically been focused on the mission of the corporation, both Jet Blue and Virgin America have been successful differentiating themselves through excellent customer experience in an era of considerable uncertainty. In fact, Jet Blue boasts profits compared to traditional airlines while doing just that.

I recently wrapped up a project with a very traditional company that was focused almost entirely on how to map and improve the customer experience. The result of the work with this company will help with the transformation of its focus on the corporate needs to the service needs of the customer, which will build loyalty and trust between the company and its clients. I expect that more and more companies will turn to improving the customer experience as a way to strengthen and deepen their customer relationships.

I can’t help but wonder if the powers that be at Chase truely evaluated the value of the Occasio design and the impact it had on the customer experience before completely abandoning it?

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.

This week, the revolution was twittered.

OXO takes a “Charmr” approach to syringes

A little bit of stop-motion fun

An experiment playing a homeless family in Sims 3 by a student in the UK. He follows their story over a series of blog posts.

Seed Design Series has some great videos from Natalie Jeremijenko, Lisa Strausfeld, Neri Oxman and more…

The Adaptive Path SF office door fits nicely into Dave Gray’s “Doors I have known” compilation on Flickr

The Incredible Century Old Color Photography of Prokudin-Gorsky

We’ll leave you with words of wisdom from Seth Godin.

This week I joined 1100 other folks at the Semantic Technology Conference in San Jose. I attended this conference back in 2007 and I’m happy to say I really see a difference in the past two years. Back in 2007, everything about the conference was about the technology. What was the code that made this stuff go? I tried to keep up in a number of sessions where they kept flashing XML up on the screen. I’m happy to report that my experience was much different this year.

From the moment of the first keynote, folks were talking about the user experience. Yay! Our message is finally getting out there. It seems to me that they have finally gotten the technical bits mostly figured out on how to make this semantic web thing go. Now it’s time for the fun stuff: using it to power things that make people’s lives better.

There seemed to be two big uses for semantic technologies that I heard at the conference. First were the groups of folks talking about plug-ins and snippets of code that anyone can drop into their browser or onto their web pages to make an enhanced experience. Yahoo!’s Search Monkey and Google’s Rich Snippets are both examples of simple XML bits that you can add to your pages to enhance your results listing on their engines. Adaptive Blue is a Firefox plug-in that let’s you see your friends’ reviews of books, movies and other stuff as you look at these items on different sites.

The other use is more like what I traditionally think of when I think semantics. There were lots of examples of vendors who can create ontologies and connections by parsing the corpus of unstructured text you give it, whether that text be email, Wikipedia or the Bible. These tools let you see what topics occur in given populations (such as football and the Longhorns in Enron internal email) as well as moving through those related topics. The guys at The New York Times talked about how they use semantic tools to publish their topic pages as well as their news alerts, widgets, RSS feeds and to automate their editorial process.

It was a fun 2.5 days. I learned a lot and am eager to update my personal sites with Rich Snippets, RDFa and microformats.

Join me on Wednesday, June 24 for my virtual seminar on the semantic web. I’ll explain the basics of how this stuff works and why user experience folks need to be involved.