1. Gotham Rounded MT, 32/24px Border: 1px solid #8296cf Design Guidelines:Real-Life Stories IA Summit, 5 April 2013 300px200px#uxguidelines200px

2. The real-life storiesJDSU was acquiring additionalcompanies, and their products An engineering company withlooked different. interfaces for multiple types of devices 1 year2013.4.5 # uxguidelines@leslo 2 3. The real-life stories Blackboard was embarking An education platform with a on a major refresh of all their suite of applications and APIsproduct interfaces. for external developers 5 years2013.4.5# uxguidelines @leslo 3 4. The real-life storiesXerox has been around since 1937,and the brand identity was (literally) A company providing document managementall over the place. equipment and other related services 9 years2013.4.5 # uxguidelines@leslo4 5. How to achieve identity and consistency? Design guidelines Mission PhotosCorporateidentity SocialVoice Media DesktopOfficeWebsitesdocs Apps Mobile PackagingIcons E-learningVideosCollateral AdsSignage QR Industrial codes2013.4.5design# uxguidelines @leslo 5 6. Design guidelines Mission PhotosCorporateidentity UX design principles SocialVoiceUCD + usability Media Desktop (processes, templates, research)OfficeWebsites Visualdocs Apps MobileInteraction + navigation PackagingIconsText VideosAccessibility E-learningCollateral Code + assets AdsSignage Help + manuals QR Industrial codes2013.4.5design# uxguidelines @leslo 6 7. REAL-LIFE STORYRACHEL SENGERS Interaction Designer, Design for Context @rachseng2013.4.5# uxguidelines 8. 2013.4.5 # uxguidelines @rachseng 8 9. The style guide initiative USABILITY INITIATIVE STYLE GUIDE2013.4.5# uxguidelines @rachseng 9 10. TECHNIQUE Workshop week2013.4.5 # uxguidelines @rachseng 10 11. TECHNIQUE Workshop weekDo product Daily walkthroughsbreakoutPeriodic group sessions debriefsBrainstorm on topicstopics2013.4.5# uxguidelines @rachseng11 12. VIDEO Management support is key And so is bottom-up support! BRUCE VOTIPKA Usability Architect at JDSU2013.4.5# uxguidelines @rachseng12 13. STRATEGIC APPROACHFocus on visual guidelines first Mission PhotosCorporateidentity UX design principles SocialVoiceUCD + usability Media Desktop (processes, templates, research)OfficeWebsites Visualdocs Apps MobileInteraction + navigation PackagingIconsText Instruments VideosAccessibility E-learningCollateral Code + assets AdsSignage Help + manuals QR Industrial codes2013.4.5design# uxguidelines@rachseng 13 14. VIDEO Manageable steps Dont bite off too much at once So you can show something tangible early on BRUCE VOTIPKA Usability Architect at JDSU2013.4.5# uxguidelines @rachseng14 15. KEY CONCEPT Low-hanging fruit Look for the biggest bangfor the buck For existing products,choose which parts of theinterface to upgrade2013.4.5 # uxguidelines @rachseng 15 16. EXAMPLE2013.4.5# uxguidelines @rachseng 16 17. EXAMPLE2013.4.5# uxguidelines @rachseng 17 18. EXAMPLE2013.4.5# uxguidelines @rachseng 18 19. REAL-LIFE STORY ROB FAYFormerly UX Architect, Blackboard Learn @robfay2013.4.5 Design Guidelines: Real-Life Stories 20. Platforms2013.4.5 # uxguidelines @robfay 20 21. VIDEO Brand new UI Convey vision Shared understanding STEPHANIE WEEKS Vice President of User Experience2013.4.5 # uxguidelines@robfay 21 22. Scope Mission PhotosCorporateidentity UX design principles SocialVoiceUCD + usability Media (processes, templates, research)OfficeWebsites VisualdocsApps Interaction + navigation PackagingIconsText VideosAccessibility E-learningCollateral Code + assets AdsSignage Help + manuals QR Industrial codes2013.4.5design# uxguidelines @robfay22 23. QUALITYASSURANCEUSERSOFTWARE EXPERIENCEENGINEERINGQAUXSEPM PEPRODUCTPERFORMANCE MANAGEMENT ENGINEERING2013.4.5 # uxguidelines @robfay23 24. EXAMPLE2013.4.5# uxguidelines @robfay 24 25. Pattern typesComponentBehaviorPagePage flow2013.4.5 # uxguidelines @robfay 25 26. Bug WikiTracking2013.4.5# uxguidelines26 27. Bug WikiTracking2013.4.5# uxguidelines@robfay 27 28. Bug WikiTracking2013.4.5# uxguidelines@robfay 28 29. QA UXSE STEERINGCOMMITTEEPMPE2013.4.5 # uxguidelines @robfay 29 30. GUIDELINESQAUX SEFEATURE XPMPE2013.4.5# uxguidelines @robfay30 31. GUIDELINESQAUX SEFEATURE XPMPE2013.4.5# uxguidelines @robfay31 32. Staff training2013.4.5 # uxguidelines @robfay 32 33. Culture change USEREXPERIENCE MARKETING2013.4.5 # uxguidelines@robfay 33 34. Culture change USEREXPERIENCE MARKETING2013.4.5 # uxguidelines@robfay 34 35. Culture change USEREXPERIENCE MARKETING2013.4.5 # uxguidelines@robfay 35 36. Culture change USEREXPERIENCE MARKETING2013.4.5 # uxguidelines@robfay 36 37. Culture change USEREXPERIENCE MARKETING2013.4.5 # uxguidelines@robfay 37 38. REAL-LIFE STORY CHRIS MERKELFormer Creative Lead, Xerox Corporate Internet Marketing @merkelwerks2013.4.5 Design Guidelines: Real-Life Stories 39. Xeroxs brand was well-established2013.4.5 # uxguidelines @merkelwerks 39 40. In the beginning Brand Book History ProductMarketing1VoiceColorProduct2 Logos ProductPrint 32013.4.5# uxguidelines @merkelwerks 40 41. More & more product divisions evolved Brand BookProduction Office Software HistoryColor Color ColorVoiceLogos Type TypeColor Print Logos Icons LogosWebPrint LogosPrintPresentations WebPrint Manuals PresentationsWeb2013.4.5# uxguidelines 42. The problem now?Silos.By alandberning at: www.flickr.com/photos/14617207@N00/4872111479 /2013.4.5 # uxguidelines @merkelwerks42 43. The many faces of Xerox in 2004 Xerox Supplies Xerox.com HomepageDocuShare SoftwareHomepage2013.4.5 # uxguidelines @merkelwerks 43 44. I offer to include www in Brand CentralBrand Central HistoryVoice Color LogosPrintWeb Xerox.comCodeWriting ColorPatternsLayouts Access2013.4.5# uxguidelines@merkelwerks44 45. Bringing consistency & color to Xerox.comXerox HomepageProduction CategoryXerox SuppliesProduct DetailPage2013.4.5 # uxguidelines @merkelwerks45 46. Each program added to Brand Central Product XUser ExperienceBrandingApproval?Approval?Interface YesYesManualsNoNo Marketing Brand Central Terminology WebMarketingSend changesto product teamIndustrialLegal2013.4.5 # uxguidelines @merkelwerks46 47. Guidelines are referenced in all projects PPGXOGVP, North AmericanVP, Xerox Office Group Sales GroupBrand Central 2004: Xerox.com2004: Xerox.com Homepage Homepage2005: Print Xerox.com,Production Website DocuShare Products Guidelines VP, Enterprise SoftwareBusiness Unit 2006: AudienceSegmentation 2006: AudienceSegmentation2013.4.5 # uxguidelines@merkelwerks47 48. VPs and product groups began to talk PPG XOGVP, North American VP, Xerox Office Group Sales GroupBrand Central 2004: Xerox.com 2004: Xerox.com HomepageHomepage Manager, WorldwideBrand2005: PrintProductionDocuShare ProductsVP, Internet MarketingVP, Enterprise Software Business Unit 2006: AudienceXerox.com,Segmentation2006: Audience Website SegmentationGuidelines2013.4.5 # uxguidelines @merkelwerks48 49. Other disciplines became interested Brand CentralNew specification Technology guidelines: Marketing Industrial Design Social Media GovernmentHR, Legal, ProfessionalCorporate Services Office templates2013.4.5# uxguidelines @merkelwerks49 50. Xeroxs re-branding, 2007-20112013.4.5 # uxguidelines @merkelwerks 50 51. Brand training was added2013.4.5 # uxguidelines @merkelwerks 51 52. By 2009, all departments are represented2013.4.5 # uxguidelines @merkelwerks 52 53. with guides from all channels & media2013.4.5# uxguidelines @merkelwerks 53 54. Why invest in design guidelines?2013.4.5# uxguidelines @leslo 54 55. QUALITYASSURANCEUSER SOFTWARE EXPERIENCE ENGINEERINGQAUX SEPM PEPRODUCTPERFORMANCE MANAGEMENT ENGINEERING2013.4.5 # uxguidelines @leslo55 56. By alandberning at: www.flickr.com/photos/14617207@N00/4872111479/2013.4.5 # uxguidelines@leslo56 57. What will help? Management support & allocation of resources. Cross-divisional participation & shared ownership of the guidelines.2013.4.5# uxguidelines @leslo 57 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 @leslo58 59. Marketing ArchitectureMechanicalEngineering ContextualSpatialRequirements Experience ElectricalDigital Engineering Signage Information Interactive Architecture EnvironmentsIndustrial DesignFunctional Requirements UbiquitousComputing Guidance Philosophy SystemsNavigation DesignMediaComputerInstallations Science Data & InfoInteractive Human Cognitive Application ScienceVisualizationControlsComputerDesignInteractionSoftware Development GenerativeUser InterfaceHuman Factors UsabilityDesignDesignEngineering& Ergonomics PsychologyCommunicationInteraction Design Design SociologyUser InterfaceScenography ScenarioDesignWritingMotion DesignSound DesignGraphic by Chris MerkelUser ExperienceDesign Audio EngineeringBased on The Disciplinesof User ExperienceDan Saffer (2008)2013.4.5 # uxguidelines@leslo59 60. RACHELROBCHRIS LESLEYSENGERSFAY MERKEL HUMPHREYS @rachseng @robfay@merkelwerks @leslo InteractionInteractionDirector ofInteraction Designer Designer UX Designer Design for Design for American Inst. Design for ContextContextof ArchitectsContextFormerly atFormerly atBlackboard Xerox Resources: bit.ly/12pinhG2013.4.5# uxguidelines60