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

11/02/11

Prepared by Jose Caballer

Jose

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

Stop: Saying it’s about

tech!

Step 1

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?

Collaborate: It’s about groups

Step 2

1. Inception 2. Execution 3. Launch

Product Definition

1. Brand Definition2. User Profiling3. Business Priorities 4. Competitive Audit5. Story6. Messaging7. Groop Brief

1. User Stories2. Use Cases & Flows3. Sitemap4. Wireframes5. Development Spec.6. Content Spec.

1. Database Layer2. Application Layer3. Presentation Layer4. Elements (CSS, Javascript, Flash etc.)5. Hosting Setup6. Q/A & Load Testing

1. Bug Fixes2. Analytics3. Site Administration4. Multivariate Testing5. Marketing6. Partners7. Celebration

1. Analysis2. Usage Patterns3. Demographic Detail4. Feature Revision5. User Focus Groups6. Release Planning7. Performance

1. Stylescape2. Identity System3. Typography4. Iconography5. Color Palette6. Style Guide

1. Copywriting2. Imagery3. Videography4. Animation5. Editing6. Rights Clearances7. Content Loading

1. Template Design2. User Interface3. Front End Spec.4. Design Application5. User Testing6. Product Revisions7. Marketing Strategy

Information Architecture

Identity & Visual Design

User Experience

Development (Front & Back)

Content Creation

Launch & Iterate

“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

Listen: It’s not about you

Step 3

Don’t do “it”: Design “why”

Step 4

1

Sarah Talbott Manager

33 year-oldFemale Newly married

Responsible for the day-to-day execution of campaign elements for her department.

She needs help directing her work to highest priority tasks and milestones, reducing trivial workload, seeing where progress is being made in related activities and enabling visibility to her peers and manager.

Will adopt the IMM tool if it is easy and visually intuitive, will reject if it is complicated, dense and overly data heavy.

Watch Milestone

Online Ideation

Create Checklist

Start Date: 00/00/12 Approvals: Asset Link:

Filmmaker Verbal app’l in meeting.Due Date: 00/00/12

Online Debut: 00/00/12

Status:

Online Creative Tier 1

Priority: High

<internal link to DDS or AS>OL

Notes:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Studio Awaiting reply.Talent Email approvalLegal --

1Duration: 6 months

Approved

Edit Milestone Clone Milestone

1

2

Sarah arrived on Monday morning to find an email from legal letting her know that the Winnie the Pooh poster approval is getting delayed by 2 weeks. Nooooo!

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

Once on the Campaign detail page, she clicks on “Edit Milestone”

3

Sarah Talbott

Legal Delay with Winnie the Pooh

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.

Best,Chris

YourBrand

YourGoals

Users’Needs

Who You Are

User Needs

Business Goals

Business Goal

User Need

Features & Functionality

43

1

Sarah Talbott Manager

33 year-oldFemale Newly married

Responsible for the day-to-day execution of campaign elements for her department.

She needs help directing her work to highest priority tasks and milestones, reducing trivial workload, seeing where progress is being made in related activities and enabling visibility to her peers and manager.

Will adopt the IMM tool if it is easy and visually intuitive, will reject if it is complicated, dense and overly data heavy.

Watch Milestone

Online Ideation

Create Checklist

Start Date: 00/00/12 Approvals: Asset Link:

Filmmaker Verbal app’l in meeting.Due Date: 00/00/12

Online Debut: 00/00/12

Status:

Online Creative Tier 1

Priority: High

<internal link to DDS or AS>OL

Notes:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Studio Awaiting reply.Talent Email approvalLegal --

1Duration: 6 months

Approved

Edit Milestone Clone Milestone

1

2

Sarah arrived on Monday morning to find an email from legal letting her know that the Winnie the Pooh poster approval is getting delayed by 2 weeks. Nooooo!

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

Once on the Campaign detail page, she clicks on “Edit Milestone”

3

Sarah Talbott

Legal Delay with Winnie the Pooh

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.

Best,Chris

1. Inception 2. Execution 3. Launch

Product Definition

1. Brand Definition2. User Profiling3. Business Priorities 4. Competitive Audit5. Story6. Messaging7. Groop Brief

1. User Stories2. Use Cases & Flows3. Sitemap4. Wireframes5. Development Spec.6. Content Spec.

1. Database Layer2. Application Layer3. Presentation Layer4. Elements (CSS, Javascript, Flash etc.)5. Hosting Setup6. Q/A & Load Testing

1. Bug Fixes2. Analytics3. Site Administration4. Multivariate Testing5. Marketing6. Partners7. Celebration

1. Analysis2. Usage Patterns3. Demographic Detail4. Feature Revision5. User Focus Groups6. Release Planning7. Performance

1. Stylescape2. Identity System3. Typography4. Iconography5. Color Palette6. Style Guide

1. Copywriting2. Imagery3. Videography4. Animation5. Editing6. Rights Clearances7. Content Loading

1. Template Design2. User Interface3. Front End Spec.4. Design Application5. User Testing6. Product Revisions7. Marketing Strategy

Information Architecture

Identity & Visual Design

User Experience

Development (Front & Back)

Content Creation

Launch & Iterate

Be George Lucas: Tell Stories

Step 5

You are not are not a “Graphic Designer” you are a movie director - you tell stories!

Face your fear: “Luke I am your

father”

Step 6

YOU

evil flakeyobnoxious

product

dorkyEvil Flakey Obnoxious Dorky

big ideas & openness

promoting ideas & social

technical & deep knowledge

control & consistency

What type of designer are you?

thegroop.net/blog

Teamtreehouse.comLynda.compsd2html.comElance.comHOW Interactive Conf. 2012

Be(at) the 1%: Don’t work for

change. Be change.

Step 7

“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