E-learning
Augment your learning
Role
Designer & Developer
Team
1
Introduction
In a fast-paced learning environment, students are expected to absorb, organize, and retain large amounts of information—often across fragmented tools and workflows. Traditional study methods create unnecessary cognitive overhead, pulling focus away from actual learning. Hana was designed to reduce this friction by combining vocabulary exploration, organization, and learning support into a single, focused experience. Rather than acting as just another dictionary, Hana functions as a personal knowledge workbench—helping learners spend less time managing information and more time understanding it.
Challanges
Learners often rely on multiple disconnected tools to look up, store, and practice new vocabulary. This fragmentation increases cognitive load and disrupts learning flow, making it harder to build long-term understanding.
user journey
Early in the project, I identified two dominant user mindsets rather than fixed personas: Searchers and Learners. Searchers prioritize speed—quick definitions, contextual explanations, and relevant resources. Learners focus on retention and growth over time. To support both, I explored adaptive features such as contextual suggestions and personalized learning paths for Searchers, alongside a structured vocabulary system for Learners, including organization, search, and flashcards. I also explored a tiered model with a free core experience and a premium layer offering advanced learning tools. These ideas were treated as hypotheses, highlighting the need for future user research to validate real behaviors and needs.
ideation
My ideation process balanced open exploration with continuous refinement. I began by analyzing existing dictionary and learning tools to identify patterns, gaps, and opportunities. From there, I generated ideas freely through sketching and brainstorming, without immediately constraining feasibility. Each week, I iterated through cycles of prototyping, testing, and feedback. Low-fidelity sketches allowed me to explore structure and flow quickly, while peer and user input guided prioritization. As stronger concepts emerged, I refined them into higher-fidelity prototypes, focusing on usability, clarity, and interaction details.
design system
I established the visual language and component structure in Figma before writing production code. Defining a design system early created a clear foundation and reduced decision fatigue later in development. Using Figma’s Dev Mode, I could reference component styles directly while building in React, minimizing manual translation between design and code. This approach ensured visual consistency across the interface and allowed development to be guided by design intent rather than ad-hoc decisions.
tech stack
The selected tech stack provides a strong foundation for building modern, scalable single-page applications. It supports maintainability and flexibility as the product evolves. As complexity increases, I considered introducing Redux to better manage shared and application-wide state. This reflects a forward-looking approach to technical decision-making—choosing tools not just for immediate needs, but for long-term product growth.
Written in collaboration with ChatGPT-3.5