Improving photo selection
Ink Cards App
Ink is an app used to mail physical, personalized greeting cards to friends and family around the world. The app was first designed with only single-photo cards in mind, and as we added more collage cards to our app, we never redesigned the experience. With the new photo selection improvements, we increased the percentage of users who completed a card by 3%, and our iOS customers now have a much easier time adding photos to collage cards.
Customers had a hard time customizing collage cards. On a card with four photos, they had to tap into each empty photo frame before they could select a photo to fill that frame. Once they filled the card with four photos, the only way they could rearrange them was to replace the each photo by repeating the process all over again.
Redesign the photo selection experience for collage cards so that customers can easily and quickly personalize their card.
Research, prototyping, UX/UI design, usability testing
October 2017 - February 2018
The Results: A better photo selection experience
After 12 weeks of research, design, prototyping, and implementation, we released an app update that made the collage card customization process much smoother.
Understanding the problem
Problems with the existing photo picker
Before jumping right into design, I conducted a remote, unmoderated usability test on the current photo selection process in the Ink app to find out what users struggled with and what they expected. Testing with 10 users revealed a few key issues:
Users expected to be able to select all photos one after the other. They were surprised when they realized they had to click on the next empty image area first before selecting a photo
Users expected to be able to drag the photos around to rearrange
Users wanted an easier way to go back to the last album they were in
The image below shows the old version of the photo selection experience for a collage card—the top left photo on the card is in the selected state, and same photo is in the selected state below in the photo picker component. In order to continue filling out the card, customers had to tap on the next empty photo frame on the card before they could select another photo in the photo picker.
While there were no major roadblocks preventing users from adding photos to the card, addressing the issues identified from my usability test would make the user experience quicker, smoother, and more intuitive.
Defining the problems to solve
How might we make it easier for customers to create a collage card?
With Ink Cards, customers expect an easy and convenient app that they can use to send personalized greeting cards quickly. To make sure I addressed the most painful user problems with this photo picker update, I defined the problems to solve with my team:
Users were frustrated when they could only select one photo at a time
Users couldn’t rearrange photos without having to manually replace each photo
Friction occurs when users don’t realize they have to select a photo before being to able zoom and move the photo around
Users expected to be able to manipulate a photo when the photo picker is not showing, but they end up accidentally flipping the card
What are our customers’ motivations and ideal outcomes?
For this project, I thought through scenarios customers would be in when personalizing a collage card and what their motivations and ideal outcomes were in those situations. Writing these out helped me think about the functionality our customers needed that would both solve the pain points identified in the usability testing and make the photo selection process less cumbersome in general.
Design requirements for customers’ ideal outcomes
After thinking through customer scenarios, I wrote down the design requirements that would help customers achieve their ideal outcomes:
Make the app automatically go to the next empty frame once a photo was selected so that customers don’t have to manually select every single frame before selecting a photo
Allow customers to select multiple photos at once when they’re choosing from the albums on their phone, and allow them to deselect photos. In previous versions of the app, customers were only able to choose one photo at a time from what we call the Albums view—a view that lets them access all the albums in their iOS Photos app
Allow customers to easily swap photos or move around a photo within a frame
Make it easy to see photos from the last album in which the customer selected a photo
Designing the changes
Researching familiar photo app patterns
Looking at popular photo apps like Layout and Pic Collage helped me identify different photo picker interactions that users are already familiar with—how they select, swap, delete photos, etc. Users creating collages expect apps to work in a certain way, so I wanted to design changes that felt familiar even though they were new to the Ink app.
Removing an extra tap when selecting photos
Since existing customers were familiar with having to select each empty frame before selecting a photo, they now needed to clearly see that the next empty frame was selected—the empty frame in the selected state needed to be visibly different from the non-selected empty frame and the frames that already had a photo in them.
Making it easy to select and deselect multiple photos
When customers are creating a collage card, they want to use their best photos from different days and different albums—the photos they want to use most likely won’t all be at the top of their camera roll. Therefore, I designed changes that allowed customers to navigate to different albums and select photos without being forced to go back to the card first. I also added the ability to replace or delete photos in the photo shelf.
Here’s a video of how photo selection and deselection works in the app right now:
Making it intuitive to rearrange photos on the card
Almost all the photo collage apps I explored allowed users to rearrange photos, so clearly, our app was behind. Since most apps implemented a long touch gesture for rearranging photos, I decided to do the same for our app.
Reducing friction when managing photos
Once a customer closes the photo picker, they’ll look at their card and want to either reposition photos within a frame, make some photos larger or smaller, or swap photo positions to perfect their card. However, the app was forcing them to tap on a photo first to go into the photo selection state before letting them do anything to their photo. To create a smoother and more intuitive experience, we removed the unnecessary tap.
Making it easier to get to the last viewed album
When a customer is in the middle of selecting photos from the Albums view and they go back to the card before they’re done, they might want an easy way to go back to that same album in order to select their remaining photos. In order to make this easier for them, I decided to update the main photo picker with the last album from which a user selected a photo. Previously, the main photo picker component only showed the customer’s iOS Camera Roll album.
Validating the changes
Usability testing a prototype
Since the multi-selection and deselection of photos were two completely new features, I created a prototype and conducted remote usability testing with 10 users via UserTesting to observe how they navigated to different albums and selected/deselected photos. Some users struggled to deselect photos because they thought they could delete photos on the card directly, but the only way they could do so was to go to their Albums view and deselect the photos in the shelf. I considered adding the functionality to remove photos on the card itself, but after talking with the design manager and developer, we decided to hold off because we didn’t want to add more complexity to the card customize view.
Implementing the changes
I created flow charts in Sketch and animated prototype videos of different scenarios using Flinto to communicate to the developer how the new photo picker should behave.
Within a month after the photo selection improvements launched, we saw a 3% increase in the percentage of people completing their card.
As of March 2019, 21% of users used the photo rearrange feature.
I also ran a 10-participant usability test to observe how people interacted with the photo picker for collage cards. Users selected photos easily since they didn’t have to select the empty photo frame first. Most users easily rearranged their photos. I observed the same usability issue that I had already identified during the prototyping phase—users expected to be able to delete a photo on the card by tapping on it and hitting a delete button. Looking back, I would’ve fought to add this functionality since it makes it easier to remove or replace photos that you no longer want on your card.
Working closely with the developer during the design and implementation phase helped me think through interaction details I didn’t mention in my final deliverables—this helped me better understand how developers think.
What I would do differently
If I could start this project all over again, I would put better mechanisms in place to measure the success of this project. I would’ve surveyed existing customers who have sent collage cards and asked them to rate the ease of creating their card. Then I would’ve sent the same survey to customers after the new changes were released and compared the survey results.
I also would’ve asked the developer to add better tracking for collage cards so that I can see if customers are selecting multiple photos from the Albums view when they’re customizing a collage card. Right now, our product analytics software only tracks if a user selected a photo from the Albums view—about 53% of customers who add a photo to their card are selecting the photo from the Albums view. While I don’t have the single-photo vs. collage card breakdown, this gives me some assurance that at least half of our customers are aware of the changes.