SoundClear Studio Workflow Enhancements

 

Overview

When Cirrus Logic Applications Engineers began requesting improvements to how they navigated between open panels in SoundClear Studio, we identified a set of recurring pain points: it was difficult to tell which system a panel belonged to, tabs did not resize and were often hidden off-screen without any indication, and keyboard and scroll navigation was unpredictable or nonexistent (depending on operating system). These small frustrations added up to a cumbersome experience that slowed down users engaged in real-time configuration and testing workflows.

 

Role

UX Lead for this project

Team

Me, two Software Developers, and one Software Architect

Timeline

In development

 
 

Because each panel in SoundClear Studio opens in its own tab—and users often work with multiple panels across several systems simultaneously—it’s common for engineers to have a large number of tabs open at once. This created a crowded and disorienting experience, especially when it was unclear how tabs related to underlying systems or when tabs disappeared off-screen.

 

The titles of the first and last tabs are cut off.

To address these issues and lay the groundwork for future improvements, I led the design of a comprehensive update to the primary tab system, focusing on usability and user-defined organization. The tab redesign is part of a broader initiative to replace legacy JavaFX components that no longer support our evolving product needs.

Key Problems We Solved

 

  1. Unclear System Context: Users couldn’t easily tell which system or device a panel was associated with, especially when working with a mix of systems and devices across different hardware setups.

    • Solution: System names are now displayed directly on the tab surface, making it easier to differentiate between panels with similar names. Tooltips also contain device and board information where applicable.

  2. Inefficient Tab Navigation: Tabs did not dynamically resize, causing overflow issues. Users didn’t realize their tabs were off-screen and often missed the existing overflow menu.

    • Solution: Tabs now behave more like modern browsers (e.g., Chrome), resizing only after the user exits the tab area. We added a persistent, discoverable overflow menu that gives users a clear path to panels out of view.

  3. Lack of Organization Options: Users couldn’t group tabs and had no keyboard shortcuts to move between tabs.

    • Solution: We introduced user-defined tab groups that allow users to drag, rename, collapse, and reorganize panels. Navigation is now possible via keyboard, and group behavior follows thoughtful logic when collapsing or disconnecting systems.

 

Enhancing Visual Clarity and Consistency

The updated tabs include a subtle but impactful visual refresh:

  • Sizing: consistent sizing, min/max/width, and responsive resizing behavior

  • Text: a second line of text displaying system information, truncation logic

  • Visuals: improved padding and consistent corner rounding, in line with our new design system

 

Tab Grouping: Designing for Scale and Flexibility

A key architectural decision in this project was choosing between system-defined and user-defined. In a system-defined model, tabs would be automatically grouped based on the underlying hardware system or device.

User-defined grouping, by contrast, would give engineers full control to organize panels in ways that reflect their specific tasks.

 

In this example, the user would be electing to group their tabs by panels and register maps.

Initial Concepts

They did NOT like the orange creamsicle color. This is why we test our ideas!

We explored system-defined groupings and showed concepts to users. While this 1x1 mapping is more visually simple and reinforces the user’s mental model of their hardware topology, we found that engineers prefer to group panels by workflow rather than by hardware hierarchy.

This led to a new design offering a more flexible experience. In future iterations, we plan to build on this structure to support saved workspaces and persistent tab states across sessions.

User Defined Tab Grouping: Interactions

The new tab grouping system mirrors familiar browser interactions, allowing engineers to manage their open panels. With grouping enabled, users can:

  • Drag and drop tabs into groups or reorder them within and across groups

  • Rename groups to reflect workflows, systems, or task types

  • Collapse and expand groups to reduce clutter or regain screen space

  • Access group-level actions via a right-click context menu, including close grouped tabs, ungroup, and move to a second window

 
 
 

In this example, the user has two groups, one containing panels, and the other containing register maps- all from different systems.

Results

While this work is part of an ongoing initiative, the first phase of improvements to the tab system has received strongly positive feedback from engineers. With redesigned JavaFX components now in place, users can:

  • Quickly scan and navigate dozens of panels with consistent sizing and improved readability

  • Easily locate hidden tabs thanks to improved overflow behavior and persistent access to the overflow menu

  • Rely on a more predictable and familiar experience, with styling and resizing patterns inspired by modern browsers

Tab grouping is currently being implemented in an upcoming release as part of a larger cross-functional effort. These foundational improvements will not only solve key usability issues, but also pave the way for more scalable workflows and advanced organizational features.

 

Streamlining Layout and Navigation Across the Application

In addition to the tab improvements, I redesigned aspects of the broader SoundClear Studio workspace to improve overall usability and cohesion. Before and after:

 

New Vertical Pane

SoundClear Studio’s UI is composed of three primary panes: the Navigator (left pane), the Panel Content area (center), and the History/Console pane (bottom). Prior to this redesign, the top of the Navigator included wide bar containing only 3 buttons:

  • Expand/Collapse

  • Execute Script

  • User Profile (depending on account type).

I collapsed this bar into a simplified menu above the left pane, instead of it spanning the entire application. This reduces visual noise and creates more room for meaningful content.

 

Navigator Icons

I also updated the full icon system for the Navigator pane, as part of a larger effort to improve how we show hardware topology in SoundClear Studio. I redesigned them to match the visual language of the Material 3 icons used in the rest of the software.

This improved legibility and makes it easier to differentiate between parts of a user’s hardware system, and received positive feedback when speaking with users. 

 

Summary and Next Steps

The goal of these changes, combined with the redesigned tab system, is to make the application feel cleaner, faster, and more modern, allowing users to focus on their configurations and workflows.

The first phase of tab enhancements has launched successfully, but the introduction of user-defined tab grouping is still in development. This is a major shift in how our application handles workspace organization, requiring close collaboration with engineering to support the wide range of user behaviors and technical edge cases.