Photoshop web, tutorials
Role
Sr Designer
Team
Melissa Gutierrez (Sr Designer), Katie Wilson (Design Manager), Mercedes Vega Villar (Researcher), PsW Eng Team, and various cross-functional stakeholders
With the launch of Photoshop web, the Discover Panel expanded to a web-based feature, allowing the Learn team to reimagine in-app learning for Photoshop and Illustrator. To create a new learning experience, we conducted testing, gathered user insights with our research partner, and aligned on a consistent learning framework, as there wasn't one single consistent framework across platforms. As Senior Designer, I built two prototypes for testing, implemented MVP designs, and collaborated with our researcher to refine the user experience.
I created two fully functional prototypes for the study comparing panel-based vs. coach mark-led tutorials. Users found coach marks intrusive and less engaging, preferring panels with clear confirmation steps for reassurance and enjoyment. While the panel-first approach performed better, participants recommended blending formats. Key improvements included clearer workspaces, refined panel navigation, and simplified tool discovery.
Building on the panel’s success, I collaborated with our researcher to observe sessions, sketch rapid concepts, and lead workshops that aligned insights across teams, directly informing our iterative MVP designs for Photoshop Web.
The tutorial opens in a docked panel for seamless workflow, featuring author details (photo and role) and metadata (skill level, time, description).
Tooltips and indicators appear on hover or click to help identify where tools exist in context. The carousel supports GIFs and images, advances manually, and includes a step counter for visual-step alignment.
The end of the tutorial screen includes tutorial information, a success message. Recommendations for additional tutorials appear under "Next Up," encouraging users to further their learning journey.
Post-MVP testing revealed issues with tool findability and carousels, which were too small and abstract to match nested tools.Tool links were redesigned to include tool names, hover states, and icons for clarity. We replaced the carousel with videos paired with instructional text, significantly improving tool discoverability.