Graphic: Crafting Delightful Experiences

ENTERPRISE UX

Crafting Delightful Experiences

A case study with insights on how designers can craft “wow” in enterprise product experiences

Vijay

--

In life, we all become who we want to be — good, great, or perhaps best-in world at what we do. At VMware Design, we enjoy crafting delightful experiences that customers love. We are successful when our customers, partners and stakeholders express delight with the experiences we deliver. This success is enabled by our VMware Design Process that uses multi-layered design stories. Kevin McBride, our VMware UX Architect and Principal Designer, discussed this approach in his article on Multi-Layered Design Stories.

Graphic: Multi-Layered Stories consist of Market Story and Customer Story. The Customer Story further consists of User Story and Technology Story.
Multi-Layered Design Stories

As a follow-on to Kevin McBride’s article, here’s a case study that shows how our multi-layered design story process helped us craft a delightful experience for a key product — VMware Cloud on AWS Outposts. In particular, we will share the journey of the design team in this multi-disciplinary story team. We will discuss our design activities and share key insights about crafting and measuring delightful experiences.

Graphic: Multi-disciplinary story team consists of Story Lead, Designer, Product Management, Marketing, Back-End Architect, User Interface Architect and API Engineer.
Multi-Disciplinary Story Team

What is a Delightful Experience?

Before we dive into our case study, let’s start by discussing what it means to have ‘delight’ in an experience.

Delight Is Not Visual Decoration

Delight is often equated with being just visual decoration, which is perceived as unnecessary, time-consuming and expensive to craft. It is thereby either completely ignored or treated as an after-thought by enterprise teams that are focused primarily on solving for customer problems. However, contrary to this belief, great aesthetics are not the sole ingredient — although they are essential for delightful experiences.

Delight Is a Harmonious Blend

Delight is a natural consequence when you solve for customer problems using a harmonious blend of the appropriate interactions, state transitions and visual elements such that the result is not just simple, functional and usable, but it also elevates the emotional experience of the customer. It comes from realizing that delight is not an after-design activity but can manifest only when it is a core focus of the design activity from the start.

Animation: Recipe for Delight = Harmonious Blend of Interaction Design, Visual Design, Motion Design and Prototyping
Recipe for Delight = Harmonious Blend of {Interaction Design + Visual Design + Motion Design + Prototyping}

Here are some examples of the delight from our case study below, which showcase how we crafted delight into the end-to-end customer experience — at every step of the customer journey.

1. Modern Map Interactions

Delight 1: Modern Map Interactions.
Fibonacci-based Natural Transitions and Progressive Disclosure to Manage Information Density

Map overlay and zoom interactions use smooth transitions that are guided by the Fibonacci sequence to make them feel natural. Progressive disclosure is used to manage information density at different map zoom levels.

2. Guided User Flows

Delight 2: Guided User Flows.
Step-by-Step Guided User Flows with Smooth State Transitions

User flows are presented using a step-by-step guide with smooth natural state transitions between initial, intermediate and final states.

3. Modern Form Interactions

Delight 3: Modern Form Interactions.
In-Line Expansion and Visual Hierarchy Emphasizing Data over Labels

Forms use in-line expansion for new content with a visual hierarchy that emphasizes data values over field labels.

4. Keeping Users Informed on System Status

Delight 4: Keeping Users Informed of System Status.
Keeping Users Informed on System Status Before, During and After Events

We keep users informed on system status with information before, during and after system events with details on progress that are highlighted both at the overall system-level and deep-object level.

5. Helping Users Recover Gracefully from Failure

Delight 5. Helping Users Recover Gracefully From Failure.
Immediate Remediation and Preventive Action With Details on System and Object Status

When a hardware failure event occurs, we perform both immediate remediation and take preventive action to be ready for another future failure event. Information on system status is provided at both the overall system-level and deep-object level.

6. Helping Users Manage Critical Events

Delight 6. Helping Users Manage Critical Events.
Presenting a Clear Sequence of Events With Details on System and Object Status

When system utilization becomes critical, we present a clear sequence of events that show the critical event, steps for immediate remediation and detailed progress on recovery at both the overall system-level and deep-object level.

7. Bringing Delight to Mundane Actions

Delight 7. Bringing Delight to Mundane Actions.
Particle Explosion Effect When Removing Object from Map

Even the most minute details matter when crafting a delightful experience. Delight is crafted for even the most mundane of actions — such as those that simply remove an object from the map view. A particle explosion effect is used when objects are removed from the map view.

8. Helping Users Discover Infrastructure

Delight 8. Helping Users Discover Infrastructure.
Pulsating Object Draws Attention to New Infrastructure and Smooth/Natural Transitions

We use a natural pulsating effect to gently draw the user’s visual attention to a new object discovered on the map. User actions on the newly discovered object trigger smooth natural transitions between different states.

9. Crafting a Seamless Experience Across Multiple Products

Step-by-Step Onboarding Task Guide That Brings Together Key User Flows from Multiple Products across Multiple Business Units
Step-by-Step Guide for Key User Flows
Step-by-Step Onboarding Task Guide with Network Topology

