Building a Common UX November 13, 2008 Douglas Gardner LexisNexis LexisNexis™, a division of Reed Elsevier Inc. This document is the property of LexisNexis, a division of Reed Elsevier Inc.

Driving Toward Objectives Common UX Objective: Speed things up while driving a predictable, integrated, and pervasive user experience Benefits Align user experience with organizational goals Consistent Brand Cost savings by re-using designs and components Improved time to market Better cross-selling and reduce learning curve between services User-centered designs to increase customer satisfaction Increase innovation by freeing up creative energy Common UX is long-haul work intended to provide long-term benefits 5 year plan 40+ separate initiatives Dedicated team Disruption creates challenges

Common UX Objective: Speed things up while driving a predictable, integrated, and pervasive user experience

Benefits

Align user experience with organizational goals

Consistent Brand

Cost savings by re-using designs and components

Improved time to market

Better cross-selling and reduce learning curve between services

User-centered designs to increase customer satisfaction

Increase innovation by freeing up creative energy

Common UX is long-haul work intended to provide long-term benefits

5 year plan

40+ separate initiatives

Dedicated team

Disruption creates challenges

User Research Technical Initiatives Best Practices Guidelines & Standards Toolkits Metrics Governance Product Design Development & Implementation Common UX Predictable, Integrated, Pervasive Materials Direction Information

Initiatives Communication avenues Process & buy-in Governance UX Vision Maintenance Reuse Usability/satisfaction User/usage understanding Evaluation/Tracking Patterns & Building Blocks Visual Design Branding Writing & language Training and assistance Multimedia Analytics Visualization Accessibility Localization Can’t do everything at once: prioritization is a critical element

Communication avenues

Process & buy-in

Governance

UX Vision

Maintenance

Reuse

Usability/satisfaction

User/usage understanding

Evaluation/Tracking

Patterns & Building Blocks

Visual Design

Branding

Writing & language

Training and assistance

Multimedia

Analytics

Visualization

Accessibility

Localization

Steps for each initiative Create Review - circle of Stakeholders sign off Ship and communicate Evangelize Train Enable Govern Maintain WE DON'T IMPLEMENT

Create

Review - circle of Stakeholders sign off

Ship and communicate

Evangelize

Train

Enable

Govern

Maintain

WE DON'T IMPLEMENT

UX Scorecard Method to compare products on key CUX indicators Each product evaluated on dimensions and recorded Isn’t just a big stick Used to argue for further investment to fix deficiencies UX Scorecard Contact Scott Plumlee Example

Method to compare products on key CUX indicators

Each product evaluated on dimensions and recorded

Isn’t just a big stick

Used to argue for further investment to fix deficiencies

Website & Repository Promotes locating and using these materials full descriptions of each initiative, code repositories discussion forums, etc. http://commonux (internal, only) Common UX Website Contact: Scott Plumlee

Promotes locating and using these materials

full descriptions of each initiative,

code repositories

discussion forums, etc.

http://commonux (internal, only)

Solutions Integration Prioritize and batch initial set of UI building blocks Identify, prioritize and define patterns to push to UI Building Blocks to develop Examples of left-hand navigation variants Example spreadsheet of analysis technique

Prioritize and batch initial set of UI building blocks

Identify, prioritize and define patterns to push to UI Building Blocks to develop

Examples of left-hand navigation variants

Example spreadsheet of analysis technique

UI Building Blocks Standardizes reusable pieces of our applications UI Building Blocks defined with standard design elements Properties Rules Allowable variations Many in queue and prioritized from Solutions Integration Repository to enable access to code examples of each

Standardizes reusable pieces of our applications

UI Building Blocks defined with standard design elements

Properties

Rules

Allowable variations

Many in queue and prioritized from Solutions Integration

Repository to enable access to code examples of each

UI Building Blocks: Example Mandatory Optional Configurable

UI Building Blocks Levels of granularity Contents Screen shot Status Other names Problem description Solution Properties Defaults How to use it Mandatory, configurable, and optional elements Variants Code examples http://lngdaywebd027/uibbwiki/index.php/Main_Page

Levels of granularity

Contents

Screen shot

Status

Other names

Problem description

Solution

Properties

Defaults

How to use it

Mandatory, configurable, and optional elements

Variants

Code examples

http://lngdaywebd027/uibbwiki/index.php/Main_Page

Level 1 The lowest level of reuse. If you can't break if down any further than this (under your UI rules,) it's level 1. Example - you might say a text input always must have a label, even if it isn't visually apparent. So the L1 block is the label and text input Rules Description Code Examples Allowable variations Owner Related documentation Behavior

The lowest level of reuse. If you can't break if down any further than this (under your UI rules,) it's level 1.

Example - you might say a text input always must have a label, even if it isn't visually apparent. So the L1 block is the label and text input

Level 2 A combination of other items that don’t necessarily stand alone Navigation widget, breadcrumb trail, ID & Password… How L1 & 2 entities fit together Synchronization needs

A combination of other items that don’t necessarily stand alone

Navigation widget, breadcrumb trail, ID & Password…

Level 3 Stand-alone function: complete piece of functionality Form, results list, left-hand pane, error messages, components, etc. Workflow dependencies Configurable elements Behavior descriptions

Stand-alone function: complete piece of functionality

Form, results list, left-hand pane, error messages, components, etc.

Level 4 Page schema: general layout of page type Mandatory Configurable Optional

Page schema: general layout of page type

Level 5 Meta-rules: Rules that apply to all designs Supported resolution, technology… Include the rules, the strength of the rule, and rationale The reasons the rules exist are frequently as important as the rules themselves Technology and usage change Focus on the goals, not the rule Ultimately still need to support product decisions, so guidance must be clear “Just tell me what I need to do”

