Design Guidelines: Real-Life Stories


Published on

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Hi, good morning!Welcome to Design Guidelines, Real Life StoriesThere’s our hash tag, use it for the tweets!We came together as a panel on this topic because we’ve all worked on style guideline projects and we know how hard they can be to get off the ground, to get momentum, and to maintain over time.They’re often considered a lower priority because they’re overhead/internal, and it can very often feel like a lot of cats to herd.That said, these projects are also a prime opportunity to engage with clients and colleagues outside of IA/UX – to “build bridges to people who know nothing about what we do.”So what we wanted to do was present our real-life experience and share some of the things we’ve learned with you today.
  • We’re going to tell you three stories about companies that have embarked on guidelines projects. Each is at a different stage of development.Rachel is going to tell you about JDSU, an engineering company with multiple devices that also found itself in the midst of several corporate acquisitions (time)
  • Rob is going to talk about Blackboard, an education platform with a suite of applications and APIs kicking off a major comprehensive redesign (time)
  • And finally Chris will describe how Xerox, which I think most of us have heard of as a provider of business equipment and services, had to align its brand identity over about 20 different channels and platforms! Fitting for them they’ve been at it the longest, about nine years.
  • So all 3 of these companies were faced witha similar challenge, which is, “How do we achieve consistency across our products and strengthen and maintain our brand identity?”To answer this challenge they decided to develop design guidelines. These are just a few of the categories of guidelines that might be familiar to you.
  • Now, within this larger universe of categories,we expect that you all probably focus on websites and applications.[CLICK NEXT]And, within websites & applications, you might find these types of guidelines gathered together in one repository or kept in different depts or divisions across your organization.Here’s where the non-practitioners can still figure in: you may be working with PMs, writers, developers, QA people – all these folks will need to understand how your brand is expressed and your product is made.We’ll have time at the end of our talk for questions.So here’s the first of our stories: Rachel with JDSU.
  • I’m Rachel from DfC, I have been working with JDSU on their design guidelines projectEngineeringcompany that makes test & measurement devices used in telecommunications industry, and instruments that use optical technologies
  • Distributed/decentralized teams,located around the world, working on different productsMultiple platforms/interfaces – they make equipment with non-HTML interfaces, and also web-based desktop apps, mobile phone & tablet apps, Windows desktop client software[Click Next]Company also acquires new products thru mergers and acquisitionsAs you can imagine, this all can be a recipe for inconsistency.
  • So, JDSU embarked on an effort this past year to bring more consistency to their various interfaces – the Style Guide initiative.[Next]The Style Guide project is a subcomponent of a larger initiative to bake usability and user-centered design processes into JDSU’s software development lifecycle. JDSU engaged my company, Design for Context, as consultants to help JDSU develop these initiatives.
  • Early on in the process, JDSU and Design for Context organized a Style Guide “workshop week” to kickstart the design guidelines.[Next]We brought people from across the globe together to hammer out the start of the guidelines. Representatives from the different product lines. It was cross-functional – included people from software development, engineering, corporate branding, marketing, and more.[Next]
  • Each team came prepared with a walkthrough of their interfaces, to show at the workshop.[Next]During the week, the group split into smaller workgroups to work on specific topics – color and branding, fonts, icons, online help, terminology, and UX workflows (i.e. interaction patterns.)[Next]We reconvened periodically for debriefs with the whole group.After this week, these topical workgroups continued to flesh out the guidelines, and some of the team members worked on a governance strategy for applying the guidelines to the company’s products
  • Before the workshop week, upper management had already recognized the importance of creating a style guide. And there were some key players on the ground who were pushing for it- such as this person, Bruce Votipka.And then some really big things came out of the workshop week:First, the people who attended the workshop became ambassadors throughout the company for the Style Guide and that helped gain buy-in.Secondly, it established the concept of “workgroups”, to work out the different parts of the Style Guide.Now we’ll hear some words from Bruce on these themes.[Play video]So, the style guide got support from management down to the grassroots level.And it is managed as a real project, with a steering committee that meets regularly and it has a Project Manager to keep the work on track.
  • A strategic decision was made early on: Develop overarching high-level design principles, visual design guidelines, terminology, and help first….…And work on the interaction design patterns later.[CLICK]Meanwhile, guidelines for the UCD process were being worked out as a separate project.Benefits of focusing on visual guidelines first:Easier to implement in existing productsEasier to show a tangible result to the company and customers earlier onEasier for upper management to grasp and see the value of the Style GuideMakes products look consistent even if the UX workflows are not that consistent yet
  • A key mantra at JDSU has been – let’s not bite too much off at once. They decided to focus on the visual guidelines first, and within that, they decided to start small. They broke their work into smaller, manageable chunks so the team would not get bogged down. They could build on small successes to keep the momentum moving.[Play video]
  • So… you just heard Bruce mention the concept of” low-hanging fruit.” Using this approach, you decide which parts of the style guide to develop first.Design for the most common platforms firstFocus on UI elements with the broadest reach, common use – e.g. headers and navigation menus, tables, forms, buttonsCreate a common color paletteLibrary of most common iconsTriage which products to upgrade. Examples of criteria:Flagship productsProducts commonly used togetherProducts that are not due to retire anytime soonProducts that are due for a major new release (work in the new visual design)For each product, decide which parts of interface to upgrade. For example:If you can’t adopt the new icon visual design yet,you could use consistent metaphors for icons (from the library) Maybe you focus on login screens and splash screensCommon header on the screensCompany logo on the screens, in a consistent locationCertain standard links in consistent placesConsistent use of terminologyWork in the company-wide color palette
  • I’d like to close out by showing you some examples from the style guideExample from the design for the test & measurement instrumentsLight theme and dark theme provided, so product teams can choose which works best for their context, or provide end users with ability to select a themeHigh contrast theme because the interfaces are used in poor lighting conditions
  • Example from the look for desktop web apps. Provided a light and dark theme.
  • Excerpt from the icon library that is showing instructions on how to generate new icons in the JDSU style, so that product teams could create additional icons for their own product’s needs and contribute back into the library.___________________A couple words in closingFirst: I hope this case study inspired those of you in the audience who are UX consultants – as you can see, you can play a role in kickstarting your clients’ design guideline efforts!Secondly: For both consultants and people who work internally at companies - consider the company’s culture. Use a process that works with that culture. For JDSU, a distributed, decentralized process was more appropriate than a top-down, centralized approach.___________________(RS notes: Special thanks toBruce Votipka andClint Moats from JDSU for their help in putting this case study together)
  • I want to tell you the story of how an educational technology company integrated design guidelines into their software development process and how this process unexpectedly impacted company culture.
  • Blackboard Learn is the flagship division from which the company was originally formed. Over the years the company produced more products and services. But with the growth came risk that each platform could become silod.
  • When I started working with the company back in 2007 they were going through the effort of giving their traditional learning management system a complete overhaul, so the VP of UX felt that it was an opportunity to start thinking about coming up with some guidelines. Here are her words.[video clip]So there were a few goals. Not only to share a design vision with the rest of the company, but to gain buy-in and a shared understanding among the functional areas within the product development teams.
  • Because Product Development was focused on delivering software, the goals were to have a framework that:Increased usability through the consistent application of UI components and behaviorsSaved resources through code reuseFreed up resources to innovate[CLICK]So in this chart, Bb first focused on Interface Guidelines, [CLICK]then separately tackled defining the UCD process and company design principles.
  • How?Meet with stakeholders across Product Development to get input on necessary elements - QA, engineers, designersMeet with stakeholders (engineering, PM) to determine what reusable UI can be realistically implemented within scope
  • How?Draft #1 (seen here) example guideline includes an image, summary, rules of usage, exceptions, and engineering “tag”Later ideas include: accessibility considerations, text considerations, usability research
  • How?[CLICK]Started with Page Types [CLICK]worked our way smaller (Components and Behaviors)As software supported more asynchronous interactions, we found we needed to define certain behaviors, such as drag and drop.[CLICK]Worked our way larger (Page lows)
  • How?As an enterprise company, we used an enterprise wiki and bug tracking software to assist with the development of our products.
  • The wiki makes it easy for us to quickly update the guidelines and determine who should have access to it (Product Development > Bb Learn or to other divisions, or even external stakeholders like third party developers)The challenge was keeping it up-to-date, particularly with up-to-date screenshots
  • Another idea we had was to develop a process where people could request that new patterns be added. This didn’t work so well. One reason may be the formality of it. Another may be the culture of using bug tracking software was specifically for reporting on very specific software issues that needed to be addressed.
  • Originally there was an idea of a “Steering Committee” to meet regularly to discuss patterns and representative stakeholders would share with their functional teams. However, it didn’t work because it required too much overhead and it was too formal.
  • What worked?A more organic approach where only the UX person needed to be responsible for applying the guidelines during new feature work.
  • What worked?A more organic approach where only the UX person needed to be responsible for applying the guidelines during new feature work.
  • What Worked:Staff onboarding – new staff were oriented to the Design Framework as a resource
  • What Worked?It got teams talking, both within division and across divisions.
  • It first got teams talking within the same division. For example, although Marketing and UX do not overlap much, we realize that Marketing owns the style and branding guidelines, which can impact the product.
  • We also saw opportunities to work across divisions when other product teams looked for design feedback.
  • The obvious goal is that the guidelines as an opportunity to encourage design discussions across divisions._______________________________________Key takeawaysAllow it to grow organically for best buy-inEncourage shared ownershipInvest in “overhead” projects
  • Thank Rob, previous presenterExplain role at Xerox, with Xerox.comI started in 2004Xerox re-branding went on for several yearsBut first, understand some history
  • Xerox had a developed brand since biggest successes in 1950sWhen I joined the company, hunting down this “digital X” across sites was one of my first projects“The Document Company” was no longer relevant to the company with software
  • In earlier days of the company, with smaller product lines:Product lines were fewer,easier to manage the brand in product industrial design, marketing, and manualsBranding was simpler, with logo and few colors and typefacesIndustrial design was simpler, with fewer shapes, and 1-colour screens
  • Product lines diversified as Xerox expanded into office products, software, and servicesVerticals began to diverge in branding simply due to time constraintsBy 2004, brand management had difficulty keeping up with oversight due to process
  • Lack of central communication created silos between divisionsTektronix purchase gave Xerox colour, yet brand integration was difficultKept its websiteKept its marketing groupKept its voice & toneKept its more agile was less agile, moved slower technologically
  • Silo’d design appeared across sitesCommon elements are thereSmall differences reduced visual trust in brandEspecially critical for Design professionals, Production printing offices,Managed services in enterprise & gov
  • I noticed this potentialAfter making connections and establishing trust, I offer to include in the main guidelines in late 2004Rather than keeping silo’d guidelines included references back to the main corporate ID systemWriting, tone of voiceColor systemLayouts & priority of information
  • Trust from Brand Manager allowed me to expand the color systemKept ties with Xerox through industrial design“Celestial Blue” plastic colour of productsDuring the same process, I centralized typography, widgets, and layouts
  • New site & user needs demanded the agile approach my Tektronix partners brought inProducts may need new UX on the website, or in their own interfacesWorkflow for approval went through UX and Branding, socialized through SMEs during processAccepted new patterns added to Brand CentralRe-work needed sent changes back to product team for revising
  • During every project, I and my team referenced the guidelines at many stagesNotice that projects went across product divisions
  • Those product divisions of course had VPsVPs talked about their projects with each other, and with marketingThe guidelines were often subjects
  • Eventually they, and other groups reporting to them, came to the same conclusionsTechnology, Marketing, Professional Services, HR, even Legal & Corporate, came to myself and Brand Manager to ask to include their guidelines, too
  • With this new structure, we were already in a good place when in 2006 we engaged with Interbrand, a global brand consultancy, to start planning the repositioning of the Xerox brandXerox brand and perceptions of it weren’t going anywhere, no matter the innovationsFoundation gave us a new logo, greatly expanded colour system, and a corporate typefaceI expanded the appearance of, following tenets of simplicity and space, from the new main guidelines
  • Xerox Brand Management went so far as to give formal training on the brand foundationPreviously, this was informal, and not necessarily required of all new employeesIt was up to department leaders such as myself to present overall and specific guidelines
  • Any department with a touch on the brand used to have their own silo’d specs or guidelinesNow, departments’ foundation guidelines are all housed in the same collection
  • This includes specs for Product manualsPresentations and office documents of any kindMobile applicationsWebsites and online advertisementsInterfaces and industrial design for our physical productsEven billboard and vehicle signageDownloads may include:Spec manuals themselves, in PDF format for easy online/offline access, and printing,Fonts,Example filesKEY TAKEAWAYS - Facilitate, guide, &engageAnyone attending this IA Summit is a valuable director or facilitator for any size organization's repositioning, whether small business or global enterprise;Change may sometimes be a 'light switch' moment, of a big launch; and in other cases a rebranding operation may be 'glacial' in nature, through iterations;Leverage your connections, and foster a mutual trusting atmosphere with colleagues, clients and executives in your organization, which will help you and your ideas to grow in the future;
  • Thanks Chris!So now we’ve heard 3 stories of companies at different stages of design guidelines development. Each of them made the decision to invest in design guidelines for similar reasons: they had disparate groups that needed to align to strengthen their process and their products.[CLICK]JDSU had Distributed/decentralized teams,located around the world, working on different product – and wanted more consistency
  • Blackboard was undertaking an ambitious redesign and wanted to create a shared vision across functional teams
  • Xerox with its global array of products and services and corporate acquisitions was heavily siloed and needed to unify under one brand identity and a coherent set of guidelines.
  • So what did we learn from each of these stories that might help in future projects?Get upper mgmt support and get them to give you money, people, time!Recruit people from all over and encourage them to lead with you.
  • The low-hanging fruit principle: start with manageable pieces.Grow the guidelines at a pace that’s suitable for your organization and your team.
  • And finally, as UX practitioners, we feel we’re uniquely qualified to lead these types of initiatives. As each of our stories described, we can build relationships and trust across teams and hierarchies within our organizations.We may represent all these disciplines but ultimately it comes down to fostering effective communication about good user experience and good design both inside and outside of our discipline, and that’s really what we do best.Thank you for your time this morning!
  • Put this at the end during Q&AADD THANKS! At the end
  • 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
    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: /2013.4.5 # uxguidelines @merkelwerks 42
    43. 43. The many faces of Xerox in 2004 … Xerox Supplies 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 Code Writing Color Patterns Layouts Access2013.4.5 # uxguidelines @merkelwerks 44
    45. 45. Bringing consistency & color to 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: 2004: Homepage Homepage 2005: Print, 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: 2004: Homepage Homepage Manager, Worldwide Brand 2005: Print Production DocuShare Products VP, Internet Marketing VP, Enterprise Software Business Unit 2006: Audience, 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
    56. 56. By alandberning at: # 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: # uxguidelines 60