The Preview & Save Experience
The redesign of the preview & save experience in AirBrush camera.
Platform: iOS & Android
My Role: the only designer
Timeframe: 1 month
Visual Design, Interaction Design, User Research
The previous preview & save experience in AirBrush camera received plenty of complaints from users about being confused whether their photos had been saved. I created an intuitive step-by-step preview & save flow, with the final step guiding users directly to retouching the photo they’ve just taken. The picture saving rate went up significantly after the redesign, and what’s more exciting was, a promising portion of users entered Retouch from this flow.
Why Redesign?
I did a major redesign for the AirBrush camera experience after I joined the AirBrush team, which consists of the redesign of the camera interface, and the redesign of the preview & save experience.
The AirBrush team had been receiving a ton of user complaints about the AirBrush camera. They got confused whether their pictures had been saved or not, and where were they saved.
The Problem
To get started, I conducted a few usability tests in order to identify the problems with the preview & save experience before the redesign. And here's what I found.
User was forced to preview and confirm saving the picture
First of all, users were forced to preview their pictures taken and then decide whether o save it or not. In fact, from the user research we conducted, most AirBrush users use native camera to snap a dozen of pictures and then import them to AirBrush for retouching, users like snap-and-go kind of photo taking experience, so we need to rethink the value proposition for preview & save flow here.
There were usability issues with the visual design
The visuals were not self-explanatory. Quite a lot participants got confused by the icons during the usability tests.
User wasn't informed about the states of the saving process
The flow lacks timely feedback. When the checkmark confirm button was tapped, the preview page just slid out without informing user whether the picture was saved successfully
Too many options available, confusing and not helping
While users have options like share pictures or apply filters, the icon graphics were confusing, and they didn't benefit us that much (very few people share pictures from AirBrush, why would you want people know that your face is edited?). Adding options like going directly into retouch section after saving picture could help redirect camera users to try the retouch tools out.
The Requirements And User Story
I went over the problems with the product team and put together the requirements and user story for the project. The user story: as a user, I want to:
-
preview the picture with effects applied before saving
-
change or apply filters
-
share the picture
-
go to the retouch section
-
go back to the camera
Figure 1: Early Preview & Save wireframe with user actions
The Iterations
I looked at preview & save flows in other products like Instagram & Facebook stories and Snapchat. Most of them gave the sharing option the most prominent design (the CTA button), since sharing with friends or interacting with friends was their main focus. I tried to make sharing and Retouch primary actions, and then the result of a small usability test brought me back the requirements and the goal of the project: this project was brought up in order to solve a usability issue, which was making the saving experience more intuitive.
Figure 2: The Retouch first solution
Figure 3: First solution that broke down the flow into steps
Besides the ambiguity of the primary action, I also found there were too many options available in one page. After I had a discussion with the developers, I found that entering the retouch section requires the picture to be saved to album, which means saving should be a pre-step for going to the retouch section, or we'll have to secretly save the picture to user's album. From that point I decide to let the user complete the flow step by step, because why hurry?
The A/B Testing For Final Solutions
For the step-by-step preview & save experience, there were two solutions we liked most and both worked great in usability tests. They were very identical, the flow was: first step, saving, with options of changing filters and going back to camera, after saving, user can go to retouch section, share the picture, or go back to camera. At each step, I created animated transition for status changing - saving picture, saved, go to retouch, along with toasts informing users the status.
One solution was graphic icon only, and the other had text label along with the graphic icons, like other products. We actually liked the graphic icon one because it aligned with the AirBrush style, but we were also worried about users getting confused by the visuals. So this time we did A/B test, and the results were amazing. The text label version won, we haven't been seen any confused participants in our latest user research, the complaints also decreased significantly - I love A/B testing!
P.S. if you're wondering why not just skip the preview & save process and just let the users snap and go, YES they can do that if they have the Auto Save option ON - and it is ON by default! Only people who specifically want to preview pictures before saving go through this process.
Preview the image. Love it? Save it. Proceed to retouch directly from camera if you want to.
Figure 4: Graphic icon only version
