SnapFX is a prototype application I designed and developed at Adobe Research the summer of 2019. As a long time fan of Adobe (started using Photoshop at age 12), it was a thrill to work with their R&D department inventing new technology.

SnapFX is a modular image editing system that makes sophisticated image editing far easier for novices. It leverages modularized sets of Photoshop commands (Actions) along with lego-like modular blocks that can be dragged and dropped on an intuitive touch interface. My manager and I established a modular system and I designed and prototyped the application with HTML / CSS / JS. It leverages a "headless" Photoshop server for the effects while all of the interactive functionality is handled client-side.

COLLABORATORS
MY ROLE
  • User Research
  • UX Design
  • UI Design
  • Visual Design
  • Prototyping
  • Innovation
OBJECTIVES
  • Create a taxonomy for how sophisticated image effect macros (Actions) are done in Photoshop
  • Understand how novice users think about image effects and modularity
  • Prototype and test a novice-friendly modular image editing application for creating sophisticated image effects
KEY RESULTS
  • US Patent
  • Still under development at Adobe (underlying technology may be implemented in multiple products serving 12+ million customers)

RESEARCH

Let's face it - Photoshop is a BEAST. It is a powerful tool, but has an outdated WIMP interface that is highly complex and riddled with toolbars, panels, and dropdowns. This makes the software notoriously difficult to master. Much of Adobe Research efforts are in making these tools more accessible to novices and easier to learn.

I began by analyzing around 40 "actions", which are sophisticated image effects created my experts. These actions record specific Photoshop commands making it easy for even novices to produce very sophisticated effects on their images. Our goal was to see if we could modularize these actions.

A taxonomy was established and includes:

Effects, Textures, Cutouts, Brushes, Tweaks

In an effort to better understand the mental model of novice users I conducted a short paper prototype study with 10 participants. In this experiment, the participants were asked to put modules together in a way that felt most logical to them in order to turn one image in to another image. We gained the following insights:

Insight 1: Most participants were able to correctly choose the modules necessary for the image effect. This implies our taxonomy is logical and easily understood by novices.

Insight 2: Most participants tended to think of image operations flows as being horizontal, left to right.

Insight 3: Participants who had used Photoshop before were more inclined to stack modules vertically like layers, but still thought of operations as being horizontal.

Insight 4: “Cutout” was a more quickly understood term for novices than “selection mask”

The established modular system mirrors Photoshop in that layers are stacked vertically and can be rearranged, while operations/effects are a horizontal stack.

MID-FIDELITY PROTOTYPE

HIGH-FIDELITY PROTOTYPE