Create a mobile-first responsive website that helps users in the process of learning a new skill.
THE ROLE:
UI/UX Designer & Researcher
THE TIMELINE:
8 Weeks (November ‘23 - January ‘24)
First, let’s set the scene...
Research / User Interviews / Personas / Define the Problem
Background
“JAPANESE IS SO HARD TO LEARN!”
I know this firsthand. I’ve been trying to learn Japanese my whole life and I spent most of that time trial-and-error-ing my way to find methods that worked for me. I suspect others may face similar roadblocks. So, I want to create a unique platform for learning Japanese that is tailored to users’ specific goals and interests!
But... who ARE the users? And what do THEY think?
Well, I interviewed 5 people trying to learn Japanese:
Name: A.H.
Level: Advanced
Main Interest: Reading
L.L.
Beginner
Conversation
S.H.
Intermediate
Reading
J.L.
Intermediate
Reading
J.C.
Beginner
Conversation
...And asked them questions like these:
1
Why are you interested in learning Japanese?
2
Tell me about some of the most rewarding moments you’ve had learning Japanese.
3
Tell me about some of the challenging moments.
KEY INSIGHTS
from user interviews
1
Most users have a desire to consume Japanese pop culture and media, like anime and manga
2
Desire to converse with Japanese people
3
Losing Motivation
4
Overall: “Japanese is hard”
And after synthesizing all the interview data, I created a Persona. Meet Gemma:
So, how might we help users like Gemma? In other words...
How might we help Japanese learners customize their learning journeys so that they are just as excited about the process as they are about the results?
It’s time for solutions.
Brainstorm / Develop / Storyboard / Feature Set / User Flow
To answer this question, I brainstormed dozens of ideas for solutions. During this process, I considered how schools, textbooks, smartphone apps, and social media might approach this problem.
…Which is when I landed on this idea:
A Manga Translation Practice Site
What would you call it?
YAKU (this was changed later)
Who is it for?
Manga fans who want to learn or practice their Japanese in a fun way, that allows them to play the role of a translator and interact directly with the media they love.
What does it accomplish for them?
It encourages them to practice their Japanese in a way that feels both enjoyable and productive, while using actual native material, instead of “textbook” dialogue.
How does it accomplish this?
Users can choose a manga to translate and replace the Japanese text with their own English text. They are given guidance-- when they highlight certain words or phrases, they will see a dictionary definition
But more importantly, it was an idea I could see users like Gemma LOVING:
So, I started developing the concept for YAKU further. And I started by creating and prioritizing a feature set list...
...then creating the user flow I planned on prototyping: Browsing and Translating Manga.
Then I turned the concept to reality.
Sketches / Wireframes / High-Fidelity Prototype
Starting in my sketchbook...
I took them from low fidelity...
to high fidelity!
Oh, and we also changed the brand name from “YAKU” to TOKU, in order to avoid some negative connotations with that word in Japanese.
And now, (re-)introducing TOKU.
is a Japanese learning website designed for English-speaking manga fans.
On it, users will be able to browse and read Japanese-language manga, as well as try their hand at translating them, with guidance as needed.
Read Manga
Read manga in Japanese. Use the scroll bar or tap the left and right sides of the screen to navigate between pages.
Open Dictionary Guide
Tap a speech bubble to isolate it. Tap "DEFINE" at the top right to open up the Japanese-to-English dictionary guide.
Translate It
Tap "ADD TRANSLATION" to type in your own translation for that speech bubble. Hit the check button to submit.
See your Translation!
See how your English translation looks! Tap the "TRANSLATION" button to toggle the original Japanese text.
But, I didn’t stop there...
Usability Testing / Iterations / Next Steps
I of course had to let
be tested by real-life users.
Like the interviews, I tested the prototype with 5 different participants.
And these were the task flows I prototyped and tested:
1
Browsing Manga
2
Navigating Manga Chapters and Pages
3
Using Define and Translate Features
Here’s a sample of what the users said:
A.H.
“Looks and feels like a manga reading website!”
S.H.
“I’d like to see a sign in button on the home page.”
L.L.
“I like the panel isolation feature!”
J.C.
“The scroll bar for pages isn’t very intuitive.”
A.M.
“Maybe remind us to read right to left?”
KEY INSIGHTS
from user testing
Users liked...
1
the familiar layout compared to other manga sites
2
the helpfulness of the “Define” feature in particular.
3
the clean, non-cluttered UI
Things to improve:
1
Difficult/confusing to navigate between manga pages
2
The button to toggle between translation and original text, not intuitive
Using the key insights I learned from user testing, I then made some final updates to the design and functionality of the high fidelity prototype of TOKU.
So, I replaced the progress bar with clear “Next Page” and “Prev Page” buttons. And I redesigned the Translation-Original Text toggle and moved it to the top toolbar with the other non-navigation buttons.
I also added a “Read this Way” tooltip that appears briefly when users first open a manga chapter.
