Project time:
4 weeks, UXD Challenge, Sept 2024
Tools:
Figma, Google Doc
My Role and Contribution:
UI/UX Design
Project Management, Concept Ideation, Prototyping
AudioWave AI
Challenge:
As secondary participants in this design challenge, we didn’t get to interact directly with the client, which was challenging in knowing if we were going in the right direction they were envisioning.
Research Goals:
Understand more about their primary target user - learners.
How can we improve the user experience for listeners?
What would cause users to switch and start using Audio Wave AI?
Learn more about Audio Wave AI’s competitors and how Audio Wave can stand out.
Overview
AudioWave AI is an emerging startup in the growing Text-to-speech (TTS) market. The company is in its early stage, with a small user base. It wishes to increase traffic to its site and develop a more active and engaged user base.
Research & Discovery
Accessibility
Multiple interviewees described the importance of having multiple ways to upload for convenience.
56.3% of survey respondents said that accessibility is an important factor when choosing a TTS AI tool.
Customization
Users would like the option to customize - both with language options and speed.
We need to identify opportunities to improve the user experience for listeners and learners, mainly focusing on making it more accessible and increasing productivity which will result in customer growth and engagement.
How Might We:
Prioritize and display the features that AudioWaveAI has and offer more features that make their software more accessible to users.
Address pain points and create a seamless experience to engage users and attract new users (learners).
All team members contributed to sketching potential solutions, which were refined through collaborative discussions. Following these evaluations, we proceeded to develop wireframes to bring our concepts to life.
We came up with 3 iterations based on the existing functions: Onboarding, Login, and Project Page. And 3 new functions: Upload Status, Customization, and Batch Editing.
Landing Page (Before)
Onboarding
Intro Page
Login
Upload from Desktop
Customization
Customize or Finish with Default Setting
Batch Editing
Design System
Next Step
Vincy Zhou
UI Designer, UX Researcher
Introducing key features ahead.
After users click “try for free”, the website will take them to the intro page which shows the features that Audiowave AI has to offer.
We wanted to showcase the important attributes and give users an introduction so they feel comfortable and not overwhelmed when they create their project and see customization options. In the intro, the user can see the status of where they are and skip exit at any point.
If they skip or they finish the intro, this brings them to the login page.
“Nearly ⅔ of consumers prefer video under 60 seconds.”
We prioritized showcasing the application's features over a demo video to encourage users to interact directly with the platform. AudioWave AI offers the first 10 minutes of audio conversion for free, enabling users to explore its functionality before committing. However, users currently need to create an account to access voice selection previews.
To enhance accessibility, we included a section on the bottom fold of the landing page where users can download the AW-AI extension for Chrome or other browsers, offering multiple ways to convert text to audio and demonstrating how seamlessly it integrates into daily use.
Additionally, we introduced a top navigation bar to provide quick access to key information, reducing the need for excessive scrolling. This change was aimed at creating a more efficient and intuitive exploration experience for users.
The TTS (text-to-speech) market was valued at 4 billion dollars in 2023 and is expected to grow at a CAGR of over 14% between 2023 and 2032.
A competitive analysis was completed against some of the more popular TTS AI tools in the market.
We synthesized the data from our secondary research, heuristics evaluation, surveys, and Zoom interviews.
We then created personas and an affinity map and classified all the insights we gathered, bucketing them into categories to understand their priorities and define the core problems to solve.
Synthesis
Persona
We created personas to represent our target customers and to empathize and understand their pain points, needs, and wants.
Voice & Language
Landing Page (After)
Login Page (After)
Project Page (After)
Back-end-user interaction.
As users file uploads, a status bar will show the progress. This interaction allows users to know the file is uploading and how long they have to wait.
Meanwhile, users can change the uploading file’s name.
One Click and Customize All
Uploading Status
Customize File Pop Up
Customize multiple files all at once.
Our design offers customization in multiple steps in a user’s journey. Audio can not only be customized immediately after they are uploaded, but also can happen later on the homepage where all the files live- users can right-click to customize, rename, share, or move files.
They can also batch-customize the files by selecting multiple files and changing voices or language altogether.
In one of our user interviews, a nurse who often used TTS applications daily at work emphasized how important it was for him to be able to multitask and how efficiency was the most important to him. We wanted to give the user a seamless experience and be able to save time and make it effortless to use. Trying to make it easier for a user who doesn’t have a lot of time on their hands.
Speed & Batch Editing
More log in options.
Compared to the previous version, the iterated Login page not only allows users to log in with their email but also with other accounts they use more often, such as their Google account.
Login Page (Before)
Project Page
Multiple ways to upload files.
After users log in - it will take them to the “Project page” where they can create the project.
Here they can upload their text files from multiple cloud applications (dropbox, iCloud, Google Drive, and Canvas). They are also able to copy and paste text, and links, or upload a photo of text. (For a future mobile app, they’d also be able to scan text from their phone camera.)
Project Page (Before)
Upload Status
Customize and engage.
Once the uploading is finished, users can either save the file directly with the default setting, or customize the file by changing the language, the speed, and the voice. They would be able to hear the voice sample before saving.
In our user interview, we spoke with a student who is a content creator who often used other’s audio to create their videos to save time. Therefore, we created a “recommended for you” feature where before saving the settings, users can explore audios that others have uploaded and made public. We wanted to use this feature to build engagement and to give new users another way of trying the application with little effort.
Clean, versatile, and modern.
We want this application to have a feeling of simplicity, innovation, and versatility. The current color design system wasn’t versatile enough and gives off a different feeling and the light background made components blend into the background.
We added accent colors to highlight and emphasize actions or buttons. We used dark mode specifically to create a sense of simplicity in the application, draw users’ attention to the important features that stand out, and focus on action.
As secondary participants in this design challenge, we didn’t get to interact directly with the client, which was challenging in knowing if we were going in the right direction they were envisioning. Another challenge we encountered was finding survey participants/ interviewees who use TTS, and coordinating times to talk.
While there were challenges in the design process, it was fun exploring ways to improve the Audiowave AI user experience.
Because of the short timeline, we had to prioritize what we thought was most important. Our future next steps would be:
Usability testing to verify designs and iterating based on user feedback
Explore how we can improve the “recommendations for you” experience
Add on more customizable options
Innovate how the TTS application can be used beyond learners & creators
Find ways to further increase user engagement and hit monthly user signup & goals
Creating a mobile app version
Refine Design system
Appendix
Meet the Team
Jennie Chen
UX Researcher
Jenalyn Hermano
UX Researcher
Affinity Mapping & Key Findings
Landing Page
Efficiency & Productivity
“I see messages from patients and have the program read them to me. When it gets busy I don’t have time to read all of that. I usually used speech to text. I don’t have time to sit down and read. I’m doing another task like assigning patients to a bed as I am listening to my text converted.”
—— Ray, a Nurse at Stanford Hospital
Problem Statement + HMW
Solutions
(Click the image to see details)
(Click the image to see details)
We conducted a heuristics evaluation of AudioWave AI, to learn more about the current usability of the site and how we can improve the experience, prioritize user needs, and create a seamless experience.
(Click the image to see details)
Remote user interviews were conducted to understand the pain points of those who use text-to-speech applications. Four user surveys took place remotely. Participants were recruited from our screener survey.