HOW Interactive Conference
7 steps to becoming a User Experience focused graphic designer

11/02/11




Prepared by Jose Caballer
Jo se
I am a
web designer
Born Digital
Razorfish 1996-2001   The Groop 2001 - Today
Question:
How many of you do
mainly print design?
Question:
How many of you
do only web?
Question:
How many of you do
a little bit of both?
How many of you have had a
challenging web project, or a
challenging experience doing
code, or interacting with a
programmer, or setting
expectations with a client?
7 steps
to becoming a
User Experience focused
graphic designer
Step 1
Step 1



        Stop:
   Saying it’s about
        tech!
I have been designing websites for
almost 15 years and I have yet to code
        a website for a client...
But José,
I am only one person in my studio?
Step 2



      Collaborate:
   It’s about groups
1. Inception                       2. Execution                             3. Launch

                                                                           1. Database Layer
                         1. User Stories
                                                                           2. Application Layer
                         2. Use Cases & Flows
                                                                           3. Presentation Layer     1. Bug Fixes
                         3. Sitemap
                                                                           4. Elements (CSS,         2. Analytics
                         4. Wireframes                                     Javascript, Flash etc.)
                                                                                                     3. Site Administration
                         5. Development Spec.                              5. Hosting Setup
                                                                                                     4. Multivariate Testing
                         6. Content Spec.                                  6. Q/A & Load Testing
                                                                                                     5. Marketing
                                                                                                     6. Partners
                             Information                                       Development
                             Architecture                                     (Front & Back)         7. Celebration


                                                        User
 Product Definition
                                                     Experience                                        Launch & Iterate


                           Identity & Visual                                     Content
                               Design           1. Template Design               Creation
1. Brand Definition
                                                2. User Interface
2. User Profiling
                                                                            1. Copywriting
                                                3. Front End Spec.
3. Business Priorities   1. Stylescape
                                                                            2. Imagery                                         1. Analysis
                                                4. Design Application
4. Competitive Audit     2. Identity System
                                                                            3. Videography                                     2. Usage Patterns
                                                5. User Testing
5. Story                 3. Typography
                                                                            4. Animation                                       3. Demographic Detail
                                                6. Product Revisions
6. Messaging             4. Iconography
                                                                            5. Editing                                         4. Feature Revision
                                                7. Marketing Strategy
7. Groop Brief           5. Color Palette
                                                                            6. Rights Clearances                               5. User Focus Groups
                         6. Style Guide
                                                                            7. Content Loading                                 6. Release Planning
                                                                                                                               7. Performance
“This whole ‘collaboration, we’ll
work together as a team’... I find
it f***ing difficult...”
Advertising Creative, Dec 2010 Fast Company Article
This is because “Interactive
Design” requires Business,
Creative, Tech and Marketing
people to work together. Each with
different interests in a project.
ROI
RGB
SQL
USP
Business   Creative    Tech         Marketing




     ROI         RGB                            USP
                              SQL
Step 3



          Listen:
   It’s not about you
Step 4



          Don’t do “it”:
         Design “why”
She clicks on the
                                                                                                                                                                                       2                     “Campaigns” pulldown
                                                                                                                                                                                                             and finds Winnie The
                                                                                                                                                                                                             Pooh


                                                        Sarah Talbott


                                                        Legal Delay with Winnie the Pooh

                                                                                                      1

                                                    Sarah,
                                                    wanted to let you know that we are running into issues
                                                    getting final legal approval on the Winnie the Pooh poster.
                                                    We are going to be delayed by about two weeks.

Sarah Talbott                                       Best,
                                                    Chris

Manager

33 year-old
Female
                                              1                     Sarah arrived on
Newly married
                                                                    Monday morning to                                                            Once on the Campaign
Responsible for the day-to-day execution of
                                                                    find an email from legal                                                     detail page, she clicks on
campaign elements for her department.                               letting her know that                                                        “Edit Milestone”
                                                                    the Winnie the Pooh
                                                                                                                                                                                                                           3
She needs help directing her work to highest
priority tasks and milestones, reducing trivial
workload, seeing where progress is being                            poster approval is
made in related activities and enabling
visibility to her peers and manager.
                                                                    getting delayed by 2
Will adopt the IMM tool if it is easy and
                                                                    weeks. Nooooo!                                        Online Ideation          Online Creative Tier 1
visually intuitive, will reject if it is complicated,
                                                                                                                     OL
                                                                                                                          Start Date: 00/00/12     Status:       Approved   Approvals:                                Asset Link:   <internal link to DDS or AS>
