Keeping it All in the Family: Presentation by Rachel Sengers and Lesley Humphreys from Design for Context at User Focus 2012 in Washington, DC. Many enterprises grow organically, with diverse products managed by different teams. Style guidelines provide a way for the organization brand itself and ensure consistency across its family of apps while leaving in flexibility to accommodate different contexts of use. A repository of guidelines can include interaction design guidelines and patterns, as well as visual design specs. This presentation at User Focus conference provided an overview of the process of developing, maintaining, and utilizing UX design guidelines. A list of resources is at the end.

1. Keeping
It
All
in
the
Family
DEVELOPING
STYLE
GUIDELINES
FOR
SUITES
OF
APPLICATIONS
October
19,
2012
|
User
Focus
Conference
Rachel
Sengers
www.designforcontext.com
Lesley
Humphreys

2. Background
RACHEL
SENGERS
LESLEY
HUMPHREYS
2
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

3. Our
design
challenge:
Many
enterprises
grow
organically,
with
DIVERSE
PRODUCT
LINES
managed
by
different
teams
who
may
be
geographically
dispersed.
How
does
an
organizaVon
BRAND
itself
and
ensure
CONSISTENCY
across
its
family
of
apps
while
leaving
in
FLEXIBILITY
to
accommodate
different
contexts
of
use?
3
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

4. Our
design
challenge:
A
common
piYall
when
developing
style
guidelines
is
to
assume
that
they
only
include
a
logo,
font,
and
a
set
of
colors.
User
interface
design
goes
deeper
than
that.
It’s
about
both
VISUAL
and
INTERACTION
design.
4
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

5. Example:
Omni
products
www.omnigroup.com/blog/entry/unified-­‐app-­‐icon-­‐style
5
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

6. Example:
Omni
products
OmniGraffle
OmniPlan
6
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

7. Benefits?
n Strengthen
your
brand
promise.
• Reinforce
your
differenVators
• Build
credibility
and
trust
n Remain
compeQQve.
• ConVnue
to
define
and
hone
your
products
• Maintain
current/fresh
visual
and
interacVon
styles
n Gain
efficiencies.
• Developers
don’t
need
to
“reinvent
the
wheel”
• Encourages
buy-­‐in
across
product
teams
• Cuts
down
on
end-­‐user
training
Vme
7
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

8. COMPONENTS
OF
A
STYLE
GUIDE
Intro
APPLICATION
Brand
&
Mission
CORPORATE
BRAND
INTERFACE
AND
MARKETING
UX
Design
Principles
Brand
Guidelines
UCD
Process
Interface
Design
visual
interacVon
voice
code/assets
8
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

9. BBC
Gel
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

10. GETTING
CREATING
THE
STYLE
GUIDELINES
APPLYING
THE
STARTED
GUIDELINES
REPOSITORY
GUIDELINES
MAINTAINING
&
EVOLVING
THE
STYLE
GUIDELINES
10
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

11. Geng
started
(thinking
about
the
effort)
n What’s
your
organizaQon’s
needs
and
culture?
• Centralized
or
distributed?
• Should
style
guide
be
part
of
a
larger
usability
effort?
n Get
management
buy
in
n Core
group
+
broader
team
n Start
small(er)
–
don’t
bite
off
everything
You
will
need
to
get
BOTTOM
UP
and
TOP
DOWN
support
during
the
process
11
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

12. GETTING
CREATING
THE
STYLE
GUIDELINES
APPLYING
THE
STARTED
GUIDELINES
REPOSITORY
GUIDELINES
MAINTAINING
&
EVOLVING
THE
STYLE
GUIDELINES
12
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

13. CREATING
DRAFT
GUIDELINES
BROADER
TEAM
-­‐
Cross-­‐funcVonal
CORE
TEAM
-­‐
Reps
from
product
teams
Drae
goals,
Feedback,
Workgroups
UX
design
principles
drae
the
guidelines,
work
on
parts
help
prioriVze
Collect
interacQon
ITERATE
design
examples
Organize,
prioriQze
Think
of
it
as
a
DESIGN
PATTERN
Show
and
tell
sessions
LIBRARY…
tailored
to
your
own
Prepare
paferns
w/
company
usage
guidelines
ITERATE
13
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

