Noise Eraser APP & Website

Solution

This redesign focused on three main goals:
(1) Reduce ambiguity in how the denoising works,
(2) Offer users both default simplicity and advanced control,
(3) Build user confidence in the system through clear status feedback and shareability.

1. Make the usage status clear

‍Option A (Chosen): Disable the purchase button and show a “purchased” status after users buy the product
Option B (Not Chosen): Keep the purchase button active regardless of buying status, and notify users only after clicking

Why A over B?

From the user’s perspective:

• Clarity and confidence: Users immediately know they’ve already bought the product, without second-guessing or needing to recall past actions.
• Reduces frustration: Prevents the awkward experience of clicking a button, only to be told after the fact that the purchase has already been made.
• Supports trust: Clear system feedback builds user confidence that the platform is reliable and well-designed.

Rationale:

• Immediate visual feedback: A disabled button with a “purchased” label communicates system state clearly and reduces ambiguity.
• Minimizes unnecessary interaction: Avoids leading users into dead-end or redundant flows that can cause confusion or doubt.
• Follows established design patterns: Most subscription-based platforms (e.g., Adobe, Zoom) disable purchasing actions for already-owned content to reinforce state awareness.

Collaboration & Constraints:

After discussion with the PM and engineers, the team aligned on prioritizing user clarity and reducing support burden.

• PM highlighted recurring support tickets from users uncertain about their purchase state.
• Engineers confirmed that real-time purchase verification and UI state updates were technically feasible.

Validation:

• This pattern was validated by comparing with UX benchmarks from subscription-based services (e.g., Adobe, Zoom).
• Post-release feedback showed a noticeable drop in “accidental re-purchase” attempts and helped reduce user support tickets regarding purchase status.

Option A (Chosen): Remove the play button from the thumbnail
Option B (Not Chosen): Keep the play button to allow quick preview of the video/audio

Why A over B?

From the user’s perspective:

• Prevents misunderstanding: Users expect that pressing a play button will preview the final, noise-reduced version. Playing the original audio instead creates confusion and may lead them to falsely believe the tool hasn’t worked.
• Preserves trust in system behavior: When users don’t get what they expect, they may lose confidence in the tool’s reliability — especially in tasks involving audio quality where perception is subjective.
• Reduces cognitive friction: Users can more easily focus on the next actionable step (e.g., “Edit” or “Download”) without being sidetracked by an unclear playback experience.

Rationale:

• Avoids false expectations: A play icon implies readiness and completeness, which conflicts with the actual system state if the noise reduction hasn’t been applied yet.
• Clearer process communication: Replacing the play icon with status labels such as “Processing”, “Edit”, or “Complete” more accurately reflects the current file state and guides users toward the appropriate action.

Collaboration & Constraints:

PMs raised concerns that confusion around the play button could reduce user trust in the product’s effectiveness. The technique is feasible.

Validation:

Ppost-launch feedback indicated a decrease in support tickets and user confusion regarding the noise reduction status.

Why Choose Option A Over Option B?

Chosen (A):
Use a gray but draggable slider for preset filters (e.g., “Clear,” “Natural,” “Background Focus”) to visually indicate fixed values, but still allow user interaction. When adjusted, the system switches to a “Custom” mode.

‍Not Chosen (B):
Use a fully disabled (non-draggable) slider in preset filters to reinforce that these settings are fixed and not meant to be adjusted.

Rationale:

• Transparency: Users can see the underlying logic of each preset (i.e., how much voice/background mix it applies), rather than treating it as a black box.
• User control: Letting users adjust the slider gives them freedom to personalize while starting from a default.
• Clarity: Once the user changes the value, the label switches to “Custom,” helping them understand they’ve diverged from the preset.

Trade-off:

• Option A may cause slight confusion — users might initially assume the gray slider is disabled.→ To mitigate this, we ensured the switch to “Custom” is immediate and visually clear after any interaction.
• Option B would enforce rigidity and prevent accidental changes, but limits exploration and reduces user sense of control.
• A introduces slightly more interaction complexity, but results in higher perceived transparency and flexibility.

Technical / Business Constraints:

• Business: Some users upload audio files with very low background noise, making denoising effects less noticeable. By showing preset ratios and allowing adjustments, the UI helps communicate: "The filter is doing something — your input just doesn’t need much correction."

Validation:

• In early usability testing, users who didn't hear an obvious difference still recognized the UI feedback, which reduced frustration.
• Users appreciated having a “starting point” but also the ability to customize — reinforcing trust and improving perceived value of the product.
• This design aligns with UX principles:

• Visibility of System Status
• User Control and Freedom
• Progressive Disclosure

3. Unify the app and web user experience. Reduce the learning curve and increase user retention rate.

Add the edit function of the file name.

Make the prime icon the same between different platforms.

I refer to Canva and Google Slides which are popular editing tools, and I found that they use tooltips to help users understand the icon's function.

To decrease the user's learning curve, I follow their solution. When users hover over the background and voice icon, a tooltip notification appears above the icons on the web. Moreover, as for the mobile version,  it will show the tooltip for several seconds when the users jump to this page.

