Nov 2023 - Dec 2024
Nov 2023 - Dec 2024
Learning with
Visual Novels
Learning with Visual Novels
Company: iago
Project Type: Zero-to-one product design for an iOS mobile app
Role: Sole product designer
iago, originally only a Chrome extension, provides Japanese subtitles for learning through video immersion. Iago expands to a native iOS mobile app, helping beginners learn through a visual novel format and speaking from day one.
iago, originally only a Chrome extension, provides Japanese subtitles for learning through video immersion. Iago expands to a native iOS mobile app, helping beginners learn through a visual novel format and speaking from day one.
iago, originally only a Chrome extension, provides Japanese subtitles for learning through video immersion. Iago expands to a native iOS mobile app, helping beginners learn through a visual novel format and speaking from day one.
Problem
Problem
Users lack the ability to speak Japanese by learning Japanese vocabulary in isolation.
Users lack the ability to speak Japanese by learning Japanese vocabulary in isolation.
Approach
Approach
Introduce a structured curriculum within a visual novel format to simulate real-life conversations.
Introduce a structured curriculum within a visual novel format to simulate real-life conversations.
Results
Results
70% of participants felt more comfortable conversing in Japanese than before using iago.
01
Discovery
01
Discovery
01
Discovery
iago’s Chrome extension helps users learn Japanese vocabulary through interactive subtitles and flashcard creation. However, users felt they weren’t truly learning the language because they still couldn’t speak it. So, despite vocabulary acquisition, users felt unprepared for real conversations.
iago’s Chrome extension helps users learn Japanese vocabulary through interactive subtitles and flashcard creation. However, users felt they weren’t truly learning the language because they still couldn’t speak it. So, despite vocabulary acquisition, users felt unprepared for real conversations.
The Five Domains of Language
The Five Domains of Language
The 5 Domains of Language is a popular model that explains what makes up a language. Currently, the iago extension primarily focused on morphology and vocabulary (semantics). To truly grasp a language, other skills must be understood as well.
The co-CEO’s decided that they want to move beyond a vocab studying tool into an all-inclusive Japanese-learning app that enables users to learn conversational Japanese as immersively as they had been learning words.
The 5 Domains of Language is a popular model that explains what makes up a language. Currently, the iago extension primarily focused on morphology and vocabulary (semantics). To truly grasp a language, other skills must be understood as well.
The co-CEO’s decided that they want to move beyond a vocab studying tool into an all-inclusive Japanese-learning app that enables users to learn conversational Japanese as immersively as they had been learning words.
The Five Domains of Language
The 5 Domains of Language is a popular model that explains what makes up a language. Currently, the iago extension primarily focused on morphology and vocabulary (semantics). To truly grasp a language, other skills must be understood as well.
The co-CEO’s decided that they want to move beyond a vocab studying tool into an all-inclusive Japanese-learning app that enables users to learn conversational Japanese as immersively as they had been learning words.
Source: https://www.asha.org/practice-portal/clinical-topics/spoken-language-disorders/language-in-brief/ srsltid=AfmBOopxJcQ71HHlmgV6dfaI3BdbTX7_ GJTwipw4p0goFlcmbW-2Pysm
Source: https://www.asha.org/practice-portal/clinical-topics/spoken-language-disorders/language-in-brief/ srsltid=AfmBOopxJcQ71HHlmgV6dfaI3BdbTX7_ GJTwipw4p0goFlcmbW-2Pysm
Source: https://www.asha.org/practice-portal/clinical-topics/spoken-language-disorders/language-in- brief/ srsltid=AfmBOopxJcQ71HHlmgV6dfaI3BdbTX7_ GJTwipw4p0goFlcmbW-2Pysm
I framed our problem into the following statement:
I framed our problem into the following statement:
“
“
Users lack the ability to speak Japanese by learning Japanese vocabulary in isolation.
Users lack the ability to speak Japanese by learning Japanese vocabulary in isolation.
02
Research
02
Research
02
Research
I led a 2-week research sprint to uncover the habits, challenges, and goals of Japanese self-learners—ensuring the next version of the app would support all five language domains while aligning with how users actually learn.
I led a 2-week research sprint to uncover the habits, challenges, and goals of Japanese self-learners—ensuring the next version of the app would support all five language domains while aligning with how users actually learn.
Discord
Discord
Discord
Duolingo
Duolingo
Duolingo
Babbel
Babbel
Babbel
User Interviews
Interviews
User Interviews
Findings to Product Requirements
Findings to Product Requirements
After a 2-week study sprint, I found 4 key study habits, which I converted into product requirements:
After a 2-week study sprint, I found 4 key study habits, which I converted into product requirements:
Time
Time
Time
Digestible Content
Digestible Content
Practice moduels should be quick to complete (<5 minutes)
Practice moduels should be quick to complete (<5 minutes)
Visuals
Visuals
Visuals
Engagement through visuals
Engagement through visuals
Incorporate visuals for a more immersive curriculum
Incorporate visuals for a more immersive curriculum
Context
Context
Context
No rote memorization
No rote memorization
Incorporate immersive forms of practice
Incorporate immersive forms of practice
Relevance
Relevance
Relevance
Personalization
Personalization
Learners should be able to personalize their studies
Learners should be able to personalize their studies
Business Goal: Retention
Business Goal: Retention
Per business goal, we also aim to have high retention, focusing mainly on 7-day retention to be 20% and 30-day retention to be 10%. This became a key metric that we referred back to at every iteration.
Per business goal, we also aim to have high retention, focusing mainly on 7-day retention to be 20% and 30-day retention to be 10%. This became a key metric that we referred back to at every iteration.
Moving to Mobile
Moving to Mobile
Based on our findings, it was obvious that the move was for us to move iago to mobile:
Flexible studying anytime, anywhere
Consistency = Habit-forming
Meet Digital Natives where they're at
Based on our findings, it was obvious that the move was for us to move iago to mobile:
Flexible studying anytime, anywhere
Consistency = Habit-forming
Meet Digital Natives where they're at
03
V1: Unstructured learning
03
V1: Unstructured learning
03
V1: Unstructured learning
Approach
Approach
Introduced a weekly personalizable curriculum within a mobile app that allows users to drill, watch, and practice what they’ve learned in conversation.
Introduced a weekly personalizable curriculum within a mobile app that allows users to drill, watch, and practice what they’ve learned in conversation.
Select terms from scenario
Select terms from scenario
Select terms from scenario
Do term-based quizzes
Do term-based quizzes
Do term-based quizzes
Watch recommended videos
Watch recommended videos
Watch recommended videos
Converse with learned terms
Converse with learned terms
Converse with learned terms
Results
Results
While we thought we developed something familiarly loved by the extension users -just expanded and more structured - the app didn't stick.
While we thought we developed something familiarly loved by the extension users -just expanded and more structured - the app didn't stick.
90%
90%
dropped off the app after 7 days
dropped off the app after 7 days
80%
80%
felt no improvement in conversational skills
felt no improvement in conversational skills
No Application
No Application
App was too focused on discrete knowledge of the terms instead of practical application.
App was too focused on discrete knowledge of the terms instead of practical application.
Too Passive
Too Passive
Watching videos to learn is helpful to an extent, but too passive to be truly immersive.
Watching videos to learn is helpful to an extent, but too passive to be truly immersive.
Little Speaking
Little Speaking
Users couldn’t apply what they’ve learned in the conversation because they’re too afraid to speak.
Users couldn’t apply what they’ve learned in the conversation because they’re too afraid to speak.
04
V2: A structured curriculum
04
V2: A structured curriculum
04
V2: A structured curriculum
Approach
Approach
Introduce a structured curriculum that integrates speaking practice at every step, helping users build a solid foundation while consistently exercising their speaking skills.
Introduce a structured curriculum that integrates speaking practice at every step, helping users build a solid foundation while consistently exercising their speaking skills.
Working with the content team, we came up with a structured curriculum. Each chapter features a lesson, a progression of quizzes and short chat exercises that build on one another, and wraps up with a full-length conversation that brings together everything learned that week.
Note: This case study will only cover the Lessons portion of the app continuing forward.
Working with the content team, we came up with a structured curriculum. Each chapter features a lesson, a progression of quizzes and short chat exercises that build on one another, and wraps up with a full-length conversation that brings together everything learned that week.
Note: This case study will only cover the Lessons portion of the app continuing forward.
The iago curriculm
Source: https://www.asha.org/practice-portal/clinical-topics/spoken-language-disorders/language-in- brief/ srsltid=AfmBOopxJcQ71HHlmgV6dfaI3BdbTX7_ GJTwipw4p0goFlcmbW-2Pysm
What's in an iago Lesson?
What's in an iago Lesson?
Each lesson consists of 3-5 key phrases and grammar points, with in-depth explanation and cultural tidbits given by the user's tutor, Iako-Chan. The user can analyze the phrase, then practice saying the phrase aloud.
Each lesson consists of 3-5 key phrases and grammar points, with in-depth explanation and cultural tidbits given by the user's tutor, Iako-Chan. The user can analyze the phrase, then practice saying the phrase aloud.
I
I
I
Integrated speaking practice
Integrated speaking practice
Integrated speaking practice
Realistic phrase variation
Realistic phrase variation
Realistic phrase variation
Cultural tidbits
Cultural tidbits
Cultural tidbits
Results
Results
After 7 days of testing, over 85% of users dropped off after about 7 days. Although slightly increased 7-day retention, it was still short of our business goal metric of 20%+ retention.
After 7 days of testing, over 85% of users dropped off after about 7 days. Although slightly increased 7-day retention, it was still short of our business goal metric of 20%+ retention.
85%
85%
dropped off the app after 7 days
dropped off the app after 7 days
I conducted another round of user interviews and survey to understand what worked and what didn't.
I conducted another round of user interviews and survey to understand what worked and what didn't.
Pros
Pros
Speaking practice interspersed in the lesson was very engaging
Lessons were in-depth and cultural context was novel
Speaking practice interspersed in the lesson was very engaging
Lessons were in-depth and cultural context was novel
Cons
Cons
Too much reading - hard to stay engaged and retain info
Not immersive enough, still too passive
Too much reading - hard to stay engaged and retain info
Not immersive enough, still too passive
An unexpected twist…
While gathering user insights, we discovered strong overlap between Japanese learners and anime/gaming enthusiasts. Meme-based videos on iago's social accounts were going viral!
While gathering user insights, we discovered strong overlap between Japanese learners and anime/gaming enthusiasts. Meme-based videos on iago's social accounts were going viral!
Combined with user feedback from interviews and surveys—specifically, frustration with text-heavy content and a clear demand for more interactive experiences—we made a deliberate decision to lean into this audience. The result was a strategic pivot: we reimagined the curriculum as a visual novel game. This marked the launch of V3: Iago, a fully interactive, story-driven learning experience.
Combined with user feedback from interviews and surveys—specifically, frustration with text-heavy content and a clear demand for more interactive experiences—we made a deliberate decision to lean into this audience. The result was a strategic pivot: we reimagined the curriculum as a visual novel game. This marked the launch of V3: Iago, a fully interactive, story-driven learning experience.
05
V3: Visual novel-ification
05
V3: Visual novel-ification
05
V3: Visual novel-ification
Approach
Approach
Introduce a structured curriculum within a visual novel format to simulate real-life conversations.
Introduce a structured curriculum within a visual novel format to simulate real-life conversations.
Up to this point, we had a clearer idea of our users at each step, but never drilled down to a specific persona. Given that we’ve delved deeper into a niche, I decided to develop a persona for clarity to communicate design decisions to the team. This is our persona, Jonas.
Up to this point, we had a clearer idea of our users at each step, but never drilled down to a specific persona. Given that we’ve delved deeper into a niche, I decided to develop a persona for clarity to communicate design decisions to the team. This is our persona, Jonas.
Heuristic Evaluation
Heuristic Evaluation
Visual novel games are interactive story-based games that focus on narrative-driven gameplay, featuring a mix of text-based storytelling, character interactions, and decision-making elements. It is an extremely popular game category in Japan and anime lovers.
I played several of these games to study their design patterns, information architecture, and how they might be adapted for language learning.
Visual novel games are interactive story-based games that focus on narrative-driven gameplay, featuring a mix of text-based storytelling, character interactions, and decision-making elements. It is an extremely popular game category in Japan and anime lovers.
I played several of these games to study their design patterns, information architecture, and how they might be adapted for language learning.
Honkai Star Rail
Honkai Star Rail
Introducing lure & mechanics
Introducing lure & mechanics
Ace Attorney
Ace Attorney
Heavy storytelling
Heavy storytelling
Love Live School Idol Project
Love Live School Idol Project
Sense of autonomy
Sense of autonomy
Overall, I was inspired by how these visual novel games:
Seamlessly introduced the world and mechanics while advancing the story.
Handled heavy storytelling and multiple possible actions without overwhelming the player.
Maintained user engagement by having users make decisions throughout the story —even when outcomes were fixed.
These insights directly influenced how I evolved V2 into V3: preserving the immersive feel of a visual novel while ensuring the core focus remained on learning.
Overall, I was inspired by how these visual novel games:
Seamlessly introduced the world and mechanics while advancing the story.
Handled heavy storytelling and multiple possible actions without overwhelming the player.
Maintained user engagement by having users make decisions throughout the story —even when outcomes were fixed.
These insights directly influenced how I evolved V2 into V3: preserving the immersive feel of a visual novel while ensuring the core focus remained on learning.
01 V3
Main Story
The main story page is focused on the character to whom the learner is speaking and the story dialogue.
WHY: Visual lessons with succinct copy for immersion and simplified learning.
Before
After
01 V3
Main Story
The main story page is focused on the character to whom the learner is speaking and the story dialogue.
WHY: Visual lessons with succinct copy for immersion and simplified learning.
Before
After
02 V3
Tips
Tips moved from a full screen page to a pop-up hidden in the bottom action bar.
WHY: Users feel a sense of progress in discovering things, much like in a game.
Before
After
02 V3
Tips
Tips moved from a full screen page to a pop-up hidden in the bottom action bar.
WHY: Users feel a sense of progress in discovering things, much like in a game.
Before
After
03 V3
Speak to Respond
The speaking practice overlays the Story interface, as opposed to a separate page.
WHY: The speaking practice feels more integrated into the story (and a “response” to the tutor, Iako-Chan).
Before
After
03 V3
Speak to Respond
The speaking practice overlays the Story interface, as opposed to a separate page.
WHY: The speaking practice feels more integrated into the story (and a “response” to the tutor, Iako-Chan).
Before
After
06
Final Results
06
Final Results
06
Final Results
I conducted a final round of usability testing (with elements of a game play test), this time being very particular about the participants matching our persona, Jonas, to ensure that the limited data points were relevant to the specific niche of Japanese learners we are targeting.
I conducted a final round of usability testing (with elements of a game play test), this time being very particular about the participants matching our persona, Jonas, to ensure that the limited data points were relevant to the specific niche of Japanese learners we are targeting.
70%
70%
felt improvement in conversational skills
felt improvement in conversational skills
2x
2x
7-day retention
7-day retention
With higher confidence in conversing and increased time studying on the app, we are confident that users will feel motivated to keep iago in their study stack. Should we introduce paid subscriptions in the future (business goal), a higher pool of dedicated users would mean higher chances of paying users.
With higher confidence in conversing and increased time studying on the app, we are confident that users will feel motivated to keep iago in their study stack. Should we introduce paid subscriptions in the future (business goal), a higher pool of dedicated users would mean higher chances of paying users.
Lessons Learned
Lessons Learned
01
Balancing Content
I applied information architecture principles to balance educational content with engaging storytelling elements.
I applied information architecture principles to balance educational content with engaging storytelling elements.
02
Research
I learned to get creative in user recruitment as users with negative experiences are less likely to talk.
I learned to get creative in user recruitment as users with negative experiences are less likely to talk.
03
Finding our niche
I attempted to capture as many users as possible from the extension instead of honing down.
I attempted to capture as many users as possible from the extension instead of honing down.
01 V3
Main Story
The main story page is focused on the character to whom the learner is speaking and the story dialogue.
WHY: Visual lessons with succinct copy for immersion and simplified learning.
Before
After
01 V3
Main Story
The main story page is focused on the character to whom the learner is speaking and the story dialogue.
WHY: Visual lessons with succinct copy for immersion and simplified learning.
Before
After
02 V3
Tips
Tips moved from full screen to the bottom action bar.
WHY: Choose level of investment and enjoy the thrill of discovery.
Before
After
02 V3
Tips
Tips moved from full screen to the bottom action bar.
WHY: Choose level of investment and enjoy the thrill of discovery.
Before
After
03 V3
Speak to Respond
The speaking practice overlaying the Story page makes speaking practice integrated into the story, sometimes even to “respond” to Iako-Chan.
WHY: Conversing from day one to achieve story progression.
Before
After
03 V3
Speak to Respond
The speaking practice overlaying the Story page makes speaking practice integrated into the story, sometimes even to “respond” to Iako-Chan.
WHY: Conversing from day one to achieve story progression.
Before
After