HowToStudyKorean.com
WEBSITE REDESIGN
Redesign of HowToStudyKorean.com website’s UX and UI to create a cleaner, more intuitive learning experience.
Project Overview
Role
Tools
Duration
UX/UI Design​
Figma, Figjam
About 2 weeks
Overview
HowToStudyKorean.com is a free Korean learning website that offers valuable educational content, but its overwhelming layout and cluttered experience can make learning feel more daunting than enjoyable. For this project, I redesigned the website from both a UX and UI perspective to create a cleaner, more intuitive experience that makes learning Korean feel more engaging and accessible.
Challenges
-
Overwhelming Navigation
-
Poor hierarchy
-
No progress tracking
-
Dense content
-
High visual noise
Defining Project Goals
01
Simplify Navigation:
02
Reduce choice overlaod
Implement a more intuitive information architecture to reduce cognitive load during task completion.
Help users make decisions more easily by organizing content into clearer, more manageable sections
03
Provide engaging experience
04
Track user progrress
Design the experience to keep users encouraged and supported at every stage of their learning journey
Introduce progress tracking to help users monitor their learning journey
Content Audit
-
Conducted a content audit to evaluate the existing website structure and user experience
​
-
Identified underperforming pages and areas needing improvement
​
-
Evaluated content for usability, clarity, accuracy, and functionality for the target audience
Original Sitemap
Sitemaps
Elevating the learning experience with a focus on simplicity, hierarchy, and intuitive navigation.
Redesigned Sitemap
→
Drafting the Solution
Based on the identified challenges, I explored how other websites addressed similar problems through their UI and overall user experience.
Goals per page
Mid-fidelity wireframes
Homepage
-
Introduce HTSK as an easy and free way to learn korean b/c korean is anything but easy
-
Guide users to start learning fast
-
Engage users to start learning right away
-
Help users pick where they belong
​
Units/levels page
-
Show progression
-
Make selection easy
-
Inform users what to expect
​
​
​
Lessons page
-
Make selection easy
-
Show lesson relationships
-
Keep users informed of where they are at all times
-
Show users what to expect
​
Individual lesson page
-
Improve readability and hierarchy
-
Break down dense content
-
Make scanning easy
-
Keep user engaged and motivated
Visual Identity
Typography & Color Palette
I maintained the original typography and color palette to preserve the website’s identity while modernizing the overall experience.