14. CREATING
GUIDELINES
–
FEEDBACK
&
ITERATION
Drae
guidelines,
visual
design
look,
interacVon
design
paierns
iew
r
rev
R eady
fo
Review
with
broader
team
user
tesVng
+
reality
checks
ITERATE
Review
with
stakeholders
(in
stages)
e.g.
product
teams,
brand
team,
marke6ng
&
sales,
execs
ITERATE
Pilot
it
on
a
project
ITERATE
14
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

15. GETTING
CREATING
THE
STYLE
GUIDELINES
APPLYING
THE
STARTED
GUIDELINES
REPOSITORY
GUIDELINES
MAINTAINING
&
EVOLVING
THE
STYLE
GUIDELINES
15
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

16. THINGS
YOU
MIGHT
FIND
IN
A
STYLE
GUIDE
…
(your
mileage
may
vary!)
Intro
APPLICATION
Brand
&
Mission
CORPORATE
BRAND
INTERFACE
AND
MARKETING
UX
Design
Principles
Brand
Guidelines
Logo
/
idenVty
UCD
Process
Interface
Design
Corporate
web
site
Photography,
illustraVon,
icons
UCD
techniques,
training
visual
Social
media
Usability
heurisVcs
interacVon
Collateral,
signage,
packaging
User
profiles
MulVmedia
Usability
tesVng,
templates
voice
Voice
/
tone
code/assets
16
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

17. THINGS
YOU
MIGHT
FIND
IN
A
STYLE
GUIDE…
(your
mileage
may
vary!)
UX
Design
Principles
Interface
Design
visual
interacVon
voice
code/assets
Color
paleie
COMMON
DESIGN
Screen
text
Code
snippets,
PATTERNS
references,
Typography
Online
help,
CSS,
UI
control
libraries
Accessibility
user
manuals
Icons,
buions
guidelines
Cut-­‐up
artwork
Common
branding
Coding
standards
elements
Wireframe
assets
Specs
for
UI
components
Flow
diagram
templates
(these
may
be
links
to
other
repositories)
17
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

18. MULTI-­‐PLATFORM
ENTERPRISES
…may
segment
guidelines
by
plaYorm
mobile
UX
Design
Principles
visual
interacVon
UCD
Process
Interface
Design
code/assets
UCD
techniques,
training
visual
web
Usability
heurisVcs
interacVon
visual
User
profiles
Usability
tesVng,
templates
interacVon
voice
code/assets
code/assets
desktop
somware
visual
interacVon
code/assets
18
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

19. MULTI-­‐PRODUCT
ENTERPRISES
…may
have
global
and
product-­‐specific
documentaVon
UX
Design
Principles
UCD
Process
Interface
Design
Product-­‐specific
detailed
UI
documentaVon,
UCD
techniques,
training
visual
specificaVons,
assets
Usability
heurisVcs
(product
team)
User
profiles
interacVon
Usability
tesVng,
templates
voice
code/assets
Enterprise-­‐wide
global
guidelines
and
design
paierns
(applicable
to
all
products)
19
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

20. The
repository
n A
living
document
n Make
it
a
reference,
not
a
narraQve
n Make
it
look
good…
to
inspire
people
to
use
it
n Reusable
UI
code,
CSS,
&
common
use
of
a
JavaScript
UI
control
library
20
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

21. EXAMPLE:
Design
principles
BBC
Gel

22. Design
paierns
Types
of
paferns
UI
components
Page
templates
and
grids
NavigaQon,
structure
Page
flows
Combos
of
page
flows
(e.g.
ecommerce,
scheduling,
user
management,
search)

23. EXAMPLE:
Design
paiern

