The Adobe Captivate redesign

INTERACTIONS AND COMPONENTS

Role

SENIOR EXPERIENCE DESIGNER

  • INTERACTION AUTHORING SYSTEM (end to end)

  • COMPONENT AUTHORING SYSTEM (end to end)

  • PROJECT THEMES: UI AND VISUAL DESIGN (vision and art direction)

  • ADVANCED WIDGETS: VISUAL DESIGN (art direction)

Contributions

Captivate is a powerful e-learning content authoring tool that hasn’t undergone a design revamp in a long time. As a result, workflows were lengthy and complex, and the UI was terribly outdated. After scoping all our features, we conceded to:

Modernize core workflows + Reskin other workflows
Redefine experience (complete code change) + Only UI code change

PRODUCT PAIN POINTS

Outdated UI, complex and lengthy workflows, discoverability, and a steep learning curve.

Initial vision

I had the sole opportunity to create and present a vision for the new Adobe Captivate, at the Adobe e-learning Summit in Las Vegas in 2019.

PRESENTED AT THE E-LEARNING SUMMIT

End to end ownership of features:

Workflow 1.0: Common components

REDESIGNED : COMPONENTS AND WIDGETS

I designed the system for adding components, configuring them and making them interactive.

Common controls like buttons, checkboxes, radio buttons, etc. are interactive elements that can be used to record a learner’s response, either for scoring/quizzing purposes, or navigate within an e-learning course.

My main research focus while creating this experience was the level of flexibility that the authors needed in order to create fresh looking content each time, but how much control is too much power? I conducted sessions with evangelists, Captivate authors and other educators to understand their expectations while working with components and created a system for authoring components, which came about after about 7- 8 iterations of the experience.

(Please reach out for a detailed walkthrough of the design process and iterations)

REDESIGNED : INTERACTIONS

Workflow 2.0: Authoring interactions on Captivate

To make e-learning content engaging, authors leverage viewer interactions like click on button to go to the next screen, start quiz by entering your name, etc. These interactions are triggered by the viewer, but are configured by the course creator.

Workflow basics: Progressive disclosure model

After multiple iterations, we felt what worked best for us was a progressive disclosure model that avoided multiple clicks to discover dropdown content. We also introduced grouping actions under specific triggers, to avoid multiple interactions listed in the summary view.

AUTHORING AN INTERACTION

Please reach out for a detailed walkthrough.

Workflow 3.0: Introducing special triggers for e-learning workflows

NEW FEATURE : SPECIAL TRIGGERS

Special triggers’ XD prototype spec delivered to engineering and evangelists

1. Objects clicked: trigger actions depending on how many objects the viewer has interacted with

Let’s say we want our learners to click on 3 ellipses to discover some content, after which the “next” button gets enabled. The author can select the “objects clicked” trigger, choose the 3 ellipses he wants discovered, and write an action to enable the button. Alternatively, authors would have to create 3 Boolean variables for each ellipse and toggle their values each time the respective ellipse is clicked. They then have to create a counting variable to track the Boolean variable and author actions on the value of the counting variable.

2. Custom states viewed: trigger depending on how many states of an object he has viewed

A similar trigger where authors can configure actions based on whether some content has been viewed by the learner or not, is the “states viewed” trigger. An action or a set of actions can be triggered as soon as all or a specific selection of states has been displayed at least once. Alternatively, authors would have to write extremely complex conditions and work with multiple variables to achieve the outcome.

Workflow 4.0: Configuring conditional actions

REDESIGNED : CONDITIONAL ACTIONS

With our UI and interaction framework ready-to-go, the research in this aspect was primarily to identify commonly used conditions, and provide quick access to them. Further, we had to speculate on the kind of conditions our creators would author in our new product. None of our competitors had effectively (in our honest opinion) solved the complexity of conditional operations, and we planned to design a very intuitive, straightforward experience, primarily focused around novices, while retaining power for advanced authors.

Upon introducing new triggers and conditions, the usage of variables in our workflows seemed to deteriorate, rendering variable workflows more of an advanced feature. This led us to place the variable dialog under the document properties panel, which was less discoverable, but reduced complex workflow load on the PI.

Workflow 5.0: Working with variables

REDESIGNED : VARIABLES

End to end condition and variable authoring workflow XD prototype delivered to engineering and evangelists.
(Please reach out for a detailed walkthrough of the feature)

Live GA build

Live GA build