Experience Design for a Viral Mobile CommunityGreg NudelmanUX Architect, ThirstyPocket Labs

10 Lessons from the Design of the ThirstyPocket iPhone App for Viral Mobile Neighborhood e-Commerce1. Develop an Experience Strategy2. Understand Virality3. Optimize Most Where it Matters4. Use Vision Storyboards5. Understand your Platform6. See Platform Limitations as Opportunities7. Authentic Minimalist Design8. Service is the Product9. Create Loosely Coupled Systems10. Experience Partners & Wranglers

1. Develop an Experience Strategy

As a team of social capitalism entrepreneurs, we at ThirstyPocket…

…we were always fascinated with the concept of a neighborhood market:

… the soul of the community…

Where the action and conversation frequently happens… all of the magic of humanity coming together!

So we wondered, what would happen if we combine the neighborhood market the latest mobile technology of iPhone… and out of this, the ThristyPocket application was born:+

And in the process, we created what we called:Viral Mobile Neighborhood e-CommerceSure sounds like a mouthful, but what does local mobile e-commerce really mean?

When you think of e-commerce, you probably think of big name brands like Amazon, Wal-Mart, eBay, and probably a smattering of other conglomerates…

But we’re talking literally about taking all of the power of buying and selling via electronic digital means and putting in hands of the people, by combining it with the latest in mobile technology

We do this by understanding virality2. Understand Virality

The whole concept of virality got a bad rap lately, but actually…

it’s central concept in the web 2.0 evolution

itemAs applied specifically to neighborhood e-commerce, virality means that if you have a seller that is selling multiple items, every individual who buys an item and experiences the process, can also become a seller, selling multiple items which in turn attracts more buyers, increasing the size of your network.itemBuyerSelleritemitemBuyerSellerSelleritemitemBuyerSelleritemitemitemitem

The critical component of the virality model is actually this transformation of a Buyer into a Seller. To accomplish this, the system must be easy enough to use to be conducive to upping the level of the individual’s participation to the next critical level…BuyerSeller

…naturally and peacefully. To accomplish this, we needed to understand the needs of our audience and the challenges of selling on-line, then redesign the entire process from the ground up

…and make it very easy to sell all kinds of stuff in your local community. Now you may say, what’s the big deal with selling, anyway? Aren’t there sites do allow you do that? Absolutely. But why do you think we decided to concentrate on making selling easier?

3. Optimize Most Where it Matters

Well, we did some digging and this is the first insight we had. Selling on the web is actually really hard!Selling is Hard

Let’s say you want to sell this truck on autotrader.com:

You’re thinking “easy”, right? No problem!

You fire up AutoTrader.com and hit “sell your car”. Enter your zip. Great, This is going to be a piece of cake!

Oh oh… gotta “Buy Now” before you can sell… Hmmm….

Then you get this little popup that invites you to engage in a little friendly conversation to grease the wheels of commerce that are stuck in the tar of complicated UI…before you can be helped along with the selling process. You have to dismiss this layer before you can actually get to…

… the “real” Step 1 of the selling flow!Now Step 1 itself actually consists of 4 sections:

… 12 drop downs and 3 text boxes that describe the type of your car…

…plus 22 check boxes that describe options…

…plus a large (but admittedly helpful) ad space…

… plus 5 controls describing your contact information…

47Controls in 1st step alone!

Then, take the step 2 for example, the Photo Upload –

looks easy right?

First, you have to take the photos of your car with your camera…

Then you have to upload the photos to your computer, itself, a multi-step process.

Find the photo on your hard drive…

… then log back into the website, which by then probably timed-out…Session TimeoutWe love you. For your continued safety, your session timed out.To login again, click hereBy this point, you maybe wondering, gosh, this is car listing business is going to take me several hours! maybe I aught to save myself the heartburn…

…and just drive it down the street to this guy and get rid of my car right there!

Yes, selling is hard. But it does not have to be. From the start, we at ThirstyPocket had a vision of making selling easy. Making it local. …And most importantly, making it Mobile. Change the Game of the Selling Flow:Make it LocalMake it Mobile

Why is mobile important? Let’s use a vision storyboard to demonstrate.

4. Use Vision Storyboards

Let’s say you are headed to a concert. Something really cool… maybe even Green Day!

