Designing the flonnect’s video editing experience : Case study

Overview

Flonnect is a popular platform for screen recording and sharing, used by individuals and teams for creating tutorials, demos, and explanations. While Flonnect already offered basic video editing, users requested additional features and functionality. Addressing these needs while maintaining ease of use and scalability was the key challenge.

Role

Product Designer

 

Responsibilities

Brainstorming

UI/UX

Prototyping

Team

Gautam – Product lead

Anosh pinto – Product designer

Khaleel – Developer Frontend

Sujidra – Developer Backend

Problem

The existing video editor was limited in functionality, offering only basic trimming capabilities. Users expressed frustration with the lack of features like video splitting, noise reduction, media integration, and watermarking. Additionally, the editor’s integration within the dashboard posed maintenance challenges for developers.

Vision

We want flonnect to be an all in one tool for individuals, collaborators and content creators, thus we wanted to provide the total value within flonnect to the user to finish the tasks end to end. So having good video editing functionalities was a step forward.

Solution:

It was decided to have a separate video editor interface from the dashboard. Furthermore to address these issues, a user-centric approach was adopted for designing the new video editor. Extensive user research and competitor analysis were conducted to identify user needs and industry trends.

The design process focused on:

User-friendliness

  • The interface needed to be intuitive and easy to navigate for users of all technical expertise.
  • It should leverage existing knowledge of popular video editors in the market to minimize the learning curve.
  • Users should be able to quickly get started with basic editing tasks without extensive training or tutorials.

Scalability:

  • The architecture should be flexible to accommodate future feature additions without impacting performance.
  • The system should be designed in modules that can be easily added or removed as needed.

Layout

How the editor looks when you first see it matters a lot to users. I organized the editor into four parts: Side Panel, Dynamic Panel, Canvas, and Layers Panel. This setup makes it easy to move around and use. I made sure that only the important stuff shows up, so users don’t get overwhelmed with too much at once.

 

Grouping of options

I streamlined access to frequently used options to save users from clicking around too much. By organizing options into categories like Media, Text, Shape, Blur, and Effects, I made sure things are easy to find. For example, Captions are under Text, and Watermark is in the Media section. This helps avoid unnecessary clicks and reduces server costs.

Layer management

I aimed to simplify the Layers panel, an essential spot for users while editing. Instead of showing many layers together, leading to clutter and scrolling problems, I chose to display one layer next to the Flonnect video layer. Users can access all layers using a ‘Show Layers’ button, enabling actions like split, delete, undo, and redo. Zoom controls in the top right corner help in precise editing, and the timeline guides the video’s timeframe and playback. Moreover, each unique layer type—text, shape, media, etc.—is given a distinct color for easy identification in the Layers Panel, enhancing user experience and making it easier to manage layers. These changes were made to simplify editing, reduce clutter, and enhance accessibility.

 

Interacting in layers panel

I focused on essential actions for our needs in the Layers Panel. The key actions like splitting the layer, deleting, undoing, and redoing are easily accessible at the top. Users can also trim by dragging the ends and freely move the layer horizontally to fit the desired timeframe. Additionally, they can make copies and place them elsewhere, and access specific actions by right-clicking. Layer properties are easily editable in the dynamic panel, sorted under Properties, Timeline, and Effects.

Editing the properties , timeline and effects

When users add media, shapes, text, or similar elements, a layer is created, and selecting the element opens the properties and effects panel. This panel is organized into three sections: Properties, timeline, and effects. At the top, there’s an easily editable indication with an icon and name. Next to it, a delete button allows effortless removal of the layer. In the timeline section, users can control when the layer is visible or hidden during specific time frames. The effects panel displays active effects first, which users can edit by expanding the accordion. Additional effects applicable to the layers appear below. Other fields and features follow standard settings for each layer type, as seen in the image below.

Canvas

The Canvas is designed to be interactive, allowing users to directly interact with the elements added—moving, resizing, deleting, and more. Users can also perform right-click actions on these elements. The bounding box colors are matched to the colors assigned to the layers for easy identification and management.

Efficient integration of modals for additional actions:

Introducing modals helps handle extra actions efficiently. For instance, when adding media from the Flonnect dashboard, instead of cluttering the dynamic panel, these actions are displayed in a modal. I’ve chosen to incorporate any additional functions into these modals, aligning with the system familiar to users from the Flonnect dashboard.

Video saving options

Once editing is complete, users can save their work in multiple ways. They have the choice to manually save by clicking ‘save’ or benefit from an automatic save feature every minute. Users can access their files within the Flonnect dashboard or opt to export the video. During export, a modal opens where users can rename the file and see a clear indication of the save location.

