PicsArt is the #1 social editing and UGC platform for Android and iOS with 150M+ MUAs and backing from Sequoia. I left Google to head up UX design and research at PicsArt. My first project was to analyze and improve usability for the editor.
DESIGN CHALLENGE
The PicsArt Editor is one of the most powerful and complex native consumer apps that exists. When I joined PicsArt, there was very little consistency between the hundreds of tools, flows, messaging, navigation, and the touch points in the overall experience. Guidance was practically nonexistent. Because of these inconsistencies, the app was hard to use and the powerful features were difficult to discover. The design challenge required a formulating a coherent and scalable information architecture, redefining the visual and iconographic language, and developing new, multi-level navigation patterns.
MY ROLE
I built up and now manage the UX design and research teams. I set the UX vision for the company aligned with the company goals and roadmap. For this project, I directly created many of the mocks, specs with metrics, design patterns, and developed the design principles and IA framework. I hired and led with a team of designers to map out and redefine the information architecture. I recruited and screened participants, ran the usability studies, identified insights, and used these to build consensus across the product, engineering, and design teams. I worked closely with engineering on the development, QA, and post-launch analysis.
INSIGHTS
PicsArt users tend to engage with the same set of tools over and over again. In my initial design review of the product, I found essentially three levels of interaction with very little differentiation. Part of the reason the app was hard to use was the specialized solutions to support slight variations for power users. Simplifying these interactions and unifying the patterns across related tools meant that users could learn one set of interactions and visual language.
SOLUTION
IMPACT
The new information architecture provided a basis for scaling the user base over the next two years:
The PicsArt Editor is one of the most powerful and complex native consumer apps that exists. When I joined PicsArt, there was very little consistency between the hundreds of tools, flows, messaging, navigation, and the touch points in the overall experience. Guidance was practically nonexistent. Because of these inconsistencies, the app was hard to use and the powerful features were difficult to discover. The design challenge required a formulating a coherent and scalable information architecture, redefining the visual and iconographic language, and developing new, multi-level navigation patterns.
MY ROLE
I built up and now manage the UX design and research teams. I set the UX vision for the company aligned with the company goals and roadmap. For this project, I directly created many of the mocks, specs with metrics, design patterns, and developed the design principles and IA framework. I hired and led with a team of designers to map out and redefine the information architecture. I recruited and screened participants, ran the usability studies, identified insights, and used these to build consensus across the product, engineering, and design teams. I worked closely with engineering on the development, QA, and post-launch analysis.
INSIGHTS
PicsArt users tend to engage with the same set of tools over and over again. In my initial design review of the product, I found essentially three levels of interaction with very little differentiation. Part of the reason the app was hard to use was the specialized solutions to support slight variations for power users. Simplifying these interactions and unifying the patterns across related tools meant that users could learn one set of interactions and visual language.
SOLUTION
- Define three levels of hierarchy with distinct termination actions
- Support responsive design and breakpoints for devices and portrait/landscape mode
- Build for ergonomic coherence for complex collections of sliders and controls
- Provide feedback on actions, confirmation on destructive actions
- Create sequences of tooltips to guide users through actions and uncover powerful secondary functions
IMPACT
The new information architecture provided a basis for scaling the user base over the next two years:
- MAUs increased from 60M to 100M
- Editor completion increased from 50% to 81%
- Sharing to the PicsArt platform increased by 20%
- 14D retention increased from 13% to 16%
Details Behind The Design
PICSART DAY 0
When I joined PicsArt, the app had been optimized for every individual experience with little consistency between tools, flows, messaging and areas of the app and limited or no guidance or messaging for how to use it. The team had done a remarkable job of providing editing power at par or exceeding the capabilities of Photoshop on a mobile device. Because of the inconsistencies, the app was hard to use and the powerful features were difficult to discover. The users who succeeded at discovering the advanced functionality tended to be highly engaged.
The original home screen of the app (below) had inconsistent iconography, labels, placement and use of controls especially the navigation controls. The main toolbar had been ordered by balancing frequency of use with perceived sequence of edits: basic tools, effects (filters), adding a photo, square fit for sharing to Instagram, etc. Adding a filter, the dominant action in photo apps, was under Effects. Interestingly, "Effects" AB tested better than "Filters." Even the primary action of cropping the photo was hard to discover because it was under the Tools menu. We fixed this issue by using the Crop icon instead of a Tools icon in the redesigned version:
PICSART DAY 0
When I joined PicsArt, the app had been optimized for every individual experience with little consistency between tools, flows, messaging and areas of the app and limited or no guidance or messaging for how to use it. The team had done a remarkable job of providing editing power at par or exceeding the capabilities of Photoshop on a mobile device. Because of the inconsistencies, the app was hard to use and the powerful features were difficult to discover. The users who succeeded at discovering the advanced functionality tended to be highly engaged.
The original home screen of the app (below) had inconsistent iconography, labels, placement and use of controls especially the navigation controls. The main toolbar had been ordered by balancing frequency of use with perceived sequence of edits: basic tools, effects (filters), adding a photo, square fit for sharing to Instagram, etc. Adding a filter, the dominant action in photo apps, was under Effects. Interestingly, "Effects" AB tested better than "Filters." Even the primary action of cropping the photo was hard to discover because it was under the Tools menu. We fixed this issue by using the Crop icon instead of a Tools icon in the redesigned version:
Original
|
Redesigned
|
Future
|
One of the first things I did as the Head of UX was set up design processes that specified goals and user needs in phase 1, generated alternatives with pros and cons tied to user needs and tested them in phase 2, and create high fidelity mocks and specifications for AB tests in phase 3.
PHASE 1: Project Definition
I worked with the PM team and defined a template (in Confluence) that everyone now uses to define new projects. This included user-centered design elements about behavior and user needs. It has evolved to include analytics from earlier launches now that we have comprehensive analytics events.
The Editor Redesign Project was intended to make the app consistent with the objective to drive engagement, retention, and ease-of-use for new and existing users.
BASELINE & IMPACT
We had a high install rate with 50% drop-off in the editor before the redesign which improved to 80% of users completing edits after the redesign. Retention was slightly below industry standards at 13% which we increased to 16% after the redesign. After the project was complete, the app grew from 60M MAUs to 100M+ MAUs in two years in part based on the consistency and ease-of-use improvements.
DESIGN CHALLENGES
Part of the design challenge was that analytics showed a remarkable distribution of engagement across the suite of tools with some stand-outs like Effects, Add Photo, and Add Text being used regularly with high engagement and retention rates.
Users fell into several categories: quick edits with filters, compositions and free style collages, photographers who didn’t change the structure of their images, collages with frames and grids (high in APAC), and illustrators making drawings (surprisingly high 10% of MAUs). The create flows for these different types of users are discussed in separate case studies. From a UX perspective, this was a complex challenge for design and architecture.
The Effects subcategories (left below) illustrate the wide range of edits possible just for a single tool. These subcategories range from filters (FX) and effects to facial corrections.
PHASE 1: Project Definition
I worked with the PM team and defined a template (in Confluence) that everyone now uses to define new projects. This included user-centered design elements about behavior and user needs. It has evolved to include analytics from earlier launches now that we have comprehensive analytics events.
- Product Goals: What are the business unit and company KPI's that you are impacting?
- Desired User Behavior: What do we want users to do to meet product goals?
- User Needs: Why will they want to do this?
The Editor Redesign Project was intended to make the app consistent with the objective to drive engagement, retention, and ease-of-use for new and existing users.
BASELINE & IMPACT
We had a high install rate with 50% drop-off in the editor before the redesign which improved to 80% of users completing edits after the redesign. Retention was slightly below industry standards at 13% which we increased to 16% after the redesign. After the project was complete, the app grew from 60M MAUs to 100M+ MAUs in two years in part based on the consistency and ease-of-use improvements.
DESIGN CHALLENGES
Part of the design challenge was that analytics showed a remarkable distribution of engagement across the suite of tools with some stand-outs like Effects, Add Photo, and Add Text being used regularly with high engagement and retention rates.
Users fell into several categories: quick edits with filters, compositions and free style collages, photographers who didn’t change the structure of their images, collages with frames and grids (high in APAC), and illustrators making drawings (surprisingly high 10% of MAUs). The create flows for these different types of users are discussed in separate case studies. From a UX perspective, this was a complex challenge for design and architecture.
The Effects subcategories (left below) illustrate the wide range of edits possible just for a single tool. These subcategories range from filters (FX) and effects to facial corrections.
Original
|
Redesigned (iOS)
|
Future (Android)
|
Initial experience: The dominant response people have when first opening and using the editor is: “Wow, there is a lot going on here!” The home screen feels like walking into a supermarket and seeing all the products on one long shelf: 15 scrollable categories of tools each with subcategories and nested tools.
Repeat users: We brought in some existing PicsArt users to understand how they used the product. The majority of these users had repeated usage of the same tools, confirmed by analytics data, revisiting them over and over again. They rarely explored or even knew about the functionality of other tools. Highly-engaged users tended to use a sequence of apps to make edits even when the functionality in other tools existed (though hidden) in PicsArt.
Repeat users: We brought in some existing PicsArt users to understand how they used the product. The majority of these users had repeated usage of the same tools, confirmed by analytics data, revisiting them over and over again. They rarely explored or even knew about the functionality of other tools. Highly-engaged users tended to use a sequence of apps to make edits even when the functionality in other tools existed (though hidden) in PicsArt.
Navigation: The app initially had a variety of inconsistent navigation patterns: fly-outs for tools, pop-up menu lists for sub-categories, a scrolling list of tools, sub-level editing modes with little to distinguish them from higher level editing modes.
The lead PM who had designed the app said she she wanted users to see all the options at once so they could see the power of the app. This was a valid concern since many photo editing apps had just a few options. Power, depth and versatility were the differentiators of PicsArt.
The various navigation patterns (below) made it possible for users to move quickly between tools and categories, change multiple settings at once, and test out a series of edits before applying them. The downside to this power-user approach was that users typically had 30+ options to choose from at every step and a crazy amount of panels and fly-outs.
Design debt from initial version:
The lead PM who had designed the app said she she wanted users to see all the options at once so they could see the power of the app. This was a valid concern since many photo editing apps had just a few options. Power, depth and versatility were the differentiators of PicsArt.
The various navigation patterns (below) made it possible for users to move quickly between tools and categories, change multiple settings at once, and test out a series of edits before applying them. The downside to this power-user approach was that users typically had 30+ options to choose from at every step and a crazy amount of panels and fly-outs.
Design debt from initial version:
Multiple navigation patterns
|
Inconsistent control panels
|
Settings on top of nested tools
|
Fly-outs, pop-up menus, panels
|
Visual design: The text sizes ranged from 8sp to 14sp. Icons had different line widths and fill ratios. Selected states had different visual indicators. Panel styling and sizing was different throughout the app. These visual design issues weren't just for the editor, they extended to drawing, collage, or camera components - these could have been stand-alone apps in their own right but were integrated into the PicsArt Editor.
DESIGN ISSUES
Understanding the issues for users is the first step in coming up with a solution.
DESIGN PROCESS
PicsArt’s engineering, design, and product teams are a group of amazingly talented and creative people based in Yerevan, Armenia (look it up on the map - the office looks out onto Mount Ararat where Noah’s ark landed:) I spent two weeks on the other side of the planet with the product lead and several UX team members (there were three when I started, 30 now) drawing and redesigning every single tool and flow on the whiteboard. We did this several times until we had consistent patterns. The sketches were translated into wireframes and then 1,000+ high fidelity mocks.
DESIGN ISSUES
Understanding the issues for users is the first step in coming up with a solution.
- The editor had optimized each tool resulting in inconsistent and hard-to-use patterns across the app
- Basic flows and navigation were inconsistent breaking fundamental UX rules (prompt for destructive actions)
- The user experience, design patterns, flows, and visual design had no unifying logic.
- Hard to tell where you are and at what level (tapping check shows another check in top bar)
- Visual design, information architecture, not aligned with core user flows.
- Limited feedback or confirmation on actions, unclear messaging on dialogs (destructive actions, etc).
- Limited responsive design, inconsistency for controls (sliders) between tools (usability & ergonomics)
DESIGN PROCESS
PicsArt’s engineering, design, and product teams are a group of amazingly talented and creative people based in Yerevan, Armenia (look it up on the map - the office looks out onto Mount Ararat where Noah’s ark landed:) I spent two weeks on the other side of the planet with the product lead and several UX team members (there were three when I started, 30 now) drawing and redesigning every single tool and flow on the whiteboard. We did this several times until we had consistent patterns. The sketches were translated into wireframes and then 1,000+ high fidelity mocks.
|
|
Group and clustering patterns
|
|
Transition to wireframes
|
|
|
NAVIGATION
Brainstorming alternatives is a core part of the design process and understanding the visual, architectural and experiential components of the problem. Navigation is like the framing of the house: it determines the architecture of the living spaces. Best practices help define tap target areas, ergonomic positioning of controls, and ways to combine UI components. However, there are typically several competing alternatives with different pros and cons:
Brainstorming alternatives is a core part of the design process and understanding the visual, architectural and experiential components of the problem. Navigation is like the framing of the house: it determines the architecture of the living spaces. Best practices help define tap target areas, ergonomic positioning of controls, and ways to combine UI components. However, there are typically several competing alternatives with different pros and cons:
Brush controls top,
termination bottom
|
Brush controls & termination top
|
Brush Mode
|
Above left has the filters for a category immediately expanded making it possible to instantly apply filters and switch between categories. Above center has collapsed categories so you tap on them to expand (or potentially have them as a carousel above so that when recently used filters appear first in the list you can still move between categories). Above right is related to above center and shows what brush mode would look like versus brush controls in the top bar (above left).
PROS & CONS
These are complex design issues with trade-offs. Brush has its settings (size, opacity, hardness) and filters have different settings depending on the filter. We developed an inventory and architecture for all of these covering thousands of variations.
For alternative 1 (above left), users seemed confused about having a “SETTINGS” tab and didn’t know whether it would contain settings for the Filters and/or Brush (which had different selection tools with different settings: erase, brush, area, etc). Having multiple rows of categories and carousels was generally confusing and hard to use. The current version has the filter categories on the bottom and filters for the selected category in the form of thumbnails above it.
BRUSH SETTINGS
Brush settings make it possible to change the size, opacity, and hardness of the brush. 40% of users who apply filters and share their images change the brush settings. One of the design issues was highlighting and distinguishing the brush mode from the filter mode. Users who use the brush have higher retention and complete and share edits more than users who don't use the brush, so it was important was important to make the sliders easy-to-use.
Two alternatives were evaluated building off the mocks above:
PROS & CONS
- Controls on the bottom are ergonomically easier to reach except for near the thumb positions. (above left)
- Placing controls on the top of the screen reduces the height of the bottom bars - an issue on small Android devices. (above right)
- Brush modes are more discoverable using actual text (above right) versus iconography (above left).
- Categories expanded by default make it easy to tap and see changes instantly on the image (above left).
- A view with a specific set of filters (above left) focuses the user on one task at a time versus navigating between categories.
- Expanding categories shows more categories visually with easier navigation between them (above center).
These are complex design issues with trade-offs. Brush has its settings (size, opacity, hardness) and filters have different settings depending on the filter. We developed an inventory and architecture for all of these covering thousands of variations.
For alternative 1 (above left), users seemed confused about having a “SETTINGS” tab and didn’t know whether it would contain settings for the Filters and/or Brush (which had different selection tools with different settings: erase, brush, area, etc). Having multiple rows of categories and carousels was generally confusing and hard to use. The current version has the filter categories on the bottom and filters for the selected category in the form of thumbnails above it.
BRUSH SETTINGS
Brush settings make it possible to change the size, opacity, and hardness of the brush. 40% of users who apply filters and share their images change the brush settings. One of the design issues was highlighting and distinguishing the brush mode from the filter mode. Users who use the brush have higher retention and complete and share edits more than users who don't use the brush, so it was important was important to make the sliders easy-to-use.
Two alternatives were evaluated building off the mocks above:
Alternative 1: Brush Settings
|
Alternative 1: Brush+Filter
|
Alternative 2
|
Alternative 2: Brush Mode
|
Alternative 1: Tapping on the brush or eraser immediately opens the brush settings. Collapsing the brush settings panel lets you adjust the filter settings. The carousel for settings categorues is at the bottom of the panel.
Alternative 2: Tapping on "Settings" tab revealed settings for the filter. Tapping on Brush and then selecting the brush tool (not shown - see mocks in previous section above right) revealed the brush settings panel. The carousel for the settings category is at the top of the panel for consistency with the filter control view (where we wanted to avoid having a carousel above the tab bar).
The method and sequence for opening the brush settings and the vertical ordering of stacked controls (sliders, tabs, and grabbers) seem like small differences but they have substantial impact on the usability of the app for repeat users. There are a host of layout, ergonomic, tap target, and interaction issues going on here that advanced designers will spot immediately. Alternative 2 is superior in many of these areas.
SIMPLICITY & POWER
One discussion that comes up on nearly every project is the trade-off between simplicity and powerful. The questions here was whether users should be able to make multiple adjustments at the same time or just focus on doing one thing (brushing) even if it involved more navigation taps.
One argument was that more steps almost always result in some drop-off. However, focusing on one thing at a time simplifies the user experience (see Google's multi-step authentication for email+password sign ins). Supporting doing multiple things at one time (changing multiple sliders, adjusting filter intensity and brushing) introduces complexity for users (but can support power user workflows). It's important to build agreement across teams on the overall goals and target audience to make decisions about these issues.
HIGH FIDELITY MOCKS
The result of this phase of the design process was a complete set of designs (1,000+) and a series of user tests. A single set of termination controls were designed for the top bar for consistency. The Filters-Tune-Brush tabs were moved to the top of the bottom panel so that this area could be used for titles when there was just one choice versus tabs. This created a scalable architecture across the entire set of filters and tools.
Alternative 2: Tapping on "Settings" tab revealed settings for the filter. Tapping on Brush and then selecting the brush tool (not shown - see mocks in previous section above right) revealed the brush settings panel. The carousel for the settings category is at the top of the panel for consistency with the filter control view (where we wanted to avoid having a carousel above the tab bar).
The method and sequence for opening the brush settings and the vertical ordering of stacked controls (sliders, tabs, and grabbers) seem like small differences but they have substantial impact on the usability of the app for repeat users. There are a host of layout, ergonomic, tap target, and interaction issues going on here that advanced designers will spot immediately. Alternative 2 is superior in many of these areas.
SIMPLICITY & POWER
One discussion that comes up on nearly every project is the trade-off between simplicity and powerful. The questions here was whether users should be able to make multiple adjustments at the same time or just focus on doing one thing (brushing) even if it involved more navigation taps.
One argument was that more steps almost always result in some drop-off. However, focusing on one thing at a time simplifies the user experience (see Google's multi-step authentication for email+password sign ins). Supporting doing multiple things at one time (changing multiple sliders, adjusting filter intensity and brushing) introduces complexity for users (but can support power user workflows). It's important to build agreement across teams on the overall goals and target audience to make decisions about these issues.
HIGH FIDELITY MOCKS
The result of this phase of the design process was a complete set of designs (1,000+) and a series of user tests. A single set of termination controls were designed for the top bar for consistency. The Filters-Tune-Brush tabs were moved to the top of the bottom panel so that this area could be used for titles when there was just one choice versus tabs. This created a scalable architecture across the entire set of filters and tools.
|
|
|
INCREMENTAL vs. RADICAL LAUNCHES
The product team wanted to launch updates in an incremental manner so as not to completely change the UX and enable faster launches. This was the incremental approach based on engineering constraints. UX set about creating a completely new set of designs that would serve as a stepping stone to our final vision, build upon the current editor design, and meet the goals for consistency and ease-of-use without radically changing the user's primary experiences. This turned out to be a questionable choice since it took two years of incremental launches to even come close to the initial design solution.
DESIGN WORK
The scope for this design project was massive and set up the architecture and consistent user experience that enabled PicsArt to reach 100M+ MAUs:
See the Design Systems case study for details of this work.
HOW HARD CAN IT BE TO CHOOSE A PHOTO?
Choosing a photo seems like it should be a simple task. At PicsArt there is one big red (now magenta) primary Create button. Tapping this button reveals multiple paths to edit photos (primary), select multiple photos for collage, take photos for editing (camera), or select projects for drawing.
DESIGN PROBLEM
The original iOS & Android flows had a series of complex choices that resulted in substantial drop-off (more than 50% for new users):
The product team wanted to launch updates in an incremental manner so as not to completely change the UX and enable faster launches. This was the incremental approach based on engineering constraints. UX set about creating a completely new set of designs that would serve as a stepping stone to our final vision, build upon the current editor design, and meet the goals for consistency and ease-of-use without radically changing the user's primary experiences. This turned out to be a questionable choice since it took two years of incremental launches to even come close to the initial design solution.
DESIGN WORK
The scope for this design project was massive and set up the architecture and consistent user experience that enabled PicsArt to reach 100M+ MAUs:
- Three levels of tools with differentiated visual design to indicate where you are.
- Component library and pattern libraries aligned with engineering components.
- Feedback and confirmation of actions to improve usability.
- Guided sequences of actions to iteratively reveal new functionality.
- Updated iconography and consistent visual language.
- Breakpoints and responsive design to work across multiple device sizes, landscape and tablets.
- Created over 1,000 high fidelity mocks with metrics, design guides, and pattern libraries.
See the Design Systems case study for details of this work.
HOW HARD CAN IT BE TO CHOOSE A PHOTO?
Choosing a photo seems like it should be a simple task. At PicsArt there is one big red (now magenta) primary Create button. Tapping this button reveals multiple paths to edit photos (primary), select multiple photos for collage, take photos for editing (camera), or select projects for drawing.
DESIGN PROBLEM
The original iOS & Android flows had a series of complex choices that resulted in substantial drop-off (more than 50% for new users):
iOS My Network
|
iOS Create Menu
|
iOS Photo Chooser
|
iOS Directory Picker
|
ANDROID ORIGINAL PRODUCT
The Android platform had a similar but different set of complex steps and choices:
The Android platform had a similar but different set of complex steps and choices:
Android Explore
|
Android Create Menu
|
Android Photo Chooser
|
Android Photo Images
|
Issues: Completely different visual patterns were used on iOS and Android, making the reviewers at Apple or Google unhappy for different reasons (leveraging system-looking transparency for a non-system level interaction on iOS, dialogs not matching platform guidelines on Android, etc). There was drop-off on every step when users tended to just use their most recent photos. The Explore page design was so visually cluttered that many users weren't even able to find the create button (20%) at the beginning of these flows.
Insights: Editing a single photo that was recently taken was the dominant use case. For collages people tended to select photos first. PicsArt has an amazing set of grids that were presented first to showcase the power of its collage tool.
Design Goals:
Insights: Editing a single photo that was recently taken was the dominant use case. For collages people tended to select photos first. PicsArt has an amazing set of grids that were presented first to showcase the power of its collage tool.
Design Goals:
- Make it simpler and faster to select a photo for editing.
- Have a consistent navigation model for moving back and forth between steps.
- Promote use of #FreeToEdit images (generated by community with permission to edit).
- Make it possible to find Shop content especially background images you have purchased.
- Enable changing directories to get photos from other sources.
Solutions
CREATE BUTTON
The create button is supposed to be the primary action on the screen. It was the red button with the white edit icon on iOS and the red floating action button on Android. See the case study on the community for more details and the steps for addressing drop-off here through consistency, simplification, and a large bandaid.
CREATE MENU
The Create menu is what users see after tapping the create button. Here is an evolution of the create menu over time:
CREATE BUTTON
The create button is supposed to be the primary action on the screen. It was the red button with the white edit icon on iOS and the red floating action button on Android. See the case study on the community for more details and the steps for addressing drop-off here through consistency, simplification, and a large bandaid.
CREATE MENU
The Create menu is what users see after tapping the create button. Here is an evolution of the create menu over time:
Android v0
|
iOS v0
|
Redesign v1
|
Redesign v2
|
Onboarding v3
|
This evolution improved the visual design and iconography, unified patterns across platforms (Redesign v2), and eventually shifted to a stacked model (Onboarding v3, above right) that made the choices even clearer. This approach enabled us to simplify options for onboarding to reflect the primary paths to editor and collage. It also positioned us to add paths for tutorials and branded challenges down the road through additional cards.
PHOTO CHOOSER
Several goals from the product team turned out to be challenging and problematic:
AB tests revealed that there was drop-off for both approaches below, but the tab model (left) greatly reduced flows to collage and drawing. A two step approach was adopted that reduced the complexity for the user.
Several goals from the product team turned out to be challenging and problematic:
- Give users the ability to switch from photo editing to collage, drawing, and camera to eliminate the create menu.
- Enable selecting a grid first OR photos for collage.
- Let users choose a background as a canvas instead of a photo.
- Support adding multiple images to create a free form collage.
AB tests revealed that there was drop-off for both approaches below, but the tab model (left) greatly reduced flows to collage and drawing. A two step approach was adopted that reduced the complexity for the user.
Combine Steps
|
Step One: Create Menu
|
Step Two: Photo Chooser
|
IMPACT
Drop-off has been reduced so that over 80% of users now complete an edit versus 50% originally.
10% of users engage with drawing.
15% of users engage with collage.
SIMPLIFY EVERYTHING
I push designers to simplify everything, remove clutter, and give users clear choices and feedback. There are always trade-offs between showing more choices and having more steps. Power users want lots of choices. But these don't need to be available immediately. They can be unfolded iteratively and revealed when they are relevant.
Here is an example of the same screen for changing the borders on a selected image. The first one (left) lets users tap between various tools (opacity, blending, adjusting, effects, border) after making adjusts to the selected tool. The simplified model (right) takes users to a view where they see just the options for adjusting the border. When they are finished they go back to the screen on the left with no tool selected.
Drop-off has been reduced so that over 80% of users now complete an edit versus 50% originally.
10% of users engage with drawing.
15% of users engage with collage.
SIMPLIFY EVERYTHING
I push designers to simplify everything, remove clutter, and give users clear choices and feedback. There are always trade-offs between showing more choices and having more steps. Power users want lots of choices. But these don't need to be available immediately. They can be unfolded iteratively and revealed when they are relevant.
Here is an example of the same screen for changing the borders on a selected image. The first one (left) lets users tap between various tools (opacity, blending, adjusting, effects, border) after making adjusts to the selected tool. The simplified model (right) takes users to a view where they see just the options for adjusting the border. When they are finished they go back to the screen on the left with no tool selected.
Too many choices
|
Simplified mode for each tool
|
Why is this choice important? It's actually critical because it reflects whether you are targeting power users (small user base, high intensity usage) or casual users (large user base, frequent but shallow usage). Arguments about showing the power through revealing lots of options and extra steps resulting in drop-off are worth exploring through analytics. But the important question I have teams address to build consensus, momentum, and focus is: Who are we designing for?
ANALYTICS, HEAT MAPS, & USER FEEDBACK
The use of data is essential to design and design practice. I look closely at completion rates for each tool, drop-off points in flows broken out into different cohorts, intensity of usage and retention. Intensity is valuable since users tend to use the same tools over and over again meaning that ease-of-use is critical. Heat maps provide an indicator of whether users are having difficulty focusing on the primary actions and choices. User feedback is valuable and I regularly read app store reviews and support logs to understand recurring issues.
The data can help pinpoint the issues and patterns. Connecting with users is the #1 way to get answers to why those issues are occurring and identify insights for solving them. I created a template deck for PMs to use for summarizing analytics and AB tests. My design team is required to use this information along with the project definition, design goals, user needs, and mocks with pros and cons to generate a summary deck at the end of each project. This deck summarizes the problem, the data used to understand the issues, the value of the design work, the solution, and the impact. This helps us collect and communicate the insights and impact more effectively.
OMG, YOU CAN DO THAT ON YOUR PHONE?!
When people say "OMG, you can do that on your phone?!" it's because what looks hard to do has been made easy and accessible. This is the sign of success. 150M MAUs is another indicator.
The magic behind PicsArt and the design of the #1 mobile social photo editor and UGC community is that it is both simple and powerful. The case study on the PicsArt community covers the other half of this story and looks at how to build a community when no one really wants another social network.
The use of data is essential to design and design practice. I look closely at completion rates for each tool, drop-off points in flows broken out into different cohorts, intensity of usage and retention. Intensity is valuable since users tend to use the same tools over and over again meaning that ease-of-use is critical. Heat maps provide an indicator of whether users are having difficulty focusing on the primary actions and choices. User feedback is valuable and I regularly read app store reviews and support logs to understand recurring issues.
The data can help pinpoint the issues and patterns. Connecting with users is the #1 way to get answers to why those issues are occurring and identify insights for solving them. I created a template deck for PMs to use for summarizing analytics and AB tests. My design team is required to use this information along with the project definition, design goals, user needs, and mocks with pros and cons to generate a summary deck at the end of each project. This deck summarizes the problem, the data used to understand the issues, the value of the design work, the solution, and the impact. This helps us collect and communicate the insights and impact more effectively.
OMG, YOU CAN DO THAT ON YOUR PHONE?!
When people say "OMG, you can do that on your phone?!" it's because what looks hard to do has been made easy and accessible. This is the sign of success. 150M MAUs is another indicator.
The magic behind PicsArt and the design of the #1 mobile social photo editor and UGC community is that it is both simple and powerful. The case study on the PicsArt community covers the other half of this story and looks at how to build a community when no one really wants another social network.