photo picker summary v3.png

Photo Selection Case Study

Improving photo selection

Ink Cards App

photo picker summary.png
 

Overview

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.

The problem

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.

The Goal

Redesign the photo selection experience for collage cards so that customers can easily and quickly personalize their card.

My Role

Research, prototyping, UX/UI design, usability testing

 

Timeline

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.

 

New photo selection experience launched in February 2018: Customers can easily select photos for their collage card from one album or multiple albums, and they can rearrange photos on the card.

 
 

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

 

Ideating

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.

 

In an earlier prototype, people around the office had a harder time seeing the transition from a non-empty photo frame (top-left square) to an empty photo frame in the selected state because the gray color did not provide a good contrast with the non-selected empty frame.

 

In my final version, the dark gray color indicates the selected empty photo frame. This creates a stronger contrast with the non-selected empty photo frame, making it easier to see which frame was in the selected state.

 
 


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.

 
 

First iteration of photo multi-selection modeled after iOS photos app; customers could see the # of photos they selected in the nav bar, but they couldn’t see photos they’ve selected from different albums or how many photos they need to select.

 

First iteration of photo deselection: Customers could deselect photos by tapping on small red delete icon in the photo shelf at the bottom of the screen

 
 
 

Final iteration: In the Albums view, a persistent photo shelf holds all selected photos.

A Deselect button activates the deselect mode.

Photos selected from social media accounts appear in the shelf as a cloud.

 

Final iteration: When a customer taps on the Deselect button, they enter the deselect mode. Customers can tap the photo or the delete button to deselect the photo.

 
 

Here’s a video of how photo selection and deselection works in the app right now:

 
Final iteration : Customers can choose photos from the main photo picker or go into the Albums view to select photos from different albums. The photo shelf holds the selected photos as they go from album to album, and they can deselect photos by first tapping the Deselect button.

Final iteration: Customers can choose photos from the main photo picker or go into the Albums view to select photos from different albums. The photo shelf holds the selected photos as they go from album to album, and they can deselect photos by first tapping the Deselect button.

 
 

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.

 
Like other photo apps, our customers can now long press on a picture and drag it over another frame to rearrange their photos. I added a coral overlay to the frame that is being swapped so that customers can clearly see where their picture is going.

Like other photo apps, our customers can now long press on a picture and drag it over another frame to rearrange their photos. I added a coral overlay to the frame that is being swapped so that customers can clearly see where their picture is going.

 
 

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.

 

Before: Customers used to be able to move around a photo only when the photo picker is up.

 

After: Now customers can reposition photos and rearrange photos when the photo picker is down.

 
 

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.

 
 

Before: The main photo picker at the bottom of the screen only showed photos from the customer’s Camera Roll.

 

After: Album title is added to the top of the main photo picker. The photo picker is updated with photos from the last album from which the customer selected a photo.

 
 

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.

Example of how I communicated designs to developer. For each step, I wrote out the trigger (typically a user-initiated action), feedback (i.e., what should happen on the UI, and rules for what the user can and can’t do)

Example of how I communicated designs to developer. For each step, I wrote out the trigger (typically a user-initiated action), feedback (i.e., what should happen on the UI, and rules for what the user can and can’t do)

 

Post-launch

Measuring success

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.

 

Takeaways

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.