Problem and Context

In 2012, my company SDL found itself with a large variety of separate software products which all solved different but complementary problems related to customer experience management (or in short CXM). Some products addressed scenarios from the early stages of the customer journey, such as campaign management, social intelligence, or web content management. The purchasing phase itself was covered through an Ecommerce optimization tool, and the later post-purchase journey phases where covered through documentation management and translation management products. All products were successful in their own right, but most of them came as on-premise only and custom integrations and implementation projects were required to connect them with each other. At this time, I was leading and managing SDL’s UX design team, but also served as the UX strategist and architect of a long-term initiative aiming to bring all these products together into an integrated easy to consume cloud environment. This combination we called the Customer Experience Cloud (CXC) and it needed a design direction and an approach to design and align all those related products and services.

Process

Defining the Direction

We kick-started the CXC project as part of our SDL CTO office, a centralized center of excellence for innovation and incubation projects. The team included senior product managers, principle developers, software & cloud architects, and UX design (which was covered by an incredibly talented visual designer and myself). I started by defining design goals for such an integrated cloud offering, and more specific, for a single and unified product and user experience, which we dubbed the “One SDL Experience”.

Important to highlight was that the design goals targeted the entire end-to-end experience across the entire journey of SDL’s customers. That meant the experience strategy and the related design system that had to be developed needed to address all touchpoints in the customer journey including web sites, support systems, community platform, etc.… not just the product UI’s. While pulling all those ideas and objectives together I also mapped and analyzed the challenges we had to overcome. So the first challenge was to find a design approach which was able to address and establish the design goals across the entire journey (and across many different teams) while respecting the challenges that were inherent to the organization, the underlying technology, and the existing products.

Inspiration: Fashion Shows and Googles Project Kennedy

While searching for a good approach to establish such a design direction and system which had to be adopted and applied by the entire UX design community in SDL for various products, web sites, and systems, I found inspiration in another area of design – in fashion. My neighbor at the time was a fashion designer for a large international apparel company and was part of a small team designing the new collections for the fashions shows. She told me that she and her team were first defining the general theme and direction for a new collection, and based on that, creating various pieces and looks for the fashion shows (basically “mockups” as these pieces were not made for durability or longevity). If the collection received good feedback, it was then given to another branch of designers in the same company who used it as inspiration to create and design the various collections for the different markets with their unique requirements… What I needed was actually a “high fashion” design theme that I could test and validate, and which then could be applied to all products and services! When looking for other industry examples I even found that Google was faced with a similar problem and that their design team had chosen for a similar approach. They called it “Project Kennedy” and got a couple of senior designer in a “design war room” to design a “high fashion” version of their (then) design-wise disconnected products and afterwards apply it across the whole product ecosystem. For them this was the foundation of what became “Material Design”.

CXC Experience Architecture

With this in mind I started creating inspirational design concepts and started story-telling how a day to day reality would feel to our customers, would they have such a CXC cloud platform in operation. To allow this I defined a few end-to-end scenarios around customer experience management (CXM), told from the perspective of involved personas. What worked pretty well here was a combination of high fidelity UI prototypes embedded in “day in the life of a customer” stories. This helped grounding the otherwise abstract discussions through making high level concepts tangible and relatable. It helped to paint the picture of the larger product vision first in order to rally the wider organization behind it.

Then I defined the cornerstones of an experience architecture which were the following:

• Alignment of the separate product strategies and roadmaps to support and enable the predefined (persona-based) end-to-end CXM use cases.
• Design of a unified and flexible UI design system which works cross-devices and platforms, is equally optimized for touch/non-touch interactions, and which is smart enough to serve only relevant information and functionality to different device types.
• Social communication features should be integrated into the platform and UI to build upon the experience with social media the target (Millennial) workforce has. Accommodate all kind of feeds, notifications, updates and alerts, workflow assignments, in a simple and familiar way to stimulate collaboration through simple means.
• Identify and design a common navigation pattern to integrate and connect all products, web sites, and other touch points in a solid yet non-intrusive way.

Common Navigation & Social Collaboration

For the navigation pattern I chose to adopt a centralized navigation mechanism in form of a slide-in panel that had a common (shared) part (representing the CXC platform) and that could flexibly integrate all individual products and services (in a plug and play manner). This would allow to continue running the products standalone as before if needed (simple upgrade of existing customers), but also allowed for simple extension and addition of other connected products and service from the CXC offering (for up and cross-selling). Alongside this navigation concept I defined a consistent way to expose feeds, updates, notification, workflows etc. from a shared application header with rich callout boxes which every application, web site, and web service had to adopt. As it was almost like a picture “frame” which could hold all “hosted” applications and services, we started calling it the “Frame Model”.

CXC UI Design System

For the user interface design system, we had to define a variety of general design elements (including colors, font, iconography, typography, default UI controls, etc.) but also had to ensure that by applying those elements, each product did not become a mediocre yet consistent experience by itself. As we were aiming to redesign and align a wide variety of product user interfaces which all had their unique features, technology stacks, product roadmaps, and release timelines, we needed a different approach. Here is where the fashion show inspiration came at play.

We first went through all our existing product user interfaces and categorized all screen types we could identify. Think of a screen to browse lists, a screen to edit content, a screen for settings and so on. We realized that we had quite a variety of different screen types in use that served the same or similar purposes. Consequently, we aligned and combined these screen types to a few aggregated ones. For those we collected and described the contained functionality and redesign them. This approach gave us a few screen types we could freely redesign while covering the core functionality of the existing products. This allowed us to iterate on the design system through actual UI design of key screens and UI components that went beyond buttons and date pickers.

Screen Templates

This approach allowed us to iteratively create and refine a solid UI design for a few selected screens, even though we knew that they would not be implemented exactly 1:1 as designed. Instead those screens served as a guiding design theme (similar to the pieces designed for a fashion show) which would later be translated to the individual requirements and specific characteristics of each individual product. There they had to be interpreted and translated by each individual UX designer and their product teams.

Product Branding and UI Design

In the next step we applied some color on those gray screen template wireframes and iteratively developed the visual design and branding theme for the Customer Experience Cloud. In this step I connected my UX design team with the branding and marketing designers in SDL to extend the refresh to our corporate brand to ensure that the experience is also reflected in the visual branding, logos, product icons, content, etc.

The result was a consistent and appealing visual design theme that spun from the corporate brand all the way to the product branding and the user interfaces. Elements such as product logos, UI icons, colors, typography, illustrations, key photography etc. was applied across the entire company and across all touchpoints in the customer journey.  

Outcomes

This approach of a centralized strategic design project setting the direction for an entire ecosystem of products and services worked out very well and the central theme got adopted and applied to all products that were incorporated into the Customer Experience Cloud, the corporate web sites, customer support systems, the customer community site, and our documentation portal. Even though this process took a few years, the result was a consistent end-to-end customer experience along the customer journeys for SDL’s Customer Experience Cloud.