7 steps to becoming a User Experience focused graphic designer

3,866 views

Published on

7 steps to becoming a User Experience focused graphic designer

Published in: Technology, Business
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
3,866
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
259
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

7 steps to becoming a User Experience focused graphic designer

  1. 1. HOW Interactive Conference7 steps to becoming a User Experience focused graphic designer11/02/11Prepared by Jose Caballer
  2. 2. Jo se
  3. 3. I am aweb designer
  4. 4. Born Digital
  5. 5. Razorfish 1996-2001 The Groop 2001 - Today
  6. 6. Question:How many of you domainly print design?
  7. 7. Question:How many of youdo only web?
  8. 8. Question:How many of you doa little bit of both?
  9. 9. How many of you have had achallenging web project, or achallenging experience doingcode, or interacting with aprogrammer, or settingexpectations with a client?
  10. 10. 7 stepsto becoming aUser Experience focusedgraphic designer
  11. 11. Step 1
  12. 12. Step 1 Stop: Saying it’s about tech!
  13. 13. I have been designing websites foralmost 15 years and I have yet to code a website for a client...
  14. 14. But José,I am only one person in my studio?
  15. 15. Step 2 Collaborate: It’s about groups
  16. 16. 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 Creation1. Brand Definition 2. User Interface2. User Profiling 1. Copywriting 3. Front End Spec.3. Business Priorities 1. Stylescape 2. Imagery 1. Analysis 4. Design Application4. Competitive Audit 2. Identity System 3. Videography 2. Usage Patterns 5. User Testing5. Story 3. Typography 4. Animation 3. Demographic Detail 6. Product Revisions6. Messaging 4. Iconography 5. Editing 4. Feature Revision 7. Marketing Strategy7. Groop Brief 5. Color Palette 6. Rights Clearances 5. User Focus Groups 6. Style Guide 7. Content Loading 6. Release Planning 7. Performance
  17. 17. “This whole ‘collaboration, we’llwork together as a team’... I findit f***ing difficult...”Advertising Creative, Dec 2010 Fast Company Article
  18. 18. This is because “InteractiveDesign” requires Business,Creative, Tech and Marketingpeople to work together. Each withdifferent interests in a project.
  19. 19. ROI
  20. 20. RGB
  21. 21. SQL
  22. 22. USP
  23. 23. Business Creative Tech Marketing ROI RGB USP SQL
  24. 24. Step 3 Listen: It’s not about you
  25. 25. Step 4 Don’t do “it”: Design “why”
  26. 26. 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, ChrisManager33 year-oldFemale 1 Sarah arrived onNewly married Monday morning to Once on the CampaignResponsible for the day-to-day execution of find an email from legal detail page, she clicks oncampaign elements for her department. letting her know that “Edit Milestone” the Winnie the Pooh 3She needs help directing her work to highestpriority tasks and milestones, reducing trivialworkload, seeing where progress is being poster approval ismade in related activities and enablingvisibility to her peers and manager. getting delayed by 2Will adopt the IMM tool if it is easy and weeks. Nooooo! Online Ideation Online Creative Tier 1visually 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
  27. 27. Your BrandYour Users’Goals Needs
  28. 28. Who You Are
  29. 29. User Needs
  30. 30. Business Goals
  31. 31. User Need Features & FunctionalityBusiness Goal 43
  32. 32. 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, ChrisManager33 year-oldFemale 1 Sarah arrived onNewly married Monday morning to Once on the CampaignResponsible for the day-to-day execution of find an email from legal detail page, she clicks oncampaign elements for her department. letting her know that “Edit Milestone” the Winnie the Pooh 3She needs help directing her work to highestpriority tasks and milestones, reducing trivialworkload, seeing where progress is being poster approval ismade in related activities and enablingvisibility to her peers and manager. getting delayed by 2Will adopt the IMM tool if it is easy and weeks. Nooooo! Online Ideation Online Creative Tier 1visually 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
  33. 33. 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 Creation1. Brand Definition 2. User Interface2. User Profiling 1. Copywriting 3. Front End Spec.3. Business Priorities 1. Stylescape 2. Imagery 1. Analysis 4. Design Application4. Competitive Audit 2. Identity System 3. Videography 2. Usage Patterns 5. User Testing5. Story 3. Typography 4. Animation 3. Demographic Detail 6. Product Revisions6. Messaging 4. Iconography 5. Editing 4. Feature Revision 7. Marketing Strategy7. Groop Brief 5. Color Palette 6. Rights Clearances 5. User Focus Groups 6. Style Guide 7. Content Loading 6. Release Planning 7. Performance
  34. 34. Step 5 Be George Lucas: Tell Stories
  35. 35. You are not are not a “GraphicDesigner” you are a moviedirector - you tell stories!
  36. 36. Step 6 Face your fear: “Luke I am your father”
  37. 37. YOU
  38. 38. 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
  39. 39. thegroop.net/blog
  40. 40. Teamtreehouse.comLynda.compsd2html.comElance.comHOW Interactive Conf. 2012
  41. 41. Step 7 Be(at) the 1%: Don’t work for change. Be change.
  42. 42. “The last few decades have belonged to the computerprogrammers who could crank code, lawyers whocould craft contracts, MBAs who could crunchnumbers. But the keys to the kingdom are changinghands. The future belongs to creators, designers,storytellers, caregivers, big picture thinkers – willnow reap society’s richest rewards and share itsgreatest joys.”Daniel Pink, A Whole New Mind
  43. 43. groopskool.net
  44. 44. thisweekinwebdesign.com
  45. 45. In Closing
  46. 46. Production Designer: $35
  47. 47. Visual Designer: $75Production Designer: $35
  48. 48. User Experience Designer: $125Visual Designer: $75Production Designer: $35
  49. 49. a big favor
  50. 50. @josecaballerOn a scale of 1 to 10, 1 being “sucked”10 being “holy mother of god”...How did I do?What can I improve?
  51. 51. Thank You

×