We brought together key user flows from multiple VMware products (Networking, Security, Automation, Operation, Data Protection, etc.) across multiple business units into a single cohesive VMware Cloud experience for the customer (without requiring them to hop between different web applications to complete their tasks.)

Case Study: VMware Cloud on AWS Outposts

What is VMware Cloud on AWS Outposts?

VMware Cloud on AWS Outposts is a data center product from VMware and our partner Amazon Web Services (AWS). It was announced at AWS re:Invent 2018 — the AWS annual customer conference in the USA.

Picture: AWS CEO Andy Jassy and VMware CEO Pat Gelsinger at the AWS re:Invent 2018 Keynote.
AWS CEO Andy Jassy and VMware CEO Pat Gelsinger at the AWS re:Invent 2018 Keynote

Why is it important to our customers?

It allows our customers to install a high speed data center (AWS Outpost) in their office facility and manage it with familiar VMware Cloud software while taking advantage of the flexibility provided by off-site AWS cloud data centers. This gives them the best of both worlds — high speed and flexibility.

An example customer is a manufacturing facility that requires high speed in their data center where a data transfer delay of even 100 milli-seconds can negatively impact operations.

Design Brief

Graphic: The Design Brief was characterized by the following attributes — Seamless UX, Delightful UX, Limited Time for Execution and Confidential.
Design Brief

What were the goals and deliverables of the project?

The goal was to craft an end-to-end customer experience prototype that former VMware CEO Pat Gelsinger could present during his keynote interaction with AWS (and now Amazon) CEO Andy Jassy on November 28, 2018. We needed to craft a seamless and delightful user experience that brought together experiences from multiple products across multiple business units into a single solution.

What was the timeline?

The design project was initiated at VMware on Friday, November 2, 2018 and was to be completed by November 26, 2018 — in about 14 business days.

What were the constraints?

The project was confidential and we were unable to speak with customers and conduct research on the product experience until the public announcement at the keynote. As such, our design was informed by years of user research that was already done by the VMware Design team. If we weren’t constrained by the confidentiality, the team would have validated the work-in-progress design with customers in our Design Studio sessions and at VMworld Design Studio. However, we had the opportunity to gather feedback from customers after the official product announcement at AWS re:Invent 2018.

Cross-Functional Team

Who was part of the team?

The design was delivered quickly with a nimble cross-functional team consisting of the following stakeholders:

  • Design Team: VMware UX Architect + Design Lead
  • Solution Architect
  • Product Management Team
  • User Interface (UI) & Back-End (BE) Engineering Team
Picture: Cross Functional Team consisting of VMware UX Architect, Design Lead for Outposts, Solution Architect, Product Management Team, User Interface and Back-End Engineering Team.
Cross-Functional Team

What were the responsibilities of the design team?

Within the design team, the VMware UX Architect and the Design Lead work closely with each other to rapidly ideate and prototype our design solution. We worked at a hyper-collaborative pace to make sure that everyone was in sync, easily contactable and always up-to-date.

Picture: Design Team Responsibilities between VMware UX Architect and Design Lead for Outposts.
Design Team Responsibilities

Design Process and Timeline

Graphic: Design Process and Timeline
Design Process and Timeline

As you can tell from the design process and timeline outlined above, we had significant velocity with our design deliverables. While we don’t measure value in the number of screens, it is highlighted here because it was one of the key enablers of success in this project. This velocity allowed us to craft a much broader and richer end-to-end customer story and experience.

When we shared our work-in-progress design with internal stakeholders for the first time on November 14, our end-to-end customer story was complete and our high-fidelity prototype had 21 screens (with 9 micro-interaction animations). Our stakeholders were delighted with the amount of delight that was crafted into the experience in a short period of time. As such, they provided enthusiastic support to integrate delight deep into the customer experience.

Design Insight 1: Include delight early in the design — not as an after-thought. Then its value is recognized and support is provided for deep integration into the UX.
Include Delight Early in Design — Not as an After-Thought

End-to-End Customer Story

As Kevin McBride discussed in his article Multi-Layered Design Stories, the initial steps in the process are to define the market story and the customer story. These are co-created by all cross-functional groups working collaboratively with each other as equal partners. After the market story is defined, the design team leads the creation of the customer story and crafts a compelling end-to-end customer experience.

In the customer story, the team defined the customer problem, our solution and the end-to-end journey of the various personas through the entire lifecycle of using the product. The customer story was informed by a large number of user studies over the previous two years with hundreds of users, where we studied their goals and pain points with hybrid cloud computing.

Here are some excerpts from the customer story that show the problem and our solution.

Graphic: Customer journey — Defining the customer problem.
Defining the Customer Problem
Graphic: Customer Journey — VMware’s solution to the customer problem.
VMware Solution for the Customer Problem

Rapid Iterative Prototyping

While we were creating the customer story, we simultaneously began crafting the screens. With our amazing Clarity Design System and our powerful design toolkit, we were able to transform our ideas into digital artifacts very quickly. The design tools allowed us to quickly create realistic high-fidelity prototypes that showed the end-to-end experience with a focus on micro-interactions. We were able to rapidly iterate and improve our designs as we received feedback from stakeholders on a daily basis.

