The Smart Select Tool
Design an experience for a tool inside a photo editing (Bokeh) feature.
Platform: iOS & Android
My Role: the only designer
Timeframe: 2 weeks
Visual Design, Interaction Design, User Research
Since the launch of the Bokeh feature in AirBrush, users had been constantly asking for a eraser for the Bokeh feature to make it even more perfect. So we listened and I designed this Smart Select tool as an addition to the Bokeh feature. Besides the eraser (reducing blur areas) they asked for, I put tools that lets them add blur areas, undo & redo their edits, and revert to default effect with one-click. The Smart Select tool increased the conversion rate of the Bokeh feature, and users keep sending us messages saying how much they like it.
What is Smart Select?
The Smart Select tool lies inside the Bokeh feature (paid). It lets you adjust the areas you do not want to blur out so that you get a even better bokeh result.
Ever since we launched the Bokeh feature, it converted plenty of paying users and we received a whole lot of feedback from users that they request an eraser tool inside Bokeh, so they can edit the blur areas to make sure the effect works perfect.
Figure 1: Smart Select prototype
The User Story
We put together the feedback and translated it to a user story: as a user, I want to be able to adjust the blur areas, remove blur areas that I do not want to blur, and add areas that I want to blur.
I tested the early prototype, with just + blur areas and - blur areas, it didn't work well because it was purely brushing across work and people messed it up frequently - basically it's like you have to draw something on screen with your finger, it's hard, try it.
Therefore, to make it as caring and sweet as the other AirBrush features, we wanted to add undo and redo buttons, as well as one click Auto button so users can go back to default when they want to.
The Onboarding Experience
We hate tutorials.
Because most users skip tutorials and even they don't, most of them forget what they just watched or saw. But since Smart Select isn't a one-step tool I still wanted to put some onboarding experience there for the users - and it should be something less annoying than tutorial videos or coachmark overlays.
I conducted some more usability tests and created timely tooltip for each key step, like right after user made their first brush, they'll see a little tooltip pointing at the Done button letting them know this button will save their edits and proceed.
