jessica peng


On-Demand Learning

A hands-on learning solution for Adobe Experience Platform.


hero

Overview
Adobe Experience Platform (AEP) customers are trained through the Developer Enablement Program, a three-day in-person bootcamp that involves lectures and hands-on labs in personal AEP sandboxes.

On-Demand Learning aims to virtualize this training. Equipped with a sandbox, customers can go through lectures and hands-on labs at their own pace.
Goals
  • Provide Experience Platform training from the Developer Enablement Program in a virtual and scalable manner to reduce cost and time to value
  • Deliver a user-friendly, interactive learning experience that improves customers' understanding of Experience Platform features and functionality
Role
UX Designer and Developer | Wireframes, Prototyping, UI/UX Research, Front-End Development and API Optimization
Scope
August 2024 - June 2025
Tools
React, TypeScript, React Spectrum (React implementation of Adobe’s design system), Unified Shell (Adobe’s UI framework for internal apps), HTML/CSS


Exploration

Personas
  • Author (Course) - creates lecture content
  • Author (Lab pack) - creates assets that will be deployed to the learning environment
  • Learner - consumes on-demand course
    • Data Architect
    • Data Engineer
    • Business Practitioner
    • Administrator
    • Web/Mobile Developer

* The Learner experience will be the focus since it's farther along in development and customer adoption.
Pain Points
  • Customers must attend in-person trainings, which are costly and time-consuming
  • Instructors must manually configure and deploy lab packs to multiple sandboxes for hands-on exercises
Software Dependencies
Based on our Platform Comparisons (below chart), we decided to build a headless UI to support learning environments and serve the course content using Adobe Learning Manager APIs.

For sandbox lifecycle management, we used Managed Platform as a Service.

platform-comp


Platform comparisons

Competitor Analysis
I explored learning experiences within Adobe such as Adobe Learning Manager, Experience League, and Adobe Digital University to understand how they structure content and deliver useful learning tools. In contrast to these offerings, On-Demand Learning aims to provide personalized, hands-on environments tailored to each individual user.

Image 0
Image 1
Image 2
Image 3
Adobe Learning Manager experience
Image 0
Image 1
Image 2
Image 3
Image 4
Adobe Digital University experience


learning-gaps
learning-gaps


Design Process


After finalizing the requirements, I created a user flow diagram to align the Product and Engineering teams on the overall experience, while also helping us identify any gaps in the process. I then began sketching the pages of our application, which included Home, Catalog, My Learning, and Course Details. This helped me flesh out important metadata and establish a quick layout.

user-flow


User flow from logging into the application to requesting/terminating a lab environment


Image 0
Image 1
Image 2
Image 3
Initial sketches of the Home, Catalog, My Learning, and individual Course pages


Version 1


I built a low fidelity mockup to convey the overall experience to the larger team, focusing on the process for requesting a learning environment and triggering emails.

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7


ImprovementBeforeAfter
Problem
Not enough course material to divide across course categories.
Solution
Remove course categories, add tags to courses instead.
Thought Process
Our initial idea was to divide courses into categories, modeled after learning paths in Adobe Learning Manager. In a learning path, learners do not have to complete all courses to achieve a skill. However, to achieve this on the ALM backend, we needed to create a catalog for each category and we lacked sufficient course material/authors to create the content. We ultimately decided to get rid of categories and just add relevant skills and tags to each course.		BeforeAfter


Version 2


Once this workflow was approved, I moved on to creating a high fidelity mockup, focusing on alignment with the Adobe Experience Platform user interface and displaying module content using Adobe Learning Manager.

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
ImprovementBeforeAfter
Problem
User has no indication that modules must be taken in order for some courses.
Solution
Disable user from selecting a module until they have completed the previous one.
Thought Process
In some courses, module order is enforced. Previously, users would encounter a warning dialog if they attempted to select a module without completing the prior ones. To create a clearer and more proactive experience, I decided to enable and disable module selection accordingly. Instead, users are now informed upfront that modules must be completed in sequence, based on what modules are available to select.		BeforeAfter
Problem
The Home page is redundant and uninformative.
Solution
Condense information across the Home and My Learning page.
Thought Process
Since learners are limited to one assigned learning environment at a time, I felt it would be helpful to display its activity and key details directly on the Home page. To support first-time learners, I also added a discovery module to introduce the concept of a learning environment. Additionally, a calendar provides learners with a clear overview of their environment timeline at a glance.		BeforeAfter
Problem
Concept of a learning environment's duration is confusing.
Solution
Change the duration field to estimated wait time.
Thought Process
The concept of a learning environment’s duration was unclear—did it refer to the time needed to complete the lab exercise or how long the environment would be available? To avoid confusion, I revised it to represent the estimated wait time after requesting a new learning environment, which provides clearer and more relevant information for learners.		BeforeAfter


Current Design

Image 0
Image 1
Image 2
Image 3
Image 4


Development Process


I developed the final, fully-responsive headless experience on Unified Shell using React/React Spectrum, reusable Quarry components, and Adobe Learning Manager as the content management system. Below is an example of how I mapped API calls to React components to help organize my development workflow.

row-example
Our major challenge was integrating Adobe Learning Manager capabilities within our Unified Shell application. Specifically, we had to seamlessly retrieve the access token, embed the Fluidic Player to serve video and PDF lecture content, and understand the APIs to reduce our API call volume. We worked closely with our technical ALM resource and asked users to log feedback in a shared document.


Impact & Next Steps


On-Demand Learning has been successfully adopted by three pilot customers, all of whom shared positive feedback on its ability to deliver learning content in a self-served and organized format, with one user asking how we can provide "bite-sized" courses. The next step is to integrate this application into Adobe Experience Platform where it can serve courses and interactive lab guides in personal environments.