2022.01 — 2023.02
Noise Eraser APP & Website
A new noise reduction product/service.
Goal
We want to provide the user with a better denoise experience, and give the user advanced functions in the denoise field.
Product background
Noise Eraser is a market-leading online denoise service. It helps to identify and extract the background noise from the sound file and improve the clarity of the human voice in the audio file.
Role
Product Designer
Deliverables
User Interview
Usability Test
User Flow
Wireframe
Design System
Iterations
Design Tool
Figma
Cooperate with
1 PM
1 Android & iOS Engineer
1 Front-End Engineer
Achievement
+91% Number of active users
+17% Number of members
+5% Total analysis count
+0.61% Total subscription count
+5% Total download count
Get to know more about persona, user journey and their pain point
Define questions and problems
Validate ideas(Tracking data & User Interview & Usibility Test)
User Research(User Interview & Usability Test)& WorkShop
User research insights
1. Unclear state presentation
2. Inconsistency in the operation methods between WEB and APP
3. Features that users intuitively expect but are currently missing
" I'm not quite sure what filter I'm currently using, and I don't know the differences between the filters underneath. "
Problems
1. Unclear state
2. Inconsistency in the operation methods between WEB and APP
3. Missing basic information and functionality
4. The outcome is not aligned with the user’s expectation
1. Unclear state
Account Subscription/Trial Status:
It doesn’t display the plan users buy, so users cannot confirm their recent status.
The noise reduction effects vary for each video. Some files show little difference before and after noise reduction, making it difficult to experience the product's noise reduction capabilities. This may mislead users into thinking that our product is not effective.
Users are not sure if the post-noise reduction video is the output of noise reduction or the original video.
2. Inconsistency in the operation methods between the WEB and APP
Change file name: Currently, it can only be modified only on the APP.
Inconsistent default icons and premium badges (crown icon) between the APP and the Web.
Voice/Noise Ratio Bar adjustment is only presented and adjustable in the 'Custom' mode in the APP. On the Web, it is presented and adjustable for each default set.
Voice and background sound, if set to the same value, actually results in no reduction of either background sound or voice.
3. Missing basic information and functionality
After completing editing, users expect the file will be saved with the currently adjusted background sound and voice ratio and they are not sure whether the product will save it automatically.
4. The outcome is not align with user’s expectation
When users finish the voice adjustment, and share the link with other people. They expect the share page to be the result of the user's real-time noise reduction adjustment, but we provides a before-and-after noise reduction comparison.
When sharing a link, the default setting of the dropdown menu is set up in "private" which doesn't align with the mindset of users who already want to share it with others.
Solution
1. Help users understand their status
When a user purchases a product in the member center, the button for that product will be disabled to indicate the purchase status.
Clicking on other filter buttons(except for the customized button) will display the ratio of background sound and voice. The slider remains fixed which can help users understand the differences between different filters.
Cancel the play button on the thumbnail so that users will not be confused about whether the video has reduced the noise or not.
2. Consistent operation between WEB and APP.
Add the edit function of the file name.
Make the prime icon the same between different platforms.
Also, the original voice and background sound is divided into one side for voices and the other for background sounds, with a total of a 100% ratio of voices and background sounds. Considering responsive web design (RWD), icons are used instead of text for presentation.
When users hover over the background and voice icon, a tooltip notification appears above the icons.
When users click the different buttons, a tooltip notification appears on the video to inform the user of the currently used filter.
3. Add autosave function
Default:
Autosave function.
Show the toast when the user goes to the editing page.
Fail to autosave:
Show the toast to remind the users.
Users will be unable to perform editing.
4. Make the outcome meet the user’s expectation
Change to default as public for easy sharing of users' creations.
Result
The results are in, and the redesign this time around has been successful in many aspects. It has significantly elevated key business metrics and user engagement. We've also received a lot of positive feedback from users.
User Feedback
Design System
Component (Application &Website)
Application
Website
Website & APP UI
1. People are familiar with the meanings of certain icons. Therefore, it is preferable to use commonly recognized icons that align with the accompanying text. When employing less familiar visual styles or icons in conjunction with text, it becomes necessary to educate users about their meanings. Failing to do so may lead to user confusion with unfamiliar icons.
2. Create a core library containing components that can be utilized across all products, streamlining the efforts of engineers and designers. This approach not only saves time but also speeds up the overall product development process.
3. Involving engineers in the research process helps them understand why designers make certain design choices, leading to greater support for designers' ideas and smoother collaboration. Understanding the language of collaboration partners makes communication more convenient for all parties.
4. Recognizing that we may not always be right allows us to be more receptive to different opinions.
5. Communicate with anyone confidently and tactfully, adopting an attitude that is neither overly humble nor overly assertive. Always approach communication from the perspective that benefits both the company and the users.
6. I should assume that the output of design must be somewhere I can improve it, so that I can prevent bias or preconceived ideas, especially having different opinions.
7. When engaging with stakeholders in communication, rather than solely emphasizing the advantages of endorsing design proposals, there are instances where leveraging Loss Aversion psychology can be advantageous. By highlighting the concrete losses that may arise due to subpar design, a more compelling impact can be achieved.
Related Digital Products
Meeting Ink APP
#AI Meeting Record #UX Design #UI Design #Design System #B2C #B2B #AI #APP