This slide deck illustrates the journey SDL’s user experience design community went through over the course of the last few years. As part of that process, UX design thinking proved to be an invaluable transformational element and an innovational catalyst in transforming a set of disconnected and separate products into one consistent service offering, the SDL Customer Experience Cloud. More at http://www.sdl.com/cxc

1. Designing the CXC
UX & UI Design behind SDL’s Customer Experience Cloud
Philipp Engel, Group UX Director, SDL

2. This presentation illustrates the journey SDL’s design
community went through over the course of the last few years.
As part of that process, UX design thinking proved to be an
invaluable transformational element and an innovational
catalyst in transforming a set of disconnected and separate
products into one consistent service offering, the
SDL Customer Experience Cloud.

3. Where we started…
Situation & Motivation

4. SDL in 2010 - Disconnected UI’s and UX

5. SDL in 2012 – Aligned UI’s but disconnected UX

6. The world changed fast, enterprises were slow to catch up…

7. Some trends we saw starting to affect the enterprise

8. Some trends we saw starting to affect the enterprise
Generation C
Connected all the time
The Social Enterprise
People, not files, are the center of activity
Consumerization &
Software as a Service
Mobile Computing
The rise of mobile PCs over desktop PCs
Touch &
Gesture Interaction
as a primary input method

9. Defining our direction…
One SDL Experience

10. One SDL Experience - Design Goals
• Unified
SDL product suite with a unified user interface
and a harmonized user experience
• Seamless & Integrated
SDL products are seamlessly integrated, connect
via a single global navigation mechanism,
consistently reuse common elements, enrich
each other by providing functionality in-context,
and have optimized cross-application workflows
• Context aware
SDL products are optimized for the context
(online/offline, location, etc.) and the device
(incl. input method) the user is using, including
desktop, tablet, and mobile devices
• Personalized & Relevant
SDL Products expose information, features, and
data in a personalized, role based, contextaware, and relevant fashion
• Collaborative
Social and collaboration features allow users to
connect, stay informed, communicate, and
through these means collaborate with each
other to achieve their business goals
• Service Experience
SDL products are embedded in a larger service
design experience architecture encompassing
the entire customer journey including all touch
points such as SDL.com, social web, demos and
trials, community, and customer support

11. One SDL Experience – It’s a Journey!
Customer Journey via Touchpoints
Website
Customer
Domain & Product Content
Manage Account
Support & Documentation
Demos, Videos, Webinars
Community
(Blogs & Forums)
Products & Services
Marketplaces,
In-app Purchases

12. One SDL Experience - Challenges
• Aligning product roadmaps
Different markets, industries, release cycles
• Fast moving development teams
Distributed development teams, all need to
move fast, different team sizes, cultures, office
locations, time zones, maturity level, etc.
• Aligning UX design processes
Centralized or decentralized structure? How to
best support SCRUM teams? How to align but
reduce dependencies ? How to avoid UX
becoming the bottleneck?
• Different UI technology
Different HTML frameworks, Silverlight, Flash,
desktop products
• On-premise vs. cloud-based
Some products on-premise, some cloud-based,
some mixed (hybrid-cloud)
• Different product types
Some are 1) “tool boxes” that require
implementation projects, 2) some work out of
the box but require customization, 3) some SAAS
Requires an approach that
addresses goals while
respecting these challenges

13. How to get there…
Approach & Process

14. Inspiration from a different field…
High Fashion

15. Inspiration from a different field…
High Fashion
Mass Collection

16. More Inspiration: Google’s Project Kennedy

17. More Inspiration: Google’s Project Kennedy
Larry Page
Project Kennedy
became CEO of Google 2011
“hey everyone, we’re going to redesign
all of our products, and we need it by this
summer…”
Cross-product initiative,
vision and mandate to redesign all major
apps and keep their design consistent
within fast moving teams
Product Design Teams
Product teams act independently but with the goal to "balance the
experience across all Google products with the need to move fast and
deliver great solutions for our users”
Design War Room
Google’s senior designers gathered and
decided on design principles and how to
apply them
UXA Team
User Experience Alignment - Institutionalization of Project
Kennedy principles, goal to develop common design language
”Focus on refinement, white space, cleanliness, elasticity,
usefulness, and most of all simplicity”

18. SDL UX Design Community

