Web Design is a Cloud, Not a Clock
Sarah B. Nelson | FOWD NYC 2011




               Training, workshop design, coaching and facilitation for creative organizations.
#cloudclock
@sarahbeee

Training, workshop design, coaching and facilitation for creative organizations.
β€œThe frightening and most difficult thing about being what
someone calls a β€˜creative person’ is that you have
absolutely no idea where any of your thoughts come from,
and you have no idea where they’re going to come from
tomorrow.”
 β€” β€œArt and Copy” documentary




Training, workshop design, coaching and facilitation for creative organizations.
!.
Training, workshop design, coaching and facilitation for creative organizations.
?,
Training, workshop design, coaching and facilitation for creative organizations.
What are some common
assumptions
about design workflow?
Official workflows ensure


 great
 work.
There must be

   one
   right
   way          to design.
Everyone should use the


same
tools.
If we


diagram our workflow and
        give it to everyone
        on the project, it
        will run smoothly.
PLANNING                                                                                               DESIGN




                   Inception                                       Definition                                          Go Broad                             Go Deep                             Detailed Design

      β€’   What is it?                                  β€’   How will we approach this                       β€’   How many different ways could    β€’   How could this solution work?         β€’   Let’s get this out the door.
      β€’   Is it something we should                        problem?                                            we solve this problem?
          pursue?                                      β€’   What is the scope of this
                                                           problem?

      Activities                                       Activities                                          Activities                           Activities                                Activities
      Develop business case                            Develop design plan                                 Hold Sketchboard sessions            Hold Sketchboard sessions                 Develop use cases
      Develop vision                                   Scope the problem                                   1) Identify 3 directions             1) Map golden path                        Map all paths
      Identify audiences                               Refine the vision                                   3 Interaction Models                 2) Design sketchboard session             Design screens and document
      Identify team                                                                                        3 Visual Approaches                  3) Iteratively develop designs            Document all page-based interactions
                                                       Outcomes                                            2) Sketch ideas for each direction   Conduct Design Reviews                    Identify and document design patterns
      Outcomes                                         Design Plan                                         3) Modify ideas                      Develop click-through prototype
      Project Brief, Draft 1                           Project Brief, Final                                Conduct Design Reviews               Conduct usability testing                 Outcomes
      Team                                                                                                 Select 1 Design Concept              Revise Design Plan                        Design specification
                                                                                                           Revise Design Plan
                                                                                                                                                Outcomes
                                                                                                           Outcomes                             Click-through prototype of golden path,
                                                                                                           1 Selected Concept                   with visual design




April
Shannon (3s)
Pipeline Lead (4s)
Designers (5s & 6s)




Biz
Tech



                        Training, workshop design, coaching and facilitation for creative organizations.
know customers


                                                                                                                             develop
                                       generate insights                                 map experience   align strategy   measurement
                                                                                                                              model



know business




      Training, workshop design, coaching and facilitation for creative organizations.
Training, workshop design, coaching and facilitation for creative organizations.
make
                                                                 think
plan



                                                                                   test
Training, workshop design, coaching and facilitation for creative organizations.
Bosses
make the


Processes
Training, workshop design, coaching and facilitation for creative organizations.
not that
this
Training, workshop design, coaching and facilitation for creative organizations.
Training, workshop design, coaching and facilitation for creative organizations.
Training, workshop design, coaching and facilitation for creative organizations.
output
input




   Training, workshop design, coaching and facilitation for creative organizations.
input                                            output




Training, workshop design, coaching and facilitation for creative organizations.
Training, workshop design, coaching and facilitation for creative organizations.
Training, workshop design, coaching and facilitation for creative organizations.
design process is an
                                                         emergent
                                                          system
Training, workshop design, coaching and facilitation for creative organizations.
working
    agreements
Training, workshop design, coaching and facilitation for creative organizations.
clear purpose
Training, workshop design, coaching and facilitation for creative organizations.
trust
Training, workshop design, coaching and facilitation for creative organizations.
clear
   roles and
responsibilities
Training, workshop design, coaching and facilitation for creative organizations.
agreed-upon
  approach
Training, workshop design, coaching and facilitation for creative organizations.
user
    involvement
Training, workshop design, coaching and facilitation for creative organizations.
stakeholder
   engagement
