Hangul Online: B2C Language Learning Platform

Role: UI/UX Designer & Technical SEO Optimizer

Project Type: B2C Educational Platform / Community Project

(Note: The live site is currently operating on a legacy framework. The case study below showcases the optimized UI/UX architecture and semantic design I prepared for the platform's upcoming major update).

Context & Challenge

Hangul Online is a community-driven educational platform dedicated to helping Vietnamese speakers conquer the Korean language systematically. The curriculum spans from Beginner to Advanced, with a focus on preparing users for the TOPIK exam.
The primary challenge was to transform dense, text-heavy educational content into an engaging, gamified experience without compromising website performance. The interface needed to be highly interactive to retain learners, yet lightweight enough to achieve high scores on Core Web Vitals for search engine visibility.

My Solution & Technical Approach

Gamified Learning Roadmaps: Designed step-by-step visual learning paths for practical topics such as "Weather & Health", "Shopping", and "Transportation". This "node-based" progression system encourages users to complete micro-lessons, reducing cognitive load and lowering the site's overall bounce rate.

*Gamified learning roadmaps designed to reduce cognitive load, encourage micro-learning, and improve user retention.*

Component-Driven Architecture & Developer Handoff: To bridge the gap between design and front-end development, I applied a strict Component-Driven Design methodology. I meticulously categorized reusable UI elements (e.g., Progress Box, Lesson Menu, Tooltips, and Speech bubbles) and defined their interactive states (Active, Locked, Completed). This clear naming convention and state management drastically reduced development friction and ensured cross-page consistency.

*A comprehensive, developer-ready component library detailing UI states (Active, Locked, Completed) to ensure seamless handoff.*

Modular Content Architecture: Architected clean, structured lesson interfaces divided into logical modules: Conversations (Hội thoại), Vocabulary (Danh sách từ vựng), Grammar (Ngữ pháp), and Interactive Reviews/Mini-games. This modularity ensures a seamless user flow.

*Modular lesson interfaces built with semantic structure, making it easier for search engine crawlers to index educational content.*

Asset Optimization for Page Speed: Replaced all heavy raster images with custom, scalable vector graphics (SVGs) for character illustrations and UI icons. This proactive design decision drastically minimized the future frontend payload, laying the groundwork for lightning-fast page load times.

*Proactive asset optimization utilizing scalable vector graphics (SVGs) to minimize payload and boost Core Web Vitals.*

Semantic Design for Technical SEO: Structured the visual hierarchy with Semantic HTML implementation in mind. I designed clear heading tiers for grammar rules and cultural stories (Câu chuyện văn hóa), ensuring that once handed over, the engineering team could effortlessly translate the Figma files into a developer-friendly, crawler-accessible HTML structure.

Key Outcome

Delivered a complete, high-fidelity UI/UX prototype backed by a robust component library. The redesign successfully bridges the gap between a user-centric educational experience and a search-engine-optimized, highly scalable front-end architecture.

Bonus: Promotional Branding & User Acquisition

Great UI/UX is only impactful if users actually visit the site. To drive initial user acquisition and offline engagement, I designed promotional materials including O2O (Online-to-Offline) standees for university events. By integrating QR codes directly into a visually appealing, character-driven layout, we successfully bridged offline curiosity with online traffic.