VO-LEARN

WHY FUTURE MIND ? 

Adlina, Tan, Farah, Mah and Wan

Why we choose Future Mind?

1. Future: The word “Future” suggests that your group is focused on advancing technology and pushing the boundaries of what's possible. In HCI, this implies creating new, innovative solutions that address tomorrow's challenges—whether in mobility, education, productivity, or digital media. It reflects a vision for progress and adapting technology to future human needs.

2. Mind: “Mind” refers to creativity, intelligence, and problem-solving. HCI involves understanding how users think and interact with technology, so this part of the name highlights the importance of cognitive science, user-centered design, and creative thinking in developing intuitive and efficient interfaces.

3. Innovation & Creativity: Combined, “FutureMind” suggests a focus on designing technology that is not only functional but also creative and cutting-edge. It's about staying ahead of trends and developing solutions that will shape the future of how humans interact with machines .

Why choose Education and Learning?

HCI can improve educational tools for people with disabilities, making learning more inclusive through accessible design principles like voice recognition, screen readers, and easy navigation.

Language Learning Tools: HCI can significantly enhance language acquisition through apps that teach vocabulary in interactive ways, such as flashcards, quizzes, and gamified elements.

Contextual Learning: HCI enables tools that provide context to new vocabulary through multimedia—like showing images, videos, or sentences that give a deeper understanding of word usage.

Primary Task

Learn new language vocabulary through interactive exercises. 

Subtasks : 

1. Select a daily language challenge.

2. Practice vocabulary using audio and visual prompts. 

3. Complete a quiz to reinforce learning.

PROPOSAL 

1.0 Problem Statement/Illustration of Problem

High school student in upper form often struggle to improve their language skills like english, especially in speaking.

Firstly, the first problem that high school student in upper form always encounter is lack of basic knowledge and vocabulary mastery. (Daar, 2020). This is because student haven’t  a good foundation in the early stages of learning, especially the basic part of language learning. If students don’t have a solid foundation in grammar and vocabulary, it may not support student to answer question with english, even though they know how to answer the question with their first language.

Secondary, the second problem that high school student  in upper form always encounter is lack of real-world connection and poor pronunciation. (Billabong High School, 2024), (Maji, Samanhudi, & Mokoagouw, 2022). This is because our traditional teaching methods require memorizing words through dictation, it makes student can’t imagine the specific meaning of word,  and don’t know how to use the vocabulary very well. Some stranger word on the textbook, they don’t know how to pronounce correctly as well. These problem makes student difficult to respond  in right way and make them less confident to speak english.

In addition, the last problem that high school student  in upper form always encounter is lack of practice. (Maji, Samanhudi, & Mokoagouw, 2022). This problem leads to student always forget what they learned before because the knowledge and skills they acquire are not reinforced through practice. As a result, student may know or having impression about the vocabulary but can’t remember what the meaning for the word is.

      In conclusion, high school student in upper form having some problem that cause student can’t speak english very fluency and accurately. These problems are lack of basic knowledge and vocabulary mastery, lack of real-world connection and poor pronunciation, and lack of practice.

2.0 Proposed Solution 

For the problem statement provided, here’s a proposed solution:

Solution Proposal:

Develop an interactive language (English) learning application on mobile phones that focuses specifically on enhancing speaking skills for young language learners around upper form. The application could include the following features:

1. Select a Daily Language Challenge:

• Solution: Implement a mobile app or platform that offers daily challenges, such as word-of-the-day practice, conversation prompts, or language mini-games.

2. Practice Vocabulary Using Audio and Visual Prompts:

• Solution: Use multimedia-based flashcards or interactive language tools (e.g., apps like Duolingo or Memrise) that combine visuals (images, infographics) with pronunciation audio clips.

3. Complete a Quiz to Reinforce Learning:

• Solution: Develop adaptive quizzes that change based on user proficiency level, focusing on areas that need improvement while reinforcing known concepts. Gamifying quizzes with points, badges, and levels can also enhance motivation. The quizzes are MCQ and true false format.

3.0 A complete User Persona in Infographic format 

The Scenario :

Form 4 and 5 students in high school often struggle to improve their English speaking skills due to various challenges. In many schools, the focus is heavily on grammar and written exams, leaving little room for interactive speaking practice. Without resources like conversation labs or group discussions, students feel unprepared for real-life situations where speaking English fluently is essential.

