Published on June 26, 2009
Experience Design for a Viral Mobile Community
UX Architect, ThirstyPocket Labs
10 Lessons from the Design of the ThirstyPocket iPhone App for Viral Mobile Neighborhood e-Commerce 1. Develop an Experience Strategy 2. Understand Virality 3. Optimize Most Where it Matters 4. Use Vision Storyboards 5. Understand your Platform 6. See Platform Limitations as Opportunities 7. Authentic Minimalist Design 8. Service is the Product 9. Create Loosely Coupled Systems 10. 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-Commerce Sure 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 virality 2. Understand Virality
The whole concept of virality got a bad rap lately, but actually…
it’s central concept in the web 2.0 evolution
item As 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. item Buyer Seller item item Buyer Seller Seller item item Buyer Seller item item item item
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… Buyer Seller
…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 Timeout We love you. For your continued safety, your session timed out. To login again, click here By 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 Local Make 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. Buyer Seller
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:
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 Ideas Kevin 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 Computer With Open APIs
… to localize the experience of both buying and selling GPS
… to take pictures of your stuff Decent 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 Challenges Nothing 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 design 6. See Platform Limitations as Opportunities
Typing on the iPhone is Hard
…like typing in Chinese Which leads to the same browse-dominant finding behaviors observed by my colleague Paul Fu. Take advantage of that!
New Spinner Control As 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 time And keep in mind, iPhone only displays 1 page at a time, so you have to work within these limitations.
Links are gone Other 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 flow Registration Flick 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 System See 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 control Buyer Seller Review-er
The system is built is such a way as to allow for multiple roles of almost infinite expansion… Buyer Seller Review-er Blogger …
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 App 1. Develop an Experience Strategy 2. Understand Virality 3. Optimize Most Where it Matters 4. Use Vision Storyboards 5. Understand your Platform 6. See Platform Limitations as Opportunities 7. Authentic Minimalist Design 8. Service is the Product 9. Create Loosely Coupled Systems 10. Experience Partners & Wranglers
We hope you consider ThirstyPocket Labs itself as a Service… firstname.lastname@example.org phil@ThirstyPocket.com tom@ThirstyPocket.com … or check out my monthly Column on UXMatters.com Thanks!
allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone
Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...
Experience Design for a Viral Mobile Community. ThirstyPocket used iPhone application design to foster social change by creating a platform for viral ...
... visual, graphic, digital & experience design design ... Digital Design; Digital Experience - Mobile. ... Service Design; Services - Community. Services
... Director of Experience Design; Promotes Senior Customer Experience Designer ... Nominate a Community Builder ... Videos before they go viral! News;
... of creativity within web design but also how this must be paired with great content and the best possible user experience. ... mobile and tablet market ...
Home > Viral Communications. ... as well as in applications that integrate mobile computing with the ... A modular design integrates with ...
User Experience. Virales Marketing ... usability and accessibility for desktop, web and mobile devices. English & German. Beiträge; ... GUI Design. Pierre ...
User Experience Design (UX) Usability (UX) in website design has become a key requirement as it is important that users can navigate and use the bespoke ...
The London Design Awards + Summit celebrates courage, ... visual, graphic, digital & experience design, design ... Mobile Campaign. Service Design; Service ...
VIRAL DIGITAL is a boutique consulting firm focused on Digital Business & Social Media. ... Customer Experience, ... All Rights Reserved VIRAL WORLDWIDE ...