19. SDL UX Design Community
UX Community
Central UX group
to define guidelines and support
Focus on strategy and reference
designs
Decentralized, independent,
flexible UX teams
Focus on products, projects, and
detailed designs
Our Manifesto
Collaboration
1.
We are open, collaborative, and
support each other
• Weekly UX Community Meeting
2.
Because we are distributed we
communicate and share a lot
to create transparency
• Yearly UX Summit
3.
We see ourselves as a team,
rather than solo players
4.
We focus on results rather than
on process
5.
We work hard, but also
celebrate victories!
• Weekly UX Product Line Meetings
• “UX Walls” in Team Spaces
• All Designs on UX WIKI

20. “Design is how it works”
User Experience Design

21. “The Frame Model”

22. “The Frame Model”
Alignment of Product Strategy
Persona based approach focusing on end-to-end
CXM use cases
Social Features
Single sign-on, Feeds, Notifications, Updates, Workflow
Assignments, etc.
Unified & Flexible UI
Touch/non-touch interaction
Works cross-devices and platforms
Different functionality on different devices
Slide-in Navigation
that “connects” different applications

23. “The Frame Model” Concept
Header with User Items
Navigation
Pane
Content Area
(Applications, Dashboards, Shared Sections)

24. Navigation Pane - Design Iterations

25. Screen Archetypes to Align Interaction Models
Existing Applications
Screen Archetypes
Screen Archetype for Task A
Analysis of existing applications for patterns &
commonalities (specifically screens that are different but
share the same purpose, serve the same task)
Screen Archetype for Task B
Defining the default design for a particular task
(e.g. browsing content , editing rich text, etc.) in a
product in form of a default screen layout incl.
interaction and behavior

26. Screen Archetypes to Align Interaction Models
User Home Page
Personalized home page of an application providing relevant
information, data, and quick access to recent projects etc.
Application Landing Pages
Suggested actions or items to avoid empty list views

27. Screen Archetypes to Align Interaction Models
Content Browsers
Navigate (hierarchical) content structures & preview or open items
Rich Text Editors
Edit rich text in WYSIWYG fashion

28. Screen Archetypes to Align Interaction Models
Collaboration
Comments and reviews as part of workflows
Media Editing
Manage and publish multimedia

29. Screen Archetypes to Align Interaction Models
Data Visualization Dashboards

30. UX Design per Product

31. UX Design per Product: Personas

32. UX Design per Product: UX Walls in Team Spaces

33. UX Design per Product: Scenarios & User Journeys

34. Service Design
User Experience
Service Experience
Experience between person and single touchpoint,
usually a digital product
Orchestrated experience between all parts of the service,
from people to objects to places to interfaces
From: Jamin Hegeman (Adaptive Path), Service Design Workshop - UX Week 2013

35. Service Design
From: Jamin Hegeman (Adaptive Path), Service Design Workshop - UX Week 2013

36. Service Design Workshops: Service Blueprints

37. A unique and recognizable brand identity…
Visual & UI Design

38. Carbon 2 – Design Theme
Branding Colors
Icon Colors
Typography
Refreshed Logo
User Interface Colors

39. Carbon 2 – UI Icons
New set of custom icons
Huge new set of vector based icons,
In two flavors (color and monochromatic),
pixel-perfect PNG export in 2 sizes,
SVG for high-resolution displays

40. Carbon 2 – UI Design for Screen Archetypes

41. Carbon 2 – Default Controls

42. CXC Logo Evolution

43. CXC Logo

44. CXC Icons

45. It all comes together…
Design Applied to Products

46. CXC - Web
SDL Tridion – User Home Page
SDL Tridion – Web Sites Dashboard

47. CXC - Web
SDL Tridion – Experience Manager
SDL Tridion – Content Explorer

48. CXC - Web
SDL Tridion – Targeting Rules
SDL Tridion – Targeting Rules Details

49. CXC - Web
SDL Tridion – Content Experiments
SDL Tridion – Content Experiments Details

50. CXC - Web
SDL MediaManager – User Home Page
SDL MediaManager – Media Explorer

51. CXC - Web
SDL MediaManager – Media Details & Editor
SDL MediaManager – Settings

52. CXC - Documentation
SDL LiveContent – Login
SDL LiveContent – User Home Page

