Design Guidelines: Real-Life Stories
60
Design Guidelines: Real-Life Stories Border: 1px solid #8296cf IA Summit, 5 April 2013 300px 200px Gotham Rounded MT, 32/24px #uxguidelines 200px
-
Upload
design-for-context -
Category
Design
-
view
106 -
download
0
description
As an organization grows and its products proliferate, how can it maintain a coherent sense of identity and usability across them, while allowing room for flexibility and growth? For a family of online communications channels or applications, design guidelines can document and disseminate the organization’s UX principles and patterns. A guidelines repository can potentially encompass everything that impacts the user experience: interaction design, information architecture, brand styles, and much more. It functions as a tool for a variety of stakeholders, not just UX practitioners. Embarking upon a guidelines project can seem like a “nice to have” at best, and utterly overwhelming at worst. Our presentation offers resources and insights from both practitioners and professionals outside the field who have undertaken these types of projects together. We discuss the benefits of a repository and the role of the IA and other actors in this effort, and identify challenges and opportunities.
Transcript of Design Guidelines: Real-Life Stories
- 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 since1937, and the brand identity was A company providing document management(literally) all 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 existingproducts, choose whichparts of the interface toupgrade2013.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 Government HR, Legal, Corpora Professionalte Services Office templates2013.4.5# uxguidelines @merkelwerks 49 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