Training, workshop design, coaching and facilitation for creative organizations.
Sarah   Kristy   John
Sarah   Kristy   John
Goals   Goals    Goals
1       1        1
2       2        2
3       3        3
Sarah   Kristy   John
Goals   Goals    Goals
1       1        1
2       2        2
3       3        3

FEARS   FEARS    FEARS
1       1        1
2       2        2
3       3        3
Sarah          Kristy         John
Goals          Goals          Goals
1              1              1
2              2              2
3              3              3

FEARS          FEARS          FEARS
1              1              1
2              2              2
3              3              3

EXPECTATIONS   EXPECTATIONS   EXPECTATIONS
1              1              1
2              2              2
3              3              3
Sarah   creative lead   Kristy   PM    John    UX LEad

Goals                   Goals          Goals
1                       1              1
2                       2              2
3                       3              3

FEARS                   FEARS          FEARS
1                       1              1
2                       2              2
3                       3              3

EXPECTATIONS            EXPECTATIONS   EXPECTATIONS
1                       1              1
2                       2              2
3                       3              3
Sarah        creative lead

Goals
1 Add a new e-commerce piece to my portfolio
2 To increase our experience with research projects
3 Try out a new analysis technique for our research
Sarah        creative lead

Goals
1 Add a new e-commerce piece to my portfolio
2 To increase our experience with research projects
3 Try out a new analysis technique for our research

FEARS
1 That I won’t be able to spend enough time with the team
2 that the client’s expectations are unreasonable
3 That the project is underscoped
Sarah        creative lead

Goals
1 Add a new e-commerce piece to my portfolio
2 To increase our experience with research projects
3 Try out a new analysis technique for our research

FEARS
1 That I won’t be able to spend enough time with the team
2 that the client’s expectations are unreasonable
3 That the project is underscoped

EXPECTATIONS
1 Of Sarah: That she is as accessible as possible
2 of the team: That people communicate honestly with each other
3 of SaRAH: that she has the team’s back
just because you wrote it on the board
doesn’t make it true




Training, workshop design, coaching and facilitation for creative organizations.
Bosses
make the


Processes
thank you!
sarah@tapirandtine.com
@sarahbeee
www.sarahbnelson.com
www.tapirandtine.com




     Training, workshop design, coaching and facilitation for creative organizations.
photo credits
photo of Karl Popper by Steve Pyke




     Training, workshop design, coaching and facilitation for creative organizations.

