Project Overview
A redesign that makes the save to camera roll feature easily discoverable to mobile users and implements a more direct way to save images onto mobile devices.
Challenge: Solve for a user frustration within a well-known app.
Roles: UX Researcher, UI Designer, Interaction Designer
Timeline: 1 Week Sprint
Client: Pinterest
In the beginning of my research, I conducted a total of 5 one-on-one interviews (40–45 minutes) in order to empathize with users’ frustrations. Due to time limitations, only interviews were conducted in order to gather rich, qualitative data from stories that could not be attained using surveys. I then organized all the data into an affinity map to pinpoint users’ main frustrations.
1. User Interviews
Interview Takeaways:
Participants between the ages of 22-27.
Majority of participants: Hispanic, Female, Reside in Miami, FL.
Participants used Pinterest’s mobile app 2–4 times a week for 1 hour sessions at a time.
Participants want to save pins to their camera roll for times when they may have no access to wifi to view an image within the app or to import them onto other applications (ex. illustrator) to view references easier on the same screen they’re working on.
Pains:
100% of users prefer to abandon the save to camera roll (“download image”) feature altogether as it takes more taps to save an image than it takes to screenshot one.
60% of users are confused with Pinterest’s terminology as “save” refers to saving a pin to a board and “download image” refers to saving a pin to the camera roll.
60% of users tap on “save” thinking there will be an option to save to camera roll apart from saving to a board.
80% of users have a hard time locating the “download image” feature and misclick other features trying to find it.
Users find the term “download image” outdated and confusing since they’re saving an image to their mobile device and not a computer.
Goals:
To easily locate the save to camera roll feature, to save pins (single or multiple) quickly.
2. Competitive Feature Analysis
During interviews, I conducted a competitive feature analysis in order to compare Pinterest with other apps users may use to gather inspiration. This tool helped me pinpoint what features could possibly be implemented into Pinterest in order to create a better user experience as I had no clear idea of user pain points yet.
Main takeaway: Other applications use the term “save” to refer to features that allow the user to save an image to their camera roll. Pinterest currently uses “save” to refer to saving a pin to a board within the app and “download image” to save to a camera roll.
3. User Persona
Based on interview data, I created a user persona to further empathize with who I would be designing for.
Imaginative Isabella:
An illustrator intern who works for a greeting card company.
Wants to save images more efficiently to her camera roll in order to access them at times when she may not be able to access the app.
Has trouble locating the save image feature, finds saving images too time consuming (prefers screenshots), finds terminology of “save” and “download image” confusing.
4. Journey Map
The next step was to create a journey map to understand, from a first person perspective, where someone like Isabella may experience frustrations when trying to save an image from Pinterest.
5. Ideation
I produced 3 How Might We statements, ideated ideas for each, and chose one. I then utilized the MoSCoW method and focused on the Must Haves and Should haves in order to obtain my Minimum Viable Product (MVP).
HMW: How might we implement a more direct way for users to save pins to their camera roll?
6. User Flow
I created a user flow of saving a pin (image) on Pinterest. This helped me locate the screens where I could implement my solution within the app.
In this step, I studied how Pinterest has 3 ways for users to interact with an image: pressing/hovering, tapping into the pin, and tapping the more feature (three dots).
7. Pinterest Breakdown
Circled in red are where users stated they would commonly tap to try to find a save to camera roll feature.
To recap:
“Save” is used to save a pin to a board.
“Download image” refers to saving a pin to a camera roll.
Users click on “save” thinking they can save a pin to a camera roll or they are aware “save” refers to boards and are hoping a save to camera roll feature is nested within it.
8. Wireframes
Lo-Fis User Feedback: the floppy disc icon used to represent “save to camera roll” should be changed as it’s outdated and not industry standard, “save” should only refer to a camera roll (6th screen), buttons are too clumped together and are not distinguishable (7th screen).
With the user flow serving as a guide, I used the Crazy 8’s method in order to sketch out designs before arriving to the lo-fi wireframes shown below. Wireframes were tested with 5 users and feedback was implemented into each redesign.
Based on feedback, when tapping into a pin image, the share icon was moved to be nested within the more (three dots) feature as this is how Pinterest has designed it to be found on other screens. This helped maintain consistency.
Based on the feature analysis and users confusion, terminology was changed. “Save” would be used to only refer to saving an image to a camera roll. “Pin” would be used to save an image to a board within the app. This also helped maintain consistency as the icon Pinterest uses to save an image to a board is a pin icon.
Mid fi User Feedback (users aged between 22-73): Following changes, the save icon was recognized, users found the terminology made more sense, and users knew exactly where to go to save an image to their camera roll.
8. Hi-Fis
After testing, I was able to move on to my Hi-Fis. I researched Pinterest’s branding guidelines in order to ensure I was using the typography and colors accordingly. As the save to camera roll feature would be implemented in three new locations within the app, I designed for each of these three solutions.
Solution 1 - More feature (three dots): Tap the search icon, tap the search bar, select “illustration art,” tap on three dots found under the first pin (image), click “save to board",” receive save confirmation.
Solution 3- Pressing/Hovering a Pin (image): Scroll down until you see the image with a boat on the water, hover over the image, hover over the pin icon to see the change in terminology from “Save” to “Pin" for the hint, hover over the save icon for a few seconds and see the “Save to Cameral Roll” hint, receive save confirmation.
Solution 2 - Tapping into a Pin (image): Tap into the first pin (image), click the save button on the bottom left of the image, receive save confirmation.
Figma Prototype
Below is the prototype I created! Feel free to check it out or click on “Test Me!” to open it on another page!