53. CXC - Documentation
SDL LiveContent Reach – Collaboration Dashboard
SDL LiveContent Architect

54. CXC - Documentation
SDL LiveContent Reach
SDL LiveContent Create & Enrich

55. CXC Product Documentation
SDL Product Documentation - delivered through SDL LiveContent

56. CXC - Campaigns
SDL Campaign Manager – User Home Page
SDL Campaign Manager – Calendar

57. CXC - Campaigns
SDL Campaign Manager
SDL Campaign Dashboard

58. CXC - eCommerce
SDL Fredhopper – Business Manager
SDL Fredhopper – Preview

59. CXC - Analytics
SDL Customer Analytics
SDL Customer Commitment Dashboard

60. CXC - Social
SDL SM2

61. CXC - Language
SDL WorldServer – User Home Page
SDL WorldServer – Translation Job Management

62. SDL.com
General Site Design
Landing Pages

63. SDL Language Cloud
SDL Language Cloud – Landing Page
SDL Language Cloud – Translation Services

64. SDL Translate
SDL Translate - Mobile App
SDL Translate - Landing Page

65. Product Demos
Demo Environment - Best Tech.com (Retail Shop)
BestTech Mobile Site

66. Summary

67. We addressed our Design Goals
Unified
SDL product suite with a unified user
interface and a harmonized user experience
Seamless & Integrated
SDL products are seamlessly integrated,
connect via a single global navigation
mechanism, consistently reuse common
elements, enrich each other by providing
functionality in-context, and have optimized
cross-application workflows
Context aware
SDL products are optimized for the context
(online/offline, location, etc.) and the device
(incl. input method) the user is using,
including desktop, tablet, and mobile devices
Personalized & Relevant
SDL Products expose information, features,
and data in a personalized, role based,
context-aware, and relevant fashion
Collaborative
Social and collaboration features allow users
to connect, stay informed, communicate, and
through these means collaborate with each
other to achieve their business goals
Service Experience
SDL products are embedded in a larger
service design experience architecture
encompassing the entire customer journey
including all touch points such as SDL.com,
social web, demos and trials, community, and
customer support

68. Key Takeaways
UX is great to align and
focus on what matters!
UX design thinking and the rich set of
tools that come with it proved to be
extremely valuable and effective for SDL
in “translating” the company vision
(Customer Experience Management,
CXM) into a concrete strategic
framework (Customer Experience
Cloud, CXC).
Especially helpful were visual user
journeys illustrating the subjective
experiences of personas while those are
using integrated SDL technology to
achieve specific CXM related goals. This
helped us break down the perceived
complexity and focus on what matters
to provide a good and consistent user
experience.
The distributed UX
design process works!
SDL’s choice for a distributed design
community with a cross-product-group
at its core supporting multiple
independent product design teams
proved to be successful and very
effective.
The advantages, such as common
design values and guidelines as well as
global consistency coupled with local
flexibility and independence, by far
outweighed the additional effort
involved in communication,
collaboration, sharing, and
transparency.
Service Design
Rocks!
Applying service design methods at
SDL (e.g., design workshops around
service blueprints) was extremely fun
and effective from the first moment
onwards.
I was stunned to see how this method
repeatedly helped us to align various
stakeholders (e.g., owning different
customer touch points and usually not
collaborating on a day-to-day basis) on
a common objective (i.e., a great service
experience) and getting into a creative
and innovative mindset that exceeded
initial expectations by far. If you care
about a great customer/service
experience, this is the way to go!

69. Thank You!
Questions, Feedback? Mail or Follow me!

70. Links and References
SDL Customer Experience Cloud
SDL Website
SDL Customer Experience Cloud
SDL Customer Experience Cloud Video
SDL Translate App
References
Meet Generation C: The Connected Customer (Brian Solis)
Enterprise Social Networking is More Than Facebook Behind a Firewall (Brian Solis)
Designing for Multi-touchpoint Experiences (Jamin Hegeman on Service Design)
Redesigning Google: how Larry Page engineered a beautiful revolution (The Verge)
A Rare Peek At The Guidelines That Dictate Google's Graphic Design (Fast Company Design)

71. proudly designed in
Amsterdam (NL) | Bristol (UK) | Cluj (RO) | Los Angeles (US) | Mechele (BE) | Seattle (US)