Web Design is a Cloud, Not a Clock

  • 1.
    Web Design isa Cloud, Not a Clock Sarah B. Nelson | FOWD NYC 2011 Training, workshop design, coaching and facilitation for creative organizations.
  • 2.
    #cloudclock @sarahbeee Training, workshop design,coaching and facilitation for creative organizations.
  • 4.
    β€œThe frightening andmost difficult thing about being what someone calls a β€˜creative person’ is that you have absolutely no idea where any of your thoughts come from, and you have no idea where they’re going to come from tomorrow.” β€” β€œArt and Copy” documentary Training, workshop design, coaching and facilitation for creative organizations.
  • 5.
    !. Training, workshop design,coaching and facilitation for creative organizations.
  • 6.
    ?, Training, workshop design,coaching and facilitation for creative organizations.
  • 9.
    What are somecommon assumptions about design workflow?
  • 10.
  • 11.
    There must be one right way to design.
  • 12.
    Everyone should usethe same tools.
  • 13.
    If we diagram ourworkflow and give it to everyone on the project, it will run smoothly.
  • 14.
    PLANNING DESIGN Inception Definition Go Broad Go Deep Detailed Design β€’ What is it? β€’ How will we approach this β€’ How many different ways could β€’ How could this solution work? β€’ Let’s get this out the door. β€’ Is it something we should problem? we solve this problem? pursue? β€’ What is the scope of this problem? Activities Activities Activities Activities Activities Develop business case Develop design plan Hold Sketchboard sessions Hold Sketchboard sessions Develop use cases Develop vision Scope the problem 1) Identify 3 directions 1) Map golden path Map all paths Identify audiences Refine the vision 3 Interaction Models 2) Design sketchboard session Design screens and document Identify team 3 Visual Approaches 3) Iteratively develop designs Document all page-based interactions Outcomes 2) Sketch ideas for each direction Conduct Design Reviews Identify and document design patterns Outcomes Design Plan 3) Modify ideas Develop click-through prototype Project Brief, Draft 1 Project Brief, Final Conduct Design Reviews Conduct usability testing Outcomes Team Select 1 Design Concept Revise Design Plan Design specification Revise Design Plan Outcomes Outcomes Click-through prototype of golden path, 1 Selected Concept with visual design April Shannon (3s) Pipeline Lead (4s) Designers (5s & 6s) Biz Tech Training, workshop design, coaching and facilitation for creative organizations.
  • 15.
    know customers develop generate insights map experience align strategy measurement model know business Training, workshop design, coaching and facilitation for creative organizations.
  • 16.
    Training, workshop design,coaching and facilitation for creative organizations.
  • 17.
    make think plan test Training, workshop design, coaching and facilitation for creative organizations.
  • 18.
  • 19.
    Training, workshop design,coaching and facilitation for creative organizations.
  • 20.
  • 22.
    Training, workshop design,coaching and facilitation for creative organizations.
  • 23.
    Training, workshop design,coaching and facilitation for creative organizations.
  • 24.
    Training, workshop design,coaching and facilitation for creative organizations.
  • 27.
    output input Training, workshop design, coaching and facilitation for creative organizations.
  • 28.
    input output Training, workshop design, coaching and facilitation for creative organizations.
  • 29.
    Training, workshop design,coaching and facilitation for creative organizations.
  • 30.
    Training, workshop design,coaching and facilitation for creative organizations.
  • 31.
    design process isan emergent system Training, workshop design, coaching and facilitation for creative organizations.
  • 32.
    working agreements Training, workshop design, coaching and facilitation for creative organizations.
  • 33.
    clear purpose Training, workshopdesign, coaching and facilitation for creative organizations.
  • 34.
    trust Training, workshop design,coaching and facilitation for creative organizations.
  • 35.
    clear roles and responsibilities Training, workshop design, coaching and facilitation for creative organizations.
  • 36.
    agreed-upon approach Training,workshop design, coaching and facilitation for creative organizations.
  • 37.
    user involvement Training, workshop design, coaching and facilitation for creative organizations.
  • 38.
    stakeholder engagement Training, workshop design, coaching and facilitation for creative organizations.
  • 39.
    Sarah Kristy John
  • 40.
    Sarah Kristy John Goals Goals Goals 1 1 1 2 2 2 3 3 3
  • 41.
    Sarah Kristy John Goals Goals Goals 1 1 1 2 2 2 3 3 3 FEARS FEARS FEARS 1 1 1 2 2 2 3 3 3
  • 42.
    Sarah Kristy John Goals Goals Goals 1 1 1 2 2 2 3 3 3 FEARS FEARS FEARS 1 1 1 2 2 2 3 3 3 EXPECTATIONS EXPECTATIONS EXPECTATIONS 1 1 1 2 2 2 3 3 3
  • 43.
    Sarah creative lead Kristy PM John UX LEad Goals Goals Goals 1 1 1 2 2 2 3 3 3 FEARS FEARS FEARS 1 1 1 2 2 2 3 3 3 EXPECTATIONS EXPECTATIONS EXPECTATIONS 1 1 1 2 2 2 3 3 3
  • 44.
    Sarah creative lead Goals 1 Add a new e-commerce piece to my portfolio 2 To increase our experience with research projects 3 Try out a new analysis technique for our research
  • 45.
    Sarah creative lead Goals 1 Add a new e-commerce piece to my portfolio 2 To increase our experience with research projects 3 Try out a new analysis technique for our research FEARS 1 That I won’t be able to spend enough time with the team 2 that the client’s expectations are unreasonable 3 That the project is underscoped
  • 46.
    Sarah creative lead Goals 1 Add a new e-commerce piece to my portfolio 2 To increase our experience with research projects 3 Try out a new analysis technique for our research FEARS 1 That I won’t be able to spend enough time with the team 2 that the client’s expectations are unreasonable 3 That the project is underscoped EXPECTATIONS 1 Of Sarah: That she is as accessible as possible 2 of the team: That people communicate honestly with each other 3 of SaRAH: that she has the team’s back
  • 47.
    just because youwrote it on the board doesn’t make it true Training, workshop design, coaching and facilitation for creative organizations.
  • 48.
  • 49.
    thank you! sarah@tapirandtine.com @sarahbeee www.sarahbnelson.com www.tapirandtine.com Training, workshop design, coaching and facilitation for creative organizations.
  • 50.
    photo credits photo ofKarl Popper by Steve Pyke Training, workshop design, coaching and facilitation for creative organizations.