dense and overly data heavy.
                                                                                                                          Due Date: 00/00/12       Priority:   High
                                                                                                                 1                                                             Filmmaker   Verbal app’l in meeting.   Notes:
                                                                                                                          Duration:   6 months                                 Studio      Awaiting reply.            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                                                                                                                                                               Talent      Email approval             sed do eiusmod tempor incididunt ut labore et dolore
                                                                                                                          Online Debut: 00/00/12                                                                      magna aliqua.
                                                                                                                                                                               Legal       --

                                                                                                                             Create Checklist                                                                                                    Edit Milestone    Clone Milestone
Your
        Brand




Your            Users’
Goals           Needs
Who You Are
User Needs
Business Goals
User Need


                       Features & Functionality



Business Goal




                                                  43
She clicks on the
                                                                                                                                                                                       2                     “Campaigns” pulldown
                                                                                                                                                                                                             and finds Winnie The
                                                                                                                                                                                                             Pooh


                                                        Sarah Talbott


                                                        Legal Delay with Winnie the Pooh

                                                                                                      1

                                                    Sarah,
                                                    wanted to let you know that we are running into issues
                                                    getting final legal approval on the Winnie the Pooh poster.
                                                    We are going to be delayed by about two weeks.

Sarah Talbott                                       Best,
                                                    Chris

Manager

33 year-old
Female
                                              1                     Sarah arrived on
Newly married
                                                                    Monday morning to                                                            Once on the Campaign
Responsible for the day-to-day execution of
                                                                    find an email from legal                                                     detail page, she clicks on
campaign elements for her department.                               letting her know that                                                        “Edit Milestone”
                                                                    the Winnie the Pooh
                                                                                                                                                                                                                           3
She needs help directing her work to highest
priority tasks and milestones, reducing trivial
workload, seeing where progress is being                            poster approval is
made in related activities and enabling
visibility to her peers and manager.
                                                                    getting delayed by 2
Will adopt the IMM tool if it is easy and
                                                                    weeks. Nooooo!                                        Online Ideation          Online Creative Tier 1
visually intuitive, will reject if it is complicated,
                                                                                                                     OL
                                                                                                                          Start Date: 00/00/12     Status:       Approved   Approvals:                                Asset Link:   <internal link to DDS or AS>
dense and overly data heavy.
                                                                                                                          Due Date: 00/00/12       Priority:   High
                                                                                                                 1                                                             Filmmaker   Verbal app’l in meeting.   Notes:
                                                                                                                          Duration:   6 months                                 Studio      Awaiting reply.            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                                                                                                                                                               Talent      Email approval             sed do eiusmod tempor incididunt ut labore et dolore
                                                                                                                          Online Debut: 00/00/12                                                                      magna aliqua.
                                                                                                                                                                               Legal       --

                                                                                                                             Create Checklist                                                                                                    Edit Milestone    Clone Milestone
1. Inception                       2. Execution                             3. Launch

                                                                           1. Database Layer
                         1. User Stories
                                                                           2. Application Layer
                         2. Use Cases & Flows
                                                                           3. Presentation Layer     1. Bug Fixes
                         3. Sitemap
                                                                           4. Elements (CSS,         2. Analytics
                         4. Wireframes                                     Javascript, Flash etc.)
                                                                                                     3. Site Administration
                         5. Development Spec.                              5. Hosting Setup
                                                                                                     4. Multivariate Testing
                         6. Content Spec.                                  6. Q/A & Load Testing
                                                                                                     5. Marketing
                                                                                                     6. Partners
                             Information                                       Development
                             Architecture                                     (Front & Back)         7. Celebration


                                                        User
 Product Definition
                                                     Experience                                        Launch & Iterate


                           Identity & Visual                                     Content
                               Design           1. Template Design               Creation
1. Brand Definition
                                                2. User Interface
2. User Profiling
                                                                            1. Copywriting
                                                3. Front End Spec.
3. Business Priorities   1. Stylescape
                                                                            2. Imagery                                         1. Analysis
                                                4. Design Application
4. Competitive Audit     2. Identity System
                                                                            3. Videography                                     2. Usage Patterns
                                                5. User Testing
5. Story                 3. Typography
                                                                            4. Animation                                       3. Demographic Detail
                                                6. Product Revisions
6. Messaging             4. Iconography
                                                                            5. Editing                                         4. Feature Revision
                                                7. Marketing Strategy
7. Groop Brief           5. Color Palette
                                                                            6. Rights Clearances                               5. User Focus Groups
                         6. Style Guide
                                                                            7. Content Loading                                 6. Release Planning
                                                                                                                               7. Performance
Step 5



  Be George Lucas:
     Tell Stories
You are not are not a “Graphic
Designer” you are a movie
director - you tell stories!
Step 6



    Face your fear:
    “Luke I am your
        father”
YOU
What type of designer are you?

    Evil
     evil         Flakey
                    flakey
                                 obnoxious
                                Obnoxious         Dorky
                                                    dorky




                                        product




   control       big ideas   promoting ideas     technical
