Adobe - Instructional Design System

Redesign Adobe Lightroom's tutorial set for improved user experience and learning outcomes.

Context

The aim of this project was to improve the user experience and learning outcomes of Adobe Lightroom’s tutorial set by making instructional content more user-friendly, accessible, and effective in helping users understand and apply core product features.

Outcome

The redesigned tutorial clarified instructional flows and improved accessibility, enabling new and non-technical users to navigate Adobe Discover content with greater confidence. The work also introduced a more consistent instructional framework, supporting scalable learning experiences across products.

As Adobe’s tutorial library scaled, instructional experiences became overly complex and difficult to navigate—especially for new and non-technical users.
This increased cognitive load and reduced the effectiveness of tutorials as a learning and onboarding tool.

Problem Statement

Project Lead, UX Designer — led instructional framework definition, experience design, and cross-functional alignment across design, product, and development.

Role

Partnered with Creative Direction, Senior Product Management, and Development leadership.

Team

Project Duration

~3 months (concept to delivery)

Before

A foggy street scene on a bridge at night with street lamps illuminated and a person walking, overlaid with color editing tools showing hue adjustment for a yellowish color.

Previous approach
The existing experience surfaces multiple controls and UI layers at once, competing with the instructional image and increasing cognitive load—especially for new or non-technical users.

A person walking past graffiti-covered walls at night, with photo editing app interface open showing adjustment sliders for effects, texture, clarity, dehaze, vignette, grain, and split toning.

After

Redesigned approach
The interface is simplified to prioritize the instructional image and inline motion, reducing distraction and guiding users through a smaller set of clear, sequential actions.

A woman with light skin and dark hair styled in a bun, sitting on a colorful, abstract-patterned armchair in a room with pink walls and a gray sofa with yellow pillows. She appears to be adjusting her colorful, abstract-patterned pants and is looking at the camera.

A woman with long red hair poses against a vanilla background, wearing a white top and orange wide-leg pants, with black shoes.

Research

To ground the tutorial redesign in real user behavior, research focused on identifying where learners struggled, disengaged, or misinterpreted instructional intent—particularly among new and non-technical users.

Research methods included:

User Research: Interviews, surveys, and usability testing revealed where learners felt overwhelmed, unclear on next steps, or unsure how actions mapped to outcomes.
Expert Review: Instructional content was evaluated against established learning and accessibility principles to identify unnecessary complexity and inconsistent patterns.
Content Analysis: Existing tutorials were audited to isolate essential actions and concepts, enabling the removal of secondary controls and non-critical UI elements.

Together, these methods clarified what users needed to learn, when they needed it, and what could be safely removed to reduce cognitive load.

Key Takeaways

Research surfaced several principles that directly shaped the redesigned instructional system:

Task clarity matters more than feature coverage
Users wanted help completing a goal—not an overview of every available tool. Tutorials were refocused around primary tasks rather than exhaustive functionality.
Plain language reduces hesitation and drop-off
Clear, concise instructions improved confidence and comprehension, especially for users unfamiliar with professional editing tools.
Chunking enables momentum
Breaking instructions into smaller, sequential steps—supported by focused visuals and inline motion—improved retention and reduced abandonment.
Consistency builds trust across products
Reusing layout, interaction patterns, and visual hierarchy allowed users to transfer learning between tutorials and applications more easily.
Iteration is essential for instructional systems
Ongoing testing ensured the tutorial framework could evolve as products and user needs changed, without reintroducing unnecessary complexity.

A smiling woman with glasses and curly hair resting her chin on her hand, sitting in front of a bookshelf. A quote overlay on the image reads: 'I need tutorials that cut to the chase and help me get the job done efficiently, without overwhelming me with unnecessary information'.

Persona

Research insights were synthesized into a representative user model to anchor design decisions throughout the project. Rather than serving as a static artifact, the persona helped prioritize instructional clarity, reduce cognitive load, and ground the tutorial experience in real user goals and constraints.

The model informed content scope, visual hierarchy, and interaction patterns—ensuring design choices aligned with how users learn, work, and navigate complex tools.

Design Process

Through iterative prototyping and structured reviews, the team explored multiple instructional layouts and interaction models. I led the creation and evaluation of tutorial variations across mid- and high-fidelity states, using stakeholder feedback and user testing to progressively narrow toward a clear, scalable solution.

This process balanced visual clarity, instructional pacing, and cognitive load—allowing us to validate what learners understood, where they hesitated, and how effectively each design supported task completion.

Screenshot of photo editing software with a side-by-side comparison of a woman's portrait. The left side shows the original photo, and the right side shows a edited version with enhanced contrast and brightness. Editing tools and curves adjustment panel are visible.

Design Prototype

The prototype focused on reducing cognitive load while preserving instructional clarity for beginner and non-technical users. We evaluated existing Adobe tutorials and identified common issues: dense UI overlays, lengthy copy, and fragmented attention between controls and content.

For the Self-Portraits series, the design intentionally stripped away non-essential interface elements, centering the experience around a single instructional image supported by lightweight inline animation. Instructional content was distilled into a small number of clearly sequenced steps, allowing users to progress without interruption or unnecessary decision-making.

Language, layout, and interaction patterns were standardized across tutorials to support faster comprehension and reduce learning friction. Chunking was used to break complex actions into manageable moments, while consistent visual hierarchy helped users understand where to look and what to do next.

Together, these decisions produced a tutorial system that is direct, accessible, and scalable—supporting both first-time learners and future instructional expansion.

Collage of three women posing in colorful settings. The first woman has curly hair and is making a surprised face. The second woman is sitting on a couch with colorful pants and a yellow shirt, and the third woman has long red hair, stands with one leg forward, wearing orange pants and a white top.

A young woman with long brown hair, wearing a white top and orange pants, standing against a beige background. There is a graph overlay in front of her showing a curve labeled 'Point Curve.'

A woman with curly hair testing photo editing software, with a split view showing her image with red mask overlay on the left and the original on the right. The software interface includes options for subject selection and mask inversion.

Live Pages

A woman with red hair in a bun wearing a yellow shirt and colorful pants sitting on a sofa. The image shows a photo editing app with options for portrait skin tones and photo filters.

Simplify your edits with Lightroom presets.

Watch Demo

A side-by-side comparison of a woman's hair, showing a section of curly, reddish-brown hair on the left with a loose strand circled, and the same section styled neatly on the right.

A woman with long red hair wearing a white top, orange pants, and black platform shoes, striking a pose against a beige background, with a mirrored duplicate of her on the right side, and a bounding box overlay indicating geometric editing options.

Create a vibrant background.

Play with perspective.

Watch Demo

Moving Forward

The redesigned tutorial system improved instructional clarity and accessibility, making Adobe Discover content easier for new and non-technical users to understand and apply. By simplifying presentation and reducing cognitive load, learners were able to grasp concepts more quickly and confidently.

Beyond individual tutorials, this work established a scalable instructional framework—raising the bar for accessibility-driven design across future content. The long-term goal was to shift how instructional experiences are perceived at Adobe: from feature walkthroughs to inclusive learning tools that support discovery, trial, and meaningful product engagement.

New tutorial sets based on the new design

Mount Fuji with snow on top, reflected in a calm body of water, with red autumn leaves on the right side.

A happy husky dog lying among pink flowers with a stone background, with photo editing sliders visible on the right side.

A woman with long dark hair dressed in a beige checkered blazer and brown top outdoors in front of a modern glass building and green trees, with sunlight creating lens flare in the upper left corner.