ABOUT COLLAGE
The latest collage tools are a superset of what is available in photo editing apps. Popular solutions focus on frames and cards for special occasions. But collage is a lot more than that and the millennial crowd in Asia is at the forefront of advanced techniques for editing and composition. There is also a group that can't decide which selfie to share - so why not share all of them in a collage? Another subgroup does mood boards with celebrities, brand icons, and stickers. Each of these pieces are windows into the social worlds of different audience segments, their motivations, and personal goals:
The latest collage tools are a superset of what is available in photo editing apps. Popular solutions focus on frames and cards for special occasions. But collage is a lot more than that and the millennial crowd in Asia is at the forefront of advanced techniques for editing and composition. There is also a group that can't decide which selfie to share - so why not share all of them in a collage? Another subgroup does mood boards with celebrities, brand icons, and stickers. Each of these pieces are windows into the social worlds of different audience segments, their motivations, and personal goals:
@idivine
|
@reputation
|
@taehyung
|
In the current market, there are three dominant approaches for creating a collage: 1) select photos then grids (Layout model), 2) select grids then photos (original PicsArt model), 3) select multiple images and a background for a free form collage (Free Form collage).
DESIGN CHALLENGE
While most apps picked one approach, PicsArt supported all three creation paths and differentiated itself even more through a variety of amazing grids. Additional requirements included:
These requirements highlight the differentiators for the PicsArt product: PicsArt users create and share free images that can be used in collages. Users can purchase and get free backgrounds from the shop. A wide range a free and innovative grid formats make it easy to create interesting collages.
MY ROLE
I manage the UX design and research teams at PicsArt. I scaled the team from 3 to 30 and was an individual contributor for this work as I built up the team. Major updates (below) were done through a multi-week sprint with the entire UX team, redesigning the PicsArt community as well as the create new flows for the collage experience. PicsArt's collage tools are tightly integrated into the photo editing create flows. Once users tap on the plus icon (+) in the app bar (below left), they are given a choice for editor, collage, drawing or camera. Then users can tap on images, free form collage, or select specific grids (below right).
DESIGN CHALLENGE
While most apps picked one approach, PicsArt supported all three creation paths and differentiated itself even more through a variety of amazing grids. Additional requirements included:
- Support grids, frames, and free form collage
- Promote FreeToEdit assets (PicsArt UGC)
- Provide a touch point for backgrounds
These requirements highlight the differentiators for the PicsArt product: PicsArt users create and share free images that can be used in collages. Users can purchase and get free backgrounds from the shop. A wide range a free and innovative grid formats make it easy to create interesting collages.
MY ROLE
I manage the UX design and research teams at PicsArt. I scaled the team from 3 to 30 and was an individual contributor for this work as I built up the team. Major updates (below) were done through a multi-week sprint with the entire UX team, redesigning the PicsArt community as well as the create new flows for the collage experience. PicsArt's collage tools are tightly integrated into the photo editing create flows. Once users tap on the plus icon (+) in the app bar (below left), they are given a choice for editor, collage, drawing or camera. Then users can tap on images, free form collage, or select specific grids (below right).
Explore Community
|
Create Menu
|
Choose Photos or Grids
|
Photos Selected
|
These flows provided a way for users to start with either photos or grids. Tapping on Recent Photos, revealed a drop-down with directories for the device, Facebook, Instagram, and UGC content from PicsArt (FreeToEdit images).
COLLAGE ON STEROIDS
The functionality behind the latest collage tools is a superset of what is available in photo editing apps. Default grids (below left) can be modified. Individual cells can be edited using the full power of the photo editor (second from left). Layouts can be changed mid-way in the editing process (third from left). Border radius and thickness can be adjusted (right) and backgrounds swapped in easily or purchased. These primary collage tools were streamlined and simplified to make them more consistent, introduce visual cues, iconography, and highlights for selected states, and clearly differentiate the various modes and associated functionality:
COLLAGE ON STEROIDS
The functionality behind the latest collage tools is a superset of what is available in photo editing apps. Default grids (below left) can be modified. Individual cells can be edited using the full power of the photo editor (second from left). Layouts can be changed mid-way in the editing process (third from left). Border radius and thickness can be adjusted (right) and backgrounds swapped in easily or purchased. These primary collage tools were streamlined and simplified to make them more consistent, introduce visual cues, iconography, and highlights for selected states, and clearly differentiate the various modes and associated functionality:
Adjust Grid
|
Edit Cell
|
Change Layout
|
Adjust Border
|
Several AB tests (described in more detail in the following sections) involved attempts to eliminate steps, combine choices into fewer touch points, and provide more options to highlight high-value features. Research and testing ultimately rolled back many of these PM-driven initiates in favor of introducing discrete and simpler steps focused on completing one task at a time. The result was a two step approach for selecting the collage path (below left):
Create Menu (current)
|
Collage Chooser (current)
|
Collage Tool (white theme)
|
IMPACT
The changes to highlight Free Form collage as a separate discrete step resulted in 2M more users per day using Free Form collage versus other design approaches (described in details below). Collage now represents a substantial and growing part of the PicsArt monthly user base, especially in the APAC (asia pacific) region.
- +200% increase in conversion for Grid flows (remained constant for Frames - primarily a content issue).
- +2.5% increase in retention (retention is typically very hard to change)
- +2M more users per day began use Free Form collage
The changes to highlight Free Form collage as a separate discrete step resulted in 2M more users per day using Free Form collage versus other design approaches (described in details below). Collage now represents a substantial and growing part of the PicsArt monthly user base, especially in the APAC (asia pacific) region.
Details Behind The Design
AB TESTS
Analytics data revealed that incremental drop-off was happening at every step in the original create flows. The obvious solution was to reduce the number of steps. One proposal was to eliminate the second step above with the fly-out for Camera, Editor, Collage, Draw and take users directly to the photo chooser. This AB test was PM-driven and was done purely based on analytics without user research to understand why users were dropping off.
The initial work involved bringing in an external growth consultant to try to optimize the flows. This same thing happened at Google when new PM leadership joined existing projects and wanted to quickly try to change things to have impact. UX typically supported this work, even though it consistently failed. In most cases, there were valuable insights that came from it and a realization that internal teams understood the issues better than anyone else.
REDUCING DROP-OFF
The trade-off was that eliminating a step introduced more complexity. This is an excellent example of a reasonable hypothesis introducing complexity in a way that made the entire experience more confusing.
DESIGN REVIEW: ORIGINAL PHOTO CHOOSER
To understand the context, let's first take a look at the flows for just selecting a single image for editing. Originally the primary flow for editing photos began with a confusing set of screens before getting to the photo chooser. Tap on the floating action button (FAB) (below left, first mock) then select recent photos for editing OR choose between different paths for editing, drawing, collage or camera.
Tapping edit (second mock from left) reveals a a dialog for choosing an image from Gallery, Camera, Flickr, Facebook, etc or recent edits in PicsArt. My initial design review pointed out that users see multiple places in the flow where they can make the same choice (recent photos, gallery, recent PicsArt photos, camera) just in case they didn't make the right one earlier.
Visually the image carousels were different sizes and the contents were different: recent photos vs. recent edits. Oh, and there was a way to delete PicsArt project files on the Choose Image dialog since these took up space on your device. If you tapped on Gallery or Camera then you saw the last screenshot on the right with the system photo chooser - another completely different grid size.
Design reviews are valuable because they not only uncover issues, but also provide valuable insights into how the team incrementally made refinements based on insights into the needs of users.
Original PicsArt Photo Chooser
AB TESTS
Analytics data revealed that incremental drop-off was happening at every step in the original create flows. The obvious solution was to reduce the number of steps. One proposal was to eliminate the second step above with the fly-out for Camera, Editor, Collage, Draw and take users directly to the photo chooser. This AB test was PM-driven and was done purely based on analytics without user research to understand why users were dropping off.
The initial work involved bringing in an external growth consultant to try to optimize the flows. This same thing happened at Google when new PM leadership joined existing projects and wanted to quickly try to change things to have impact. UX typically supported this work, even though it consistently failed. In most cases, there were valuable insights that came from it and a realization that internal teams understood the issues better than anyone else.
REDUCING DROP-OFF
The trade-off was that eliminating a step introduced more complexity. This is an excellent example of a reasonable hypothesis introducing complexity in a way that made the entire experience more confusing.
DESIGN REVIEW: ORIGINAL PHOTO CHOOSER
To understand the context, let's first take a look at the flows for just selecting a single image for editing. Originally the primary flow for editing photos began with a confusing set of screens before getting to the photo chooser. Tap on the floating action button (FAB) (below left, first mock) then select recent photos for editing OR choose between different paths for editing, drawing, collage or camera.
Tapping edit (second mock from left) reveals a a dialog for choosing an image from Gallery, Camera, Flickr, Facebook, etc or recent edits in PicsArt. My initial design review pointed out that users see multiple places in the flow where they can make the same choice (recent photos, gallery, recent PicsArt photos, camera) just in case they didn't make the right one earlier.
Visually the image carousels were different sizes and the contents were different: recent photos vs. recent edits. Oh, and there was a way to delete PicsArt project files on the Choose Image dialog since these took up space on your device. If you tapped on Gallery or Camera then you saw the last screenshot on the right with the system photo chooser - another completely different grid size.
Design reviews are valuable because they not only uncover issues, but also provide valuable insights into how the team incrementally made refinements based on insights into the needs of users.
Original PicsArt Photo Chooser
|
|
|
|
The data an insights driving the initial designs were valuable: 97% of users choose one of their last 15 photos. In many cases, they have several similar photos with slight variations. Portrait versus landscape orientation is important. However since ~85% of photos are portrait, the grid format works reasonably well and converts better than other formats.
VERSION 2
I worked as an individual contributor early on to clean up these flows. For the Photo Chooser, reviewing images helped users see details in a series of similar images (e.g., selfies from different angles). User feedback was positive even though this introduced an additional step (we eventually had the preview appear within the editor eliminating the extra step):
VERSION 2
I worked as an individual contributor early on to clean up these flows. For the Photo Chooser, reviewing images helped users see details in a series of similar images (e.g., selfies from different angles). User feedback was positive even though this introduced an additional step (we eventually had the preview appear within the editor eliminating the extra step):
Photo Chooser (v2)
|
Preview (v2)
|
Preview Swipe (v2)
|
AB testing revealed that 3-column formats perform better than other alternatives including 4 columns (above), 2 columns or one large image.
VERSION 3
The next iteration of the photo chooser used the column grid both for photo selection and for adding multiple photos to an existing image (similar to Free Form collage):
VERSION 3
The next iteration of the photo chooser used the column grid both for photo selection and for adding multiple photos to an existing image (similar to Free Form collage):
This increased conversion and reduced drop-off. Adding photos to an existing image is one of the highest engagement, intensity, and retention actions. It also serves as an indicator that the user is not a pure photography and filter user and is instead creating collages or using advanced effects to blend images.
The selection tray provided visibility to images as they were selected from different sources. In practice, very few people selected images from other sources besides Recent (the default: a combination of camera roll and recent PicsArt edits) and even fewer removed images they had added to the tray.
DESIGN TASKS WITH TOO MANY REQUIREMENTS
Collage is a built around selecting multiple photos. Ideally, the patterns would be to be consistent with selecting single photos and adding photos to an image. Collage also needs to support grids, frames, free form collages, FreeToEdit images and backgrounds.
The existing patterns started to break down when we were asked to remove the step of selecting editing, drawing, collage, or camera and combine that with the photo selection step (to reduce drop-off between steps).
Drawing and collage represent 10% and 8% of the overall user traffic respectively so they are too large to not include in the primary flows. Add to these goals, directives that FreeToEdit UGC images were part of the PicsArt brand and needed to be highlighted in the photo selection and creation flows. This scenario, where product teams come up with too many requirements, occurs repeatedly across teams and companies.
ITERATE & FAIL QUICKLY
UX usually tackles this type of project by brainstorming solutions, test them and iterating. We use data to inform the initial ideas as well as intuition and craft (visual design, etc). Defining a hierarchy of needs, steps in the user journey, and the information architecture helps represent and organize the task.
Design constraints also help. I developed a set of design principles and guidelines, one of which was to avoid having tabs on top of other tabs. To avoid multiple rows of tabs, the options for Free-To-Edit and My Photos appear towards the bottom of the display (below left and right). Snapchat and Instagram have broken the tab on top of tabs rule and we experimented with styling the tabs differently (below right). The create menu (Edit-Draw-Collage-Camera) component got dropped in at the top in the form of tabs (below left).
MID-FIDELITY SKETCHES
Collage (below right) needed to support choosing between grids, frames, and backgrounds for the collage and/or multiple photos to populate the collage. Simplifying the design task (mock below right) enabled switching between Edit-Collage-Draw as well as toggling between recent photos (or other sources) and Free Photos.
Each of these designs have majority usability and design hierarchy issues:
The selection tray provided visibility to images as they were selected from different sources. In practice, very few people selected images from other sources besides Recent (the default: a combination of camera roll and recent PicsArt edits) and even fewer removed images they had added to the tray.
DESIGN TASKS WITH TOO MANY REQUIREMENTS
Collage is a built around selecting multiple photos. Ideally, the patterns would be to be consistent with selecting single photos and adding photos to an image. Collage also needs to support grids, frames, free form collages, FreeToEdit images and backgrounds.
The existing patterns started to break down when we were asked to remove the step of selecting editing, drawing, collage, or camera and combine that with the photo selection step (to reduce drop-off between steps).
Drawing and collage represent 10% and 8% of the overall user traffic respectively so they are too large to not include in the primary flows. Add to these goals, directives that FreeToEdit UGC images were part of the PicsArt brand and needed to be highlighted in the photo selection and creation flows. This scenario, where product teams come up with too many requirements, occurs repeatedly across teams and companies.
ITERATE & FAIL QUICKLY
UX usually tackles this type of project by brainstorming solutions, test them and iterating. We use data to inform the initial ideas as well as intuition and craft (visual design, etc). Defining a hierarchy of needs, steps in the user journey, and the information architecture helps represent and organize the task.
Design constraints also help. I developed a set of design principles and guidelines, one of which was to avoid having tabs on top of other tabs. To avoid multiple rows of tabs, the options for Free-To-Edit and My Photos appear towards the bottom of the display (below left and right). Snapchat and Instagram have broken the tab on top of tabs rule and we experimented with styling the tabs differently (below right). The create menu (Edit-Draw-Collage-Camera) component got dropped in at the top in the form of tabs (below left).
MID-FIDELITY SKETCHES
Collage (below right) needed to support choosing between grids, frames, and backgrounds for the collage and/or multiple photos to populate the collage. Simplifying the design task (mock below right) enabled switching between Edit-Collage-Draw as well as toggling between recent photos (or other sources) and Free Photos.
Each of these designs have majority usability and design hierarchy issues:
Draft 1: Edit Photos
|
Draft 2: Collage Grids
|
Draft 3: Collage Photos
|
SIMPLIFY
Design is often a process of testing, removing things, and re-testing. We tried showing users FreeToEdit images by default (below left). However, user testing repeatedly showed that people were primarily focused on using their own photos (below left). FreeToEdit images had more relevance and higher usage when users searched for specific content. PMs requested that we add a tooltip to make it really clear how to get to your own photos (below center).
Eventually analytics data convinced them that users really didn't want FreeToEdit images and wanted to edit their own photos. We eventually succeeded at moving the FreeToEdit images under the directory picker in the Recent Photos drop-down (below right):
Design is often a process of testing, removing things, and re-testing. We tried showing users FreeToEdit images by default (below left). However, user testing repeatedly showed that people were primarily focused on using their own photos (below left). FreeToEdit images had more relevance and higher usage when users searched for specific content. PMs requested that we add a tooltip to make it really clear how to get to your own photos (below center).
Eventually analytics data convinced them that users really didn't want FreeToEdit images and wanted to edit their own photos. We eventually succeeded at moving the FreeToEdit images under the directory picker in the Recent Photos drop-down (below right):
|
|
|
AB TEST RESULTS
The above flow for was developed to remove a step in the creation flow and take users directly to the photo chooser and editor. This resulted in a major drop-off in usage of collage, drawing, and camera usage because the choice was hidden at the bottom of the screen (above left) versus an additional step with a clear set of choices.
More users made it into the editor but they quickly exited. The hypothesis was that they couldn't figure out what to do or what the app could do. The external growth firm and PMs came up with the idea of showing users tips that would help them figure this out. The problem was that they selected the tools that had the most usage and correlated with retention assuming these would drive conversion. However, they turned out to be tools like "Crop" which appeared in every other photo editing app. Ultimately, there were no changes in conversion for completing edits, sharing, posting, or retention.
PUT THE USER FIRST
This work highlighted the importance of understanding users needs before trying to optimize flows. The teams began asking questions like:
After this experiment, the I was able to shift product discussions towards user-centered design questions about features and flows addressing users' needs. The tendency is still to build and describe functionality but I developed design review templates to make sure users needs were part of the discussions from the beginning.
The current solution has discrete steps for choosing the type of tool (below left), the type of collage (second from left), selecting multiple photos (below right), and choosing the background after adding the images (patterns or images):
The above flow for was developed to remove a step in the creation flow and take users directly to the photo chooser and editor. This resulted in a major drop-off in usage of collage, drawing, and camera usage because the choice was hidden at the bottom of the screen (above left) versus an additional step with a clear set of choices.
More users made it into the editor but they quickly exited. The hypothesis was that they couldn't figure out what to do or what the app could do. The external growth firm and PMs came up with the idea of showing users tips that would help them figure this out. The problem was that they selected the tools that had the most usage and correlated with retention assuming these would drive conversion. However, they turned out to be tools like "Crop" which appeared in every other photo editing app. Ultimately, there were no changes in conversion for completing edits, sharing, posting, or retention.
PUT THE USER FIRST
This work highlighted the importance of understanding users needs before trying to optimize flows. The teams began asking questions like:
- Why users would the majority of users exit the editor?
- What did they need to be able to succeed, create an edit they wanted to share, and become active engaged users?
After this experiment, the I was able to shift product discussions towards user-centered design questions about features and flows addressing users' needs. The tendency is still to build and describe functionality but I developed design review templates to make sure users needs were part of the discussions from the beginning.
The current solution has discrete steps for choosing the type of tool (below left), the type of collage (second from left), selecting multiple photos (below right), and choosing the background after adding the images (patterns or images):
1. Create Menu
|
2. Collage Style
|
3. Photo Chooser
|
4. Multi-select Photos
|
5. Collage Editor
|
6. Change Background
|
7. Background Picker
|
8. Background Applied
|
IMPACT
The updates informed by analytics data and user-centered design (above) significantly changed the usage of collage:
Part of an inclusive design culture is create an environment where are ideas are proposed, evaluated, and tested quickly. PMs and anyone else should be able suggest ideas like the ones above and the UX team will typically mock them up.
The change I have sought to promote is to have this process be driven by user needs. The person requesting the mocks (even if it's the CEO) has to include the rationale for why users will want this functionality. These questions are built into the Confluence project templates from conception to design review and eng hand-off (PRD). The design team is required to include pros and cons for the designs relative to users' needs next to the alternatives. This approach lets designers advocate for their own solutions while representing alternatives in a principled manner.
In some cases, there hasn't been enough focus on the user needs to articulate them, so this process typically results in developing a deeper understanding of the different types of users and their specific goals. During design reviews, we evaluate whether the solutions meet the user needs as well as the business goals and spend more time when these don't line up. This approach helps move reviews away from personal preferences and more towards the perspective of users.
The updates informed by analytics data and user-centered design (above) significantly changed the usage of collage:
- 2M more users per day began use Free Form collage
- Doubled the number of users completing the entire collage flows for Grids.
(usage for Frames was unchanged primarily due to content issues). - Retention increased by 2.5%
Part of an inclusive design culture is create an environment where are ideas are proposed, evaluated, and tested quickly. PMs and anyone else should be able suggest ideas like the ones above and the UX team will typically mock them up.
The change I have sought to promote is to have this process be driven by user needs. The person requesting the mocks (even if it's the CEO) has to include the rationale for why users will want this functionality. These questions are built into the Confluence project templates from conception to design review and eng hand-off (PRD). The design team is required to include pros and cons for the designs relative to users' needs next to the alternatives. This approach lets designers advocate for their own solutions while representing alternatives in a principled manner.
In some cases, there hasn't been enough focus on the user needs to articulate them, so this process typically results in developing a deeper understanding of the different types of users and their specific goals. During design reviews, we evaluate whether the solutions meet the user needs as well as the business goals and spend more time when these don't line up. This approach helps move reviews away from personal preferences and more towards the perspective of users.