Making security software is hard. Making lots of security products is harder. Making lots of security products with a great and consistent user experience is, well, nigh on impossible. But it can be done. In this presentation you will find out exactly how to deliver not just the best security technology to your customers, but also a pretty darn good user experience to boot. And even more importantly, how you, as a designer, can personally contribute to making it even better!

1. Mark Congiusta
Senior User Experience Manager SBG
July 19, 2017
Making Security Products Better Through Great Design
The UX of Security

3. Schneier on Security
Traditionally, we've thought about security and
usability as a trade-off: a more secure system is
less functional and more annoying, and a
more capable, flexible, and powerful system is
less secure. This "either/or" thinking results in
systems that are neither usable nor secure.

5. Cisco 2017 Annual Cybersecurity Report
Many organizations are relying on many solutions from
many vendors. This tactic adds to the complexity and
confusion of securing networks as the Internet continues
to grow in terms of speed, connected devices, and
traffic. Organizations need to aim for simplicity and
integration if they are to protect themselves.

6. Simple. Open. Automated.

10. 75%of potential customers judge the
credibility of a business based on
the design of its products*
*Stanford Guidelines for Web Credibility, 2002

11. *Design Management Institute Design Value Index, 2014

12. 2+2

13. Cisco vs Palo Alto NGFW Reddit thread comment
PaloAlto has one unified interface, templated
shared rules, config management, patch
management and very streamlined rules made
it an easy choice over the franken platform that
Cisco has been slowly trying to unify…

16. A codified set of principles and aligned user
workflows, terminology, and visual design to
unify the user experience across Cisco’s
Security and Networking product portfolio.
Hammurabi

17. Make Cisco’s Security
products look and feel as
superior as they work.

18. Cisco’s Brand Experience Guidelines
Everything you create needs to look, feel,
and sound like Cisco. So we deliver
experiences that reflect our brand and
exceed our customer's expectations.

19. What Do We Want To Be?
Bargain
Heterogeneous
Range of brand quality
Premium
Consistent
Unified brand promise

21. *All Accordion UI widgets are from the same application: Cisco Identity Services Engine 2.2 Denali release

22. SBG Customer 2015
In all fairness, the GUI experience
is partially more than bad…looks
like a trainee is programming it’s
first website.

23. Aligning the Cisco Security Experience

24. SBG Customer 2017
I like the look and feel…much more
simple and much more for the
average user…tremendously better.
Huge leap in the right direction!

25. Behavior Language Identity
• How it works in one
place is how it should
work everywhere
• Workflows align to our
customers’ needs, not
the technology’s
• Security is complex,
but it doesn’t have to
be hard
• Difficult concepts can
be explained in a
human way
• Words are the vehicle
of our deliverable
content
• Our tone of voice
should always be
clear, consistent, and
conversational
• Cisco’s brand DNA
should always be
apparent
• UI consistency is no
longer a “nice to
have”
• Appealing visual
design is how we
give our first
impression
Components of a Unified Design System

27. ar·che·type (ärkəˌtīp)
1. a very typical example of a certain person or thing
2. the original pattern or model from which all things of
the same kind are copied or on which they are based
3. a prototype

28. Aligning Interaction Design and Workflows
Archetypes
• Alerts/Notifications
• Dashboard
• Device Reg
• Inline Help
• Login
• Narrative Text
• Navigation
• Policy - Create
• Policy - Edit
• Reporting
• Search
• Tables
• Update/Upgrade
• Visual Design
• Glossary
Use Cases
The administrator needs to update an existing policy (including rules and objects within the policy container) for any
of various reasons:
• to reflect a change in the network (for instance, a set of IP addresses associated with a new branch office, or
removal of an LDAP server that is no longer in use)
• to respond to an end-user request (for instance, identification of a destination that should not be blocked)
• to reflect updates in corporate security or acceptable use policies (for instance, new HR guidelines or legal
requirements
• Define core
security/networking
patterns and use cases
• Independent of specific
product UIs
• Basic “wireframe” only
• Interaction details
captured at a high level
• Call out exceptions
• Allow comment thread
to track feedback
• Versioning

29. • Create an SBG Security Dictionary
• Unify security nomenclature (FTW; hardware bypass; fail open)
• Enforce consistent UI terminology (OK/Submit/Apply buttons)
• In-product help strategy
• Create an SBG-specific skin for the online help that matches the product UI
• Create and enforce guidelines for pop-up/field-level help
• Create a single documentation format
• Create SBG-specific templates for a consistent look and feel that aligns
with the product UI
Consistent Language and Doc Look & Feel

30. UI/Visual Design
Adoption of Atlantic visual/branding guidelines
• Corporate Logo
• Color Palette
• Typography / Font
• Iconography
• UI Components
• Header / Footer
• Login/About

31. UI/Visual Design
Create atomic design framework
• Provides a methodology for a design system
• Enables assembly of abstract items to concrete
• Builds a system of consistency and cohesion
• Creates an assembly mechanism
ISE AMPNGFW
Abstract
Build
Concrete
Atoms
Molecules
Organisms
Templates
Pages

32. Alignment Checklist Example
Archetype Score Notes
Alerts/Notifications
Dashboard
Device Registration
Inline Help
Login
Narrative Text
Navigation
Policy - Create
Policy - Edit
Reporting
Search
Tables
Update/Upgrade
Visual Design ~30% screens aligned
Glossary NA WIP
No alignment
Limited alignment
Partial alignment
Close alignment
= 0 points
= 1 point
= 2 points
= 3 points
Checklist score = 30
Total possible score = 56
= 0.54 x 100 = 54
• Checklist items are
determined by product type
and features
• Each archetype is scored on
a scale of 0 to 4 based on
degree of alignment
• Total score is a percentage of
total possible alignment
points
• Products not held responsible
for irrelevant features
Full alignment = 4 points

33. Timeline
Phase 1
Groundwork
Phase 1.5
Refinement
Phase 2
Expansion
Phase 3
Lifecycle
Feb 2017Nov 2016 July 2017 Q2 FY18 Ongoing
• Identify Hammurabi
MVP
• UX Team builds
assets/libraries
• Score initially
targeted products
• Address archetype
inconsistencies
• Share initial scoring
results with product
teams
• Develop product
“get well” strategies
• Broaden effort to
include other UX
stakeholders
• Hammurabi Summit
• Identify second
round of archetypes
• Continuous release
• Hold regular
compliance reviews
• Expand/iterate
libraries
• Ensure complete
portfolio coverage
• Core team oversight

34. mcongius@cisco.com
@CiscoUX