picsart

Crop Tool Redesign

Old screens, before they were redefined, showcased the initial design.

Role: Product Designer
Team: UX Team, Developers, QA, PM
Tools: Figma

2020,4 months

Overview
Picart is a well-known photo and video editing application that became popular when Instagram was only available for iOS devices. As the first major editor for Android, Picsart offers around 500 tools to help users edit their images. Among these, the most frequently used tool is the Crop Tool.

When users take a picture, they often need to make quick adjustments—whether it’s straightening the image, rotating it, or cropping from the corners. In fact, the Crop Tool accounts for about 90% of tool usage.

To support Picsart’s goal of providing a seamless editing experience, we focused on improving the Crop Tool. Through user research, we identified several issues faced by our most active users. This case study will walk you through the steps we took to address these challenges, making the Crop Tool more intuitive and user-friendly.

Goal
Facilitate the Crop Tool usage for super users who rely on it daily, and enhance its ease of use to improve the overall experience.

Problem
However, it has limited features and an outdated design that no longer meets user needs or trends. Plus, users found it difficult to use, making the tool feel clunky and inefficient for daily tasks.

Solution
I decided to solve this problem by prioritizing the primary actions of the Crop Tool, distinguishing them from secondary features like transform and custom crop. This approach allows super users to focus on their core needs while reducing visual clutter and interaction friction, ultimately streamlining the tool for more efficient and seamless use.

My Role in Solving the Problem
Picsart is structured into business units, each with its own owner, project manager, designers, engineers, and QA testers. I was part of the Editing Team, specifically working on the Crop Tool makeover.

Working process and hierarchy within the company while working on the Crop Tool project

When the task was assigned to our team, I initiated discussions with all stakeholders to ensure that every aspect of the workflow was feasible. I collaborated closely with the Product Manager to understand the friction points at a high level. Additionally, I worked with the UX Research team to help organize user surveys and prepare prototypes for testing.

I also collaborated with the development team to create the necessary specifications and discussed potential animations and transitions. Throughout the process, I managed the design preparation and organization, regularly reviewing and confirming progress with other departments during our weekly Design Standup meetings.

Discover Phase
To begin understanding user challenges with the Crop Tool, I started my research by analyzing competitors and popular applications that feature a crop tool. This helped me understand user flows, compare them with our current tool, and identify the differences in how other apps handle this functionality.

From there, I focused on three main questions to guide my research:

How do users feel about the current crop tool functionality?
What are the most common challenges users face when using crop tools in photo-editing apps?
Would users prefer a more customizable or automated crop tool experience?

Phase 2: Comparing with the PA crop tool
In this phase, I analyzed the current crop tool in Picsart, comparing it with similar tools in other popular photo-editing apps.

Competitor screenshots showcasing how they implemented cropping tools.

I identified key differences and gaps in functionality, focusing on what’s missing or outdated. This comparison helped me pinpoint areas for improvement to ensure the Crop Tool meets user expectations and aligns with current design trends and user needs.

Key Findings:

Intuitive Accessibility of Tools:
The flip and rotate tools in Picsart were less intuitive to find compared to other applications, impacting user experience and workflow efficiency.

Updated Cropping Ratios for Social Media:
There is a need to update cropping ratios in Picsart to include sizes optimized for various social media platforms. This enhancement would streamline the process of preparing images for different online uses.

Primary and Secondary Tool Differentiation:
Users expressed a preference for distinguishing between primary and secondary tools within the Crop Tool interface. This clarity would facilitate easier access to commonly used functions and reduce navigation complexity.

User Interviews
Focus Groups with PA and Non-PA Users
To improve the user experience for both current and new users, we conducted two types of user interviews: one with PA users and one with non-PA users. While we had a solid understanding of our current users' pain points, it was also important to consider how new users would engage with the platform for the first time.

User persona based on the data we have, reflecting key characteristics and needs

User testing feedback table with stages, actions, pain points, and outcome based on gathered data.

We prepared a questionnaire with around 10 questions, focusing on their current experiences with photo editing tools and the crop tool specifically.

The key questions were:

What is the first step you take when you want to edit an image?
This is a good question to understand the flow of users' editing process and whether the crop tool is an integral part of their editing steps.

How often do you crop an image when editing? Is it an essential step in your editing process?
Understanding how frequently users use the crop tool and how important it is in their overall workflow can help prioritize this tool’s development.

