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 stopped to reimagine the experience for customers personalizing collage cards. My job was to design an easier and faster way for them to choose photos and order their card.

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

Lead designer responsible for research, prototyping, UX/UI design

 

Team

Me and 2 iOS developers

 

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?

At Sincerely, we don’t have specific personas for whom we design because most of our customers have the same goals when sending cards—they want to create the perfect card using the right pictures on their phone or from their social media accounts. 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.

I darkened the gray background color of the selected empty frame in order to create a larger contrast with the light gray non-selected empty frame. Photos already on the card were set to a lower opacity to bring them out of focus. In previous versions of my designs, the background color of the selected empty frame was too similar to the background of a non-selected empty frame, and people in the office barely noticed the difference when I showed the prototype to 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.

In my earlier iterations, I modeled the photo multi-selection experience after the iOS Photos app because customers were already familiar with it; in my final iteration, I added a photo shelf component that showed a customer’s selected photos and stayed persistent as they were navigating through different albums. Now, customers won’t forget which photos they’ve already selected.

I also added the ability to replace or delete photos in the photo shelf. My first iteration of the deselect process allowed customers to deselect photos by tapping the red delete button on the photo in the photo shelf. After sharing my design with the team, we all agreed that customers might accidentally tap the delete button; therefore, we decided to create a deselect mode that customers activate by tapping a Deselect button, which would then reveal the red delete buttons.

 
 

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

Close collaboration with the developer

When I finished the designs, I created flow charts in Sketch and animated prototype videos of different scenarios using Flinto to communicate how the new photo picker should behave. I also used the Sketch Measure plugin to export the UI specs.

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)

During the development sprint, I worked closely with the developer to fine tune the details of the design such as:

  • Number of seconds it takes for the app to automatically go to the next empty photo frame

  • How the selected photos in the photo shelf would move if one was deleted

  • Whether or not the photo shelf is persistent

  • How an album scrolls if a user taps on a photo in the shelf (i.e., does the album scroll to the selected photo?)

  • How photos would appear in the shelf if a user chose one from their social media account

Before releasing the changes, we asked people in the office to play around with the photo picker on test builds, so that we can identify bugs and usability issues.

 

Post-launch

Measuring success

After a new version of the app was released, I 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.

Looking into the app analytics, as of March 2019, 21% of users who added a photo to their card since these improvements were launched also used the photo rearrange feature. While I don’t have a breakdown of this number by single-photo cards vs. collage cards, I expect the percentage to be much higher for collage cards since rearranging a photo is not possible with single-photo cards. I’m glad people are discovering and using this feature.

 

Takeaways

Working closely with the developer during the design and implementation phase helped me think through design decisions I overlooked—how two related but separate components behave when a user interacts with one of them. Even though the developer working on this project was remote and in a different time zone, hopping on impromptu video calls to talk through issues and look at his progress helped us make quick decisions that were best for the customer. Having the developer ask me very detailed questions about every user interaction gave me a better understanding of details I have to think through on my future projects.

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.