Role:
UX/UI Teamlead

Duration:
7 Months

The challenges
of Audio_

We had a negative feedbacks about usability from customer service, so we started to dig.

The audio editing section was tricky and hard to use. Metrics showed that customers were downloading the edited material without adding any audio components. Whenever a user tried to download edited material without adding audio, the system warned them. Despite this, part of the users (%) proceeded to download the file without audio. When we analyzed the metrics, we found that the audio editing funnel is narrower, indicating that this valuable feature does not performing a positive conversion and needs an improvement. We needed to investigate what happened to the files downloaded without audio.

Our research via user interviews and collecting user feedback (kindly provided by the support department) showed that most of our users prefer to transfer the downloaded material to local editing software for further audio editing.

This could have several hypothesis, we put aside user's behavioral hypothesis and choose 2 interface connected hypothsises:

• The audio editing interface is too complex or unintuitive to navigate.

• Users may find our audio editing features insufficient compared to standalone software.

By triangulating insights from three sources, we identified the main pain point, which provided an opportunity to develop a solution.

The problem statement:

Based on our user personas, and our findings we compiled that:

As an advanced user, Gabe needs more actionable audio functionality, because he wants to mix several types of audio files and control their attenuation and amplification.

Digging deep part-1_

…the Timeline

The interviews revealed that most of the users desperately needed to mix different types of audio tracks with slight overlaps and use volume fade-in and fade-out for smoothing the track change. The system had only one track line for audio, and overlapping was technically impossible. So this required a more holistic approach, as local changes could affect several functional parts of the system that needed to be re-factored.

The confusing part of the audio track line is that the user expects the added audio track to be placed where the cursor is. Current restrictions only allow adding a track in the empty space, which can be frustrating (Img 1). Additionally, the empty space might be far beyond the horizontal scrolling, causing the system to jump to the added place without moving the cursor. This results in cognitive load and flickering, which users may not accept well.

At the same time, since we had similar files on the voiceover track line, a similar solution might be needed. According to Similarity Gestalt, this would require the same type of solution and affordances as for audio track lines. By the end, the user could end up with a crowded timeline filled with many audio chunks.

The solution for this issue could be to consolidate Voiceover and Audio into one type—Audio, which includes both types of files (Img 3). Additionally, we added drag-and-drop functionality, allowing users to move chunks and group them in the most comfortable way (Img 4).

Furthermore, the timeline also had a single voiceover track line for only voiceover tracks to be added. The problem with this section was the fact that both audio and voiceover were accepting similar files of MP3 extension, and the platform could not distinguish voiceover from audio if they were wrongly uploaded (instance: the voiceover uploaded in the audio section would appear on the audio track line, but never on the voiceover track line, and vice versa).

The initial decision was to create a new track line each time a file is uploaded (Img 2). This could solve the problem of precise positioning for the uploaded track. When the user drags the carriage along the timeline, the uploaded file appears exactly where they stopped the carriage.

Img 1

Img 2

Img 3

Img 4

Digging deep part-2_

…the Audio Sidebar

The side bar has the same root separation into Audio and Voiceover. Both tabs are starting from similar actions - Upload (types of upload), and Record (in addition for Voiceover).

The default is Audio tab has an abovementioned uploading actions, and a 2-step toggle beneath, with sections “Music Library” (default) and “My Music” sections.

The Music Library's default section presents platform-provided audio files categorized by genre. Selecting a genre takes the user to a subpage with a full list of audio tracks and a "back" button (Img 5). However, this library doesn't interact with uploading actions, as library files can't be modified by users, and its behavior differs from user-uploaded content.

When a user initiates an upload and selects a file, the system switches to the "My Files" tab and begins the upload process (Img 6). This applies to both audio and voiceover uploads. While the Music Library allows users to choose audio from provided genres, selected files don't appear in the "My Music" section—they only show up on the timeline. Consequently, if a file from the Music Library is deleted from the timeline, it's not stored anywhere in the current project. To reuse it, users must reopen the Music Library and select the genre again. Conversely, files in "My Music" remain in the library after deletion from the timeline and can be reused until manually removed.

Img 5

Img 6

The user flow chart below illustrates the complex and crowded action chain in the sidebar, highlighting the violated visual hierarchy that needs fixing (Img 7).

We aimed to simplify the user flow. One concept was to separate the internal library from user-uploaded files - a scheme used by all six competitors we audited.

We proposed creating a new sidebar section called "My Media" (or simply "Media") for browsing and uploading any media files needed during work, including voice recording. This Media section would allow users to preview (or pre-listen to) uploaded files, add them to the timeline, and delete them from the Media library. This approach would streamline the user flow by reducing decision-making touchpoints (Img 8).

