H i .
I’m Sean. •   @kalisurfer
I’m Sean. •   @kalisurfer




http://twofortyeight.com   •   http://sothisisthefuture.posterous.com
I’m from



Let’s talk about user-centric design
What Are The
 Challenges?
Challenges
Challenges
0     1    2     3
Challenges
       0        1    2     3

What is UX?
Challenges
       0               1       2   3

What is UX?   We do some UX.
Challenges
       0               1                  2           3

What is UX?   We do some UX.   We see UX as a
        ...
Challenges
       0               1                  2                     3

What is UX?   We do some UX.   We see UX as ...
Challenges
        0                     1                  2                     3

What is UX?          We do some UX.  ...
Challenges
        0                     1                   2                     3

What is UX?        We do some UX.   ...
Challenges
        0                     1                   2                     3

What is UX?        We do some UX.   ...
Challenges
        0                     1                   2                     3

What is UX?        We do some UX.   ...
So What Exactly is
User Experience?
http://www.jjg.net/ Jesse James Garret
sab ility
                   IA +U
           +C S+
 ont ext
C




                                    http://www.jjg.net/...
Mental Models by Indi Young
t
                                                     rojec
                                     cles stage o
           ...
Mental Models by Indi Young
“Don’t make something unless it
 is both necessary & useful. But if
is it both necessary & useful, don’t
    hesitate to m...
“Don’t make something unless it
 is both necessary & useful. But if
is it both necessary & useful, don’t
    hesitate to m...
Four Approaches to
 User Experience
http://www.flickr.com/photos/27076277@N04/2634194441/sizes/
o/ by Curzon79
User-centered Design: User’s behaviors and goals are the compass.




                                                 htt...
http://www.flickr.com/photos/38509565@N00/3204017156/sizes/l/
by legoloverman
Activity-centered Design: User’s tools and activities are at the center of the design equation.




                      ...
http://www.flickr.com/photos/vidgamer838/2874043796/sizes/l/
by Vidgamer838
System Design: User is one variable among many. Focus is on interplay of said variables.




                             ...
http://www.flickr.com/photos/kaptainkobold/257491210/sizes/o/
by KaptainKobold
Genius Design: A mad-scientist go-at-it alone approach.




                                            http://www.flickr....
So What’s Changed?
http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master
More Choice: We are all confronted with many more choices.




                                     http://www.flickr.com/...
Complexity: Sites aren’t static or even dynamic they are social.
http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/
set-72157605524746827/ by Algarve_Yoga
Complexity: Sites aren’t the only game in town anymore. Meet the kiosk.




                                              ...
http://www.flickr.com/photos/maarten/3681188288/sizes/o/ by
Marteen
Complexity: 3D is no longer relegated to the realm of gaming. Meet Augmened Realiy.




                                  ...
http://www.flickr.com/photos/webbit/3257541204/sizes/l/ by
Webbit
Complexity: The click is the only interaction model in town. Meet Multitouch.




                                        ...
Complexity: 1024x768 is no longer the only thing you need to worry about. Meet Mobile.
User make decisions quickly
http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
0.1 Sec




          http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
0.1 Sec   1 Sec




                  http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
0.1 Sec   1 Sec   10 Secs




                            http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
0.1 Sec   1 Sec   10 Secs   1 Min




                             http://www.useit.com/alertbox/timeframes.html by Jakob ...
0.1 Sec   1 Sec   10 Secs   1 Min             10 Min




                             http://www.useit.com/alertbox/timefr...
http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master
Users are a lot more vocal




                  http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master
Things Aren’t What They Used To Be
Things Aren’t What They Used To Be




Jan. 2004
Things Aren’t What They Used To Be




Jan. 2004                          Oct. 2009
Why it’s important?
ped*.
                                                       mL ine ss                  was revam
                        ...
cts
                                          odu .
                                         r
                           ...
e ss 2 employees
                                                          ucce than 1
                                   ...
ess million
                                                     ucc 1
                                             for   ...
tion
             uA   tten
    ets   yo
