SlideShare una empresa de Scribd logo
1 de 17
Design Thinking
Moving from Content to Platform



                         Hacks and Hackers
                 CUNY School Of Journalism
                                   Hong Qu
                                       @hqu
                              June 14, 2011
Exercise 1

Please read:
  http://www.nytimes.com/2006/04/16/
           arts/16carney.html
CONTENTS

What is a platform?

Design thinking

  User Centered Design

  User research

Design process at YouTube

Case Study: Knight site redesign

What makes a good platform?
Exercise 2
Content                Platform
CONTENT                             PLATFORM

• information                        • tools
• entertainment                      • interactive
• stories                            • real-time

•   static                           • different roles
•   one directional                    passive consumer
•   audience                           engaged
•   broadcast model                    contributor
     ◦ one to many                     admin
     ◦ star to fan
                                     • production cost
• consumption                        • peer to peer model
• product cost                         many to many
• producers are selected by expert   • producers emerge base on metrics
USER CENTERED DESIGN

                                         Design Phase
Analysis Phase                           Begin to brainstorm design concepts and
                                         metaphors
Look at competitive products             Develop screen flow and navigation model
Create user profiles                     Do walkthroughs of design concepts
Develop a task analysis                  Begin design with paper and pencil
Document user scenarios                  Create low-fidelity prototypes
Document user performance requirements   Conduct usability testing on low-fidelity prototypes
                                         Create high-fidelity detailed design

                                         Deployment Phase
                                         Deployment Phase
                                         Use surveys to get user feedback
                                         Conduct field studies to get info about actual use
                                         Check objectives using usability testing




USABILITY PROFESSIONALS ASSOCIATION       UC BERKELEY UI DESIGN CLASS
YOUTUBE DESIGN PROCESS

HTTP://WWW.NYTIMES.COM/2006/04/16/ARTS/
            16CARNEY.HTML


   HTTP://WWW.YOUTUBE.COM/WATCH?V=GCQZRNFCZUA




    HTTP://WWW.SLIDESHARE.NET/HONGQU/QUICKLIST-DESIGN-PROCESS
TOOLS & METHODS

GOOGLE ANALYTICS         METAPHOR
                         BRAINSTORMING
SILVERBACK APP
                         QUORA
OMNIGRAFFLE
                         5 SECOND TEST
ETHNOGRAPHY
                         CAFE STUDY
  (CONTEXTUAL INQUIRY)


DIARY STUDY
USABILITY LAB STUDY



HTTP://WWW.YOUTUBE.COM/WATCH?V=ESUFSI7BPU4
RESOURCES

Donʼt Make me Think                      UI Design Pattern Libraries

Observing the User Experience               Yahoo pattern library

Elements of the User Experience             Welie interaction patterns

Designing for the Social Web
                                         Ideo Method Cards

About Face 3
                                         IxDA
Ambient Findability
                                         UPA
Sketching the User Experience
                                         Captology
Design of Everyday Things
                                  HTTP://WWW.SLIDESHARE.NET/HONGQU/UX-TOOLS
Exercise 3

 What do you want to get out of the
visiting the Knight Foundation website?
JENNY’S FEEDBACK


if i want to go to knight
i want to sign up and follow via twitter/facebook/email
i want to keep Informed in the space i am in whether community/news
i think someone visiting should be like"knight knows what is going on. is
plugged in”
so i think it should be like maybe "this is what we are seeing"
KNIGHT SITE CASE STUDY

Design Process                            Build Wireframe


   Interview users and stakeholders       Site Map


   Competitive analysis                   User testing with wireframe


   User modeling                          Visual design


       Personals and scenarios            Implementation


       Critical path for each user Type   User testing with working prototype


       Task analysis                      Log traffic analysis


   Log traffic analysis
WHY PLATFORMS FAIL


1. Users are not aware of it
2. Users don’t understand how it works
3. Users are not motivated. Don’t care about
achieving that goal.
SUMMARY

Observer users                  Watch out for emergent behavior

   Ethnography                    Usability testing

   Metaphors                      Content analysis

   Competitive analysis           Traffic log analysis

Gain insight into their goals   (Re)design features users want

   Diary study                    Paper prototype

   Personas                       Cafe tests

   Task analysis                  A/B and percentage tests
JAWED KARIM

There were a number of iterations and very critical   anticipated that people would use PayPal on eBay
insights which were only possible due to real-        —it’s something we had never thought of.
world usage. Again, these insights are not ones you
                                                      But then as it really kind of exploded, we saw, ‘Oh
