My approach to design

Jump to section

Overview

Downloading assets in the right size is time-consuming and inefficient, requiring users to edit them in separate software after download. This extra step disrupts workflows, adds frustration, and wastes time. Without built-in resizing, cropping, and previewing, users face unnecessary barriers to efficiency, making asset management more cumbersome. Competitors like Brandfolder and Bynder already offer this functionality, putting us at risk of falling behind.

What’s the problem?

Role
Senior Product Designer

Tools
Figma, FigJam, Dovetail

Prototype
End-to-end feature

Duration
Sept. 2023 - Jan. 2024

What are we hearing from the people behind the problem?

Aspect Ratio Challenges
Users struggle to obtain the correct aspect ratio without additional tools and need predefined, platform-specific aspect ratios (e.g., 1:1, 4:3) easily accessible within the system.

Inability to Crop and Download Directly in DAM
Users must download assets and modify them externally, leading to inefficient workflows, and would benefit from a seamless solution for cropping, editing, and downloading assets directly within the DAM platform.

Manual Precision for Freehand Cropping
Adjusting crop dimensions manually is tedious and error-prone, so users need a more efficient and precise cropping tool that eliminates the need for manual adjustments.

Inconsistent User Experience Across Pages
Different cropping experiences between the Asset Digest and Asset Details pages cause confusion, and a consistent, intuitive cropping experience across all areas of the platform is needed.

Our exploration:
How might we improve Acquia's Digital Asset Management (DAM) system by enabling users to easily crop, resize, and download assets directly within the platform, streamlining workflows and eliminating the need for external tools like Photoshop?

The Solution

To streamline asset cropping and downloading, the DAM system can integrate a user-friendly crop and resize functionality directly within the download modal. Users will be able to crop and adjust the aspect ratio of images, choose preset dimensions or manually define custom sizes, and then download the assets without needing external tools. This solution simplifies workflows by allowing users to crop, resize, and download in a single, seamless process, reducing reliance on external software and improving efficiency.

Delivering value to users by

  • Saving Time by enabling users to crop and download assets in one seamless workflow, eliminating extra steps and the need for third-party editing software.

  • Providing Customization with preset ratios and freeform cropping, allowing users to adjust assets based on project requirements.

  • Ensuring Accuracy & Control by allowing users to manually draw crop boxes or use predefined options, maintaining precision and brand consistency.

  • Enhancing Convenience by integrating cropping directly into the DAM, reducing friction in asset preparation and streamlining content creation.

The Discovery

To kick off the discovery phase, I began by reviewing the requirements gathered by the product manager. From there, I conducted a competitive benchmark analysis on platforms with cropping functionality.

Goals of the Benchmark:

  • Affordances: Understanding how competitors present UI components such as presets, input fields, custom ratios, and resizing options.

  • Usability: Identifying common patterns for scaling images within cropping experiences.

  • Previewing: Exploring how users can see their work in progress, including draft states and transparent backgrounds.

  • Tools: Determining essential tools expected in cropping experiences, such as rotation, zoom, and the ability to save views.

Canto competitor benchmark
Dash Competitive Benchmark
Other competitor benchmark

Recommendations following the benchmark

    • These options should be organized in a way that makes it easy for users to differentiate between actions, grouping similar presets, custom options, etc.

    • Users should be able to quickly decide what type of cropping they need.

    • A clear visual affordance is necessary to support decision-making.

    • Users must be able to accurately input cropping specifications.

    • Aspect ratios should remain intact when resizing an image.

    • Users should be able to see their work in progress.

    • Providing the ability to confidently commit to changes without hesitation is important.

    • Including an option to restore the original state or undo changes would enhance usability.

    • Rotation is a feature that users find delightful in many cropping experiences. Depending on desirability, this could be an opportunity to differentiate our product.

    • Zoom is available in some competitor offerings and could be another potential advantage for us.

    • The ability to save a view, which exists in competitor products and our current product.

    • Supporting downloads in multiple file formats, such as JPEG and PNG.

    • Providing options for adjusting resolution.

What the concepts looked like before I converged on the solution to test with users.

This is the first concept of designs.

Research & Key Findings

Unmoderated usability testing

Approach

  • We will be conducting 5 unmoderated usability sessions.

  • Targeted users that meet the persona of the recipient/collaborator archetypes

    • Diane - Multimedia Specialist

    • Steve - Video Marketer (Designer, marketing, etc.)

    • Barry - Public Relations Director

Objectives and key questions to be answered

  • Efficiency

    • Validate that this streamlines the crop/download process of using assets

      • Reducing the need for having to go into Photoshop

    • Validate that this simplifies the adjustment phase

    • This will give time back to our users

      • Time to task will help provide insight into this objective

  • Tooling

    • Users have the appropriate tools they need to complete their jobs

  • Usability

    • Users can easily interact and use different features

What we learned

Efficiency

  • Testing confirmed that the streamlined crop/download process significantly reduced the time users spent managing assets.

  • Users no longer needed to switch to Photoshop for simple cropping tasks, validating that the feature simplified the adjustment phase.

  • Time-on-task data supported that this feature gave users time back by making cropping and downloading more efficient.

Tooling

  • Users had access to the essential tools required to complete their tasks effectively.

  • The ability to select aspect ratios from a dropdown, preview changes, and quickly apply crops provided a seamless experience.

Usability

  • Users found the image cropping functionality to be intuitive and easy to use, requiring only a few clicks to complete the process.

  • The ability to quickly resize, share cropped images, and preview changes without additional complexity was highly valued.

  • Customization options, such as choosing file formats and image quality, were positively received, with users appreciating the flexibility and control.

  • The feature was consistently described as "nice" and "really nice," reinforcing its usability and overall positive reception.

Design Refinement

An intuitive enhancement to the asset cropping experience—seamless in-platform cropping and downloading. Users can effortlessly refine images directly within the interface by selecting preset aspect ratios or manually adjusting the crop box. Once finalized, the cropped asset is instantly available for download, eliminating the need for external editing tools. This streamlined workflow simplifies image adjustments, enhances efficiency, and ensures users can quickly prepare assets for their intended use—all within a few clicks.

Key Learnings & Next Steps

Benchmarks and rapid iterations were key to driving innovation and convergence. Benchmarks helped us understand industry standards and user needs, while rapid iterations allowed continuous testing and refinement based on user feedback. This approach ensured we remained focused on user needs and business goals.

Next steps:

  1. Feature Requests and Enhancements: Prioritize the feature request to enable users to specify exact crop box dimensions. Also, focus on supporting legacy methods for creating share links and embed codes with cropped images while considering the development of a "Create Your Own" feature for share links in future releases.

  2. Customer Feedback and Continuous Improvement: Continue tracking user feedback, particularly around freehand cropping and output resizing, to refine the feature. Monitor and evaluate feature requests like specifying crop box dimensions for future iterations.