And on the way to the concert…

You get an IM. Sorry, Jen can’t make it to the concert, can you sell her ticket? n/p!

Fill out 1 line description, how people can get in touch with you, and hit “post it”

Done!And that’s it! You’re done. That was our vision when designing the ThirstyPocket system. Selling your Car, tickets, it’s just that easy. And BTW, GPS knows where you are, so the iPhone fills the localization info automatically.

Remember this crucial step of transformation of a Buyer into a Seller? By redesigning the flow to take full advantage of the advanced mobile technological capabilities, we have managed to change the game and bridge the gap between the buyer and the seller. BuyerSeller

Since we’ve implemented the vision, we of course had to make a few adjustments, but overall, we stayed true to original vision’s simplicity and elegance.

These are the UI wireframes we used to develop the final selling flow. Check it out!

BTW, what we used is called a Vision Storyboard. This vision helped keep us on track through changes and adjustments and keeps you from adding yet another fabulous feature to the set. If you are designing something novel and game-changing, I highly recommend getting your vision out on paper in this kinds of a comic-book format to help guide your design process:

Done!

If you are interested in learning more about this technique, you may want to check out Kevin Cheng’s upcoming book… Or you can hire our team to help you with the process of creating a vision storyboard.See What I Mean: How to Use Comics to Communicate IdeasKevin Cheng, Raptr

5. Understand your Platform

So you maybe wondering, of all the phones available on the market…

Why did we choose Apple iPhone? Why?

For us, an open native app API on a truly mobile platform was critical for this integrated experience to succeed as designed. As far as the choice of the correct set of features…The First Full-Featured Ubiquitous Hand-Held ComputerWith Open APIs

… to localize the experience of both buying and sellingGPS

… to take pictures of your stuffDecent Camera

Phone Number Device ID… to positively indentify each device through the API, cutting SPAM and making registration unnecessary

Seamless Browser Integration…to use web email as a free method for connecting buyers with sellers

Multi-Touch Control… To take full advantage of a small size of the device

High-Resolution Screen… to see all these pictures, UI and transitions in brilliant hi-resolution video

We also got an amazing tech & e-commerce savvy audience to give us feedback!

(and it’s also a phone)…oh and iPhone also happens to be a phone so you can use it to communicate quickly and cheaply in case IM, blogs, Twitter, email, Facebook and others are not enough to for the job.

iPhone App Design ChallengesNothing is free. With a lot of features, comes it’s own set of challenges…

… which can be viewed instead as opportunities to create an authentic, minimalist design6. See Platform Limitations as Opportunities

Typing on the iPhone is Hard

…like typing in ChineseWhich leads to the same browse-dominant finding behaviors observed by my colleague Paul Fu. Take advantage of that!

New Spinner ControlAs Bill Westerman notes in his presentation, the funky spinner controls that apple used as Select widgets take up quite a bit of space.

Remember this page? How many iPhone screens would it take to implement 12 drop downs? Take advantage of this as an opportunity to focus on the essentials.

One page at a timeAnd keep in mind, iPhone only displays 1 page at a time, so you have to work within these limitations.

Links are goneOther than the browser, which has links from HTML pages, links are pretty much absent from the native iPhone App UI. Due in part to weirdness arising from mixing the two UI modes …

Hi-Resolution vs. Fat Finger… andfrom the fat finger problem.

To avoid the fat finger problem,

Most native apps create gigantic push-able buttons. Unfortunately, this destroys the high-resolution screen advantage… or does it?

We solved our fat finger problem by streamlining the UI to have no more than 3 controls across on any of our screens with large buttons. Further, by building our own custom select control for sorting to replace the Select Spinner we reclaim a great deal of hi-res real-estate for use in our search results, without sacrificing essential functionality.

Now another problem is not being able to tell where you are easily, like this screen from Yelp. You can tell you are in the search area, because the button is highlighted on the bottom, but what filters are applied is impossible to tell.Because of this, navigation in the native iPhone app is usually more of a challenge than it need to be.

On iPhone, we don’t have a nice left nav to work with, but we have to have the filters like categories, etc. We solved this problem using a “triumvirate” of search pages. You can see the filters that were applied not via a control but via this stripe on the top, utilizing high-resolution screen capability, while at the same time, allowing you to freely navigate between the three screens (supporting the 1-screen at a time platform requirement)