Example

Here’s an example showing 21 design iterations for the Map view — a single screen from our final prototype with 70+ screens. Click through this prototype (or click inside and use the left/right arrow keys) to see how the design transformed from the very first sketch to the final version.

All screens and micro-interactions in our end-to-end prototype went through the same intense level of rapid iteration.

Prototype Showing 21 Design Iterations for the Map View

Product Launch: CEO Keynote Announcement

When was the product launched?

After the intense design effort in November 2018, we were ready for the keynote announcement of this product from former VMware CEO Pat Gelsinger and AWS (and now Amazon) CEO Andy Jassy at the AWS re:Invent conference in Las Vegas, NV on November 28, 2018.

How did customers respond to our keynote announcement?

Here are a few tweets showcasing the excitement and value delivered to customers, partners and stakeholders in our ecosystem.

Design Insight 2: We learned that analyzing our customer engagement and excitement on Twitter is a great way to measure delight in the experience.
Analyze Twitter Engagement to Measure Customer Delight

Post-Launch Design Validation

When did we start design validation?

In February 2019, we were able to share our work with customers at some of our annual customer events. At these events, customers typically spend an entire day at VMware interacting with our key stakeholders. At the end of the day, we have dinner social events where teams from VMware present the most forward-looking ideas and demos. This prototype was shown at such events and feedback was gathered on an informal conversational basis.

Picture: Validating designs with customers.
Validating Designs with Customers

How did customers respond to the designed experience?

When we shared our experience for VMware Cloud on AWS Outposts at these events, customers were unanimous in expressing their delight and recognized the significant value in the offering.

Quote from Top VMware Customer: I’m genuinely excited… this is really fantastic! If it were really this easy, I’d be very excited.
Quote from a Top VMware Customer

Customer quotes, such as the one above, served as a great way to powerfully measure the emotional response to the delight in the experience.

Design Insight 3: The most powerful measure of delight is genuine customer excitement about the product experience.
Genuine Customer Excitement is a Key Measure for Delight

Influencing the Future of VMware

What were some key outcomes of this effort?

Finally, here are some key outcomes highlighting the overall value that was delivered by the design team in a short period of time.

Key Outcomes: 1. No precedent at VMware for such a complete vision. 2. This was recognized by executive staff with applause and this is not typical for meetings with them. 3. This was great teamwork with a user-first UX-led approach. 4. UX team received mandate to lead cross-BU user experiences. 5. It inspired peers and developers around the company.
Creating Value for VMware and our Customers

How did we influence the future of VMware?

The successful outcome of this project set the foundation for the design team to take a lead role in defining the cross-BU user experiences, thereby influencing the future of VMware.

Influencing the Future of VMware: The UX team has been asked by the PCS Leadership to take a lead role in defining the cross-BU user experience for VMware.
Influencing the Future of VMware

This revealed to us that an experience is truly delightful when it generates excitement not only amongst customers but internal stakeholders as well. When this happens, it transforms how we build products as a company.

Design Insight 4: An experience is truly delightful when it not only excites but helps transform how we build products as a company.
Delightful Experiences Transform How We Build Products

High Performance Enabled by the VMware Ecosystem

How were we able to execute and achieve our goals?

The execution that you see in this project can be credited to the culture and core values at VMware which enables high performance in teams. Given the short timeline for execution in this project, we were initially confronted with the classic dilemma of choosing between quality, quantity and agility — typically, you can only pick any two of these three attributes.

However, we set out an ambitious goal that we would strive endlessly to never compromise on any of these attributes. As evidenced by the quality and velocity of our deliverables, our outstanding success was the result of that laser focus of executing on all three attributes.

Quality vs. Quantity vs. Agility. You don’t have to pick any two. You can pick all three.
High Performance Teams at VMware

We learned that delightful experiences can manifest naturally in an enterprise work environment where you have the psychological safety to break free of constraints and limiting beliefs. It requires a supportive ecosystem that motivates and inspires you to create outrageous value for customers — even if it requires intense work and immense personal sacrifice. This is what makes VMware a truly great place to work.

Design Insight 5: Delightful experiences can manifest naturally when psychological safety is celebrated as a core value in the work environment.
Delightful Experiences can Manifest Naturally with Psychological Safety

Is this the normal everyday design project at VMware?

This was a special last-minute project that required special effort. This was a time-sensitive opportunity to help shape our company vision, strategy, roadmap and partnership for the next 5+ years. And while it’s not what you see on a normal everyday project, it’s a great example of how passionate we are at VMware Design — that we go beyond the call of duty to create value for our customers. This is all thanks to the fantastic ecosystem we have here that not only allows design to thrive but lets us influence the roadmap and future of VMware. If this inspires you, please reach out and apply to one of our open design roles.

Questions?

In the interest of keeping things simple and at a high-level, we might have glossed over finer details that might be of interest to you. If you have any questions about design at VMware, please comment here and we would be happy to discuss with you.

We’re hiring!

The VMware Design team is looking for talented designers to help us continue transforming enterprise design. Check out our open positions!

--

--