The document discusses design guidelines from real-life case studies. It describes how JDSU, Blackboard, and Xerox developed design guidelines to achieve consistency across their products and brands as they acquired new companies or platforms. It provides tips for creating guidelines, such as starting with visual style first, focusing on low-hanging fruit, and gaining management support. Case study presenters discuss workshops, documentation, and culture change needed for successful guidelines.
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 year
2013.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 APIs product interfaces.
for external developers
5 years
2013.4.5 # uxguidelines @leslo 3
4. The real-life stories
Xerox has been around since
1937, and the brand identity was
A company providing
document management
(literally) all over the place.
equipment and
other related services
9 years
2013.4.5 # uxguidelines @leslo 4
5. How to achieve identity and consistency?
Design guidelines
Mission
Photos Corporate
identity
Social
Voice
Media
Desktop
Office Websites
docs Apps
Mobile
Packaging
Icons
E-learning Videos
Collateral
Ads Signage
QR Industrial
codes
2013.4.5 design # uxguidelines @leslo 5
6. Design guidelines
Mission
Photos Corporate
identity UX design principles
Social
Voice UCD + usability
Media
Desktop (processes, templates, research)
Office Websites
Visual
docs 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. REAL-LIFE STORY
RACHEL SENGERS Interaction Designer, Design for Context @rachseng
2013.4.5 # uxguidelines
11. TECHNIQUE
Workshop week
Do product Daily
walkthroughs breakout Periodic group
sessions debriefs
Brainstorm on topics
topics
2013.4.5 # uxguidelines @rachseng 11
12. VIDEO
Management
support is key
And so is
bottom-up
support!
BRUCE VOTIPKA Usability Architect at JDSU
2013.4.5 # uxguidelines @rachseng 12
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
Visual
docs 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. VIDEO
Manageable steps
Don’t bite off too
much at once
…So you can
show something
tangible early on
BRUCE VOTIPKA Usability Architect at JDSU
2013.4.5 # uxguidelines @rachseng 14
15. KEY CONCEPT
Low-hanging fruit
• Look for the biggest bang
for the buck
• For existing
products, choose which
parts of the interface to
upgrade
2013.4.5 # uxguidelines @rachseng 15
38. REAL-LIFE STORY
CHRIS MERKEL Former Creative Lead, Xerox Corporate Internet Marketing @merkelwerks
2013.4.5 Design Guidelines: Real-Life Stories
39. Xerox’s brand was well-established
2013.4.5 # uxguidelines @merkelwerks 39
40. In the beginning …
Brand Book
History
Product
Marketing
1
Voice
Color Product
2
Logos
Product
Print 3
2013.4.5 # uxguidelines @merkelwerks 40
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 Web
2013.4.5 # uxguidelines
42. The problem now? Silos.
By alandberning at: www.flickr.com/photos/14617207@N00/4872111479 /
2013.4.5 # uxguidelines @merkelwerks 42
43. The many faces of Xerox in 2004 …
Xerox Supplies
Xerox.com
Homepage
DocuShare Software
Homepage
2013.4.5 # uxguidelines @merkelwerks 43
44. I offer to include www in Brand Central
Brand Central
History Voice Color Logos Print Web
Xerox.com
Code Writing Color Patterns Layouts Access
2013.4.5 # uxguidelines @merkelwerks 44
45. Bringing consistency & color to Xerox.com
Xerox Homepage Production Category Xerox Supplies
Product Detail
Page
2013.4.5 # uxguidelines @merkelwerks 45
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 Legal
2013.4.5 # uxguidelines @merkelwerks 46
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
Segmentation
2013.4.5 # uxguidelines @merkelwerks 47
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
Guidelines
2013.4.5 # uxguidelines @merkelwerks 48
49. Other disciplines became interested
Brand Central
New specification
Technology guidelines: Marketing
Industrial Design
Social Media
Government
HR, Legal, Corpora
Professional
te
Services
Office templates
2013.4.5 # uxguidelines @merkelwerks 49
55. QUALITY
ASSURANCE
USER SOFTWARE
EXPERIENCE ENGINEERING
QA
UX SE
PM PE
PRODUCT PERFORMANCE
MANAGEMENT ENGINEERING
2013.4.5 # uxguidelines @leslo 55
56. By alandberning at: www.flickr.com/photos/14617207@N00/4872111479/
2013.4.5 # uxguidelines @leslo 56
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 @leslo 58
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. 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/12pinhG
2013.4.5 # uxguidelines 60
Notes de l'éditeur
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 Xerox.com 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 spiritXerox.com was less agile, moved slower technologically
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
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
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
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 Xerox.com 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 Xerox.com 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 Xerox.com, 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