UXg
ent ion
            ou Att
     ge ts y
UX
Case Study Time!
Challenges
Challenges
Re-Energize the Franchise
Challenges
Re-Energize the Franchise   Broadened the Audience
Challenges
Re-Energize the Franchise   Broadened the Audience   Increase Sales
hts
                   Insig
             the
      s with
St art
usic
                           tt he m
                    la bou
           : It’s al
   igh t #1
Ins
social
                                   be ing
                        l ab out
               : It’s al
        t #2
In...
al S ells
            3: S oci
        ht #
Insig
Lessons Learned
http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/
set-72157605524746827/ by Algarve_Yoga
Be flexible, take what opportunity is given to you.




                                          http://www.flickr.com/pho...
http://www.flickr.com/photos/brickmania/3104339306/sizes/l/ By
Brickmania
We may all dream of individual success, but it’s realization is a by-product of great teams




                          ...
Project Keys to Success
All about context. The the industry, the client’s company, it’s competitors and it’s users.




                          ...
All about context. The the industry, the client’s company, it’s competitors and it’s users.




                          ...
All about context. The the industry, the client’s company, it’s competitors and it’s users.




                          ...
All about context. The the industry, the client’s company, it’s competitors and it’s users.




                          ...
All about context. The the industry, the client’s company, it’s competitors and it’s users.




                          ...
All about context. The the industry, the client’s company, it’s competitors and it’s users.




                          ...
Discovery | Research Tools
Research sites, combined with user-research are very a powerful insight combo.



                     Discovery | Researc...
Research sites, combined with user-research are very a powerful insight combo.



                                  Discov...
Research sites, combined with user-research are very a powerful insight combo.



                                  Discov...
Discovery | User Testing + Interviewing




Usibilla Web-Based User Testing              Survey Monkey
        Free resour...
User Testing + Interviewing doesn’t need to happen in a dark room.



             Discovery | User Testing + Interviewing...
Discovery | Personas
Discovery | Personas
Personas shouldn’t be an editorial exercise. They should be full of actionable info.



                           Discove...
Personas shouldn’t be an editorial exercise. They should be full of actionable info.



                           Discove...
Discovery | Closer Look at Pesonas
This is where context, approach and validation is put together to form the vision




                                 Des...
This is where context, approach and validation is put together to form the vision




                                 Des...
This is where context, approach and validation is put together to form the vision




                                 Des...
This is where context, approach and validation is put together to form the vision




                                 Des...
Resources | Design Patterns




        Konigi                                         PatternTap
Great resource for      ...
Design patterns are optimal solutions to common usability or accessibility problems.



                                 R...
Design | Wireframes
Wireframes should not be representative of design. Tell that to someone who cares.



                          Design | W...
Wireframes should not be representative of design. Tell that to someone who cares.



                          Design | W...
ion
                                                                 I terat
                                tching       ...
g ra ms ent priority.frame.
                                        ion Dia cus on conthe old wire
                       ...
.
                                                                      them m.
                                          ...
Development




              http://www.flickr.com/photos/toechsner/3837518712/
Stay in contact. Be seen as a problem solver not someone holding on to artifacts.




                            Developm...
QA




     http://www.flickr.com/photos/gregorybrown/2312539239/sizes/l/
     by Gregory Brown
Be a stakeholder. UX as a discipline should have a seat at the table.




                              QA




           ...
Qs?
Thank You
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
User-Centered Design at an Agency
Upcoming SlideShare
Loading in …5
×

User-Centered Design at an Agency

1,653 views

Published on

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,653
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

