Adobe Captivate_
Redesigning the experience of creating quiz, adding audio and captions to help users create interactive and accessible e-learning content.
Adobe Captivate is used by online educators, corporate trainers, and instructional designers to create interactive and engaging e-learning content. I joined an ongoing project working towards redesigning the end-to-end user experience of the product. I revamped key feature - creating quiz, adding audio, adding captions, and the preferences panel to improve navigation, usability and adoption for new users. I also designed an new innovative text-to-speech feature to enhance content accessibility and engagement for a diverse audience.
Platform - Desktop app
Team - 1 Senior Product Designer (Me), 1PM, , 10 Engineers
Role - UX design, UI Design, Prototyping, Design Systems
Duration - Q4 2020 to Q2 2021
Understanding the problem
Over the years, after its launch in 2004, Adobe Captivate was cluttered with features and had complex workflow that made creating e-learning content challenging for users. Key user pain points included
Poor feature discoverability
Inconsistent UI patterns across workflows
Steep learning curve for new users
On the engineering side, the rigid structure of the legacy app hindered scalability and introduced development complexities.
Adobe Captivate quiz feature workflows, before & after redesign
1. Understanding the users
I conducted interviews with the customer success managers and in house product experts to understand the goal, challenges and needs of the target users of the quiz feature.
Novice - E-learning Educator
Goals: Seeks a user-friendly interface for creating engaging quizzes that is smiple and easy to work with.
Challenges: Lacks in-depth technical knowledge; needs clear guidance on how to structure quizzes effectively.
Needs: Intuitive navigation, step-by-step guidance, and easy-to-understand customisation options for question types and settings.
Novice - Corporate Compliance Trainer
Goals: Requires a tool that streamlines compliance-focused quiz creation with features like randomized questions, secure assessments, and detailed reporting.
Challenges: Adhering to strict compliance standards; needs assurance that quiz results are accurately recorded and easily retrievable.
Needs: Robust security features, detailed analytics, and tools to create randomized assessments that ensure thorough understanding of compliance content.
Experienced - Instructional Designer
Goals: Aims for efficiency and flexibility in quiz authoring, with a focus on creating diverse and challenging assessments.
Challenges: Time constraints; desires advanced customisation options and seamless integration with other e-learning elements.
Needs: Quick access to a variety of question types, advanced settings for nuanced control, and the ability to integrate quizzes seamlessly into comprehensive e-learning modules.
2. Understanding the workflows
The quiz feature in Adobe Captivate is a powerful tool that enables users to create interactive assessments for learners. It took several conversations with the PM, product experts and customer success managers for me to understand how users interact with the product. I broke down the quiz feature experiences into 4 phases to provide a structured way to evaluate and optimize the user journey.
1. Create slide
Select question slide type: Choose from multiple options such as multiple choice, true or false, short answer, fill in the blank, match the column, arrange in sequence, Hotspot or survey.
Select if the question slide will be scored or not: graded or non graded slide
2. Edit slide
Edit properties: Adjust settings like the no. of answer options, no. of attempts, points, penalties and time limit.
Edit content: Change question and answer text, enter/select correct answer and customize visual design of the slide
Add components: Include feedback captions, buttons to navigate quiz
Set interactions: Define actions for success and failure.
3. Preview/ Publish
Preview the slide to ensure the question slide functions correctly and everything looks right.
Publish the quiz directly into the learning management system for the learners
4. Configure
Question slide Manager: Manage groups of question slides, import/export questions, and assign question slide groups to random question slides.
Preferences: Configuring general, reporting, pass/fail, and default label preferences.
Theme Editor: Customise the visual theme preferences for question slides
1. Upgrade design system
Since its launch in 2004 the product has not had any significant upgrade to its design system. The overall experience and interface is outdated and has several usability issues. The goal is to use Adobe’s new design system to modernise the user experience, improve usability, making it more intuitive, contemporary, in line with current industry standards and on par with other Adobe products.
2. Improve IA & streamline workflows
The current application frame is outdated and lacks scalability, with recent features retrofitted into the application in a way that makes them difficult to locate and use effectively. The interface is cluttered with numerous features and the experience is inconsistent when moving between different modules or features. The goal was to improve the IA by designing a new navigation system and layout that is aligned with users mental model and supports their needs in the context of the redesigned app frame.
Adobe Captivate - Old & New Navigation
Adobe Captivate 12
User can now add a question slide in just 2 clicks
The question slides options are presented with a visual illustration and a bigger click area
User can choose if the slide will be graded or not in the properties panel
Edit slide properties
Question slide properties are organized to guide user through the question slide creation process
Property labels updated to be descriptive are easy to understand
Progressive disclosure of advance options
Intuitive accessible controls
With 'Preset’ users can quickly change the layout of the slide with the out of the box design templates
As the user selects each object on the slide to edit it the properties panel changes to show the relevant properties.
In case of grouped object user has to double click to edit individual objects within the group
The process of selecting/ editing correct answer was streamlined for all question slides with a button to initiate the process
The dynamic button also acts like an alert/ status. In its first state it nudges the user to select/ enter an answer and once the user completes the that process the button updates to indicate there is an answer selected/ entered that can be edited at anytime.
Users can add feedback captions on the question slide that help learners answer the question and move along the quiz
Feedback caption feature had a major improvement with the redesign. It is now designed to be multi-state objects making it easier for users to add custom captions and easily set interactions for each state.
The new question pool manager is integrated into the new app frame in more intuitive way allowing the user to easily create question slide groups, move question slides between groups and main project file and import format-compatible question slides with just a few clicks without losing context.
Adding & editing audio
Adobe captivate allows e-learning content creators to record voiceovers, add audio or sound effects in response to interactions, or add background music to learning courses. Users can add audio to their slide or any objects on the slide. Users can edit audio by cutting, pasting, adding captions, removing background noise, looping, and more. A new audio panel was introduced in the right menu and the audio editing modal window was transformed into a panel that sits under the slide to maintain context while editing audio.
Adobe Captivate audio workflows, before & after redesign
Adding & editing closed captions
E-learning content creators add captions for video or audio content in their learning courses to make it accessible and engaging for a diverse range of learners with different abilities. Users can create captions manually by typing in the text for the content, or import caption files. User can adjust caption timing and customize the visual formatting according to their needs. A caption section was introduced in the audio panel on the right side, the caption editing modal window was transformed into a panel that sits under the slide to maintain context while editing captions and the caption style formatting was integrated into the properties panel.
Adobe Captivate audio workflows, before & after redesign
"I've always believed that the authoring of elearning shouldn't just be for techies. The New Adobe Captivate is a powerful tool consistent with previous versions of Adobe Captivate but contains a simplified user interface so anyone can learn to use it. For example, the latest experience of creating quiz is so smooth and so much faster. The new workflows for selecting answer and adding feedback captions is exactly what we needed and it saves me so much time."
"Since 2016, I have relied on Adobe Captivate for creating personalized elearning games and interactive scenarios. With the latest release, Adobe Captivate has become even more exciting and empowering for designers to explore their creativity and push their limits. The design team has done an excellent job in making this tool modern and user-friendly, which makes it accessible to designers of all skill levels. I look forward to seeing what everyone will create with this innovative tool."
Callista Dawson
Learning Experience Design Manager
Los Angeles Pacific University
"The new version of Adobe Captivate is the best one yet! This much needed upgrade has visually rich templates to help create impactful and engaging learning experiences and signature Adobe features and graphics to help unleash your creativity. This new version of Captivate is intuitive, practical, and easy enough for a novice to work with. My experience using it so far has been extremely positive and I will likely continue using Adobe Captivate in my e-learning and instructional designs."
Ana Maria Treadwell
Instructional Designer, Multilingual Content Developer
Freelancer