ABOUT PICSART
PicsArt is the #1 mobile social photo editing app for iOS and Android backed by Sequoia with 150M+ MAUs. With PicsArt, you can make simple and fun (or complex and elaborate) edits with it's extremely robust editor and share them with a global community. I discovered PicsArt while doing research on mobile phone users in India for Google. I was sitting next to an English woman using the app on a flight from Mumbai to Delhi and was amazed by what she was doing on a mobile device. I used the app for six weeks nearly everyday before discovering there was a community.
PicsArt is the #1 mobile social photo editing app for iOS and Android backed by Sequoia with 150M+ MAUs. With PicsArt, you can make simple and fun (or complex and elaborate) edits with it's extremely robust editor and share them with a global community. I discovered PicsArt while doing research on mobile phone users in India for Google. I was sitting next to an English woman using the app on a flight from Mumbai to Delhi and was amazed by what she was doing on a mobile device. I used the app for six weeks nearly everyday before discovering there was a community.
PicsArt had 60M MAUs when I started as the Head of UX Design & Research in 2015. We crossed the 100M MAU milestone when I left:
MY ROLE
I built up and managed the UX design and research teams from 3 to 30 people. I was responsible for the 0-1, end-to-end user experience of the app as well as a suite of PicsArt lab apps including GifsArt, VideoMagic, Animator, and Fonty. My role involved setting up and running design and product reviews, specifying and coordinating UX priorities across business units, increasing communication and analysis of research findings and AB tests, hiring and team organization, setting the UX vision for the company and aligning it with the company goals and roadmap.
PICSART ORIGINAL DESIGN
PicsArt started as an editor and added the community in a massive design sprint several years later before I joined the company. The Android version of PicsArt initially had shortcuts to editing tools on its home screen (below left) provide pathways into specific parts of the Editor. Both iOS and Android had tabs for feed, explore, discover artists, and challenges with consistent but limited usage. The profile, a critical element of a community, was hidden under the hamburger menu. Surprisingly, the profile icon in the tab bar took you to a page to discover new artists
User testing revealed that the most common things users said when asked about the community were: 1) What community? OMG, there is a community? and 2) I don’t need another social network.
I built up and managed the UX design and research teams from 3 to 30 people. I was responsible for the 0-1, end-to-end user experience of the app as well as a suite of PicsArt lab apps including GifsArt, VideoMagic, Animator, and Fonty. My role involved setting up and running design and product reviews, specifying and coordinating UX priorities across business units, increasing communication and analysis of research findings and AB tests, hiring and team organization, setting the UX vision for the company and aligning it with the company goals and roadmap.
PICSART ORIGINAL DESIGN
PicsArt started as an editor and added the community in a massive design sprint several years later before I joined the company. The Android version of PicsArt initially had shortcuts to editing tools on its home screen (below left) provide pathways into specific parts of the Editor. Both iOS and Android had tabs for feed, explore, discover artists, and challenges with consistent but limited usage. The profile, a critical element of a community, was hidden under the hamburger menu. Surprisingly, the profile icon in the tab bar took you to a page to discover new artists
User testing revealed that the most common things users said when asked about the community were: 1) What community? OMG, there is a community? and 2) I don’t need another social network.
Android v0
|
iOS v0
|
v1 Beautiful
|
v2 Awesome
|
The content and curation teams had done an amazing job of curating and showcasing the best content. However, there were 20+ different formats and types of cards for displaying content with no logical sequence or organization.
The challenge was to update the visual design, introduce the value of community and UGC, reorganize the content interaction strategy, and engage users by providing a personalized consumption experience. The architecture needed to reveal more raw and recent content without disrupting the brand and quality of the curated content. This work set the stage for AI-driven personalization leveraging clusters of dynamically calculated mappings between social actions and attributes of images.
DESIGN SPRINT: REDESIGN THE COMMUNITY
I ran a two week design sprint with the entire design team to completely redefined the information architecture, content organization, visual language and user experience for the community. In addition to bringing the design team together, this effort resulted in a consistent set of design patterns and components that spanned multiple business units:
The challenge was to update the visual design, introduce the value of community and UGC, reorganize the content interaction strategy, and engage users by providing a personalized consumption experience. The architecture needed to reveal more raw and recent content without disrupting the brand and quality of the curated content. This work set the stage for AI-driven personalization leveraging clusters of dynamically calculated mappings between social actions and attributes of images.
DESIGN SPRINT: REDESIGN THE COMMUNITY
I ran a two week design sprint with the entire design team to completely redefined the information architecture, content organization, visual language and user experience for the community. In addition to bringing the design team together, this effort resulted in a consistent set of design patterns and components that spanned multiple business units:
|
|
|
|
PATTERN LIBRARIES
Defining the different patterns for cards and content was the first step in creating a comprehensive information architecture and design systems at PicsArt. These patterns ranged from Add-Ons and Shop content to Weekly Contest Winners, Favorite Tags, Daily Inspirations and a host of other cards:
Defining the different patterns for cards and content was the first step in creating a comprehensive information architecture and design systems at PicsArt. These patterns ranged from Add-Ons and Shop content to Weekly Contest Winners, Favorite Tags, Daily Inspirations and a host of other cards:
|
|
|
The cards supported a content system built around UI controls (atoms) and components (molecules). The redesign unified the card patterns and gave users the perception that they were part of an interconnected system through the new visual language system. Perception of order is one indicator of success for pattern libraries.
IMPACT - PROFILES
IMPACT - STICKERS
From zero to the world's largest repository of FreeToEdit UGC stickers in one year.
FEATURE RETENTION - STICKERS
Retention for most apps and features is typically around 15% and very hard to increase.
IMPACT - PROFILES
- 150% increase in follows from the profile
- 50% increase in sticker carousel engagement
- 19% increased sticker page visits
IMPACT - STICKERS
From zero to the world's largest repository of FreeToEdit UGC stickers in one year.
- 4M public FreeToEdit stickers (UGC)
- 20M monthly users engage with friends around stickers
- 1M new public stickers each month (each with multiple remixes)
FEATURE RETENTION - STICKERS
- 40% 1-month feature retention for friends’ stickers for people who are socially engaged (i.e., like a photo)
- 28% 1-month feature retention for trending stickers.
Retention for most apps and features is typically around 15% and very hard to increase.
Details Behind The Designs
BRAND & USER EXPERIENCE
Brand and UX intersect at almost every touch point of experience. There are benefits of teams being split into business units (speed, parallel execution, etc.). Creating a unified brand and user experience is not one of them. The error states, email messaging, push notifications, and general tone that constitute the personality of the brand tend to lack coherence with the business unit model. Visual elements distract from the primary messages and actions. Different terms get used for the same actions: Sign Up and Register, Login and Sign in. The tone of messages range from “Snap!” (personal) to “Cannot communicate with the server” (technical). Without a technical writing group, a core UX team, or strong cross-BU review processes, unifying these elements typically comes up short. Serving as the glue between business units and UX-creative-brand typically falls on the UX team.
BRAND & USER EXPERIENCE
Brand and UX intersect at almost every touch point of experience. There are benefits of teams being split into business units (speed, parallel execution, etc.). Creating a unified brand and user experience is not one of them. The error states, email messaging, push notifications, and general tone that constitute the personality of the brand tend to lack coherence with the business unit model. Visual elements distract from the primary messages and actions. Different terms get used for the same actions: Sign Up and Register, Login and Sign in. The tone of messages range from “Snap!” (personal) to “Cannot communicate with the server” (technical). Without a technical writing group, a core UX team, or strong cross-BU review processes, unifying these elements typically comes up short. Serving as the glue between business units and UX-creative-brand typically falls on the UX team.
DESIGN PROCESSES
I initially set up review processes at PicsArt based on Google's model used by the Ads team, extending it to make decisions using principled and user-centered design. Design principles, separated from specific designs, help to unify the tonality, visual design, and language of the app. This process was time-consuming because each business unit had it’s own ideas for these elements. (I saw this repeatedly when working as a Creative Director doing consulting work for companies with a range of business units). By creating centralized style guides, design principles, and design reviews, we eventually developed more consistent messaging and improved usability across all parts of the app.
The creative director at PicsArt (who came from Apple) and I began working closely together. It turns out that members of the brand team had very little idea of how UX operated, the human interface guidelines for Android and iOS, or the difference between style guides and design systems. UX team members had no experience working with brand teams and incorporating brand guide books into UX style guides. Of course, this is typical because brand and UX tend to not work together closely.
Early on, these differences lead to misunderstandings about why certain recommendations were not integrated into the UX style guides, prioritized by PMs, or incorporated by designers. Similarly, the UX team had very little understanding that the perception of the brand was tied to interactions at every point in the user's journey, shaped by contact with the brand messaging in the app store, color and composition within app, and the personality and tone of alerts and notifications.
I worked with the Creative Director (Chris Gard) and put together a few slides to explain the differences and connection to the teams:
I initially set up review processes at PicsArt based on Google's model used by the Ads team, extending it to make decisions using principled and user-centered design. Design principles, separated from specific designs, help to unify the tonality, visual design, and language of the app. This process was time-consuming because each business unit had it’s own ideas for these elements. (I saw this repeatedly when working as a Creative Director doing consulting work for companies with a range of business units). By creating centralized style guides, design principles, and design reviews, we eventually developed more consistent messaging and improved usability across all parts of the app.
The creative director at PicsArt (who came from Apple) and I began working closely together. It turns out that members of the brand team had very little idea of how UX operated, the human interface guidelines for Android and iOS, or the difference between style guides and design systems. UX team members had no experience working with brand teams and incorporating brand guide books into UX style guides. Of course, this is typical because brand and UX tend to not work together closely.
Early on, these differences lead to misunderstandings about why certain recommendations were not integrated into the UX style guides, prioritized by PMs, or incorporated by designers. Similarly, the UX team had very little understanding that the perception of the brand was tied to interactions at every point in the user's journey, shaped by contact with the brand messaging in the app store, color and composition within app, and the personality and tone of alerts and notifications.
I worked with the Creative Director (Chris Gard) and put together a few slides to explain the differences and connection to the teams:
This helped improve collaboration between the teams and resulted in UX team members participating in brand refreshes and brand book design, running research to assess the impact of design changes on brand perception, and joint promotion of brand and UX changes that shifted the design of the primary landing page and impression of the app (which had skewed to a younger audience than desired or represented in usage demographics).
The product team had been consistently deprioritizing brand updates because the impact was unclear for visual updates. I had the UX research lead run studies showing that user perception of the current visual design was off-brand and off-target for our demographic (skewing too young). The new designs were tested to make sure they resonated with the target audience providing data showing the importance of the visual design for engaging our target users.
The product team had been consistently deprioritizing brand updates because the impact was unclear for visual updates. I had the UX research lead run studies showing that user perception of the current visual design was off-brand and off-target for our demographic (skewing too young). The new designs were tested to make sure they resonated with the target audience providing data showing the importance of the visual design for engaging our target users.
PROFILES
The initial conception for profiles was that they should serve as people’s creative presence on the web. This was when PicsArt profiles were text-heavy with tabs and numbers (below left). There were information architecture problems here as well. The Photos tab had the same level in the hierarchy as Followers, Following and MemBoxes (an abbreviation for memory boxes similar to collections and pinboards). Users were able to save images from the community to named membox collections but few people used this feature.
Design Goals & Process: Understand how different users set up and populate their profiles using analytics and user interviews. Identify the highest value information based on user needs and usage, create an information hierarchy reflecting those priorities, define visual solutions that reflect the hierarchy, introduce new functionality to promote high-value features (eg, stickers). Maintain the integrity of the images and reduce the dominance of text.
The profiles update was done as part of the UX team design sprint and then refined after the ability to cut out and share stickers was introduced:
The initial conception for profiles was that they should serve as people’s creative presence on the web. This was when PicsArt profiles were text-heavy with tabs and numbers (below left). There were information architecture problems here as well. The Photos tab had the same level in the hierarchy as Followers, Following and MemBoxes (an abbreviation for memory boxes similar to collections and pinboards). Users were able to save images from the community to named membox collections but few people used this feature.
Design Goals & Process: Understand how different users set up and populate their profiles using analytics and user interviews. Identify the highest value information based on user needs and usage, create an information hierarchy reflecting those priorities, define visual solutions that reflect the hierarchy, introduce new functionality to promote high-value features (eg, stickers). Maintain the integrity of the images and reduce the dominance of text.
The profiles update was done as part of the UX team design sprint and then refined after the ability to cut out and share stickers was introduced:
Original Profile
|
Redesigned Profile
|
Impact
- 150% increase in follows from the profile
- 50% increase in sticker carousel engagement
- 19% increase in sticker page visits
STYLE GUIDE
Building style guides is a challenging process even though the tools to dynamically generate them have evolved over the past 15 years. At Google, I created a completely new style guide for the launch of B2B and B2C advertising platforms involving both consumer and advertiser-facing experience. I learned from working on the primary style guides for the design team at Google that the most important thing designers need out the door are Sketch files with assets and iconography (versus instructions and examples which can come later).
At PicsArt, the style guide has three primary parts:
This work positioned us to create a design system that alignments design patterns with engineering components. The advantage of a design system is that the reusable components can be referenced by name so that designers don't have to repeatedly provide specifications for the same elements over and over again. Velocity is increased for engineering because they can build reusable components and write conditional code to support variations in the core patterns.
Here are examples from the PicsArt style guides.
Grab-and-go Assets with Metrics
Building style guides is a challenging process even though the tools to dynamically generate them have evolved over the past 15 years. At Google, I created a completely new style guide for the launch of B2B and B2C advertising platforms involving both consumer and advertiser-facing experience. I learned from working on the primary style guides for the design team at Google that the most important thing designers need out the door are Sketch files with assets and iconography (versus instructions and examples which can come later).
At PicsArt, the style guide has three primary parts:
- Grab-and-go assets with metrics (Sketch)
- Iconography broken into groups (Sketch)
- Pattern library with core components, colors, design principles (Confluence)
This work positioned us to create a design system that alignments design patterns with engineering components. The advantage of a design system is that the reusable components can be referenced by name so that designers don't have to repeatedly provide specifications for the same elements over and over again. Velocity is increased for engineering because they can build reusable components and write conditional code to support variations in the core patterns.
Here are examples from the PicsArt style guides.
Grab-and-go Assets with Metrics
Color Palettes (aligned with brand guide books)
Iconography
Pattern Library in Confluence (for easy engineering reference)
|
|
Specs for Dialogs (Android)
Typography & Navigation Bars
|
|
Messaging Input Field States
Responsive Design Cards
See the Design Systems section for more details on style guides, pattern libraries, and design systems.
CHALLENGES, VIPS, CELEBRITIES, & BRANDS
Initially PicsArt had daily inspirations which served as hooks to get people engaged on a daily basis. We discovered that topics that were more abstract like "speed" resulted in a greater variety of imagery than specific inspirations "wheels" and therefore more contributions and interaction. Challenges were introduced to draw users into topic-based challenges, tool-focused challenges, and geo-specific challenges.
Initially PicsArt had daily inspirations which served as hooks to get people engaged on a daily basis. We discovered that topics that were more abstract like "speed" resulted in a greater variety of imagery than specific inspirations "wheels" and therefore more contributions and interaction. Challenges were introduced to draw users into topic-based challenges, tool-focused challenges, and geo-specific challenges.
Challenges Home
|
Challenges Voting
|
Participating and voting were the two primary actions. The product strategy was to leverage influencers and VIPs with large followings, enable them to create challenges and engage their user base. Challenges were extended so they could be hosted by brands and celebrities providing a new model for brand sponsorship and social promotion of branded content. Brands get activated by PicsArt VIPs to drive sharing to the brand's Instagram page. In turn, visibility on Instagram creates a hook for new and existing users to engage with the brand and associated assets on PicsArt.
The band 30 Seconds To Mars launched one of the first challenges on PicsArt coinciding with their new album release. Fans remixed context provided by the band and shared them on PicsArt and Instagram:
The band 30 Seconds To Mars launched one of the first challenges on PicsArt coinciding with their new album release. Fans remixed context provided by the band and shared them on PicsArt and Instagram:
IMPACT
13M+ impressions
47.9k unique pieces of content created
In-app challenges create massive fan engagement. The social relevance for this type of engagement with a brand is nearly impossible for brands to get and is completely new model for advertising, sponsorship, and monetization.
13M+ impressions
47.9k unique pieces of content created
In-app challenges create massive fan engagement. The social relevance for this type of engagement with a brand is nearly impossible for brands to get and is completely new model for advertising, sponsorship, and monetization.
STICKERS: CREATING A NEW ECOSYSTEM
Creating a platform or ecosystem is the aspiration of many technology companies. In less than one year, PicsArt succeeded at launching a major new initiative to make it easy to create and share stickers, becoming the largest community for FreeToEdit UGC for stickers.
Role: I lead the effort that defined the UX strategy, experience, value propositions and patterns.
Stickers have 1) hashtags associated with them that you can follow (below left), 2) detail views showing remixes, sources, and similar images (second from left), 3) remixes with shared images using the sticker (second from right), 4) applied stickers with tools for editing (below right, sticker border tool):
Creating a platform or ecosystem is the aspiration of many technology companies. In less than one year, PicsArt succeeded at launching a major new initiative to make it easy to create and share stickers, becoming the largest community for FreeToEdit UGC for stickers.
Role: I lead the effort that defined the UX strategy, experience, value propositions and patterns.
Stickers have 1) hashtags associated with them that you can follow (below left), 2) detail views showing remixes, sources, and similar images (second from left), 3) remixes with shared images using the sticker (second from right), 4) applied stickers with tools for editing (below right, sticker border tool):
Trending Stickers
|
Sticker Detail
|
Sticker Remixes
|
Sticker Tools
|
Friends' stickers and their social relevance was one of the features I advocated for strongly.
Engagement and retention for friends stickers just surpassed trending stickers with 273% more retention for 7D.
Engagement and retention for friends stickers just surpassed trending stickers with 273% more retention for 7D.
Stickers in Profile
|
Search Stickers
|
Discover Stickers
|
Consistent patterns across touchpoints means that users learn one set of interactions and they apply throughout the experience.
CUTOUTS: MAKE AWESOME STICKERS
With PicsArt edge-detection tools, making a sticker is as easy as fat-fingering the area you want to turn into a sticker. You have a way to preview and refine the selection after the initial cut:
With PicsArt edge-detection tools, making a sticker is as easy as fat-fingering the area you want to turn into a sticker. You have a way to preview and refine the selection after the initial cut:
|
|
|
|
The design innovation here is that the UX gives immediate feedback and ease-of-use coupled with the ability to make refinements to increase the quality of the cutout. This approach is different from Snapchat's which lets you cutout an object and have a copy dropped onto your existing image. The result looks good because imperfections blend into the background of the existing image. However, to create a higher quality ecosystem of images the advanced tools for refinement were needed but in a way that doesn't make it harder for more casual users.
IMPACT
Now the world's largest repository of FreeToEdit UGC stickers!
IMPACT
Now the world's largest repository of FreeToEdit UGC stickers!
- 4M public FreeToEdit stickers (UGC)
- 20M monthly users engage with friends around stickers
- 1M new public stickers each month (each with multiple remixes)
- 1.2% higher retention after 7 days for users who used the Cutout tool to create stickers.
SHARING & ENGAGEMENT
Net promoter score (NPS) is a measure of how likely you would be to refer an app or website to a friend. It turns out that people rarely "invite" their friends to an app but they do talk about the latest, coolest thing they have seen. The majority of installs of new apps come from word-of-mouth. Snapchat took advantage of this by having QR codes for you to add friends in real-time (and had a terrible experience for finding people independently). AirTime, co-founded by Sean Parker (Facebook) and Shawn Fanning (Napster) require you to invite two other friends (not sure how well this works:)
Engagement and retention with friends' stickers highest retention of any feature I have ever seen. Most hover around 15% for 7D.
This data validates the entire approach behind the stickers ecosystem and engaging with your friends, especially for quick and funny edits.
INSPIRATION
Early on, UX research identified several core user needs. Two of the primary ones that came up repeatedly when people saw the amazing images in the PicsArt community were: 1) How did they do that? and 2) How can I do that? We ran a series of design sprints and testing sessions to understand the needs of users for viewing and creating images.
Coming next: summary of findings for Edit history, before-after (compare), export How-To, try then auto apply/step through.
Net promoter score (NPS) is a measure of how likely you would be to refer an app or website to a friend. It turns out that people rarely "invite" their friends to an app but they do talk about the latest, coolest thing they have seen. The majority of installs of new apps come from word-of-mouth. Snapchat took advantage of this by having QR codes for you to add friends in real-time (and had a terrible experience for finding people independently). AirTime, co-founded by Sean Parker (Facebook) and Shawn Fanning (Napster) require you to invite two other friends (not sure how well this works:)
Engagement and retention with friends' stickers highest retention of any feature I have ever seen. Most hover around 15% for 7D.
- People who use friends’ stickers have a 26% 1-month feature retention rate vs. people who use stickers from Trending card or Discovery overall have 15%.
- People who are socially engaged (i.e., like a photo) have 40% 1-month feature retention for friends’ stickers and 28% for trending stickers (also high).
- Users for the USA who remix images or stickers have a 32%(!) 3-month sticker feature retention for friends’ stickers and 18% for Trending.
This data validates the entire approach behind the stickers ecosystem and engaging with your friends, especially for quick and funny edits.
INSPIRATION
Early on, UX research identified several core user needs. Two of the primary ones that came up repeatedly when people saw the amazing images in the PicsArt community were: 1) How did they do that? and 2) How can I do that? We ran a series of design sprints and testing sessions to understand the needs of users for viewing and creating images.
Coming next: summary of findings for Edit history, before-after (compare), export How-To, try then auto apply/step through.