Common issues include limited vocabulary and poor pronunciatio, making it difficult for students to express their thoughts clearly. This often leads to frustration and embarrassment, especially when peers laugh or correct their mistakes. These linguistic challenges are compounded by psychological barriers, such as nervousness and fear of making errors. Many students avoid speaking English altogether after experiencing negative feedback or criticism in class.

Mobile learning apps have emerged as a useful solution for students facing these challenges. These apps provide an engaging and supportive environment for improving English speaking skills outside the classroom. Features that make these apps effective include:

- Interactive pronunciation and grammar tools with instant feedback.

- Real-life conversation simulations to practice speaking in various scenarios.

- Vocabulary-building games that make learning fun and accessible.

- Access to native or advanced speakers for real-time practice in a safe space.

When students dedicate even 20 minutes a day to these apps, they notice significant improvements in their confidence and fluency. The gamified nature of the apps keeps them motivated, and the ability to track progress encourages consistent practice. By using these tools, Form 4 and 5 students can overcome linguistic and psychological barriers, preparing them to communicate effectively in both academic and real-world settings.

Over time, the apps not only help students perform better in class discussions and presentations but also equip them with the skills to use English confidently in their future studies and careers.

4.0 A complete Task Analysis (eg, in HTA or TTA format) 

HTA: Learn new language vocabulary through interactive exercises

for the access the HTA picture : 

 https://drive.google.com/drive/folders/1-2L3d5RYFJSocYWC00z8sx9dVYst_8az

5.0 Design Process (Method) and Project Planning/Schedule for Develop English Learning Mobile App

     

 In this case, we use User-Centered Design: It is is a design process that focuses on the needs, goals, and feedback of the end user at every stage. The following is the key steps of UCD in this case:

We plan to use totally 14 weeks to develop this from 16/102024 until 6/1/2025. The project schedule will represent via Gantt Chart as the following:

6.0 Tools

• Figma 

We use Figma to design and develop both the low-fidelity and high-fidelity prototypes for our project. The low-fidelity prototype focuses on providing a basic structure and layout of the user interface, allowing us to map out key functionalities and workflows efficiently. On the other hand, the high-fidelity prototype refines these initial designs, incorporating detailed visual elements, interactions, and a more realistic representation of the final product to enhance usability testing and feedback.

CONCEPTUAL DESIGN 

TASK ANALYSIS 

Primary Task : Learn new language vocabulary through interactive exercise.

Three (3) user goals (task)

1. Select a Daily Language Challenge

2. Practice Vocabulary using Audio andVisual Prompt

3. Complete a Quiz to Reinforce Learning 

Our team member create 5 sketch, and we already vote for one sketch. Here is the description for the sketch.

Recognising Ethan's struggle, his friend introduce him to a language learning app called Volearn. This innovative app is designed to help users improve their English language skills through a variety of interactive exercises.

Features:

1. Vocabulary Practice: Users can listen to the pronunciation of words, read definitions, and learn how to use the words in context.
2. Daily Challenges: Users practice speaking by repeating sentences after listening to audio prompts. The app provides immediate feedback on pronunciation accuracy.
3. Quizzes: Users test their knowledge through multiple-choice questions.

Ethan's Transformation:

Through consistent use of Volearn, Ethan gradually overcomes his language barrier. His improved English skills enable him to confidently express himself, both in the classroom and in social situations. His friends and teachers are proud of his progress and the positive impact of technology on his language learning journey.

Overall, the story highlights the potential of technology to empower language learners and break down communication barriers.

 

STORYBOARD

ROLEPLAY 

LOGICAL DESIGN 

 INTERFACE SKETCHES by adopting the Crazy 8 Method.

SKETCH 1 

SKETCH 2

SKETCH 3 & 4

 

SKETCH 5 

FINAL CLICKABLE PROTOTYPE (FIGMA)

Our team has made significant improvements to the VoLearn prototype after gathering feedback from three users. Based on their input, we have refined the design by aligning the color tones and organizing the layout of each sub-section within the application. This ensures a more cohesive and visually appealing user experience. Furthermore, we have updated the content by adding questions that are more relevant to students around the age of 16, particularly those in high school. These updates aim to better match the educational needs and knowledge levels of the target audience.

