Adobe Photoshop Fix
Works / UX Design.

Photoshop Fix is a mobile photo editing app with a focus on retouching and enhancing images. The app features incredibly fast and effective spot-healing as well as a full range of light, color, and detail adjustments including the (in)famous Face Aware warp mesh tooling.

Team: Manu Anand, product. Lance Lewis, Armin Asmii, Dong Feng, Gahye Park, Byoungmoon Kim engineering

Fix's tools are separated into individual tasks which contain just the functions needed to accomplish a particular result. This ensures the interfaces in each task are focussed and optimized to best support the specific intention.

Selective Adjustments
Underlying many of the adjustment and healing tasks in Fix is the brushing engine, specially designed to leverage expressive direct touch inputs to quickly and accurately apply changes to selected parts of an image. The attributes associated with this touch-based brush are complex and needed to be tuned to the dynamic nature of on-screen interactions.

Rather than sliders and toggles and other disruptive settings-oriented interfaces, we adapted the gesture-driven brush panel found in the Adobe Sketch and Draw apps (which in turn were inspired by the clever brush UX found in Adobe Ideas). Fix's version of the brush panel adapts to the needs of the different tools across the app.

Crop is complex and difficult to do well in a constrained touch environment. Given many other apps can crop, we had briefly considered leaving it out but it felt like an odd omission. So, we thought that if we were going to do crop, we would have to do it well. We picked apart the implementations in Photoshop, Lightroom, and various other Adobe mobile apps to take what was good and improve on the rest.

Instead of a stack of sliders, Vignette is mostly done via direct manipulation of centerpoint, size, and feather boundaries. A timed choreography of revealing and hiding the ellipses ensures they shy so the result can be observed unobstructed but are always easy to get to. A fourth attribute for the 'fit' geometry was tried as another axis on-screen, but ultimately ended up as a slider in the toolbar.

One of Fix's unique features is the Face Aware algorithm. Face Aware generates a three-dimensional mesh for faces in an image and assigns adjustment nodes to significant intersections of that mesh. Eyes can be adjusted independently of the nose, independently of the width of the face, all while the app handles the necessary smoothing and blending of the areas between. In addition to the direct manipulation nodes, the interface puts attribute slider controls in proximity to the face so the user is able to focus on the changes to the content without worrying about the controls being out of their line-of-sight.

Face Aware is an excellent example of UI/UX making complex and powerful engineering science accessible to a mobile novice user:

iPad and iPhone versions were developed simultaneously, with identical capabilities and only a few key variations in UI to account for the phone's much smaller screen.

Adobe Fix is vailable in the Apple iOS App Store and coming soon to Android.

Read up on the development of Fix here: Reimagining Photoshop for the Mobile Era, Fast Company