A project demonstrating how to make complex layer editing effortless and efficient to enhance productivity.
View prototype
This project focused on redesigning Vyond’s layer editing functionality to address critical user pain points around asset selection and editing. Intuitive workflows were introduced to reduce video editing time and enhance user satisfaction. The enhancement received highly positive feedback, with nearly all users rating it 5 out of 5.
Vyond users struggle with layer editing due to unintuitive controls and inefficient workflows. Editing back layers requires moving multiple assets, disrupting compositions and slowing progress. On average, users spend 153 minutes rearranging assets per video.
A streamlined layer editing feature could halve this time, saving 76 minutes per video and driving higher feature adoption and engagement. This improvement is projected to generate an estimated $80K in monthly recurring revenue (MRR) through increased productivity and reduced churn. This project aimed to enhance layer visibility, organization, and editing controls to improve both user experience and business outcomes.
User Research, User Experience Design
For this project, I have followed IDEO’s Human-Centered Design Thinking process to go through the user research and support my design decisions.
I began by reviewing user feedback and previous research insights, followed by an in-depth user interview. From there, I conducted an affinity mapping exercise to identify key patterns and pain points.
Currently, Vyond offers an asset view that allows users to switch from the stage view to gain an overview of assets across single or multiple scenes. In this view, users can edit properties—such as replacing or deleting assets—and perform bulk actions. However, the current design has several limitations:
First, the stage view and asset view are not integrated into a single interface, forcing users to switch back and forth between views rather than having a side-by-side comparison to observe changes in real time.
Second, the layering functionality within the asset view is limited to replacing or deleting assets, with no option to edit layers directly.
Lastly, assets are displayed from left to right (representing bottom to top in the layer order), which is counterintuitive and inconsistent with standard layering conventions.
I gathered insights through a follow-up user interview and a bottom-up affinity mapping exercise, synthesizing key pain points related to layer editing from previous research and user feedback.
The affinity mapping exercise resulted in six synthesized themes: Selection Challenges, highlighting difficulties in selecting assets within complex scenes; Editing Difficulties, revealing struggles with editing back layers without rearranging other assets; Layer Order Confusion, indicating that Vyond’s layer stacking order feels counterintuitive compared to industry standards; Stage and Timeline Inconsistency, where users experience misalignment between timeline and stage layering; Group Functionality Limitations, pointing to constraints when grouping assets; and Animation Issues, identifying problems with advanced animations overlapping other assets.
From the six themes, we prioritized Selection Challenges and Editing Difficulties due to their impact on productivity. I then mapped the current user journeys for selecting and editing assets in the editor, ensuring a shared understanding of the pain points and aligning our perspectives for the ideation phase. This mapping revealed inefficiencies in the asset selection and layer adjustment processes.
.png)
Armed with these insights, I began exploring potential solutions to address these challenges. I focused on two key questions:
◆ How might we provide a comprehensive overview of assets with proper layering?
◆ How might we facilitate the rearrangement of asset order?
I framed these challenges as "How Might We" (HMW) questions to guide the brainstorming process and generate solution ideas:
HMW: Provide an Overview of Assets?
◆ Integrated View: Merge the asset view and stage view into a single, unified interface, allowing users to reference and edit asset properties while simultaneously viewing changes on the stage.
◆ Dedicated Layer View: Implement a layer view that displays all assets individually for clearer scene management.
HMW: Rearrange the Order of Assets?
◆ Drag-and-Drop Interaction: Enable users to intuitively reorder layers using a drag-and-drop mechanism.
◆ Contextual Menu Options: Add ordering controls—and potentially a lock feature—within the existing contextual menu for quick adjustments.
◆ Visibility Controls: Allow users to hide top layers or specific assets on the stage while keeping them accessible via the timeline to address UI issues.
◆ Adaptive Selection Box: Adjust the selection box to match the shape of the assets for more precise selections.
This ideation process lays the foundation for developing solutions that streamline layer management and enhance overall video editing experience.
To draft effective solutions, I began by collaborating with engineers to assess the technical feasibility of the Integrated View concept, as it offered the most promising solution to address user pain points. Understanding potential technical constraints upfront was crucial to ensure the ideation process remained grounded in what was achievable. Once feasibility was confirmed, I moved forward with crafting detailed solutions that directly tackled the identified pain points. My focus was on designing intuitive interfaces and interactions that aligned with both user needs and technical limitations. This phase involved translating concepts into practical solutions that integrated seamlessly within the existing architecture, enhancing the overall layer management experience.
The core solution centers on enhancing the existing asset view to support layer management, including:
◆ Layered Asset Overview: Display all assets in a hierarchical list, ordered from top to bottom, reflecting their stacking order on the stage.
◆ Contextual Menu Options: Add layer management controls, such as Order and Lock, directly within the contextual menu for quick access.
◆ Group Asset Management: Enable users to view and manage all child assets within grouped assets.
◆ Drag-and-Drop Interaction: Introduce drag-and-drop functionality for reordering layers, aligning with users’ established habits.
◆ Enhanced Bulk Editing: Expand bulk actions to include bulk lock and bulk re-ordering to increase efficiency.
This solution aims to streamline asset and layer management, providing users with more control and flexibility while maintaining an intuitive and familiar workflow.
In response to stakeholder feedback, I refined the multi-scene approach while maintaining a user-centered perspective. The key adjustment was retaining the existing asset view for multi-scene selections instead of using the layer view. This solution preserves familiar interactions while introducing enhancements to support user workflows:
◆ Display by Source of Asset: Group assets by their source rather than by layer order.
◆ Order by Frequency of Use: Prioritize frequently used assets to help users quickly find commonly needed items.
◆ Consolidated Asset Overview: Provide total usage counts for each asset across multiple scenes, reducing repetitive scene-by-scene reviews.
◆ Improved Group Asset Indicators: Enhance the UI for grouped assets to increase clarity and usability.
This iteration integrates feedback while enhancing the user experience, aligning improvements with both business priorities and user workflows.
Click here for final solution
We received very positive feedback on this enhancement, with nearly all users rating it a perfect 5 out of 5. This response highlights its immediate value and effectiveness in addressing user needs. To ensure long-term success, we will continue gathering feedback, analyzing data trends, and exploring opportunities for further refinement based on user interactions.
