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 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.
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.
Lead designer responsible for research, prototyping, UX/UI design
Me and 2 iOS developers
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?
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.
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.
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
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.
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.
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.
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.