What additional features would improve your crop tool experience?
This could include things like a visual grid, rotation, better snapping, etc. This helps identify features users wish they had.

When using the crop tool, do you encounter any frustrations or difficulties?
This is a more open-ended question that can reveal pain points that users may not have directly pointed out before.

Insights from user testing, highlighting key findings and improvements

Problem Statment
The current crop tool in Picsart is difficult to locate and use efficiently, especially for both experienced and new users. The lack of clear aspect ratio presets and overwhelming tool options frustrates users who need a quick and intuitive cropping experience.

These issues impact user satisfaction and slow down the editing process, particularly for those focused on social media content creation.

Sketches / Ideation
During our discussions with the Picsart team, I prepared sketches to visualize two possible solutions. Based on user research and insights, I focused on a solution that would streamline the crop tool experience while maintaining consistency across the platform.

Two solutions were suggested as the second iteration, based on user testing feedback

MSCW prioritization framework is applied to assess features based on their importance for the project.

First Prototyping
I created four different versions of the prototype, each with a short user flow, to test which layout was the easiest to understand and use. The testing was conducted online with a mix of 5 Picsart users and 5 non-Picsart users. The goal was to gather qualitative feedback on usability and clarity.

Results and suggestions were presented with four different versions for consideration

Results: Overall, we found that the crop ratio selection was the most clear and successful feature, as users quickly understood how to choose the right dimensions for their images.

However, the rotate and crop free options were less intuitive and caused some confusion. Each version had its own pros and cons, highlighting areas that needed refinement.

Results
We found that the crop ratio selection was the most clear and successful feature, as users quickly understood how to choose the right dimensions for their images. However, the rotate and crop free options were less intuitive and caused some confusion.

Each version had its own pros and cons, highlighting areas that needed refinement.

Identifying the changes needed for each feature based on the analysis and feedback.

Second Round of User Testing
We conducted live testing with 10 participants in the office. This version incorporated all insights from user testing, streamlining the interface by reducing three tabs to two.

The "Crop" tab now houses all size-related editing elements, while the "Rotate" tab includes the straightening and flip rotation features. Primary editing tools are positioned at the bottom for easy access, with secondary actions like rotate, undo, and redo placed at the top for a more intuitive user experience.

Second round of testing for the prototype, focusing on refining features and addressing user feedback.

Insights:

✔️ Smooth Functionality: Users found the tool more responsive and enjoyable to use.
✔️ Creative Use of Flip Tool: The addition of the flip tool encouraged users to explore different orientations for their images.
✔️ Clearer Free Crop Tool: Users understood how to effectively use and manipulate the free crop tool, particularly with the lock/unlock feature.

Final Prototype
Focused on enhancing user interaction with intuitive design elements and refined visual feedback. It aimed to simplify the cropping process while maintaining a clean and eye-catching interface.

Final solution prototype example, showcasing the refined design after testing and iterations.

Based on the insights from the last round of user testing, I made additional minor adjustments, resulting in a significantly improved prototype.

The final design addressed most of the must-have features, including a clear focus on crop ratios. The interface was simplified into two main sections:
"Crop" and "Rotate."

This structure made it easier for users to navigate and understand the tool’s functionalities, especially the rotation features. We conducted A/B testing with our super users to gauge their reactions and gather more targeted feedback. The results showed improved user engagement and fewer drop-offs. The feedback was overwhelmingly positive, confirming that the changes enhanced usability.

After collaborating with other departments to ensure consistency with the evolving Picsart style guide, we successfully integrated and launched the new design into the Design System. Despite the challenges of coordinating within a large organization, the updated version was well-received and became a valuable improvement to the platform.

What I Learned
This project highlighted the critical importance of iterative prototyping and user testing. Gathering detailed feedback from users provided invaluable insights that shaped the final design. I learned how crucial it is to ask direct, targeted questions to extract the feedback needed to make meaningful improvements.

This experience reinforced the value of continuous user involvement in the design process and the need to adapt quickly to ensure the product meets user expectations and stays relevant.

User flow for the final solution, illustrating the optimized journey from start to finish.

Post-Launch and Next Steps
Following the successful rounds of testing, we decided to move forward with the final prototype and implemented it in the live product. The redesigned crop tool, with its streamlined interface and improved functionality, was well-received by users, as reflected in the positive feedback and increased engagement metrics.