SKGO Japanese Learning Website
SKGO Japanese Learning Website
Website Manager & Developer: Shingo Morita
Developer: Keigo Morita (Patrick Henry High School Senior Student)
Tools: HTML, CSS, JavaScript, AWS
Project Goals
- Offer impactful learning solutions for young Japanese language learners.
- Provide accessible Japanese learning resources to foster a love for the language and culture among children.
The Research and Consult Phase
The Start
At the beginning of the Pandemic, I started volunteering to support online lectures. I noticed many students struggling to maintain motivation for learning. While it's the students' responsibility to stay motivated, having accessible learning resources can greatly assist. Freely available resources are just as crucial for learning as classroom experiences, whether online or face-to-face.
Background
Many Japanese language learning sites have content that's too difficult or complex for young learners. A simple, clear, and concise website can engage young learners and enhance their learning retention.
The Target User
Young learners (YLs) are foreign language learners in preschool through secondary school. My research focuses on early language study in pre-primary and primary grades, typically between 4 and 11 or 12 years old. This is particularly relevant for those who don't have access to Japanese or don't speak Japanese at home.
The Key Stakeholders
Teachers, Parents, and Young Learners
Requests from Each Stakeholder
Teacher
- I would like to know the students' progress.
- I want to receive responses.
- I wish to enhance students' commitment to their studies.
- I want students to continue learning without quitting the classroom.
Parents
- A web page without advertisements.
- Reduced burden of printing for repetitive learning.
- I want content that motivates children.
- Kids need an appropriate learning environment. I don't want my kids to learn via smartphones.
Young Learners
- I want to enjoy learning through games and other activities.
- I want to alleviate the solitude of self-study.
- I want content like origami and crafts in addition to study materials.
Planning
Functionality Requirements
Our project aims to provide accessible resources for learning Japanese. Young learners, especially those who don't speak Japanese at home, lack opportunities to hear the language. Accessible audio resources are essential for them.
Sitemap & User Journeys
I translated all the previous steps into a tangible website plan. I outlined the content for each landing page, defined information flow and content requirements, and created a design blueprint.
The KPIs (Key Performance Indicators)
- Website traffic (including new visitors and returning visitors).
- Referral traffic.
- Pageviews.
- Average time spent on the site (or specific landing page).
Design
- The design should be optimized for regular laptops.
- The website should be user-friendly, visually appealing, and captivating for children.
Content Creation
The Resources section includes Vocabulary, Expression, Grammar explanations, Japanese culture presentations, Japanese alphabet, Origami, and crafts, among others. We've meticulously crafted well-researched content, including a variety of games like talking matching games, puzzles, and origami.
Our game design and vocabulary strategy aim to help children retain new words effectively. We've categorized vocabulary into child-friendly themes like eating, playtime, and feelings, using sharp and colorful images.
To address the needs of learners who don't speak Japanese at home, we've included audio resources such as talking flashcards and an expression list with audio. Additionally, we've created interactive learning tools, like a table of the Japanese syllabary with stroke order guidance and interactive pronunciation.
We've also added cultural elements such as Hukuwarai, a Japanese cultural game, and Origami, a traditional Japanese craft. Our aim is to make learning culture and language interactive and engaging for young learners.
Furthermore, we've designed custom visuals to enhance the user experience. The visuals are simple, colorful, and uncluttered, making it easy for children to understand and engage with the content.
Development
We transformed our designs into a live, interactive digital experience using HTML, CSS, and JavaScript. During the quality assurance process and before launch, we invited teachers to experience our website in a restricted staging environment to ensure its quality and functionality.
Problems and Improvements
We made adjustments such as adding written pronunciation for English speakers, modifying images for consistency, and correcting volume irregularities to enhance the overall user experience.
Quality Assurance
We conducted thorough testing to ensure the website was ready for launch. This included speed testing, responsiveness checks, design element evaluations, functionality and integration testing, security assessments, and more.
Problems and Improvements
The Slow Local Server
Initially, we hosted the website on a local server, resulting in slow loading times. We recognized the importance of fast loading times and migrated to AWS, significantly improving speed and achieving load times under 2 seconds.
- Created an Ubuntu instance on EC2
- Allocated a static IP address using Elastic IP
- Registered domain via GoDaddy.com and used its DNS service
- Installed SSL cert using letsencrypt.org on Apache HTTP server
Launch
- Pushed the website live, making it accessible to online audiences.
- Notified search engines that the website is open to the public.
- Announced the website's availability to stakeholders publicly.
- Added a link from the Gardena Valley Japanese Cultural Institute website: https://www.jci-gardena.org/
Maintenance
- Regularly update and operate the system to keep information up-to-date.
- Appropriately update content such as seasonal events, festivals, food, photos, and origami.
Evaluation and Monitoring
- Manage post-production, including product evaluation, testing, and monitoring students' learning experiences.
- Conduct security monitoring, backups, and other technical maintenance tasks like speed optimization, integrations, and bug fixes.
Improvements Based on User Feedback
Responsive Design: We initially designed for laptops, but many users accessed our site on small devices. To accommodate them, we adopted a responsive design.
Caching: Frequent updates caused caching issues, leading to inconsistent data presentation. We switched to updating the site less frequently to resolve this.
Internet Literacy: We're addressing challenges faced by younger users who are new to technology. We simplified navigation and explored other solutions.
Origami Page: Based on feedback, we improved the origami section to showcase all projects in a single page for easier access.
Page Movement: To reduce waiting time and maintain engagement, we minimized page transitions and added navigation buttons.
UI Adjustment: We enhanced UI for ease of use, especially for children, by optimizing the screen layout.
Difficulty Adjustment: We balanced content and usability, ensuring children feel accomplished in their learning journey.
Site Map: A site map was added to simplify navigation, rendering dynamically on each page through Google Spreadsheet integration.
Access Analysis Since September 2022
- Website traffic: 350 Users.
- Referral traffic: 150 Users.
- Pageviews: 3500 Views.
- Average time spent on a page: 4 Minutes.
- Average number of page views per user: 10 pages.
Key Learnings
- User-Centered Design: Understanding the needs of all stakeholders (teachers, parents, and learners) was crucial for creating a successful educational platform.
- Performance Matters: Migrating from local hosting to AWS significantly improved user experience and engagement.
- Iterative Improvement: Continuous feedback and monitoring led to valuable improvements in design, functionality, and user experience.
- Accessibility: Providing audio resources and interactive tools was essential for learners without Japanese language exposure at home.
Future Enhancements
- Mobile app development for on-the-go learning
- Gamification features to increase engagement
- Progress tracking and analytics for teachers
- Multi-language support for parents