2022.01 — 2023.02
Ａ new noise reduction product/service.
We want to provide the user with a better denoise experience, and give the user advanced functions in the denoise field.
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.
Product Designer
User Interview
Usability Test
User Flow
Wireframe
Design System
Iterations
Figma
1 PM
1 Android & iOS Engineer
1 Front-End Engineer
Get to know more about persona, user journey and their pain point
Define questions and problems
Figure out the solution
Validate ideas（Tracking data & User Interview & Usibility Test）
Get to know more about persona, user journey and their pain point
Define questions and problems
Figure out the solution
Validate ideas（Tracking data & User Interview & Usibility Test）
To get to know our users, their user journey, and how to make our product user-friendly, we had the user interview and usability test. After that, we hold a workshop to analyze the data and portray the target audience profile.
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. "
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
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, so we may lose users.
Users are not sure if the post-noise reduction video is the output of noise reduction or the original video.
Voice and background sound, if set to the same value, actually results in no reduction of either background sound or voice. It also may lead our users to think that the product is ineffective.
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.
Based on our user research, we found that the noise reduction effects varied for each video. Also, our product is new to the market. Some files show little difference between before and after noise reduction, making it difficult for users to experience the product's noise reduction capabilities. It will lead some users to think that our product is not effective so we will lose our users.
Users said if a large number of files need to be downloaded, it is preferable to rename the files during the editing process for easier organization after downloading. Renaming the files only at the time of downloading would require individually checking each file, which is more cumbersome.
Currently, it can only be modified on the APP.
Inconsistent default icons and premium badges (crown icon) between the APP and the Web.
While users edit the file, they are not sure whether the file will be saved with the currently adjusted background sound and voice ratio or not.
When users complete adjusting the audio and share the link with others, they anticipate the shared page will reflect their real-time noise reduction settings.
However, instead of displaying the user's specific adjustments, we provide a before-and-after comparison showcasing our noise reduction capabilities. This approach allows us to highlight our expertise in noise reduction on this webpage.
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.
In order to indicate the buying status, the button will be disabled. After users purchase the product in the member center.
The denoising effect of some files may be bad when users listen to the output. To prevent users from misunderstanding our product, I believe visually demonstrating the differences between filters can help users recognize the distinct states of each filter when switching between them.
When users click on the filter buttons, the ratio of background sound to voice will be displayed.
However, the slider, background sound, and voice levels remain unchanged, except for the customized button, highlighting the variations among the 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.
Add the edit function of the file name.
Make the prime icon the same between different platforms.
The original audio separates the voice and background sound, placing the voice on one side and the background sounds on the other. This ensures that the total proportion of voices and background sounds always adds up to 100%, so any adjustments made by the user will result in different values for each.
Moreover, considering responsive web design (RWD), icons are used instead of text for presentation.
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.
Compared to the popular editing tool, I found that these product’s default settings are autosave. But Figma doesn't show the toast to tell users that it has an autosave function. It only shows the toast when the file has unsaved changes.
Our product is new to the market like Canva, so we can take Canva as the main reference. I show the autosave toast before they start editing is a good way to tell users that we have this function.
Fail to autosave:
As for the situation of failing to autosave, Google Docs, and Canva. Their design is when the connection fails, an "Offline" toast will pop up, and the user will not be able to edit the file.
Thus, I show the toast to remind the users that users will be unable to perform editing.
To meet the expectations of both sides (company and user’s expectations), I added a button to allow users to switch the optimal denoising ratio and customized denoising ratio.
Additionally, display the denoising ratio value at the bottom to visually indicate the user's current status when they toggle between the optimal denoising ratio and the customized denoising ratio.
Change to default as public for easy sharing of users' creations.
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.
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.
8. Design decisions must prioritize business value, considering company resources and stakeholder communication. Design is more than just decoration—it's integral to business success.
#AI Meeting Record ＃UX Design ＃UI Design #Design System ＃B2C ＃Ｂ2B ＃AI ＃APP
＃Website ＃UX Design ＃UI Design #Design System ＃Ｂ2C
＃Marketing Campaign Website ＃UX Design ＃UI Design #Design System ＃Ｂ2C ＃AI Denoise
Line ID: hmc10116