can gain inside the laboratory.
                                                      wait, this is actually the best usage scenario, so
                                                      we’re going to go support it’—you know, change
For example, I remember at PayPal, initially it was   our product in support of that pattern.
a mobile payment service where you could beam
money between cell phones. I think that attracted     Same with YouTube. Initially, we did know that it
—the total number of users was 5,000 ever, and it     was going to be a video-sharing product, but it
was shut down in early 2000 and we decided to go      wasn’t clear in what space it was going to be. So
with the Web site instead. And, of course, the way    initially, it had more of a dating focus, which didn’t
PayPal ended up succeeding was with that              really end up being very popular, and then we had
amazing synergy between PayPal and eBay.              to expand the concept to make it more broad.

That’s where PayPal really took off. But I
remember the first instances when PayPal users
were posting PayPal links on eBay, the reaction
from PayPal business development was, ‘What the
hell are these guys doing?’—like, ‘Close their
accounts, we can’t have this!’ Because we had not


   HTTP://WWW.TCBMAG.COM/PEOPLECOMPANIES/PEOPLEANDCOMPANIES/106531P3.ASPX
Thanks you!
Let’s have a Discussion


                    Hacks and Hackers
            CUNY School Of Journalism
                              Hong Qu
                                  @hqu
                         June 14, 2011

Más contenido relacionado

Más de Hong Qu

How Stuff Go Viral
How Stuff Go ViralHow Stuff Go Viral
How Stuff Go ViralHong Qu
 
Keepr presentation at MIT CMSW
Keepr presentation at MIT CMSWKeepr presentation at MIT CMSW
Keepr presentation at MIT CMSWHong Qu
 
User Experience Research
User Experience ResearchUser Experience Research
User Experience ResearchHong Qu
 
Keepr @DataGotham 2013
Keepr @DataGotham 2013 Keepr @DataGotham 2013
Keepr @DataGotham 2013 Hong Qu
 
Keepr Demo at MIT Civic Media Lab
Keepr Demo at MIT Civic Media LabKeepr Demo at MIT Civic Media Lab
Keepr Demo at MIT Civic Media LabHong Qu
 
Storytelling for the Social Media Era
Storytelling for the Social Media EraStorytelling for the Social Media Era
Storytelling for the Social Media EraHong Qu
 
Demystifying Metrics and Analytics
Demystifying Metrics and AnalyticsDemystifying Metrics and Analytics
Demystifying Metrics and AnalyticsHong Qu
 
Rapid Prototype the User Experience
Rapid Prototype the User ExperienceRapid Prototype the User Experience
Rapid Prototype the User ExperienceHong Qu
 

Más de Hong Qu (8)

How Stuff Go Viral
How Stuff Go ViralHow Stuff Go Viral
How Stuff Go Viral
 
Keepr presentation at MIT CMSW
Keepr presentation at MIT CMSWKeepr presentation at MIT CMSW
Keepr presentation at MIT CMSW
 
User Experience Research
User Experience ResearchUser Experience Research
User Experience Research
 
Keepr @DataGotham 2013
Keepr @DataGotham 2013 Keepr @DataGotham 2013
Keepr @DataGotham 2013
 
Keepr Demo at MIT Civic Media Lab
Keepr Demo at MIT Civic Media LabKeepr Demo at MIT Civic Media Lab
Keepr Demo at MIT Civic Media Lab
 
Storytelling for the Social Media Era
Storytelling for the Social Media EraStorytelling for the Social Media Era
Storytelling for the Social Media Era
 
Demystifying Metrics and Analytics
Demystifying Metrics and AnalyticsDemystifying Metrics and Analytics
Demystifying Metrics and Analytics
 
Rapid Prototype the User Experience
Rapid Prototype the User ExperienceRapid Prototype the User Experience
Rapid Prototype the User Experience
 