Now the 1-screen at a time requirement is something that is interesting to discuss a bit more. Mainly, with respect to pogosticking. In interaction design field, we use the term pogo-sticking to describe going from the search results to the item and back again.

Now on iPhone, the pogosticking becomes an EXTREME problem, due to transitions between screens and the small screen size

So we used the multi-touch capability to build in a swipe-motion advance to the next and previous item, without losing your original search results list.

This gives you a fantastic capability to browse all of the items near you, for example, much like you would browse stuff at a garage sale. Yet another example of using the platform limitations to our advantage !

7. Authentic Minimalist Design

How many people are overjoyed to see this page? Has anyone asked: is this page even necessary?

In contrast to most native iPhone e-commerce apps, ThirstyPocket can be used immediately after download, without any registration

Phone Number Device ID… by taking advantage of a Phone Number Device ID. Remember this screen? You get automatic SPAM protection and have insight into trends and item ownership. Know your platform!

We put in a lot of effort to ensure that everything, to the last detail, including the custom controls is minimalistic

Paying special attention to the most critical flows, the ones that we know from our research to be the most painful, where we lose most people.Selling flowRegistrationFlick Browsing

The entire system is designed to let the content shine.

8. Service is the Product

Understand, that what you are building is a tool…

… a tool for providing a service…

A platform, on which experience unfolds

Service Design is Meta-Design:Choreograph Design Experience

To create a great service experience, be aware of Scope: how far does the interaction between the Buyer and Seller extend beyond your system? Where is the system boundary?Scope

Be aware of Visibility: what happens back-stage?Visibility

… and front-stage…

And understand that visibility will be different for different actors in your system – seller will see things differently from buyer

Service Experiences are paths transversing the Service SystemSee reports by Robert J. Glushko of UC Berkely and Shelley Evenson of Carnegie Melon

9. Create Loosely Coupled Systems

Don’t over-engineer: Adam Greenfield, in his book “Everywhere” describes the shortcomings of the Amtrak Acela train service designed end-to-end by IDEO. Too tightly coupled, complete control, creates brittle services. Much like airline timetables scheduledtoo tightly will cause any delay to cascade throughout the entire system.

Instead, create loosely coupled frameworks into which a variety of formats and services can be easily plugged in

Even to the extent that the surrounding services truly overshadow your own system

In other words, create loose seams that people can insert themselves into, even for a short time and limited engagement

So they can create the exact experience they want

The primary method of communication is email, because it is free, ubiquitous and noncommittal. But what about this scenario of selling something quickly? We designed our your system so that it gracefully degrades under pressure by allowing the seller to put in they phone number, IM, etc. to increase the speed of communication or provide opportunities for personal touch, as needed.Degrade Gracefully

10. Experience Partners & Wranglers

Now what do I mean by Wranglers? Bruce Sterling in “Shaping Things” described Wranglers as the emerging paradigm that replaces user and consumer. This is something that I call “Experience Partner”.

An Experience Partner or Wrangler is interacting with the system on his or her terms, choosing how far their involvement will extend

In the same way, in our system, there are many additional roles, beyond those of Buyer and Seller. For example, the role of reviewer, which allows for community policing, so important to keep a healthy system which allows people a sense of controlBuyerSellerReview-er

The system is built is such a way as to allow for multiple roles of almost infinite expansion…BuyerSellerReview-erBlogger…

Much like in the neighborhood market there are many roles you can play, and many different levels of participation.

You choose your level of involvement and we provide the beautiful seam for you to insert yourself into!

In Summary, these are the 10 lessons from the design of the Thirsty Pocket iPhone App1. Develop an Experience Strategy2. Understand Virality3. Optimize Most Where it Matters4. Use Vision Storyboards5. Understand your Platform6. See Platform Limitations as Opportunities7. Authentic Minimalist Design8. Service is the Product9. Create Loosely Coupled Systems10. Experience Partners & Wranglers

We hope you consider ThirstyPocket Labs itself as a Service… java_etc@yahoo.comphil@ThirstyPocket.comtom@ThirstyPocket.com… or check out my monthly Column on UXMatters.comThanks!