24. EXAMPLE:
Design
paiern
Oracle
–
Individual
component
SAP
–
NavigaVonal
structure
(higher-­‐level
paiern(

25. Design
paierns:
Sample
fields
RelaQonships
Basic
fields
Extras
&
metadata
Name
RaVonale
Component
paierns
DescripQon
Inappropriate
use
Related
paierns
When
to
use
it
VariaVons
Where
the
paiern
is
Example
screenshots
Accessibility
notes
currently
used
How
it
works
Usability
tesVng
&
Category,
tags
(interacVon
&
usage
specs)
research
Author,
date
Visual
specs
Status
Links
to
assets
for
History
• coding
• wireframing
• visual
design
Discussion
(comments)
Every
organizaVon
uses
different
fields.

26. EXAMPLE:
Visual
design
guidelines
Xerox

27. EXAMPLE:
Visual
design
guidelines
Xerox

28. EXAMPLE:
Screen
language
guidelines
Yahoo,
Microsoe
–
used
as
references
SAP

29. GETTING
CREATING
THE
STYLE
GUIDELINES
APPLYING
THE
STARTED
GUIDELINES
REPOSITORY
GUIDELINES
MAINTAINING
&
EVOLVING
THE
STYLE
GUIDELINES
29
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

30. APPLYING
GUIDELINES
AWARENESS
BAKED
IN
Rollout
/
publicity
1st
projects
Ongoing
use
Training
at
rollout
&
ongoing
ITERATE,
IMPROVE
PROCESS
30
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

31. Approach
to
applying
the
guidelines
n “Requirements”
vs.
“RecommendaQons”
• Decide
how
strict
you’ll
be
• Which
items
will
be
mandated,
which
recommended
n Two
major
points
of
use
• During
design
• During
QA
• Will
there
be
formal
checks
during
design
and
QA
phases?
n Procedure
for
when
changes
are
made
to
the
guidelines
31
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

32. Consistency
Don’t
be
too
dogmaVc
about
consistency.
DON’T
SACRIFICE
USABILITY
FOR
CONSISTENCY.
Context
of
use
must
be
taken
into
account.
32
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

33. Bake
it
in
UX
Design
Principles:
INCORPORATE
THEM
INTO
DAILY
SPEAK.
33
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

34. Retrofit
exisQng
products
vs.
new
products
May
be
easier
to
apply
style
guidelines
to
new
products.
For
older
products:
n Quick
wins
/
low-­‐hanging
fruit
to
bring
flavor
of
the
brand
n Pick
and
choose
the
apps
to
upgrade
• Flagship
products
• Upgrade
products
that
tend
to
be
used
together
• Don’t
upgrade
ones
that
will
be
reVred
n Tie
it
into
an
upcoming
release
cycle
(with
new
features)
34
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

35. GETTING
CREATING
THE
STYLE
GUIDELINES
APPLYING
THE
STARTED
GUIDELINES
REPOSITORY
GUIDELINES
MAINTAINING
&
EVOLVING
THE
STYLE
GUIDELINES
35
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

36. Maintaining
&
evolving…
n Keep
it
fresh;
welcome
“subscribers.”
n Try
centralized
and/or
distributed
contribuVons.
n Structure
and
technology
maier,
for
ease
of
contribuVon.
n Make
contribuVng
part
of
job
descripVons.
n Invite
feedback!
Incorporate
product
test
results
and
test
the
guide
itself.
36 Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

37. WRAP
UP
37
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

38. Helpful
resources
ArQcles
&
discussions
Example
style
guides
from
companies
Defining
User
Experience
as
Brand
Experience
Oracle
www.oracle.com/webfolder/ux/applicaVons/
spyrestudios.com/defining-­‐user-­‐experience-­‐as-­‐brand-­‐experience/
index.html
Brand-­‐driven
design
www.slideshare.net/reduxd/branddriven-­‐design
IBM
hips://www-­‐01.ibm.com/soeware/ucd/
Brands
as
Paferns
10x10.method.com/brands-­‐as-­‐paierns/
index.html
Brand
as
Context
in
InteracQon
Design
BBC
Gel
www.bbc.co.uk/gel
www.live.bbc.co.uk/
uxmag.com/arVcles/brand-­‐as-­‐context-­‐in-­‐interacVon-­‐design
frameworks/gelui
Blackboard’s
Design
Principles
Fannie
Mae
hips://www.efanniemae.com/usability/
www.slideshare.net/robfay/design-­‐for-­‐the-­‐rudes-­‐the-­‐value-­‐of-­‐design-­‐principles-­‐7549638
Cisco
www.cisco.com/en/US/docs/security/ise/1.1.1/
Building
a
Befer
Style
Guide
www.wqusability.com/arVcles/beier-­‐style-­‐guide-­‐paper.pdf
user_guide/ise_ui_intro.html
www.wqusability.com/arVcles/beier-­‐style-­‐guide-­‐slides.pdf
Bank
of
America
seeminglee.com/porYolio/bank-­‐of-­‐
The
Bull’s-­‐Eye:
A
Framework
for
Web
ApplicaQon
User
Interface
Design
Guidelines
america/index.html
dl.acm.org/citaVon.cfm?id=642697
SAP
www.sapdesignguild.org/resources/
SalesForce
postcard
pafern
process
www.slideshare.net/iswinson/ixda09-­‐postcard-­‐paierns
ByD_UI_Styleguide_2012_FP35.pdf
www.ixda.org/resources/ian-­‐swinson-­‐postcard-­‐paierns-­‐agile-­‐ui-­‐paiern-­‐creaVon-­‐process
Apple
developer.apple.com/library/mac/
CreaQng
Successful
Style
Guides
#documentaVon/UserExperience/Conceptual/
johnnyholland.org/2010/02/creaVng-­‐successful-­‐style-­‐guides/
AppleHIGuidelines/
ArQcles
on
Boxes
and
Arrows
www.boxesandarrows.com/view/are-­‐design-­‐paierns
developer.apple.com/library/ios/#DOCUMENTATION/
www.boxesandarrows.com/view/so-­‐you-­‐wanna-­‐build-­‐a
UserExperience/Conceptual/MobileHIG/
Analyzing
the
HCI
Design
Pafern
Variety
dl.acm.org/citaVon.cfm?id=2371736.2371745
Microsom
msdn.microsoe.com/en-­‐us/library/
Guidance
on
Style
Guides:
Lessons
Learned
windows/desktop/aa511258.aspx
www.stcsig.org/usability/newsleier/0104-­‐style.html
msdn.microsoe.com/en-­‐us/library/windows/apps/
The
Art
of
Style
Guides:
Process,
PoliQcs,
&
Public
RelaQons
hh779072.aspx
Wilson
&
Smith,
UPA
2009
Conference
Generic
pafern
libraries
eCram
case
study
/www.scribd.com/doc/29180579/Developing-­‐a-­‐UI-­‐Design-­‐Paiern-­‐Library-­‐ Books
&
sites
by
Jennifer
Tidwell,
Pawan
Vora,
A-­‐Case-­‐Study-­‐at-­‐eCrae-­‐Master-­‐s-­‐Thesis
Theresa
Neil,
Bill
Scoi,
ui-­‐paierns.com,
Yahoo!,
etc.
Enterprise
UI
Design
Paferns
Tools
to
make
your
own
pafern
library
arVcles.thoughVntodesign.com/2012/01/enterprise-­‐ui-­‐design-­‐paierns-­‐part-­‐i.html
Wikis
(or
other
CMSs),
Paiernry,
Quince,
GUIGuide
IXDA.org
and
IXDA
on
LinkedIn
–
Check
out
the
discussions
on
guidelines
and
paierns,
such
CSS/HTML
paiern
tools
like
pea.rs,
adacVo
paiern
as
www.ixda.org/node/21624
,
29801
primer
UIE.com
–
ArVcles
on
design
paierns
38 Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

39. Thanks
for
the
inspiraQon!
n Duane
Degler
n Carol
Smith
n Rob
Fay
n Mobile
UX
Camp
DC
2012
39 Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus

40. GETTING
CREATING
THE
STYLE
GUIDELINES
APPLYING
THE
STARTED
GUIDELINES
REPOSITORY
GUIDELINES
MAINTAINING
&
EVOLVING
THE
STYLE
GUIDELINES
40
Keeping
It
All
in
the
Family
|
October
19,
2012
|
User
Focus