Meeting Ink APP
#AI Meeting Record ＃UX Design ＃UI Design #Design System ＃B2C ＃Ｂ2B ＃AI ＃APP
Account Center Website
＃Website ＃UX Design ＃UI Design #Design System ＃Ｂ2C
Recruitment APP
#B2B #APP #iOS #Android #UI #UX #Design System #Recruitment
2022.01 — 2023.02
The Noise Eraser App & Web removes background noise to enhance audio clarity, offering an easy way to improve sound quality, especially for voice recordings.
1. Increase user engagement & membership conversion rate
2. Reduce user churn rate & learning curve
3. Enhance consistency between the app and web versions to improve the overall user experience
Noise Eraser is an AI-powered audio noise reduction product that helps users eliminate background noise and enhance speech clarity. It is primarily used in scenarios such as online meetings, content creation, and podcast production.
Market Opportunity:The rise of remote work has increased the demand for improved online meeting audio quality.
The explosive growth of audio and video content has created a need for more professional noise reduction solutions.
Competitive Analysis:Current leading competitors in the market, such as Audio Studio and Dolby, focus on AI-based noise reduction but often lack a user-friendly UI/UX. Noise Eraser differentiates itself by offering low learning curve and high usability, making it more accessible to users.
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）
Competitor Products:
Audio Studio, Noise Reducer, Dolby
Key Findings:
Products are either too basic or overly complex.
Some products are only available on the Android platform.
No volume ratio adjustment feature.
Research Method:
Conducted interviews with 6 users to analyze their behavior and pain points related to noise reduction products.
Key Findings:
1. 66% of users churned due to the inability to clearly perceive the noise reduction effect.
Since the product is new to the market, users are still exploring its functionality. Some videos naturally have minimal noise, making the effects less noticeable.
Without a clear way to demonstrate the feature’s impact, users might misunderstand its effectiveness.
2. 50% of users felt confused due to differences in app and web interfaces.
3. 66% of user are not sure whether our product has auto save function.
4. 33% of user think that the outcome is not aligned with the user’s expectation
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. Users are unsure about the usage status → Lack of real-time feedback leads to a gap in user experience.
2. Inconsistent UI/UX between the app and web versions → Increases the learning curve and affects user retention.
3.Unclear file-saving status → Creates uncertainty, disrupting the workflow.
4. The outcome is not aligned with the user’s expectation→ Reduces productivity and lowers conversion rates.
1.3. Noise Reduction Feature Analysis
User Experience Challenges
Noise reduction effectiveness varies depending on the video. Some files show little difference before and after processing, making it hard for users to perceive its impact.
This may lead users to believe that the product is ineffective, potentially resulting in user loss.
Voice and Background Sound Adjustment
If both voice and background sound are set to the same value, no reduction occurs, which may further reinforce the perception that the product is not working as expected.
Customization & Adjustability
In the APP, the Voice/Noise Ratio Bar is only available in the Custom mode.
On the Web, users can adjust the settings for each default preset.
Since the product is new to the market, users are still exploring its functionality. Some videos naturally have minimal noise, making the effects less noticeable. Without a clear way to demonstrate the feature’s impact, users might misunderstand its effectiveness.
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.
Cancel the play button on the thumbnail so that users will not be confused about whether the video has reduced the noise or not.
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.
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.
.png)
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
#B2B #APP #iOS #Android #UI #UX #Design System #Recruitment
Line ID: hmc10116