Research:

Analyzing other online editors:

I conducted an in-depth study of other online editors by doing Heuristic Evaluation and Comparative Analysis to gain insights into layout and features. Across these platforms, a few commonalities emerged:

1) Side Panel:Used for toggling between options like text, shapes, and media.

2) Options Panel:Offers a variety of selections based on the chosen category (e.g., shapes, subtypes like rectangle or square).

3) Canvas:Where the video content is displayed, and users interact with the added elements.

4) Layers Panel:Allows users to manage and modify layers.

5) Properties Panel:Used for editing layer properties.

Understanding user needs and tasks:

To ensure a strong project foundation, I adopted a user-focused approach to grasp potential solutions. This involved defining various user actions, focusing on two personas: the product manager and content creator.

Some of the tasks of Product Manager’s Post-Meeting Recording Tasks:

  • Reducing noise
  • Adding subtitles
  • Highlighting specific segments
  • Blurring sections
  • Trimming unnecessary parts

Some of the tasks for Content Creators:

  • Removing unwanted segments
  • Adding extra media (footage, images, etc.)
  • Integrating audio elements

This process provided clarity on how the flow can be while prioritization, and elements needed for a user-friendly, powerful, yet minimalist edit.

Furthermore, I engaged with colleagues and contacts to gather insights on their preferences for video editors:

  1. Feedback indicated that many editors feel overwhelmed when faced with numerous panels and options simultaneously.
  2. Mobile editors were favored for their user-friendly interface and ability to facilitate dragging elements around the workspace.

These conversations provided valuable input into the design direction, emphasizing the importance of simplicity and ease of use in the editor’s layout and functionality.

Exploration and decisions:

Layout

I experimented with various layout options by low fidelity wireframing: placing menu options on top, testing flyout panels with layout shifts, adjusting the length of the layers and dynamic panels. Ultimately, I chose the current layout for its simplicity in navigation, prioritization of essential panels, and improved handling for developers dealing with layout responsiveness. The fixed panels in the current layout made it easier to manage without complicating layout shifts for responsiveness.

Layers panel:

Iterating through multiple options, I noticed a commonality in most editors – displaying all layers simultaneously. However, this cluttered interface posed a risk of overwhelming users. Inspired by Adobe Express Editor’s concept of showcasing one layer at a time, I implemented a similar solution. This strategic choice aimed to enhance user clarity and streamline interaction.

Layers selection panel:

Experimentation with layer display options led to a solution involving color-coding for different layer types. Additionally, enabling users to rearrange layers through intuitive long-press-and-drag functionality or by utilizing move-up and move-down options enhanced user control and ease of use.

Buttons/options

I aimed for a consistent design that could be used across all panels with minimal adjustments. I checked various layout options like grid view, list view, showing only the title, only the icon, and titles with icons and short descriptions. Eventually, I chose to use icons, text, and descriptions in a list view as it offered clear communication and a visually appealing format. This design choice also allows for easy addition or removal of features in the future.

Canvas

Opting for a standardized canvas design prevalent across various editors in the market facilitated user familiarity. This decision ensured that users encountered a familiar interface, reducing the learning curve.

Properties panel

Exploration of different styles, ranging from a single-scroll display to tabs and accordion options, concluded with a tabs based design. This choice prioritized accessibility, ensuring users could easily navigate and access the panel’s features.

This exploration journey aimed to refine and optimize each element of the video editor, ensuring an intuitive, user-friendly, and functionally rich design that aligns with Flonnect’s vision of a seamless editing experience.

Testing:

Given the significant shift in the editing experience—initiating a popup to segregate the editor from the dashboard, consequently opening the editor in a new tab and facilitating file synchronization with the dashboard—we needed to gauge user reactions. To assess this, we took a phased approach, initially rolling out a version featuring solely the updated layout alongside the existing trimming feature. This version went live, and to monitor user interactions, we leveraged Microsoft Clarity.

The response was overwhelmingly positive, with users seamlessly navigating the platform and successfully accomplishing their editing tasks. This encouraging feedback served as a catalyst, affirming our decision to progress with implementing the remaining components and features of the editor.

Expected impact:

– Enhanced Content Creation: The new video editor will empower users to create more professional and engaging content, leading to a surge in high-quality videos shared on the platform.

– Increased User Engagement: The improved editing tools will encourage longer editing sessions and increased platform usage, leading to better user retention and loyalty.

– Increased User Acquisition: The powerful editing capabilities will attract new users seeking a comprehensive and user-friendly editing solution.

– Expansion into New Markets: The editor’s advanced features might attract more creators and businesses, opening up new markets and diversifying the Flonnect user base.

Home