PHOTOSHOP EXPRESS
Shaping image & video compositing tools for the next generation of creatives.
PROJECT TYPE:
Image editing for consumer applications
MY ROLE:
Sr Experience Designer, Leading charter for multi image editing
DATE:
2021-23
What is Photoshop Express?
​
PS Express is an image editing and compositing application with key workflows which allows any user to retouch , edit their photo , composite multi image compositions and create collages from many photos .
Photoshop Express offers a set of tools to the user for them to make quick edit adjustments to their image while also with its advanced functions like layers and masking, gives the user a window to what complex image compositions can feel like when they make an eventual shift to the complex photoshop environment.
My Role
​
As the design lead on the collage & mix charter, I was responsible for working closely with my product , engineering and design stakeholders creating experiences that were focused on multi image editing workflows. While also maintaining their sense of context & design craft to the application ecosystem.
Experience Overview
Key design interventions and usability experience are mapped out in the next section. Foremost aspects of the experience being the need for a user to shift back and forth between single/multi-image editing , having a common pattern of gesture interactions and introducing new features like animation.
Introducing new navigation pattern in multi-image workflows
The need for contextual navigation?
Bring in Navigation Hierarchy
Ps Express is an application with a flat hierarchy. It has all the tools for each workflow marked in the bottom bar while any contextual tools appear in the second level . While this has worked till now for single image edits, when it comes to multi image editing the pattern is not completely scalable
Focus on Image
Since collage in most cases are a multi image edit at times it becomes imperative for the user to view an image in context to the whole composition and in a single focus mode.
Layout Actions vs Focus Mode Editing
There are certain actions pertaining to single-image editing which we want to expose our users to even when they were in a multi image workflow.
Current Scenario is not ideal
We have all the collage actions currently at the frame level. If the user wants to edit any singular image we take them to editor workspace through the edit tool hidden in the Edit action at L0. This is a long drawn path for the user.
Key Insights from Usability Study
Final Variant
01. Clear HUD actions on content selections.
02. Selection on Edit action in HUD brings the user to a focus mode with contextual actions
03. Quick image edit actions, looks, adjustments, heal all reside in the bottom tool bar(L0)
04. Bottom arrow at L0 helps the user navigate between focus mode and the frame level actions
For a detailed study of contextual actions, including design specs and scalability across all other workflows please click on the view projects link
01. The floating tray to enter the focus mode reduces the distance between the primary action and the secondary action resulting in positive response from the users.
​
02. The exit transition on clicking the chevron enables user to perceive that the focus mode is a low-commit and secure environment to switch in-and-out of seamlessly.
​
03. Users’ find the value in contextual-navigation experience and love being able to edit in a focus mode which really helps them make granular changes to an image.
Animation Tool in Editor
Motion and transition is one of the foremost needs in current image editing outputs. The ability to add transitions to stickers, text or to the content in itself has been a key requirement which Ps express has been looking to address.
The editor workflow provides the right opportunity to our users to imbibe basic animations & transitions to our users.
Animation Touch points in Editor
Key classifications of the animation experience in editor:
Component animations
Animating the canvas
Attributes of the animation feature: Speed Direction Trigger
Animating the Canvas
The Animate tool in the bottom toolbar only applies canvas level animation. In this scenario, When a user applies a preset ( eg: fade in ) the motion is applied on the whole canvas.
Animation is applied on the canvas in itself. This can be made by manually applying animation from the bottom tools menu in editor or by applying preset/ template animation through animated themes
Animating the Component
​
As a user you may choose to only apply transition to the selected component while the rest of the image is static. The transitions in itself can be triggered by a HUD or an Attributor tab of the components in itself.
​
The following scenarios illustrate when the user intends to apply animation to a component ( eg: text, stickers ) in a composition.
1st variation, the animation tool will reside as a HUD action of the component attribute. When a user selects a content type, animation workflow can be initiated from the HUD of the selected content.
2nd variation, animate will reside as a tab of the content attribute.
For eg: For the text tool, animate will be an added attribute of the text along with existing ones which includes fonts, styles. This direction is consistent with the existing pattern in Ps Express.
Interested to know more?
For a detailed study of animation transitions, multiple variants and design directions you can visit the UX documentation page
Cutouts and Masking in Ps Express
Creating masks from images and composing them over multiple layers is one of the key workflows in ps express. The objective of this project was to scale up the existing cutout flow and help new users navigate layer based selections so that they may get effective exports.
Cutouts: Direction 1
Design proposals , to reduce the friction from landing on cutouts to navigating object selection, editing and being able to transition out of cutouts itself.
Have the , More objects pill already exposed. Currently only the subject and background pills are visible on landing, the proposal is to have the other cutouts stacked beside them instead of being hidden under the more pills
Add & remove cutout has different entry points which is an added tap for the user to get an output. Have Combine Add & remove cutout in a single tab calling it Edit Cutout which
also includes refine cutout.
Make any cutout action contextual to the object selection and do away with the paradigm of a user intent beginning from creating a custom cutout and then edit. Essentially to have confidence on the cutout generation engine which is expected to give the user a head start to catalogue and view their preferred masks.
Cutouts: Direction 2
In this direction a user is always anchored to an object selection which resides at
the top selection tab on the L3 level.
This allows the cutout actions to be present at the L2, allowing the user to shift between edit cutout actions without shifting tabs
The “+” pill allows the user to add custom cutout
For cutout actions tab, smart add and brush will always be enabled other functions are not available when the user is editing a cutout.
Interested to know more?
For a detailed study of animation transitions, multiple variants and design directions you can visit the UX documentation page