User-Centered Design at an Agency

  1. 1. H i .
  2. 2. I’m Sean. • @kalisurfer
  3. 3. I’m Sean. • @kalisurfer http://twofortyeight.com • http://sothisisthefuture.posterous.com
  4. 4. I’m from Let’s talk about user-centric design
  5. 5. What Are The Challenges?
  6. 6. Challenges
  7. 7. Challenges 0 1 2 3
  8. 8. Challenges 0 1 2 3 What is UX?
  9. 9. Challenges 0 1 2 3 What is UX? We do some UX.
  10. 10. Challenges 0 1 2 3 What is UX? We do some UX. We see UX as a competitive adv. and are investing in it.
  11. 11. Challenges 0 1 2 3 What is UX? We do some UX. We see UX as a We see UX as competitive adv. and critical. We’re are investing in it. looking to evolve.
  12. 12. Challenges 0 1 2 3 What is UX? We do some UX. We see UX as a We see UX as competitive adv. and critical. We’re are investing in it. looking to evolve. We don’t have a UX phase.
  13. 13. Challenges 0 1 2 3 What is UX? We do some UX. We see UX as a We see UX as competitive adv. and critical. We’re are investing in it. looking to evolve. We don’t have a UX We’ve started phase. doing wireframes.
  14. 14. Challenges 0 1 2 3 What is UX? We do some UX. We see UX as a We see UX as competitive adv. and critical. We’re are investing in it. looking to evolve. We don’t have a UX We’ve started We’re doing phase. doing wireframes. personas & approaching UX as a collaborative process w/creative.
  15. 15. Challenges 0 1 2 3 What is UX? We do some UX. We see UX as a We see UX as competitive adv. and critical. We’re are investing in it. looking to evolve. We don’t have a UX We’ve started We’re doing We poll users at phase. doing wireframes. personas & every step of the approaching UX as way and are never a collaborative going back to a UX- process w/creative. free project.
  16. 16. So What Exactly is User Experience?
  17. 17. http://www.jjg.net/ Jesse James Garret
  18. 18. sab ility IA +U +C S+ ont ext C http://www.jjg.net/ Jesse James Garret
  19. 19. Mental Models by Indi Young
  20. 20. t rojec cles stage o nta y fap ny Te uches ever Marella that to b an um o f it as Think Mental Models by Indi Young
  21. 21. Mental Models by Indi Young
  22. 22. “Don’t make something unless it is both necessary & useful. But if is it both necessary & useful, don’t hesitate to make it beautiful.” Mental Models by Indi Young
  23. 23. “Don’t make something unless it is both necessary & useful. But if is it both necessary & useful, don’t hesitate to make it beautiful.” Mental Models by Indi Young
  24. 24. Four Approaches to User Experience
  25. 25. http://www.flickr.com/photos/27076277@N04/2634194441/sizes/ o/ by Curzon79
  26. 26. User-centered Design: User’s behaviors and goals are the compass. http://www.flickr.com/photos/27076277@N04/2634194441/sizes/ o/ by Curzon79
  27. 27. http://www.flickr.com/photos/38509565@N00/3204017156/sizes/l/ by legoloverman
  28. 28. Activity-centered Design: User’s tools and activities are at the center of the design equation. http://www.flickr.com/photos/38509565@N00/3204017156/sizes/l/ by legoloverman
  29. 29. http://www.flickr.com/photos/vidgamer838/2874043796/sizes/l/ by Vidgamer838
  30. 30. System Design: User is one variable among many. Focus is on interplay of said variables. http://www.flickr.com/photos/vidgamer838/2874043796/sizes/l/ by Vidgamer838
  31. 31. http://www.flickr.com/photos/kaptainkobold/257491210/sizes/o/ by KaptainKobold
  32. 32. Genius Design: A mad-scientist go-at-it alone approach. http://www.flickr.com/photos/kaptainkobold/257491210/sizes/o/ by KaptainKobold
  33. 33. So What’s Changed?
  34. 34. http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master
  35. 35. More Choice: We are all confronted with many more choices. http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master
  36. 36. Complexity: Sites aren’t static or even dynamic they are social.
  37. 37. http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/ set-72157605524746827/ by Algarve_Yoga
  38. 38. Complexity: Sites aren’t the only game in town anymore. Meet the kiosk. http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/ set-72157605524746827/ by Algarve_Yoga
  39. 39. http://www.flickr.com/photos/maarten/3681188288/sizes/o/ by Marteen
  40. 40. Complexity: 3D is no longer relegated to the realm of gaming. Meet Augmened Realiy. http://www.flickr.com/photos/maarten/3681188288/sizes/o/ by Marteen
  41. 41. http://www.flickr.com/photos/webbit/3257541204/sizes/l/ by Webbit
  42. 42. Complexity: The click is the only interaction model in town. Meet Multitouch. http://www.flickr.com/photos/webbit/3257541204/sizes/l/ by Webbit
  43. 43. Complexity: 1024x768 is no longer the only thing you need to worry about. Meet Mobile.
  44. 44. User make decisions quickly
  45. 45. http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
  46. 46. 0.1 Sec http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
  47. 47. 0.1 Sec 1 Sec http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
  48. 48. 0.1 Sec 1 Sec 10 Secs http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
  49. 49. 0.1 Sec 1 Sec 10 Secs 1 Min http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
  50. 50. 0.1 Sec 1 Sec 10 Secs 1 Min 10 Min http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
  51. 51. http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master
  52. 52. Users are a lot more vocal http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master
  53. 53. Things Aren’t What They Used To Be
  54. 54. Things Aren’t What They Used To Be Jan. 2004
  55. 55. Things Aren’t What They Used To Be Jan. 2004 Oct. 2009
  56. 56. Why it’s important?
  57. 57. ped*. mL ine ss was revam Bo tto ow proce he % after Buy N es t d 300 rovncrease X Imp tore i U S Hero u itar in the G Sales Daily http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen
  58. 58. cts odu . r r P nd features you te low price ae. ntiated on the gam ere compe les of lps Difflayers the ru he ple, music X changed p UXfore Ap pple’s U e B A
  59. 59. e ss 2 employees ucce than 1 nf or tSle mor atio99. With liin ’08. unds in 19 venue t h e Fo door in re X is ts opened its $8 million U l signa ey enjoye d in U X, 37 th nded Grou
  60. 60. ess million ucc 1 for S ure $ n io een able to sec datonly b lack. ounas not in the b h e F yh X is t entality, Etsncing but g et U fi rst m in VC fina a user With http://www.businessweek.com/smallbiz/content/jun2007/ sb20070611_488723_page_2.html by Miller
  61. 61. tion uA tten ets yo UXg
  62. 62. ent ion ou Att ge ts y UX
  63. 63. Case Study Time!
  64. 64. Challenges
  65. 65. Challenges Re-Energize the Franchise
  66. 66. Challenges Re-Energize the Franchise Broadened the Audience
  67. 67. Challenges Re-Energize the Franchise Broadened the Audience Increase Sales
  68. 68. hts Insig the s with St art
  69. 69. usic tt he m la bou : It’s al igh t #1 Ins
  70. 70. social be ing l ab out : It’s al t #2 In sigh
  71. 71. al S ells 3: S oci ht # Insig
  72. 72. Lessons Learned
  73. 73. http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/ set-72157605524746827/ by Algarve_Yoga
  74. 74. Be flexible, take what opportunity is given to you. http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/ set-72157605524746827/ by Algarve_Yoga
  75. 75. http://www.flickr.com/photos/brickmania/3104339306/sizes/l/ By Brickmania
  76. 76. We may all dream of individual success, but it’s realization is a by-product of great teams http://www.flickr.com/photos/brickmania/3104339306/sizes/l/ By Brickmania
  77. 77. Project Keys to Success
  78. 78. All about context. The the industry, the client’s company, it’s competitors and it’s users. Discovery
  79. 79. All about context. The the industry, the client’s company, it’s competitors and it’s users. Discovery Strategy Brief
  80. 80. All about context. The the industry, the client’s company, it’s competitors and it’s users. Discovery Strategy Brief UX Brief
  81. 81. All about context. The the industry, the client’s company, it’s competitors and it’s users. Discovery Strategy Brief UX Brief Personas
  82. 82. All about context. The the industry, the client’s company, it’s competitors and it’s users. Discovery Strategy Brief UX Brief Personas Functional Specs
  83. 83. All about context. The the industry, the client’s company, it’s competitors and it’s users. Discovery Strategy Brief UX Brief Personas Functional Specs Feature Function Matrix
  84. 84. Discovery | Research Tools
  85. 85. Research sites, combined with user-research are very a powerful insight combo. Discovery | Research Tools
  86. 86. Research sites, combined with user-research are very a powerful insight combo. Discovery | Research Tools Forrester Research Great source of industry analysis and trend insight, competitive analysis and best practice
  87. 87. Research sites, combined with user-research are very a powerful insight combo. Discovery | Research Tools Forrester Research Mintel Research Great source of industry Great industry overview analysis and trend insight, and trend identification. competitive analysis and Has Audience best practice segmentation which we use as aid for personas.
  88. 88. Discovery | User Testing + Interviewing Usibilla Web-Based User Testing Survey Monkey Free resource that allows Both paid and non-paid agencies to submit sites to versions are available. a friends, family and Great way to poll users potential customers and and potential customers. see what they like and don’t like.
  89. 89. User Testing + Interviewing doesn’t need to happen in a dark room. Discovery | User Testing + Interviewing Usibilla Web-Based User Testing Survey Monkey Free resource that allows Both paid and non-paid agencies to submit sites to versions are available. a friends, family and Great way to poll users potential customers and and potential customers. see what they like and don’t like.
  90. 90. Discovery | Personas
  91. 91. Discovery | Personas
  92. 92. Personas shouldn’t be an editorial exercise. They should be full of actionable info. Discovery | Personas
  93. 93. Personas shouldn’t be an editorial exercise. They should be full of actionable info. Discovery | Personas
  94. 94. Discovery | Closer Look at Pesonas
  95. 95. This is where context, approach and validation is put together to form the vision Design
  96. 96. This is where context, approach and validation is put together to form the vision Design Page Description Diagrams
  97. 97. This is where context, approach and validation is put together to form the vision Design Page Description Diagrams Wireframes
  98. 98. This is where context, approach and validation is put together to form the vision Design Page Description Diagrams Wireframes Prototypes
  99. 99. Resources | Design Patterns Konigi PatternTap Great resource for Great resource that everything form design highlights solutions other pattern to Omnigraffle peers have used to solve and Visio Stencils. common user experience problems.
  100. 100. Design patterns are optimal solutions to common usability or accessibility problems. Resources | Design Patterns Konigi PatternTap Great resource for Great resource that everything form design highlights solutions other pattern to Omnigraffle peers have used to solve and Visio Stencils. common user experience problems.
  101. 101. Design | Wireframes
  102. 102. Wireframes should not be representative of design. Tell that to someone who cares. Design | Wireframes
  103. 103. Wireframes should not be representative of design. Tell that to someone who cares. Design | Wireframes Sketch Page Description Diagrams High-Fidelity Wireframe
  104. 104. ion I terat tching a llabor . tion + ke Leads to Coenough S it. d do etaile n e can y not be d E veryo ns: Ma Fast, Co P ros:
  105. 105. g ra ms ent priority.frame. ion Dia cus on conthe old wire ipt designer. Fo may want screly to t De Clien t age re left entirto designer. P ctu u ely r u al Str e left enti Pro s: Vis ructur is ual St Cons: V
  106. 106. . them m. ameClients lovelove the refrnation. . Clients Wi imagi ation lity little to imagin ide eaves ttle to gh tFtion. L eaves li Hi men a L u ined. g h doc el constra h orou may fe Pros: T igners : Des Cons
  107. 107. Development http://www.flickr.com/photos/toechsner/3837518712/
  108. 108. Stay in contact. Be seen as a problem solver not someone holding on to artifacts. Development http://www.flickr.com/photos/toechsner/3837518712/
  109. 109. QA http://www.flickr.com/photos/gregorybrown/2312539239/sizes/l/ by Gregory Brown
  110. 110. Be a stakeholder. UX as a discipline should have a seat at the table. QA http://www.flickr.com/photos/gregorybrown/2312539239/sizes/l/ by Gregory Brown
  111. 111. Qs? Thank You

×