Meta-rules: Rules that apply to all designs

Supported resolution, technology…

Include the rules, the strength of the rule, and rationale

The reasons the rules exist are frequently as important as the rules themselves

Technology and usage change

Focus on the goals, not the rule

Ultimately still need to support product decisions, so guidance must be clear

“Just tell me what I need to do”

Appendix A few examples

Design Reviews Design reviews for UX sign-off Formal design review sign-off Provide direction and oversight to projects Identify needs for future standardization Communication forum to see other products & projects All customer-facing UIs must be signed-off UX does not own all of the standards covered by design reviews Presentation with details Design Review Calendar Transcripts Contact Douglas Gardner or Mark Neumeier

Design reviews for UX sign-off

Formal design review sign-off

Provide direction and oversight to projects

Identify needs for future standardization

Communication forum to see other products & projects

All customer-facing UIs must be signed-off

UX does not own all of the standards covered by design reviews

Electronic Logo Implementation Standard Design reviews provides forum for governance Owned by Global Branding Defines how the LexisNexis logo is to appear and behave in products Logo Standard Overview Contact Brent Homan

Design reviews provides forum for governance

Owned by Global Branding

Defines how the LexisNexis logo is to appear and behave in products

Desktop Launch Icon Guidelines Guidelines for creation of launch icons for desktop products (complete) Mostly technical guidance for designers creating the icons Also includes general guidance such as Illustrate one main function, not all functions Knowledge burst may not be paired with other elements, so generally shouldn’t be used Professional appearance (not “cartoony” or whimsical) Icon Family: LexisNexis® HotDocs® 2008 Application Icon Library Component File Completed PDF Desktop launch icon guidelines Desktop Icon Overview Contact Brent Homan

Guidelines for creation of launch icons for desktop products (complete)

Mostly technical guidance for designers creating the icons

Also includes general guidance such as

Illustrate one main function, not all functions

Knowledge burst may not be paired with other elements, so generally shouldn’t be used

Professional appearance (not “cartoony” or whimsical)

Common Terminology Promotes consistent use of terms Specifies how common UI elements are named Should be used by any group producing customer-facing material Ensures continuity across marketing, product, help, customer support, etc. Maintained in a searchable repository Significantly reduces translation costs Common Terminology Repository Contact Phil Wittmer

Promotes consistent use of terms

Specifies how common UI elements are named

Should be used by any group producing customer-facing material

Ensures continuity across marketing, product, help, customer support, etc.

Maintained in a searchable repository

Significantly reduces translation costs

Writing Style Guide Specifies the writing style to be used by all people creating UI text & Help text Creates one tone of voice for all products Supports the perception of integration, consistency, clarity Writing Style Guide Contact Robin Stubbart

Specifies the writing style to be used by all people creating UI text & Help text

Creates one tone of voice for all products

Supports the perception of integration, consistency, clarity

TotalHelp for Web/Desktop User assistance delivery system Improved User Experience Reduced Maintenance and Development costs Improved time to market Can integrate several content types Includes internationalization features New products or products significantly changing functionality or design should migrate to TotalHelp Example: TotalHelp for UK Legal What is Total Help? presentation Contact: Phil Wittmer (web) or Jared Cannegieter (Desktop)

User assistance delivery system

Improved User Experience

Reduced Maintenance and Development costs

Improved time to market

Can integrate several content types

Includes internationalization features

New products or products significantly changing functionality or design should migrate to TotalHelp

Visual Design Batch 1: Font type & style Fonts and text requirements Impacts all text elements of online products (not marketing) Mostly technical guidance for visual designers, technical writers, developers Contact: Brent Homan

Fonts and text requirements

Impacts all text elements of online products (not marketing)

Mostly technical guidance for visual designers, technical writers, developers

UX Quality Evaluation Tool Used to evaluate our products and competitors products Based on heuristic evaluation (expert review) method Mechanism for rapid & systematic evaluation of product user experience Provides specific recommendations Complements other methods (e.g. usability testing, NPS, SUMI) Inexpensive Contact James Kalbach

Used to evaluate our products and competitors products

Based on heuristic evaluation (expert review) method

Mechanism for rapid & systematic evaluation of product user experience

Provides specific recommendations

Complements other methods (e.g. usability testing, NPS, SUMI)

Inexpensive

Web Analytics Tracking patterns of real use, pain points, and outcomes to measure success Target investment and design decisions Improve customer satisfaction Types of metrics: Funnels, paths, infer success/failure, beta, A-B testing, multivariate testing not capacity, not performance, and not billing events Good understanding of actual use is Critical for reaching organizational user experience goals Critical for targeting investment toward needed products and features Lack of good web analytics jeopardizes corporate strategy “ Ignorance is not the answer” Contact: James Kalbach

Tracking patterns of real use, pain points, and outcomes to measure success

Target investment and design decisions

Improve customer satisfaction

Types of metrics: Funnels, paths, infer success/failure, beta, A-B testing, multivariate testing

not capacity, not performance, and not billing events

Good understanding of actual use is

Critical for reaching organizational user experience goals

Critical for targeting investment toward needed products and features

Lack of good web analytics jeopardizes corporate strategy

“ Ignorance is not the answer”

Visual Design Guidelines Defines visual style for common elements within our products Primary Navigation Buttons Branding elements Form elements Containers Divs and menus Designing for CSS/Adaptability Tree Structures Etc.

Defines visual style for common elements within our products

Primary Navigation

Buttons

Branding elements

Form elements

Containers

Divs and menus

Designing for CSS/Adaptability

Tree Structures

Etc.