The primary task of VoLearn is to help users learn new language vocabulary through interactive exercises. To achieve this, the app includes several subtasks: selecting a daily language challenge, practicing vocabulary using audio and visual prompts, and completing a quiz to reinforce learning. Additionally, the usability of the application has been greatly improved. Every button and input field has been redesigned to be more user-friendly, ensuring they are easy to click and interact with. The text throughout the app has been carefully chosen to make it clear and readable, enhancing overall accessibility. By addressing both design and content issues, our team has effectively completed the task analysis, ensuring VoLearn is not only functional but also user-centered.

You can explore the detailed design of VoLearn on Figma by clicking the link provided below. Take a closer look at the interface, features, and flow of the app to better understand its functionality and user experience .

FIGMA LINK :

https://www.figma.com/design/U4ePpdX2wunlVYPbN67UQh/VoLEARN?node-id=0-1&t

VO-LEARN USABILITY TEST REPORT 

1. Introduction

The usability test for VoLearn was conducted to evaluate the app’s functionality, user experience, and effectiveness as a language learning tool for teenagers aged 16 and above. VoLearn aims to provide engaging vocabulary-building exercises through interactive features such as daily challenges and quizzes. The test aimed to identify design flaws, usability issues, and content gaps, allowing the development team to implement improvements and enhance the user experience.  

Key usability concepts such as Task Success (ability to complete tasks), Time on Task (efficiency), and user satisfaction were central to this evaluation.  

2. Methods & Procedures

Participants

1. Demographics: Three users aged 16–17 years with varying levels of familiarity with language-learning apps.  
2. Background: All participants are high school students with intermediate proficiency in the target language.  

Tasks & Scenarios 

Participants were asked to :  

1. Navigate to the Daily Challenge feature and complete the task. 
2. Attempt the vocabulary quiz and submit their answers. 
3. Use the “Submit” or “Give Up” buttons during exercises.  

Testing Metrics

1. Task Success Rate: How effectively participants completed tasks.  
2. Time on Task: The time taken to locate and interact with features.  
3. Feedback: Observations and comments on design, content, and usability.  

Tools & Equipment

1. Prototype: Figma design of VoLearn.  
2. Recording Tools: Screen recording and note-taking during sessions.  

Procedures

1. Pre-test briefing to explain the purpose and tasks.  
2. Users interacted with the prototype under observation.  
3. Post-test interviews gathered feedback on design and usability.  

3. Results

Key Findings

Design Issues :  

1. Daily Challenge: Cover page was confusing and lacked clarity.  
2. Quiz Visuals: One image had a distracting border, reducing focus.  
3. Vocabulary Buttons: “Submit” and “Give Up” buttons appeared dull and uninspiring.  

Content Issues :  

1. Quiz questions were too easy for the target age group, leading to boredom.  

Color & Typography :  

1. Bold black font lacked contrast against the background, making text hard to read.  

User Feedback :

1. “The buttons don’t stand out; I couldn’t easily find where to click.”  
2. “The quiz questions are too simple for my level.”  
3. “The color scheme looks inconsistent, and the text doesn’t pop out.”  

4. Improvements/Actions Taken

Design Enhancements :

1. Daily Challenge: Redesigned the cover page to include clearer instructions and a visually engaging layout.  
2. Quiz Images: Replaced the bordered image with a cleaner, border-free alternative for better focus.  

Button Colors :  

1. Changed “Submit” and “Give Up” buttons to brighter, more noticeable colors such as blue and green.  
2. Ensured consistent button styling throughout the app for uniformity.  

Content Updates 

Quiz Questions :  

1. Replaced simpler questions with more challenging ones suitable for 16-year-old users.  
2. Incorporated questions requiring critical thinking and contextual understanding.  

Typography and Color Scheme :

1. Updated the black bold font to a contrasting color such as navy blue or dark green to improve readability.  
2. Standardized the color palette across the app for consistency, using complementary tones for buttons and text.  

Before and After Comparisons

1. Before: Dull buttons, inconsistent colors, overly simple quiz content.  
2. After: Bright, engaging buttons, uniform color scheme, and challenging questions.  

5. Conclusion

The usability test revealed several areas for improvement in VoLearn, including design, content, and user interface elements. By addressing these issues, the team has enhanced the app’s clarity, engagement, and usability. The changes, such as updating the Daily Challenge cover page, revising quiz questions, and improving button visibility, have created a more user-friendly experience for 16-year-old users.  

Moving forward, additional tests with a larger user base can provide further insights to refine VoLearn and ensure its success as a leading language-learning tool.