& consistency   & openness      & social     & deep knowledge
thegroop.net/blog
Teamtreehouse.com
Lynda.com
psd2html.com
Elance.com
HOW Interactive Conf. 2012
Step 7


         Be(at) the 1%:
         Don’t work for
           change.
          Be change.
“The last few decades have belonged to the computer
programmers who could crank code, lawyers who
could craft contracts, MBAs who could crunch
numbers. But the keys to the kingdom are changing
hands. The future belongs to creators, designers,
storytellers, caregivers, big picture thinkers – will
now reap society’s richest rewards and share its
greatest joys.”
Daniel Pink, A Whole New Mind
groopskool.net
thisweekinwebdesign.com
In Closing
Production Designer: $35
Visual Designer: $75
Production Designer: $35
User Experience Designer: $125
Visual Designer: $75
Production Designer: $35
a big favor
@josecaballer
On a scale of 1 to 10, 1 being “sucked”
10 being “holy mother of god”...
How did I do?

What can I improve?
Thank You

7 steps to becoming a User Experience focused graphic designer

  • 1.
    HOW Interactive Conference 7steps to becoming a User Experience focused graphic designer 11/02/11 Prepared by Jose Caballer
  • 2.
  • 3.
    I am a webdesigner
  • 5.
  • 6.
    Razorfish 1996-2001 The Groop 2001 - Today
  • 7.
    Question: How many ofyou do mainly print design?
  • 8.
    Question: How many ofyou do only web?
  • 9.
    Question: How many ofyou do a little bit of both?
  • 10.
    How many ofyou have had a challenging web project, or a challenging experience doing code, or interacting with a programmer, or setting expectations with a client?
  • 11.
    7 steps to becominga User Experience focused graphic designer
  • 12.
  • 13.
    Step 1 Stop: Saying it’s about tech!
  • 18.
    I have beendesigning websites for almost 15 years and I have yet to code a website for a client...
  • 19.
    But José, I amonly one person in my studio?
  • 20.
    Step 2 Collaborate: It’s about groups
  • 21.
    1. Inception 2. Execution 3. Launch 1. Database Layer 1. User Stories 2. Application Layer 2. Use Cases & Flows 3. Presentation Layer 1. Bug Fixes 3. Sitemap 4. Elements (CSS, 2. Analytics 4. Wireframes Javascript, Flash etc.) 3. Site Administration 5. Development Spec. 5. Hosting Setup 4. Multivariate Testing 6. Content Spec. 6. Q/A & Load Testing 5. Marketing 6. Partners Information Development Architecture (Front & Back) 7. Celebration User Product Definition Experience Launch & Iterate Identity & Visual Content Design 1. Template Design Creation 1. Brand Definition 2. User Interface 2. User Profiling 1. Copywriting 3. Front End Spec. 3. Business Priorities 1. Stylescape 2. Imagery 1. Analysis 4. Design Application 4. Competitive Audit 2. Identity System 3. Videography 2. Usage Patterns 5. User Testing 5. Story 3. Typography 4. Animation 3. Demographic Detail 6. Product Revisions 6. Messaging 4. Iconography 5. Editing 4. Feature Revision 7. Marketing Strategy 7. Groop Brief 5. Color Palette 6. Rights Clearances 5. User Focus Groups 6. Style Guide 7. Content Loading 6. Release Planning 7. Performance
  • 22.
    “This whole ‘collaboration,we’ll work together as a team’... I find it f***ing difficult...” Advertising Creative, Dec 2010 Fast Company Article
  • 23.
    This is because“Interactive Design” requires Business, Creative, Tech and Marketing people to work together. Each with different interests in a project.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
    Business Creative Tech Marketing ROI RGB USP SQL
  • 29.
    Step 3 Listen: It’s not about you
  • 37.
    Step 4 Don’t do “it”: Design “why”
  • 38.
    She clicks onthe 2 “Campaigns” pulldown and finds Winnie The Pooh Sarah Talbott Legal Delay with Winnie the Pooh 1 Sarah, wanted to let you know that we are running into issues getting final legal approval on the Winnie the Pooh poster. We are going to be delayed by about two weeks. Sarah Talbott Best, Chris Manager 33 year-old Female 1 Sarah arrived on Newly married Monday morning to Once on the Campaign Responsible for the day-to-day execution of find an email from legal detail page, she clicks on campaign elements for her department. letting her know that “Edit Milestone” the Winnie the Pooh 3 She needs help directing her work to highest priority tasks and milestones, reducing trivial workload, seeing where progress is being poster approval is made in related activities and enabling visibility to her peers and manager. getting delayed by 2 Will adopt the IMM tool if it is easy and weeks. Nooooo! Online Ideation Online Creative Tier 1 visually intuitive, will reject if it is complicated, OL Start Date: 00/00/12 Status: Approved Approvals: Asset Link: <internal link to DDS or AS> dense and overly data heavy. Due Date: 00/00/12 Priority: High 1 Filmmaker Verbal app’l in meeting. Notes: Duration: 6 months Studio Awaiting reply. Lorem ipsum dolor sit amet, consectetur adipisicing elit, Talent Email approval sed do eiusmod tempor incididunt ut labore et dolore Online Debut: 00/00/12 magna aliqua. Legal -- Create Checklist Edit Milestone Clone Milestone
  • 39.
    Your Brand Your Users’ Goals Needs
  • 40.
  • 41.
  • 42.
  • 43.
    User Need Features & Functionality Business Goal 43
  • 44.
    She clicks onthe 2 “Campaigns” pulldown and finds Winnie The Pooh Sarah Talbott Legal Delay with Winnie the Pooh 1 Sarah, wanted to let you know that we are running into issues getting final legal approval on the Winnie the Pooh poster. We are going to be delayed by about two weeks. Sarah Talbott Best, Chris Manager 33 year-old Female 1 Sarah arrived on Newly married Monday morning to Once on the Campaign Responsible for the day-to-day execution of find an email from legal detail page, she clicks on campaign elements for her department. letting her know that “Edit Milestone” the Winnie the Pooh 3 She needs help directing her work to highest priority tasks and milestones, reducing trivial workload, seeing where progress is being poster approval is made in related activities and enabling visibility to her peers and manager. getting delayed by 2 Will adopt the IMM tool if it is easy and weeks. Nooooo! Online Ideation Online Creative Tier 1 visually intuitive, will reject if it is complicated, OL Start Date: 00/00/12 Status: Approved Approvals: Asset Link: <internal link to DDS or AS> dense and overly data heavy. Due Date: 00/00/12 Priority: High 1 Filmmaker Verbal app’l in meeting. Notes: Duration: 6 months Studio Awaiting reply. Lorem ipsum dolor sit amet, consectetur adipisicing elit, Talent Email approval sed do eiusmod tempor incididunt ut labore et dolore Online Debut: 00/00/12 magna aliqua. Legal -- Create Checklist Edit Milestone Clone Milestone
  • 46.
    1. Inception 2. Execution 3. Launch 1. Database Layer 1. User Stories 2. Application Layer 2. Use Cases & Flows 3. Presentation Layer 1. Bug Fixes 3. Sitemap 4. Elements (CSS, 2. Analytics 4. Wireframes Javascript, Flash etc.) 3. Site Administration 5. Development Spec. 5. Hosting Setup 4. Multivariate Testing 6. Content Spec. 6. Q/A & Load Testing 5. Marketing 6. Partners Information Development Architecture (Front & Back) 7. Celebration User Product Definition Experience Launch & Iterate Identity & Visual Content Design 1. Template Design Creation 1. Brand Definition 2. User Interface 2. User Profiling 1. Copywriting 3. Front End Spec. 3. Business Priorities 1. Stylescape 2. Imagery 1. Analysis 4. Design Application 4. Competitive Audit 2. Identity System 3. Videography 2. Usage Patterns 5. User Testing 5. Story 3. Typography 4. Animation 3. Demographic Detail 6. Product Revisions 6. Messaging 4. Iconography 5. Editing 4. Feature Revision 7. Marketing Strategy 7. Groop Brief 5. Color Palette 6. Rights Clearances 5. User Focus Groups 6. Style Guide 7. Content Loading 6. Release Planning 7. Performance
  • 47.
    Step 5 Be George Lucas: Tell Stories
  • 50.
    You are notare not a “Graphic Designer” you are a movie director - you tell stories!
  • 51.
    Step 6 Face your fear: “Luke I am your father”
  • 53.
  • 54.
    What type ofdesigner are you? Evil evil Flakey flakey obnoxious Obnoxious Dorky dorky product control big ideas promoting ideas technical & consistency & openness & social & deep knowledge
  • 55.
  • 57.
  • 58.
    Step 7 Be(at) the 1%: Don’t work for change. Be change.
  • 63.
    “The last fewdecades have belonged to the computer programmers who could crank code, lawyers who could craft contracts, MBAs who could crunch numbers. But the keys to the kingdom are changing hands. The future belongs to creators, designers, storytellers, caregivers, big picture thinkers – will now reap society’s richest rewards and share its greatest joys.” Daniel Pink, A Whole New Mind
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
    User Experience Designer:$125 Visual Designer: $75 Production Designer: $35
  • 76.
  • 77.
    @josecaballer On a scaleof 1 to 10, 1 being “sucked” 10 being “holy mother of god”... How did I do? What can I improve?
  • 78.