Content to Platform

  • 1. Design Thinking Moving from Content to Platform Hacks and Hackers CUNY School Of Journalism Hong Qu @hqu June 14, 2011
  • 2. Exercise 1 Please read: http://www.nytimes.com/2006/04/16/ arts/16carney.html
  • 3. CONTENTS What is a platform? Design thinking User Centered Design User research Design process at YouTube Case Study: Knight site redesign What makes a good platform?
  • 5. CONTENT PLATFORM • information • tools • entertainment • interactive • stories • real-time • static • different roles • one directional passive consumer • audience engaged • broadcast model contributor ◦ one to many admin ◦ star to fan • production cost • consumption • peer to peer model • product cost many to many • producers are selected by expert • producers emerge base on metrics
  • 6. USER CENTERED DESIGN Design Phase Analysis Phase Begin to brainstorm design concepts and metaphors Look at competitive products Develop screen flow and navigation model Create user profiles Do walkthroughs of design concepts Develop a task analysis Begin design with paper and pencil Document user scenarios Create low-fidelity prototypes Document user performance requirements Conduct usability testing on low-fidelity prototypes Create high-fidelity detailed design Deployment Phase Deployment Phase Use surveys to get user feedback Conduct field studies to get info about actual use Check objectives using usability testing USABILITY PROFESSIONALS ASSOCIATION UC BERKELEY UI DESIGN CLASS
  • 7. YOUTUBE DESIGN PROCESS HTTP://WWW.NYTIMES.COM/2006/04/16/ARTS/ 16CARNEY.HTML HTTP://WWW.YOUTUBE.COM/WATCH?V=GCQZRNFCZUA HTTP://WWW.SLIDESHARE.NET/HONGQU/QUICKLIST-DESIGN-PROCESS
  • 8. TOOLS & METHODS GOOGLE ANALYTICS METAPHOR BRAINSTORMING SILVERBACK APP QUORA OMNIGRAFFLE 5 SECOND TEST ETHNOGRAPHY CAFE STUDY (CONTEXTUAL INQUIRY) DIARY STUDY
  • 10. RESOURCES Donʼt Make me Think UI Design Pattern Libraries Observing the User Experience Yahoo pattern library Elements of the User Experience Welie interaction patterns Designing for the Social Web Ideo Method Cards About Face 3 IxDA Ambient Findability UPA Sketching the User Experience Captology Design of Everyday Things HTTP://WWW.SLIDESHARE.NET/HONGQU/UX-TOOLS
  • 11. Exercise 3 What do you want to get out of the visiting the Knight Foundation website?
  • 12. JENNY’S FEEDBACK if i want to go to knight i want to sign up and follow via twitter/facebook/email i want to keep Informed in the space i am in whether community/news i think someone visiting should be like"knight knows what is going on. is plugged in” so i think it should be like maybe "this is what we are seeing"
  • 13. KNIGHT SITE CASE STUDY Design Process Build Wireframe Interview users and stakeholders Site Map Competitive analysis User testing with wireframe User modeling Visual design Personals and scenarios Implementation Critical path for each user Type User testing with working prototype Task analysis Log traffic analysis Log traffic analysis
  • 14. WHY PLATFORMS FAIL 1. Users are not aware of it 2. Users don’t understand how it works 3. Users are not motivated. Don’t care about achieving that goal.
  • 15. SUMMARY Observer users Watch out for emergent behavior Ethnography Usability testing Metaphors Content analysis Competitive analysis Traffic log analysis Gain insight into their goals (Re)design features users want Diary study Paper prototype Personas Cafe tests Task analysis A/B and percentage tests
  • 16. JAWED KARIM There were a number of iterations and very critical anticipated that people would use PayPal on eBay insights which were only possible due to real- —it’s something we had never thought of. world usage. Again, these insights are not ones you But then as it really kind of exploded, we saw, ‘Oh can gain inside the laboratory. wait, this is actually the best usage scenario, so we’re going to go support it’—you know, change For example, I remember at PayPal, initially it was our product in support of that pattern. a mobile payment service where you could beam money between cell phones. I think that attracted Same with YouTube. Initially, we did know that it —the total number of users was 5,000 ever, and it was going to be a video-sharing product, but it was shut down in early 2000 and we decided to go wasn’t clear in what space it was going to be. So with the Web site instead. And, of course, the way initially, it had more of a dating focus, which didn’t PayPal ended up succeeding was with that really end up being very popular, and then we had amazing synergy between PayPal and eBay. to expand the concept to make it more broad. That’s where PayPal really took off. But I remember the first instances when PayPal users were posting PayPal links on eBay, the reaction from PayPal business development was, ‘What the hell are these guys doing?’—like, ‘Close their accounts, we can’t have this!’ Because we had not HTTP://WWW.TCBMAG.COM/PEOPLECOMPANIES/PEOPLEANDCOMPANIES/106531P3.ASPX
  • 17. Thanks you! Let’s have a Discussion Hacks and Hackers CUNY School Of Journalism Hong Qu @hqu June 14, 2011

Notas del editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n