UX & UI Design behind SDL’s Customer Experience Cloud

8,641 views
8,181 views

Published on

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

Published in: Design, Technology, Business

UX & UI Design behind SDL’s Customer Experience Cloud

  1. 1. Designing the CXC UX & UI Design behind SDL’s Customer Experience Cloud Philipp Engel, Group UX Director, SDL
  2. 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. 3. Where we started… Situation & Motivation
  4. 4. SDL in 2010 - Disconnected UI’s and UX
  5. 5. SDL in 2012 – Aligned UI’s but disconnected UX
  6. 6. The world changed fast, enterprises were slow to catch up…
  7. 7. Some trends we saw starting to affect the enterprise
  8. 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. 9. Defining our direction… One SDL Experience
  10. 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. 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. 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. 13. How to get there… Approach & Process
  14. 14. Inspiration from a different field… High Fashion
  15. 15. Inspiration from a different field… High Fashion Mass Collection
  16. 16. More Inspiration: Google’s Project Kennedy
  17. 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. 18. SDL UX Design Community
  19. 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. 20. “Design is how it works” User Experience Design
  21. 21. “The Frame Model”
  22. 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. 23. “The Frame Model” Concept Header with User Items Navigation Pane Content Area (Applications, Dashboards, Shared Sections)
  24. 24. Navigation Pane - Design Iterations
  25. 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. 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. 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. 28. Screen Archetypes to Align Interaction Models Collaboration Comments and reviews as part of workflows Media Editing Manage and publish multimedia
  29. 29. Screen Archetypes to Align Interaction Models Data Visualization Dashboards
  30. 30. UX Design per Product
  31. 31. UX Design per Product: Personas
  32. 32. UX Design per Product: UX Walls in Team Spaces
  33. 33. UX Design per Product: Scenarios & User Journeys
  34. 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. 35. Service Design From: Jamin Hegeman (Adaptive Path), Service Design Workshop - UX Week 2013
  36. 36. Service Design Workshops: Service Blueprints
  37. 37. A unique and recognizable brand identity… Visual & UI Design
  38. 38. Carbon 2 – Design Theme Branding Colors Icon Colors Typography Refreshed Logo User Interface Colors
  39. 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. 40. Carbon 2 – UI Design for Screen Archetypes
  41. 41. Carbon 2 – Default Controls
  42. 42. CXC Logo Evolution
  43. 43. CXC Logo
  44. 44. CXC Icons
  45. 45. It all comes together… Design Applied to Products
  46. 46. CXC - Web SDL Tridion – User Home Page SDL Tridion – Web Sites Dashboard
  47. 47. CXC - Web SDL Tridion – Experience Manager SDL Tridion – Content Explorer
  48. 48. CXC - Web SDL Tridion – Targeting Rules SDL Tridion – Targeting Rules Details
  49. 49. CXC - Web SDL Tridion – Content Experiments SDL Tridion – Content Experiments Details
  50. 50. CXC - Web SDL MediaManager – User Home Page SDL MediaManager – Media Explorer
  51. 51. CXC - Web SDL MediaManager – Media Details & Editor SDL MediaManager – Settings
  52. 52. CXC - Documentation SDL LiveContent – Login SDL LiveContent – User Home Page
  53. 53. CXC - Documentation SDL LiveContent Reach – Collaboration Dashboard SDL LiveContent Architect
  54. 54. CXC - Documentation SDL LiveContent Reach SDL LiveContent Create & Enrich
  55. 55. CXC Product Documentation SDL Product Documentation - delivered through SDL LiveContent
  56. 56. CXC - Campaigns SDL Campaign Manager – User Home Page SDL Campaign Manager – Calendar
  57. 57. CXC - Campaigns SDL Campaign Manager SDL Campaign Dashboard
  58. 58. CXC - eCommerce SDL Fredhopper – Business Manager SDL Fredhopper – Preview
  59. 59. CXC - Analytics SDL Customer Analytics SDL Customer Commitment Dashboard
  60. 60. CXC - Social SDL SM2
  61. 61. CXC - Language SDL WorldServer – User Home Page SDL WorldServer – Translation Job Management
  62. 62. SDL.com General Site Design Landing Pages
  63. 63. SDL Language Cloud SDL Language Cloud – Landing Page SDL Language Cloud – Translation Services
  64. 64. SDL Translate SDL Translate - Mobile App SDL Translate - Landing Page
  65. 65. Product Demos Demo Environment - Best Tech.com (Retail Shop) BestTech Mobile Site
  66. 66. Summary
  67. 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. 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. 69. Thank You! Questions, Feedback? Mail or Follow me!
  70. 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. 71. proudly designed in Amsterdam (NL) | Bristol (UK) | Cluj (RO) | Los Angeles (US) | Mechele (BE) | Seattle (US)

×