Hero image — Full-width screenshot of the Resources Tab open inside Firefly, ideally showing the Tutorials tab with content visible. Best captured at full desktop width. 2400×1350px.
Overview
Learning and help, built into the tool
One of the most consistent friction points in any creative tool is the moment a user gets stuck and has to leave to find help. They open a new tab, search for a tutorial, lose their place, and often don't come back. The Firefly Resources Tab was designed to close that gap entirely.
Working across the Learn and Firefly teams, I designed an in-app experience that surfaces Adobe Learn tutorials and curated HelpX articles directly inside Firefly — giving users the right content at the right moment, without breaking their creative flow.
A first for Adobe Learn
This marked the first time Learn Engineering built and delivered an experience directly inside an Adobe product — integrating tutorials seamlessly into the Firefly codebase and setting a precedent for in-product learning across Adobe.
The problem
Help content existed. It just wasn't where users needed it.
Adobe already had a rich library of Firefly tutorials on Adobe Learn and a comprehensive set of support articles on HelpX. The problem wasn't the content — it was the context. Users who hit a wall mid-creation had to leave Firefly to find answers, interrupting their flow and often not returning.
The goal was simple but significant: make learning feel like part of creating, not a detour from it. Everything a user needs should be reachable without leaving the workspace.
What we built
Three surfaces, one cohesive experience
The Resources Tab is organised into three distinct areas, each designed to serve a different user need — from structured learning to quick answers to community connection.
Tutorials Tab
The default view. Features the top 3 high-impact tutorials, plus an "All Tutorials" section giving access to the complete Firefly library in-app.
Help Tab
Quick links to the most searched HelpX resources, plus an embedded search field for fast access to detailed support content.
Social Links
Direct links to Firefly and Adobe's social pages — connecting users to the broader creative community.
Tutorials tab — Default view showing top 3 tutorials and the All Tutorials section. Portrait crop. 800×1067px.
Tutorials tab — the default view.
Help tab — Quick links and the embedded HelpX search field. Portrait crop. 800×1067px.
Help tab — quick answers, embedded search.
Social links — The social icons panel linking to Firefly and Adobe social pages. Portrait crop. 800×1067px.
Social links — connecting to the community.
Design process
Designing for context, not content
The central design challenge wasn't what to show — Adobe already had excellent tutorial and help content — it was how to surface it in a way that felt native to Firefly rather than bolted on. The tab needed to load fast, navigate smoothly, and integrate with Firefly's visual language without feeling like a separate product embedded inside the app.
Working closely with the Learn and Firefly engineering teams, I iterated on the information architecture, the entry point within the Firefly UI, and the visual treatment of content cards to ensure the experience felt cohesive and purposeful. The panel-based layout keeps the creative canvas fully visible while giving users access to everything they need.
Design explorations — Early wireframes, layout explorations, or Figma iterations showing how you arrived at the final panel design. Could be an annotated comparison of options considered. 2400×1350px.
Early explorations — finding the right integration point within the Firefly UI.
In context — full app view — Screenshot showing the Resources Tab open inside the full Firefly interface, so the panel-in-canvas relationship is visible. 1200×900px.
The tab in context — canvas remains fully visible.
Help search in use — Screenshot of the embedded HelpX search field with results visible, showing the in-app search experience. 1200×900px.
Embedded search — support content without leaving Firefly.
Outcome
Learning built into the product, not around it
The Resources Tab shipped as part of Firefly and marked a meaningful shift in how Adobe delivers learning content — moving from a separate destination to an integrated, in-product experience. For users, it means fewer interruptions and faster answers. For Adobe, it establishes a model for how Learn content can live inside products across the ecosystem.
The collaboration between the Learn and Firefly teams set a new precedent: that engineering a learning experience into a product is not only feasible, but a genuine improvement to the user experience that doesn't require the user to go anywhere else.
Closing image — A polished, wide view of the live Resources Tab in Firefly. Could be a composed mockup or full browser screenshot. 2400×1030px (21:9).
Credits
A cross-functional collaboration
This project was a true team effort across the Learn and Firefly organisations. Special thanks to everyone who made it happen.
Team Learn
Team Firefly