• Save
Experience Design for a Viral Mobile Community
Upcoming SlideShare
Loading in...5
×
 

Experience Design for a Viral Mobile Community

on

  • 2,457 views

10 Lessons from the Design of the ThirstyPocket iPhone App for Viral Mobile Neighborhood e-Commerce: ...

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

Statistics

Views

Total Views
2,457
Views on SlideShare
2,443
Embed Views
14

Actions

Likes
7
Downloads
0
Comments
0

6 Embeds 14

http://www.linkedin.com 5
http://www.slideshare.net 4
https://www.linkedin.com 2
http://static.slidesharecdn.com 1
http://www.lmodules.com 1
http://www.linkedin-ei2.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • The sub-title for this talk can be called:
  • … in other words: social capitalism entrepreneurs… the ThirstyPocket team
  • We were always fascinated with the concept of a neighborhood market
  • The neighborhood market is 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 theneighborhood market the latest mobile technology of iPhone… and out of this, the ThristyPocket application was born
  • And in the process, we created what we call Viral Mobile Neighborhood e-Commerce. Sounds like a mouthful, but what does local mobile e-commerce really mean?
  • Now when you think of e-commerce, you usually 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 peopleBy combining it with the latest in the mobile technology
  • What is Virality? A fair question. The whole concept of virality got a bad rap lately, but actually…
  • it’s central concept to whole web 2.0 evolution
  • 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 him or herself become a seller, selling multiple items which in turn attracts more buyers, who list additional items, thereby increasing the size of the network. Exponentially. That’s Virality.
  • 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…
  • …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?
  • Well, we did some digging and this is the first insight we had. Selling is actually really hard.
  • Let’s say you want to sell this car 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….
  • Fascinating!
  • 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 one of the selling flow! Step 1 consists of exactly 4 parts:
  • 12 drop downs and 3 text boxes that describe the type of your car
  • 22 check boxes that describe options
  • A large (but admittedly helpful) ad space… (more on this later!)
  • And 5 controls describing your contact information… that’s how many total?
  • That’s right, folks: 47 controls! And that’s just the first step!
  • Then, take the next step 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… By this point, you maybe wondering, gosh, this is car listing business is going to take me several hours! maybe I aughtta 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 ThirstyPockethad a vision of making selling easy. Making it local. …And most importantly, making it Mobile.
  • Why is mobile important? Let’s take another use case.
  • 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”
  • 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. Any questions?
  • Remember this crucial step of transformation of a Buyer into a Seller? By redesigning the flow to take full advantage of the technological capabilities, we have managed to change the game and bridge the gap between the buyer and the 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.
  • BTW, this is what we call 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 format to help guide your design process.
  • BTW, this is what we call 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 format to help guide your design process.

Experience Design for a Viral Mobile Community Experience Design for a Viral Mobile Community Presentation Transcript

  • Experience Design for a Viral Mobile Community
    Greg Nudelman
    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:
  • 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 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…
    java_etc@yahoo.com
    phil@ThirstyPocket.com
    tom@ThirstyPocket.com
    … or check out my monthly Column on UXMatters.com
    Thanks!