Design Guidelines: Real-Life Stories

Editor's Notes

• #2: 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.
• #3: 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)
• #4: Rob is going to talk about Blackboard, an education platform with a suite of applications and APIs kicking off a major comprehensive redesign (time)
• #5: 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.
• #6: 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.
• #7: 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.
• #8: 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
• #9: 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.
• #10: 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.
• #11: 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]
• #12: 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
• #13: 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.
• #14: 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
• #15: 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]
• #16: 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
• #17: 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
• #18: Example from the look for desktop web apps. Provided a light and dark theme.
• #19: 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)
• #20: 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.
• #21: 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.
• #22: 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.
• #23: 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.
• #24: 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
• #25: 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
• #26: 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)
• #27: How?As an enterprise company, we used an enterprise wiki and bug tracking software to assist with the development of our products.
• #28: 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
• #29: 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.
• #30: 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.
• #31: What worked?A more organic approach where only the UX person needed to be responsible for applying the guidelines during new feature work.
• #32: What worked?A more organic approach where only the UX person needed to be responsible for applying the guidelines during new feature work.
• #33: What Worked:Staff onboarding – new staff were oriented to the Design Framework as a resource
• #34: What Worked?It got teams talking, both within division and across divisions.
• #35: 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.
• #36: We also saw opportunities to work across divisions when other product teams looked for design feedback.
• #38: 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
• #39: Thank Rob, previous presenterExplain role at Xerox, with Xerox.comI started in 2004Xerox re-branding went on for several yearsBut first, understand some history
• #40: Xerox had a developed brand since biggest successes in 1950sWhen I joined the company, hunting down this “digital X” across Xerox.com sites was one of my first projects“The Document Company” was no longer relevant to the company with software
• #41: 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
• #42: 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
• #43: 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 spiritXerox.com was less agile, moved slower technologically
• #44: Silo’d design appeared across Xerox.com sitesCommon elements are thereSmall differences reduced visual trust in brandEspecially critical for Design professionals, Production printing offices,Managed services in enterprise & gov
• #45: I noticed this potentialAfter making connections and establishing trust, I offer to include Xerox.com in the main guidelines in late 2004Rather than keeping silo’d guidelinesXerox.com guidelines included references back to the main corporate ID systemWriting, tone of voiceColor systemLayouts & priority of information
• #46: 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 Xerox.com typography, widgets, and layouts
• #47: 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
• #48: During every Xerox.com project, I and my team referenced the guidelines at many stagesNotice that projects went across product divisions
• #49: Those product divisions of course had VPsVPs talked about their projects with each other, and with marketingThe Xerox.com guidelines were often subjects
• #50: 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
• #51: 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 Xerox.com, following tenets of simplicity and space, from the new main guidelines
• #52: 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
• #53: 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
• #54: 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;
• #55: 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
• #56: Blackboard was undertaking an ambitious redesign and wanted to create a shared vision across functional teams
• #57: 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.
• #58: 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.
• #59: The low-hanging fruit principle: start with manageable pieces.Grow the guidelines at a pace that’s suitable for your organization and your team.
• #60: 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!
• #61: Put this at the end during Q&AADD THANKS! At the end