Botnoi Voice
Dec 20, 2023
Label
UX/UI
A group of interns took on an incredible challenge to participate in a hackathon for the project “Redesigning the Studio Page: Voice Generation.” These young talents had to pull out all the stops to transform the Botnoi Voice studio page and enhance the overall user experience, with just three days to deliver!
The mission was clear, but also daunting:
The interns had to revamp the Botnoi Voice studio page that helps users generate voices. Given the tight deadline, this project required a mix of creativity, problem-solving skills, and strong teamwork. The goal was to improve the functionality and user experience of the site within the tight timeframe.
Botnoi voice studio front: voice generation
Steps in Revamping the Page
1. Empathy Phase
1.1 User Research + Pain Points
In the empathy phase, the interns focused on understanding the users. They conducted detailed research using Google Forms to gather insights from people who are likely to use the voice creation tool.
Target Audience:
> Gender: All genders
> Age: 18-40 years
> Lifestyle: Creators and professionals interested in producing unique voices for various projects
Insights:
Users want an intuitive and user-friendly interface.
They look for easy customization options to tailor voices to their needs.
Many are interested in using the tool for creative and business purposes.
User survey results and recommendations:
Improve information and functionality: Improve the visibility and prominence of edit buttons and various functions on the website to avoid confusion and make it more intuitive for users.
Scissors and clock icons: Add explanatory notes to clarify the purpose and use of the scissors and clock icons and ensure that users easily understand their functions.
Using color themes: Choose a color theme that emphasizes simplicity, conveys a clear meaning, and is visually appealing. Additionally, increase the font size to improve the readability and balance of the web page.
1.2 Competitor Analysis
To identify improvement opportunities, the interns analyzed the strengths and weaknesses of competing platforms. This helped them pinpoint what Botnoi Voice could do better and more uniquely.
Example: Let's look at the advantages and disadvantages of competitors.
2.Define phrase
2.1 User Journey
The team then mapped out the user journey to spot potential problems and areas for enhancement. This step involved detailing every interaction a user would have with the tool, from selecting a voice to downloading the final audio. The steps go like this:
1. Select the desired voice.
2. Choose the language for voice creation.
3. Enter the text (matching the language).
4. Click to generate the voice.
5. Play the newly generated voice.
6. Edit the voice with options to:
— Adjust speed
— Change volume
— Add delays
— Split text for new voices
— Delete text boxes
7. Regenerate the voice after edits.
8. Download the final voice.
Current User Journey: The team also added a feature to record voices directly via a microphone button.
3. Ideate Phase
3.1 Mid-Wireframe
During the ideation phase, the interns came up with new designs for both desktop and mobile views. Their wireframes addressed several key improvements:
Fresh layout with better-organized components.
Buttons with short, clear descriptions.
New functionality to clone voices by recording or uploading audio.
Larger, easier-to-tap buttons.
Adjusted font sizes for better readability.
Color-coded buttons for clearer function indications.
Maintained a clean, easy-to-navigate design concept.
4. Prototype Phase + Test Phase
4.1 Usability Test
To validate their designs, the interns tested the new layout with the same group of users. Feedback collected through Google Forms showed that around 80% of users preferred the new design.
Areas for Improvement:
Reduce font size slightly
Make the record button more prominent.
Clarify the save and download processes.
Successful Changes:
Clear usage examples improved understanding.
Enhanced customization options made the tool easier to use.
Example of Usability Test
5. Future Phase
5.1 Opportunities
Looking ahead, the interns have identified several opportunities to further improve the Botnoi Voice studio site:
Enhancing UX/UI:
Sharper and clearer graphics.
Less text on the homepage for a cleaner look.
Bigger, more visible icons.
Distinct button colors to minimize confusion.
Improving Download Options:
Allow users to select which voices to download.
Add options for downloading individual voices or the entire project.
Revamping the Points System:
Convert “points” into rewards like discounts or special perks to encourage more usage.
Better Notifications:
Make alerts more helpful and easier to understand.
Provide warnings for mismatched language choices or upload issues, with an option to disable repetitive alerts.
Streamlining History and Sign-In:
Add a history for downloads and deleted voices.
Keep users signed in for convenience.
Auto Save Project:
Introduce an auto-save feature to save progress automatically.
Flexible Access Permissions:
Allow access to some features without requiring a sign-in.
File Import Guide:
Include a guide on the voice generation page for easy reference.
Example of how the team expressed their ideas for the future.
The Experience and the Outcome from “Botnoi Internship Recap (Team UI/XI design) - Revamping the Studio Page: Voice Generation”
The “Revamping the Studio Page: Voice Generation” project at Botnoi Voice was an invaluable experience for the seven interns involved. With just three days to complete their task, they demonstrated remarkable creativity and teamwork.
Key Takeaways
User-Centric Approach:
The interns deeply understood user needs through research and real-world feedback.
Team Collaboration:
The project highlighted the importance of working together to solve problems and develop innovative features.
Innovative Solutions:
Their fresh perspectives significantly improved the Botnoi Voice studio page, making it more enjoyable and easier to use.
In Summary:
Our interns successfully revamped the Botnoi Voice studio's site to bring in new ideas and make voice generation more accessible and fun. Their efforts showed what can be achieved in a short amount of time through creativity and collaboration.
กลับ