When users click the different buttons, a tooltip notification appears on the video to inform the user of the currently used filter.

Collaboration & Constraints:

Technical Constraints: On mobile, hover interactions aren’t available, so engineers had to build a time-delayed tooltip display logic.
Business Consideration: Improving new user onboarding and retention was a key metric, making the investment worthwhile.

Validation:

This solution aligns with established UX best practices (e.g., Nielsen Norman Group’s heuristics).

4. Add real-time autosave notifications (Autosave Toast) → Inspired by Google Docs & Canva, reducing operational uncertainty.

Design Overview
We added a real-time autosave toast notification that appears as soon as editing begins, clearly communicating to users that the system is autosaving their changes. Additionally, when autosave fails (e.g., due to a connection issue), we display a “disconnected” toast, warning users that edits will be paused.

From the user’s perspective:

• Reduces cognitive burden: Especially for new users unfamiliar with the product, it's often unclear whether their edits are being saved. The toast provides immediate reassurance — “you don’t have to worry, your changes are safe.”
• Prevents invisible failure: If the internet disconnects mid-session and no feedback is shown, users may continue editing in vain. A visible alert ensures users are aware that saving is temporarily paused.
• Supports mental model formation: Mature users of tools like Google Docs may expect autosave, but new users of early-stage products often need explicit confirmation. This design helps them quickly understand how the system behaves.

Why we chose this approach:

Our product is new and unfamiliar to most users. Unlike mature platforms such as Figma or Notion, we cannot rely on implicit user trust. Instead, we chose to proactively build confidence through clear, real-time system feedback. The autosave toast acts as a lightweight but highly effective mechanism to achieve that.

Collaboration with PM and Engineering:

• PM feedback: Supported the idea that early-stage products need stronger reassurance mechanisms. PM emphasized the importance of onboarding confidence and visibility into system behaviors.
• Engineering feedback: Confirmed that the toast logic was straightforward to implement. Toast triggers were event-based (on connection + on edit start), and would not introduce performance issues.

Technical / Timeline / Business Constraints:

• Technical: Implementing autosave itself was already part of the core logic. The toast system was lightweight and used the same toast component for reuse.
  
• Business: As a new tool in the market, building trust through clear system status is crucial. We cannot assume that users know autosave is present unless we visibly confirm it.

Validation:

UX benchmark reference:

• Google Docs / Canva: Actively show “All changes saved” feedback, even for small edits.
• Figma: Silent autosave by default, only warns when there's a failure — which works well for experienced users, but can confuse new users.

This decision supports Nielsen Norman Group’s usability heuristic:

• Visibility of System Status – users should never be left guessing what the system is doing.
• Error Prevention – showing failure states helps avoid wasted effort during connection issues.

5. Balancing Brand Showcase with User Needs: Optimal vs. Custom Denoising Ratios

"In testing, 4 out of 5 users said they preferred sharing their custom result over the system-recommended one."

Feature Overview:
‍We designed a toggle allowing users to switch between a system-defined “Optimal” denoising ratio and their own “Custom” settings. The current ratio is always displayed clearly in the UI, and whichever ratio is active will be applied when sharing the output.

Background Context: Brand Priorities vs. User Intent

• From the company’s perspective, the Optimal ratio showcases the full power of our denoising algorithm—delivering the cleanest result possible to highlight technical excellence and promote the product.
• From the user’s perspective, however, they want to share the version they personally fine-tuned—whether to retain more ambient sound, preserve vocal warmth, or fit their content style.

This feature was designed to balance the company’s need for consistent brand representation with users’ need for personal control and authentic expression.

User Perspective:

• I want to share the version I adjusted—not the one your system thinks is best denoise effect.
• The ability to switch modes and see the exact ratio applied builds transparency, trust, and control—all crucial for confident sharing.

Why We Chose Option A (Toggle + Ratio Display) Over Option B (Fixed Optimal Only):

Rationale:

• Enables both quick publishing (Optimal) and personal refinement (Custom) without friction.
• Provides visibility into what’s being applied, avoiding confusion or mismatched expectations.
• Builds product credibility by empowering users with choice—not locking them into a one-size-fits-all solution.

Collaboration with PM & Engineering:

• PM feedback: Strongly supported the dual-mode model. It aligns with product goals by catering to both casual and advanced users—boosting publishing speed while supporting nuanced customization.
• Engineering feedback: Frontend toggle logic and ratio value display were straightforward. Switching the default sharing mode was a minor config change.

Technical / Business Constraints:

• Technical: Toggle and ratio display are purely UI-level implementations. No additional back-end load or algorithm recalculation is required.
• Business:

• The Optimal ratio ensures brand consistency and helps demonstrate the algorithm’s full capability.
• The Custom mode increases user satisfaction and promotes content that better represents creators’ intent.
• Defaulting to public sharing encourages exposure and organic reach, especially when paired with a streamlined publishing flow.

Validation:

This solution supports key UX principles:

• Visibility of System Status – Users always know what setting is active.
• User Control and Freedom – No locked-in presets; users remain in charge of their output.