Sign-in Page

The initial interface that greets users upon entering the MyKstar web application is the sign-in page. Here, users can seamlessly sign-up or log in, thereby establishing their personalized accounts. This account creation process facilitates the storage of the user’s learning activities within the web, ensuring progress tracking even after logging out.

Homepage Sign up | Sign in Page

Homepage Sign up | Sign in Page


Personalized Dashboard

The personalized dashboard features four key sections: a “summary” displaying performance through visualized pie charts and graphs; a real-time “scoreboard” listing top 10 achievers; a “recommendation” board, suggesting lessons based on user’s preferences; and a “goal” board tracking learning goals.

Main Homepage Dashboard

Main Homepage Dashboard

The pie chart illustrates users’ quiz performance. By placing the cursor on the pie, users can effortlessly distinguish the words they correctly answered and those they missed during the quiz.

Screenshot 2023-07-19 193402.png

Screenshot 2023-07-19 193617.png

Screenshot 2023-07-19 193634.png

The real-time line graph displays the trajectory of the user’s performance. Through this graph, users can visually track their progress and observe their gradual improvement.

Screenshot 2023-07-19 193704.png

Screenshot 2023-07-19 193800.png

Screenshot 2023-07-19 193736.png

Screenshot 2023-07-19 193928.png


WordQuiz

Users can test their newly learned words by engaging in interactive quizzes. The goal is to correctly identify the meaning of the presented Korean word.

WordQuiz Feature: For users to test their vocabulary, with the additional feature to test marked keywords from Karaoke Learning Feature.

WordQuiz Feature: For users to test their vocabulary, with the additional feature to test marked keywords from Karaoke Learning Feature.


When users click on the correct answer, the word box will change to green.

When users click on the correct answer, the word box will change to green.


Wrong answer: Conversely, if they select an incorrect answer, the word box will change to red.

Wrong answer: Conversely, if they select an incorrect answer, the word box will change to red.


Users can expand their vocabulary by navigating to the "Words" section in the menu bar. Users will find new words in Korean accompanied by a speaker icon for pronunciation,

Definitions

Definitions

Dictionary

English translations, explanations in both English and Korean, as well as sentence examples illustrating their usage.

In-built bookmarked words: Bookmarked words are displayed on the bottom.

In-built bookmarked words: Bookmarked words are displayed on the bottom.

Karaoke Feature

Under the "Learn" section in the menu bar, users can access engaging karaoke sessions designed for immersive language learning. Users have the option to select a song from the gallery that aligns with their preferences and initiate the learning process.

Gallery of song choices

Gallery of song choices


Once a song is selected, users will be presented with lyrics displayed line by line, synchronized with the audio.

Music synced lyrics

Music synced lyrics

This enables users to sing along and follow the song's rhythm, thereby making the language learning process enjoyable as they learn new vocabulary and enhance their pronunciation skills.

Music synced lyrics

Music synced lyrics

<aside> 💡 Project Final Deliverable Link: https://mykstar.netlify.app/

</aside>

myKstar


Summary

This Business Technology team has greatly contributed to the successful execution of the MyKstar web application. They established a secure CRM database for progress tracking and a user-friendly interface. Interactive dashboards visualized quiz performance and progress. An AI chatbot provided round-the-clock assistance, while personalized recommendations catered to users’ preferences. Their work optimized user experience, ensuring data security, real-time insights, and tailored engagement.

Their efforts elevated user experience, ensuring data security, real-time insights, and tailored engagement. The AI chatbot's ongoing training is enhancing its capabilities, and both the database dashboard and interactive dashboard will integrate into the client's version of the application. It's important to note that the current version is a demo showcasing features and functionalities.