Conversely, the internal Library would be relocated to the "Audio" section, featuring genre chips and file lists with corresponding affordances (Img 9).

Thus, we have simplified the user flow, eliminating the overwhelmingly complex initial process. We've retained the key decision point—choosing between using one's own files or accessing the system's internal library.

Img 7

Img 8

Img 9

Based on the information provided, the key advantages of the proposed solution for the video editing system include:

• Consolidation of Voiceover and Music into a single Audio type, simplifying the interface and reducing user confusion

• Implementation of multiple audio track lines, allowing for more precise positioning and mixing of different audio types

• Addition of drag-and-drop functionality for audio chunks, improving user control and flexibility

• Introduction of volume fade-in and fade-out features, enhancing audio editing capabilities

• Creation of a new "Media" or "My Media" section for easier browsing and management of uploaded files

• Separation of the internal music library from user-uploaded files, aligning with industry standards and improving usability

• Simplification of the user flow, reducing decision-making touchpoints and cognitive load

Existing
Issues_

By the time I developed an early mid-fidelity mock-up of the design, I had resigned from the company. Consequently, I continued the design's development independently, drawing from the extensive User Experience database I had acquired during my employment. To maintain ethical standards and protect the company's interests, I modified several details and the overall brand colors. For the same reasons, I won't present any screens or mention the specific product I worked on, making a comparative analysis of the product's evolution impossible. Instead, I'll outline the design problems I observed and present a design based on my experience.

The current product (here and further - v2.0) struggles with several usability, accessibility, aesthetic, and consistency issues that could be improved.

Colors

The color scheme is outdated and doesn't align with modern concepts, such as the 10-30-60 color combination. The base color—a palette of light blues—is difficult to classify as neutral. This complicates the use of a proper color palette for emphasizing various elements. Additionally, using conventional gray on light blue to indicate a "disabled" state for components is challenging.

• The initial background was set to #FFF (pure white), making it difficult to create visual elevation for menus, flyouts and toolbars. The overall design lacked high-contrast elements and menus, which are typical for Web 3.0 style. As a result, implementing radical solutions for context menus wasn't feasible.

• Some of the AA and AAA importance labels violated WCAG accessibility standards.

Fonts

The font scale choice affects the legibility of several components (hints, timeline scale, etc.). The font sizes of 15px, 13px, and 10px make the platform heavier due to the long decimals in REM units.

Paddings

Inconsistent padding choices blur the hierarchy, making perception of functionality harder.

Layout

While the layout is standard across the industry, it has unused spaces, such as a sidebar that narrows the timeline section.

Icons

Icons are unconventionally small and mostly lack padding, which decreases ease of use. The entire icon set suffers from style inconsistency.

Proposed
Design_

For the new design (v3.0), I proposed a neutral color scheme with the brightest color reserved for the highest level of elevation. It employs the 10-30-60 color concept to emphasize the most crucial elements for achieving the user's goal. The timeline now occupies more space in the interface, yet the overall design feels lighter. I've eliminated 1px dividers and outlines wherever possible, using drop shadows only for hover events and a few selected item states.

The design presented below is for the web platform, as the mobile version is a standalone app with its own distinct design style guide.

v3.0 has its own design style guide (aka "Design System"), icon set, typeface, and components. As a Figma enthusiast, I've packed this design into an atomic structured Design System with variables.

Fade-in / Fade-out
feature_

Designing the fade-in/fade-out feature presented a challenge in balancing user needs with business requirements. Leadership initially directed us to emulate high-end standalone software designs (Img 10). However, this approach raised usability concerns due to the small area for manipulators and questionable clickability of controllersThe design presented below is for the web platform, as the mobile version is a standalone app with its own distinct design style guide.

Img 10. Fade-in / Out functionality of Adobe Premiere Pro (image source: Adobe Premiere Help Guide)

A competitor audit revealed that all six examined competitors used similar slider solutions connected to volume control (Img 11). While some implemented more complex and less user-friendly options, most adhered to this standard approach. Despite this industry trend, senior leadership was not satisfied with the conventional solution.

Img. 11

Img. 12

We had already proposed a vertical volume slider for the timeline toolbar (Img 12). The typical fade-in/fade-out feature uses horizontal sliders, which would create visual dissonance in the layout. This inconsistency would make the design both visually unappealing and unconventional.

The main reason for leadership's requirement was for users to have an audio histogram visible while manipulating the fade-in/out functionality. This was a crucial consideration—the histogram placement was highly preferable.

The solution below (Img 13) allowed us to incorporate both the leadership requirements and conventional solutions into one cohesive block.

Img. 13

and the final design implemented into UI is...

Please note that the final design was not presented to the original company. It has not undergone usability testing and is my exclusive property.

Thank You!

© Rob Abazyan. Designs are copyrighted