Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Guidelines: Real-Life Stories

831 views

Published on

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

Design Guidelines: Real-Life Stories

  1. 1. Gotham Rounded MT, 32/24px Border: 1px solid #8296cf Design Guidelines: Real-Life Stories IA Summit, 5 April 2013 300px 200px #uxguidelines 200px
  2. 2. The real-life stories JDSU was acquiring additional companies, and their products An engineering company with looked different. interfaces for multiple types of devices 1 year2013.4.5 # uxguidelines @leslo 2
  3. 3. The real-life stories Blackboard was embarking An education platform with a on a major refresh of all their suite of applications and APIs product interfaces. for external developers 5 years2013.4.5 # uxguidelines @leslo 3
  4. 4. The real-life stories Xerox has been around since 1937, and the brand identity was (literally) A company providing document management all over the place. equipment and other related services 9 years2013.4.5 # uxguidelines @leslo 4
  5. 5. How to achieve identity and consistency? Design guidelines Mission Photos Corporate identity Social Voice Media DesktopOffice Websitesdocs Apps Mobile Packaging Icons E-learning Videos Collateral Ads Signage QR Industrial codes 2013.4.5 design # uxguidelines @leslo 5
  6. 6. Design guidelines Mission Photos Corporate identity UX design principles Social Voice UCD + usability Media Desktop (processes, templates, research)Office Websites Visualdocs Apps Mobile Interaction + navigation Packaging Icons Text Videos Accessibility E-learning Collateral Code + assets Ads Signage Help + manuals QR Industrial codes 2013.4.5 design # uxguidelines @leslo 6
  7. 7. REAL-LIFE STORY RACHEL SENGERS Interaction Designer, Design for Context @rachseng2013.4.5 # uxguidelines
  8. 8. 2013.4.5 # uxguidelines @rachseng 8
  9. 9. The style guide initiative USABILITY INITIATIVE STYLE GUIDE2013.4.5 # uxguidelines @rachseng 9
  10. 10. TECHNIQUE Workshop week2013.4.5 # uxguidelines @rachseng 10
  11. 11. TECHNIQUE Workshop week Do product Daily walkthroughs breakout Periodic group sessions debriefs Brainstorm on topics topics2013.4.5 # uxguidelines @rachseng 11
  12. 12. VIDEO Management support is key And so is bottom-up support! BRUCE VOTIPKA Usability Architect at JDSU2013.4.5 # uxguidelines @rachseng 12
  13. 13. STRATEGIC APPROACH Focus on visual guidelines first Mission Photos Corporate identity UX design principles Social Voice UCD + usability Media Desktop (processes, templates, research)Office Websites Visualdocs Apps Mobile Interaction + navigation Packaging Icons Text Instruments Videos Accessibility E-learning Collateral Code + assets Ads Signage Help + manuals QR Industrial codes 2013.4.5 design # uxguidelines @rachseng 13
  14. 14. VIDEO Manageable steps Don’t bite off too much at once …So you can show something tangible early on BRUCE VOTIPKA Usability Architect at JDSU2013.4.5 # uxguidelines @rachseng 14
  15. 15. KEY CONCEPT Low-hanging fruit • Look for the biggest bang for the buck • For existing products, choose which parts of the interface to upgrade2013.4.5 # uxguidelines @rachseng 15
  16. 16. EXAMPLE2013.4.5 # uxguidelines @rachseng 16
  17. 17. EXAMPLE2013.4.5 # uxguidelines @rachseng 17
  18. 18. EXAMPLE2013.4.5 # uxguidelines @rachseng 18
  19. 19. REAL-LIFE STORY ROB FAY Formerly UX Architect, Blackboard Learn @robfay2013.4.5 Design Guidelines: Real-Life Stories
  20. 20. Platforms2013.4.5 # uxguidelines @robfay 20
  21. 21. VIDEO Brand new UI Convey vision Shared understanding STEPHANIE WEEKS Vice President of User Experience2013.4.5 # uxguidelines @robfay 21
  22. 22. Scope Mission Photos Corporate identity UX design principles Social Voice UCD + usability Media (processes, templates, research)Office Websites Visualdocs Apps Interaction + navigation Packaging Icons Text Videos Accessibility E-learning Collateral Code + assets Ads Signage Help + manuals QR Industrial codes 2013.4.5 design # uxguidelines @robfay 22
  23. 23. QUALITY ASSURANCE USER SOFTWARE EXPERIENCE ENGINEERING QA UX SE PM PE PRODUCT PERFORMANCE MANAGEMENT ENGINEERING2013.4.5 # uxguidelines @robfay 23
  24. 24. EXAMPLE2013.4.5 # uxguidelines @robfay 24
  25. 25. Pattern types Component Behavior Page Page flow2013.4.5 # uxguidelines @robfay 25
  26. 26. Bug Wiki Tracking2013.4.5 # uxguidelines 26
  27. 27. Bug Wiki Tracking2013.4.5 # uxguidelines @robfay 27
  28. 28. Bug Wiki Tracking2013.4.5 # uxguidelines @robfay 28
  29. 29. QA UX SE STEERING COMMITTEE PM PE2013.4.5 # uxguidelines @robfay 29
  30. 30. GUIDELINES QA UX SE FEATURE X PM PE2013.4.5 # uxguidelines @robfay 30
  31. 31. GUIDELINES QA UX SE FEATURE X PM PE2013.4.5 # uxguidelines @robfay 31
  32. 32. Staff training2013.4.5 # uxguidelines @robfay 32
  33. 33. Culture change USER EXPERIENCE MARKETING2013.4.5 # uxguidelines @robfay 33
  34. 34. Culture change USER EXPERIENCE MARKETING2013.4.5 # uxguidelines @robfay 34
  35. 35. Culture change USER EXPERIENCE MARKETING2013.4.5 # uxguidelines @robfay 35
  36. 36. Culture change USER EXPERIENCE MARKETING2013.4.5 # uxguidelines @robfay 36
  37. 37. Culture change USER EXPERIENCE MARKETING2013.4.5 # uxguidelines @robfay 37
  38. 38. REAL-LIFE STORY CHRIS MERKEL Former Creative Lead, Xerox Corporate Internet Marketing @merkelwerks2013.4.5 Design Guidelines: Real-Life Stories
  39. 39. Xerox’s brand was well-established2013.4.5 # uxguidelines @merkelwerks 39
  40. 40. In the beginning … Brand Book History Product Marketing 1 Voice Color Product 2 Logos Product Print 32013.4.5 # uxguidelines @merkelwerks 40
  41. 41. More & more product divisions evolved… Brand Book Production Office Software History Color Color Color Voice Logos Type Type Color Print Logos Icons Logos Web Print Logos Print Presentations Web Print Manuals Presentations Web2013.4.5 # uxguidelines
  42. 42. The problem now? Silos. By alandberning at: www.flickr.com/photos/14617207@N00/4872111479 /2013.4.5 # uxguidelines @merkelwerks 42
  43. 43. The many faces of Xerox in 2004 … Xerox Supplies Xerox.com Homepage DocuShare Software Homepage2013.4.5 # uxguidelines @merkelwerks 43
  44. 44. I offer to include www in Brand Central Brand Central History Voice Color Logos Print Web Xerox.com Code Writing Color Patterns Layouts Access2013.4.5 # uxguidelines @merkelwerks 44
  45. 45. Bringing consistency & color to Xerox.com Xerox Homepage Production Category Xerox Supplies Product Detail Page2013.4.5 # uxguidelines @merkelwerks 45
  46. 46. Each program added to Brand Central Product X User Experience Branding Approval? Approval? Interface Yes Yes Manuals No No Marketing Brand Central Terminology Web Marketing Send changes to product team Industrial Legal2013.4.5 # uxguidelines @merkelwerks 46
  47. 47. Guidelines are referenced in all projects PPG XOG VP, North American VP, Xerox Office Group Sales Group Brand Central 2004: Xerox.com 2004: Xerox.com Homepage Homepage 2005: Print Xerox.com, Production Website DocuShare Products Guidelines VP, Enterprise Software Business Unit 2006: Audience Segmentation 2006: Audience Segmentation2013.4.5 # uxguidelines @merkelwerks 47
  48. 48. VPs and product groups began to talk PPG XOG VP, North American VP, Xerox Office Group Sales Group Brand Central 2004: Xerox.com 2004: Xerox.com Homepage Homepage Manager, Worldwide Brand 2005: Print Production DocuShare Products VP, Internet Marketing VP, Enterprise Software Business Unit 2006: Audience Xerox.com, Segmentation 2006: Audience Website Segmentation Guidelines2013.4.5 # uxguidelines @merkelwerks 48
  49. 49. Other disciplines became interested Brand Central New specification Technology guidelines: Marketing Industrial Design Social Media Government HR, Legal, Professional Corporate Services Office templates2013.4.5 # uxguidelines @merkelwerks 49
  50. 50. Xerox’s re-branding, 2007-20112013.4.5 # uxguidelines @merkelwerks 50
  51. 51. Brand training was added…2013.4.5 # uxguidelines @merkelwerks 51
  52. 52. By 2009, all departments are represented…2013.4.5 # uxguidelines @merkelwerks 52
  53. 53. … with guides from all channels & media2013.4.5 # uxguidelines @merkelwerks 53
  54. 54. Why invest in design guidelines?2013.4.5 # uxguidelines @leslo 54
  55. 55. QUALITY ASSURANCE USER SOFTWARE EXPERIENCE ENGINEERING QA UX SE PM PE PRODUCT PERFORMANCE MANAGEMENT ENGINEERING2013.4.5 # uxguidelines @leslo 55
  56. 56. By alandberning at: www.flickr.com/photos/14617207@N00/4872111479/2013.4.5 # uxguidelines @leslo 56
  57. 57. What will help?  Management support & allocation of resources.  Cross-divisional participation & shared ownership of the guidelines.2013.4.5 # uxguidelines @leslo 57
  58. 58. What will help?  Manageable steps: demonstrate success, strengthen your case.  Allowing the process to grow organically to get buy-in.2013.4.5 # uxguidelines @leslo 58
  59. 59. Marketing Architecture Mechanical Engineering Contextual Spatial Requirements Experience Electrical Digital Engineering Signage Information Interactive Architecture Environments Industrial Design Functional Requirements Ubiquitous Computing Guidance Philosophy Systems Navigation Design Media Computer Installations Science Data & Info Interactive Human Cognitive Application Science Visualization Controls Computer Design Interaction Software Development Generative User Interface Human Factors Usability Design Design Engineering & Ergonomics Psychology Communication Interaction Design Design Sociology User Interface Scenography Scenario Design Writing Motion Design Sound Design Graphic by Chris Merkel User Experience Design Audio Engineering Based on “The Disciplines of User Experience” Dan Saffer (2008)2013.4.5 # uxguidelines @leslo 59
  60. 60. RACHEL ROB CHRIS LESLEY SENGERS FAY MERKEL HUMPHREYS @rachseng @robfay @merkelwerks @leslo Interaction Interaction Director of Interaction Designer Designer UX Designer Design for Design for American Inst. Design for Context Context of Architects Context Formerly at Formerly at Blackboard Xerox Resources: bit.ly/12pinhG2013.4.5 # uxguidelines 60

×