Desktop HD Copy 46.png

Cut Out Redesign

Introducing Cut Out

Cut Out is a collection of selection tools to make mask of a image.

 
 

Photoshop Mix

There are two main photo editing Apps carrying Photoshop's brand from Adobe - Photoshop Mix and Photoshop Fix. Both Apps are being continually updated with new features since 2015. Mix was branded as a photo compositing App with more complicated functions of layers, cutting, blend etc. Fix is branded as a professional photo retouching tool on the mobile.

Left: Photoshop Mix, Right Photoshop Fix

Left: Photoshop Mix, Right Photoshop Fix


Phase 1 Polish the Cut out 2.5

UI Problem: inconsistency with Fix

Mix and Fix have a lot of connectivities of functions and visual language. However, in the early version, the interface of Mix was needs far more polish compare to Fix. 

Left: Fix; Right: Mix v2.2 - v2.5;

Left: Fix; Right: Mix v2.2 - v2.5;

UX problem: disorganized tools and properties

Before Photoshop Mix v2.6, the interface of Cut Out. Tools, tool properties, selection properties are all piled on the bottom panel. While doing feather adjustment, the selection will be solely revealed on the canvas. We heard from users' feedback about the problems learning the tool and request to improve it.

Before Photoshop Mix v2.6, the interface of Cut Out. Tools, tool properties, selection properties are all piled on the bottom panel. While doing feather adjustment, the selection will be solely revealed on the canvas. We heard from users' feedback about the problems learning the tool and request to improve it.

Redesign with minimized engineering work

After redesign, the new Cut Out task with darker UI and side panel to support tools.

After redesign, the new Cut Out task with darker UI and side panel to support tools.

Prototype to share

Marvel prototype of the iPad design.


Phase 2 Usability test

To have a better estimate of the new design and also directions we should go for, usability testing is a necessary step before shipping the design to our direct customers. A problem is that there was no history of usability testing in Mix team (new product team) and we faced constrains of sources to help. At the end, it's decided to let me conduct a casual test.

Prototype

Linked prototype in Principle

Linked prototype in Principle

Video record of the prototype

Video record of the prototype

Participants

Participants of my usability test were screened on Facebook, with several basic information gathering of their familiarity with Mix or other Photo Editing Apps. 

Row 1: 2/9 participants are causally Mix users, 7/9 never heard or tried Mix Row 2: 2/9 participants use other photo editing Apps frequently, 5/9 sometimes use other photo editing apps, 2 rarely use photo editing apps Row 3: 4/9 participants take or used to take photos as hobbits, 3/9 take photos in daily life, 2/9 only had experience taking photos with phone Row 4: 7/9 participants are working in the creative industry, 2/9 are not (engineers)

Row 1: 2/9 participants are causally Mix users, 7/9 never heard or tried Mix

Row 2: 2/9 participants use other photo editing Apps frequently, 5/9 sometimes use other photo editing apps, 2 rarely use photo editing apps

Row 3: 4/9 participants take or used to take photos as hobbits, 3/9 take photos in daily life, 2/9 only had experience taking photos with phone

Row 4: 7/9 participants are working in the creative industry, 2/9 are not (engineers)

Participants during the tests

Participants during the tests

Testing

The testing included two parts - trying the current build and get to know the features; playing with the new design based on their understanding of tools.

Several obvious problems pop up during the test

Several obvious problems pop up during the test

According to the test, nearly half participants like the new design better while the rest prefer the previous version. However, compare the familiarity to photo editing, people who have more experience with photo editing/retouching tend to like the new layout better. Those people are more close to our product goal.

Insights

“I’m OK with that because in Photoshop you need to focus on two panels anyway” - Hong, Advanced PS user
After seeing Mix’s prototype, Jeff, who takes photography as hobby, played with the brush panel in Fix

Phase 3 New Design

Design elements

Interesting coincidence with Desktop Photoshop

Selection and Mask mode in Photoshop CC,

Selection and Mask mode in Photoshop CC,

An interesting thing about this new design:

While I was finalizing the new design after the user testing, I heard from the Desktop team about a new masking mode in their new updates in May (a few weeks before my user testing). This is the new cutting and masking mode in Photoshop desktop and it shares crazy overlaps of design with what I was putting into the mobile Apps. The desktop designer who designed Selection and Mask mode did some testing two years ago and spent very long time to circle back and forth everything around the whole product team. It was finally shipped in May, 2016, just a few months before we shipped the new updates on mobile. This update on desktop increased the user engagement of cutting by around 70% for the first three months.

Prototype


Phase 4 In build

Mix v2.6 finally released at Nov 2nd, 2016. The dramatic update of Cut Out was considered as the most important reason for our MAU increase. 

Mix v2.6 finally released at Nov 2nd, 2016. The dramatic update of Cut Out was considered as the most important reason for our MAU increase. 

After the release of the new update of Cut Out, our monthly active users are increased by 20% in a month. This is a great example to show how the power of design can make the difference.