adobe, 2024
Increased engagement of the Heal tool by 15% through a Gen-AI feature
Team
Design manager
Product manager
2 Engineers
My role
Conceptualization
Design
Usability testing
Dev handoff
duration
2 months
context
bringing ai to mobile
background
84% users remove objects from an image, but get frustrated of low quality results
impact
The Remove objects tool fared well, increasing the app's throughout and converting free users to premium users for Photoshop Express.
47%
Throughput, highest amongst all Gen-AI features
15%
Overall increase in engagement of the Heal tool
34%
Conversion of free to premium users specifically through this tool
But what is photoshop express?
Photoshop Express is a mobile-only photo and video editing app helping social media enthusiasts express their creativity without going through complex workflows.
the problem
adobe gen-ai tools were initially present on a much larger screen space
Firefly was released as a web tool, to be primarily used on desktop. The high screen space provided by a desktop screen made it relatively simple to design complex features.
However, how could the same offerings be accommodated on a mobile?
We met with a constraint from the respective teams that the experience needs to be extremely similar to the healing tool present on the Firefly website, on much smaller real estate.
understanding the space
Common patterns between Firefly and Photoshop Express
Though they are different tools, the Firefly website and Photoshop Express have some common patterns. We found out the ones which mattered to make the experience familiar and easy to learn.
brushing to mask
preset masks
other firefly capabilities to replicate
Apart from generating, the following capabilities needed to be replicated to provide a consistent experience and adhere to legal constraints.
SHow 3 generations
rating results
checking credits
core remove object interactions
idea 1: starting off from preset masks
I planned of reducing the cognitive load of making a perfect mask by using the pre-existing tool of preset masks present in the app. The engine powering that tool can auto-detect the subject, background, sky, humans and objects. The users can then refine the mask further through brushing to add or remove.
Little mask thumbnails don't help the user to make an informed choice.
idea 2: improving mask thumbnails
It was soon found out that the small tabs didn't work well, as users needed to see the masked area visually before selecting a mask.
The brush tool served a discoverability and learning issue since it appeared when the user tapped on a mask.
Bigger mask thumbnails help the user preview the mask.
Mask refining tools are difficult to discover, since they only appear after tapping the masked area on the image.
Our users are not familiar with bottom-sheets and the commit-cancel pattern, and expect this tool to work like other tools in the app.
preset masks dropped from the mvp roadmap!
In midst of iterating on the previous designs, the devs informed that they won't be able to figure out preset mask selections within the due deadline.
I re-worked on the flow to work with just brushing for the MVP release.
idea 3: One tap remove ✅
Brushing is a foundation level behavior in the app that the users had learnt and were used to. We didn't need explicit entry points to brushing.
This understanding made the flow even more seamless, needing lesser taps and more intuitive action-feedback loop.
Dropped unfamiliar interface patterns.
More seamless flow: Auto-applied first generated result.
supplementary features
reporting the quality of results
To adhere to legal constraints, we had to follow the exact same process to report quality of results as the Firefly website. This meant using the same components and presenting the same wording in the options.
signing off!
key takeaways
This project was jam-packed with a lot of work, exploration and discussion with stakeholders. It feels almost impossible to boil down my learning, but if I had to, here they are!
Being comfortable with change
This project involved a lot of re-looking at my approach from scratch, through feedback from my fellow designers, product manager and developers. This valuable feedback helped me iterate on my own thought process to come up with multiple solutions for the same problem.
challenges of a smaller screen
Converting interactions from web to mobile was a tough job, however, it helped me take a closer look into our mobile design system, learn about patterns and their associated user behaviours on a deeper level, and learn about optimising the flows to be as seamless as possible for our users.