research | ideation | design | testing
Boost English skills by engaging videos and gamified practices
Improve users' listening and speaking skills through short and engaging videos on relevant topics, interactive features, and gamified practice to boost their English proficiency.
Responsibilities
User Research
Synthesizing Findings
Ideation & Prioritization
Wireframing
Branding & Prototyping
Usability Testing
Tools
Figjam. Figma
Keynote
Adobe Illustrator
Team
Individual
Timeline
December 2024~March 2025
The users
Intermediate English learners recognize the necessity of improving their fluent communication skills while living in English-speaking countries
Learners often begin studying English at a young age in their home countries, focusing primarily on academic English and exams, which helps build a solid foundation. However, upon moving to English-speaking countries for various reasons, they quickly realize the importance of effective communication in daily life and seek ways to improve their practical language skills.
The Problem
Learners struggle with listening and speaking in conversations with native speakers
Users often encounter challenges in keeping up with the rapid pace of native speakers, understanding different accents, and interpreting slang, idioms, and phrasal verbs. Addressing these difficulties—particularly in comprehending native speakers' conversations and responses—is a crucial first step toward achieving effective communication.
The Solution
VidVibe is an app that improves users' listening and speaking skills through short, engaging videos on relevant topics, combined with interactive features and gamified practice to boost their English proficiency.
The Goal
As an English learner, I aim to create an effective solution to support others facing similar challenges. The ultimate goal is to encourage users to practice and apply English consistently in real-life situations, enabling them to communicate with people who have diverse accents, confidently understand various phrasal verbs, and express their ideas freely in conversations.
How I Got There
Competitor analysis
These apps aim to help users practice through real people or AI avatars
I started by exploring 20 English learning apps and identified five key competitors for a detailed analysis of their strengths, weaknesses, trends, and opportunities. By examining factors like popularity, user base, and industry trends, my goal is to leverage these insights to enhance the user experience and identify new growth opportunities
Topic-based AI-powered conversations
Pronunciation and grammar correction
Step-by-step learning courses with progress tracking
Video-based courses
Opportunity
Enhance user conversations by improving corrections and explanations when integrating an AI avatar.
Short videos of real people repeating sentences
Step-by-step courses
AI chatbot guiding users in conversations
Pronunciation and grammar correction
Opportunity
A more engaging video-based course featuring real people teaching in an authentic style
User interview
I aim to gain qualitative insights and explore English learners' journeys through remote interviews
I conducted remote interviews with 7 English learners from various countries, using a prepared interview guide covering personal backgrounds, initial motivations, current practices, and future aspirations regarding English proficiency. I focused on understanding their frustrations and satisfaction with their learning methods and overall journey.
55
30+
Total of 7 interviews From 4 different countries
55 minute per intervie
30+ following questions
What Amr said...
Key Findings
Amr
Egyptian / Arabic
Level : Advanced
“If you're watching TV show, please do it with the English translation. So you can link what you listen to what you see.”
Insight
Watching TV programs and movies was the most enjoyable and effective way to improve listening, pronunciation, and speaking.
Anita
Taiwanese/ Mandarin
Level : Advanced
“I studied in Scotland. They have very strong accent. So those accents makes me confusing all the time.”
Insight
Native speakers' fast pace made it easy to miss words, and distinguishing between various accents proved challenging.
Trang
Vietnamese/ Vietnamese
Level : Intermediate
“I had a lot of frustrations when I could not express my thinking or my ideas to other people around me.”
Insight
Learners valued real people interactions but struggled with vocabulary to express their thoughts clearly.
Joying
Taiwanese/ Mandarin
Level : Advanced
“...there are some phrases you don’t know, but it's quite common when native speakers are speaking in their daily life.”
Insight
Learners found slang, phrasal verbs, and cultural references in conversations confusing.
Aya
Japanese / Japanese
Level : Intermediate
“Public speaking and presentation are the most difficult. It’s hard to express my ideas.”
Insight
Learners valued real people interactions but struggled with vocabulary to express their thoughts clearly.
Shin-Yi
Taiwanese / Mandarin
Level : Intermediate
“if you don't understand the background, the culture you cannot get into the conversation.”
Insight
Cultural references in conversations added another layer of complexity.
PRIMARY persona
Defining the ideal persona to ensure a user-centered design aligned with needs and goals
After gaining a deeper understanding of the users' needs, goals, and pain points, I focus on cultivating the product's primary persona. This user-centered design approach ensures that the stakeholders are involved and considered in the product's development. My goal is to clearly articulate the user’s needs, align them with her goals, and identify how she can successfully achieve them.
The Opportunity
I identified the problems to be solved and structured them into three POV statements and HMW questions, using them as guiding principles to generate innovative solutions.
brainstorming
Engaging and effective brainstorming methods play a crucial role in generating innovative and impactful ideas
Creative constraints challenge me to think innovatively and meet demands within specific limitations, encouraging deeper creativity. The “Listen Up,” concept developed during the practice session was inspired by the idea of making it “feel like a game.” This concept aims to make the learning process more engaging and enjoyable for users.
Analogous inspiration allows me to observe how others successfully achieve similar goals. For this project, I was inspired by Sider, which offers users a selection of various speakers.
PRIORITIZATION
Identify the feature sets and determine their prioritization through MoSCo analysis
The method helped me narrow the scope and define the key features necessary to develop a functional product that effectively met users' needs. However, I initially prioritized only the basic features, which were insufficient to form the final solution. As the process progressed and the solution clarified, I refined and evolved the features to better meet user needs.
*Business English
*Social connections
Must have
-Various videos with categories
-Practices session for listening and speaking skills
-Search
Captions & explanations
Video control
Accents practice Progress tracking
*Listening podcast
*AI avatar for guided conversation
*Pronunciation correction
Should have
Could have
Won’t have
Task flow
Identify two tasks with distinct viewing modes for users to validate product features derived from the MoSCoW prioritization and enhance the overall user experience
Task 1: The user watches the video "Share Your Thoughts and Opinions with Friends" in horizontal viewing mode, completes the learning processes, and engages in all practice activities.
Task 2: The user views the video "Enjoy Visiting Pumpkin Patches in the Fall" in vertical viewing mode, listens to the audio and lyrics, and engages in a practice session.
Sketch TO MID-FIDELITY WIREFRAMES
Articulate main features to meet user needs and build task flows to map out the big picture of the app
Sketching wireframes with key features helped me dive deeper into the solution with greater clarity. I typically start by listing user needs, then sketch three screens to demonstrate specific use cases, and finally visualize the entire flow to incorporate additional details. In this project, I also identified and categorized topics into three main groups that align with users' interests.
Persona’s need
1
Watch movies and TV shows with subtitles to improve listening and mimic natural speech.
2
Engage in fun and interactive practice to enhance English skills
3
Learn and practice slang, idioms, and phrasal verbs in daily conversations.
Designed features
1
Explore: Video-based courses with clickable captions to quickly browse explanation
2
Practice: Offer four practices for enhancing listening and speaking skills
3
Real-life contents: Learn common phrasal verbs for practical use in real-life situations in the videos
User concept testing
Gathering early feedback on the core structure and functionality of the concept through user concept testing helps identify potential usability issues, navigation challenges, and guides the next steps. This reassurance about the app's usability will make the stakeholders feel confident about its development.
I tested with five users and organized their feedback into affinity maps to identify key findings
Style Tile
Color Palette
Logo
Purple is known for its calming and mood-boosting effects and can also inspire creative thought. The app's dark, near-black purple provides a non-distracting background that complements the video content.
The VidVibe logo concept integrates elements of video, communication, and captions, perfectly aligning with the app's purpose as an English learning platform. It visually represents an immersive and engaging English learning experience.
HIGH-FIDELITY WIREFRAMES
Creating high-fidelity wireframes to represent solutions for enhanced usability testing visually
The high-fidelity wireframe incorporates branding, colors, and design elements to communicate the app’s features and functionalities to users. By creating these wireframes, I aim to provide a concrete visual representation of the design that facilitates better understanding and feedback. I have included four main concepts and two task flows within the wireframe that were tested during usability evaluations.
Onboarding
Main Concept 1
Video-based courses with clickable captions, horizontal and vertical viewing modes, and lyric-only listening options allow users to engage freely in the learning atmosphere
1
Video-based: Users learn through engaging, real-life video content, enhancing their understanding of native speakers' accents, speech patterns, and natural conversations.
2
Captions: Clickable captions for instant word meanings.
3
Podcast mode: Enjoy lyrics-only playback with repeat features for seamless, distraction-free listening without video.
Main Concept 2
Practice with Word Bank and accent selection to improve listening and accent recognition.
1
Learn new words: Automatically save unknown words from videos to the "Word Bank.”
2
Accent selection: Choose speakers to recognize different accents
3
Organize words: Sort words into "Know it," "Unsure," and "New" for easy practice
Main Concept 3
Engage in Listen Up, a fun session to sharpen users’ listening abilities
1
Hear a word? Pop the matching balloon!
2
Hear a word? Whack the right mole!
Main Concept 4
Participate in Speak Up to interact with an AI avatar in the video to enhance speaking skills
1
Speak out loud : The AI guides a Q&A conversation with helpful talking tips for users to follow instead of allowing free speaking without direction.
2
Prompt feedback : Assist learners in identifying their grammar and pronunciation issues for targeted improvement.
Validating process
I conducted remote moderated usability testing with 5 participants to evaluate the video-based English learning app.
The primary goal was to determine if users could enhance their listening and speaking skills by watching short videos and completing four practice sessions.
Testing process: Before the session, I developed a testing plan and questionnaire slides. During testing, I observed testers' reactions to the prototype's task flows, recorded our conversations, and asked follow-up questions based on their questionnaire feedback. I highlighted key points, compiled recommendations for improvement, and organized them into a clear, prioritized document.
Task flow 1:
A user watches the video in horizontal view, completes the learning process, and engages in all practice activities.
Task flow 2:
A user watches the video in vertical view, listens to the audio and lyrics, and engages with Practice 3: Whac-A-Mole.
Validating results
Testers found the app intuitive and user-friendly, expressing satisfaction with its features; however, the visibility of captions as a key area for improvement
Success Metrics
Task flows Completion rate
100%
Task flows
Eefficiency rate
100%
Easy
Overall Satisfaction
100%
Satisfied
"...that's a very interactive application. It gives you the opportunity to keep it up in a consistent way. I like it."
Severity rate : Critical > Major > Serious > Minor
Caption Explanation
100%
Critical
Flashcards
Usage
100%
Major
Search Functionality
60%
Serious
"I think the only thing is, when I did the first task like I don't know that I can click the word"
Key FINDING & adjustments 1.
Guide users to better understand the app with a clear, big-picture onboarding animation
"I didn’t try to click on it and see what’s going on with this. I thought the caption might just sync with the video, like on Netflix."
5/5 participants were unaware that the caption was clickable; users ignored it and kept watching the video.
The practice icon is not easy to recognize.
Original
Testers ignored captions’ explanations during video playback.
Original
Practice icon is not easy to recognize
Revised
Onboarding process: Add guidance and tips for first-time users to explain icons and features.
Key FINDING & adjustments 2.
Improve accessibility for vertical viewing mode
"When I watch the video, I would like to go to the next video, but I don't want to go back to the main page."
Add repeat features in podcast mode for seamless and more effortless listening.
Enhance accessibility by adding the practice icon to the video screen
Original
There is no option to replay the videos continuously
Revised
Add the icons for replaying the video and entering the practice session
Key FINDING & adjustments 3.
Make accent selection clear, easy to follow, and interactive
Original
The accent selection icon is not intuitive
Revised
Use “More >” to guide users to explore more: A straightforward way to address the confusion
"Okay, so there has a different accent. Can I play?"
2/5 users did not realize that the Accent icon is clickable, highlighting the need for more straightforward explanations or a more intuitive solution
Key FINDING & adjustments 4.
Provide clear instructions and visual indicators to help users better understand how to use the Flashcards
Original
Users are confused about how to get started
Revised
Include “Next” and “Back” buttons, a progress indicator with numbers, and clickable tips to enhance navigation
“This one is probably, you know, just like, too simple so, and it doesn't instruct me to go to the next next one, so they can be improved in this part. Just like in my work events, I have 10 or 10 works, but I only see one. I put the confused I will, how next one?”
All five users agreed that Flashcards need more indicators to show users they can swipe left and right or rotate to the next page.
Key FINDING & adjustments 5.
Organize topics into separate cards to help users visualize them, replacing the wordy interface on the search page
Original
Users feel overwhelmed by the excessive vocabulary listed in the Bookmark
Revised
Users can search by key words or explore on the topic cards
"If you are on Spotify, and then you click the Search one, yes, and then it becomes pops out like all kinds of categories, right? “
Classify the three main categories in the search section into sub-category cards with titles.
Key FINDING & adjustments 6.
Organize and group vocabulary into “Already Know,” “Not Familiar With,” and “New to Me” categories for more effective practice
Original
Users feel overwhelmed by the excessive vocabulary listed in the Bookmark
Revised
Users can organize words they find new or already know
"I think that’s useful for organizing vocabulary, especially for reviewing what I don’t remember well. It makes the learning process clearer."
Users cannot review all vocabulary in one place. It should be organized more efficiently.
Key FINDING & adjustments 7.
Add the month and year to the Day Streak for better tracking
Original
Missing date information.
Revised
Provide the date and year.
Day streak lacks data context.
The Problem
Learners struggle with listening and speaking in conversations with native speakers
Users often encounter challenges in keeping up with the rapid pace of native speakers, understanding different accents, and interpreting slang, idioms, and phrasal verbs. Addressing these difficulties—particularly in comprehending native speakers' conversations and responses—is considered a crucial first step toward achieving effective communication.
The Solution
VidVibe is an app that improves users' listening and speaking skills through short, engaging videos on relevant topics, combined with interactive features and gamified practice to boost their English proficiency.
Conclusion & Learned
Summary of my insight from the project
User feedback drives effective improvement
Users are satisfied with watching videos to learn English, and testers highly value the practice sessions.
Vertical viewing mode provides a practical usage.
Horizontal viewing mode offers an entertaining space for users.
Clear instructions for first-time users are key to enhancing their satisfaction.
Users value the new words in the Word Bank, as vocabulary is essential for language fluency.
Challenges I faced
Qualitative user research helped me gain insights to tackle the challenge of numerous effective English learning apps on the market
The primary challenge I encountered was the overwhelming presence of numerous excellent and effective English learning apps and platforms on the market. I struggled to identify better solutions to meet my users' needs and help them achieve their goals. Fortunately, I obtained valuable insights from user research and interviews, where I received meaningful feedback that empowered me to uncover the best solutions.
What I have learned
I have learned from feedback, usability testing, and prototyping
From the project's topic, I learned from my interviewees that interacting with real people and watching videos are the most effective ways to learn a language. Additionally, from the users' perspective, tooltips with text guidance are essential for first-time users who may feel lost while navigating the platform. I also discovered that creating animations to mimic the prototype helps users easily recognize the features during testing.
I also have learned to embrace new topics or projects, as they can lead to unexpected results beyond my expectations.
What I am proud of
An effective English learning app featuring a gamified listening experience
I am proud of my ability to create a fun, gamified listening practice that encourages user interaction. I believe that the app I developed will be a valuable solution for users, especially when it provides beneficial and engaging video content.
Next STEPS
Enhance the practice session that can encourage users to practice daily
I would focus on enhancing the practice sessions, as language learning requires continuous practice and dedication. I aim to find ways to help and encourage users to engage with the app daily to sharpen their listening and speaking skills.
Explore the AI avatar learning method further and enhance its development
Given the growing popularity of AI avatars in the language learning market, I would like to explore this area further and develop a more effective solution for the app.
A feature to connect friends for shared learning and mutual encouragement
A feature that combines friend connections and encouragement to align business goals with user objectives, enabling users to learn and motivate each other together.
Let's connect
I’m eager to explore ways we can work together!
Connect Now