Todaii Japanese: Enhancing web platform contribution
Descriptions
Part of the Todaii product ecosystem, focusing on mastering Japanese through daily news.
Diverse range of features: Daily news, JLPT tests, dictionary, video & podcast.
Problems
No design update for 9 years. The UI is clunky, cluttered & feels like it’s stuck in the past.
While the app evolved, the web was neglected, making the jump between devices feel messy.
Contributing only 10% of revenue, the Web needs investment to reach 2026 revenue goal.
+77.6%
Revenue grew 1.6x faster than the app, showing a rising demand from desktop users.
x3.0
First visit CR reflects better user quality & a higher potential for conversion.
x2.0
Retention D1 in 6 months, proving our web content is valuable despite the old UI.
However...
~3.7%
Contribution to Todaii Japanese’s total revenue, reflecting platform imbalance
0.37%
Low purchase CR indicates a massive gap compared to the app version or Todaii Japanese
5m 55s
Avg. Engagement time/AU is 6x lower than the app, limiting the potential for deep-learning
To ensure the design strategy aligns with business objectives, I conducted a stakeholder interview using SPHP framework. This allowed me to gather critical insights & bridge the gap between user needs & business constraints.
Success Metrics
What are the primary KPIs we need to impact
Priorities
What are the key features and biggest business challenges to solve?
History & expertise
Who are our key competitors, and what UX patterns should we learn from?
Process & workflow
What are the constraints or legacy issues we must address?
1. Primary goal
Boost web revenue & conversion rates to support the Todaii ecosystem's expansion.
Increase user stickiness & long-term engagement on the web platform.
2. What to do
Identify UX friction points in the current web experience.
Propose targeted solutions to enhance user experience, hence driving higher conversion rate & revenue.
With limited prior research on our Web users, Design Thinking provides a clear path to rebuild our foundation. It allows us to replace assumptions with actual user insights, ensuring that every update is driven by real needs.
My role
Review mining
Analyzing user feedback from customer service logs & forums to identify critical pain points & expectations. Gathered data helps us prioritize high-impact Web improvements efficiently.
Need dark mode ASAP. Studying on this screen really hurts my eyes.
Why are my saved words on the app not showing up on web?
As a beginner, I’m totally lost and don't know where to start
Is this really the same Todaii Japanese app? The design is so outdated!
Competitor Audit
I categorized competitors into Direct, Indirect & Emerging groups to identify market gaps. This audit helps benchmark key features & modern design standards to elevate the Todaii Web experience.
Tofugu
High readability through a clean & minimalist design with generous white space.
No built-in learning tools (dictionary or grammar lookup)
JLPT.JP
The most trustworthy source for official exam information and materials.
Outdated, text-heavy design & poor navigation that overwhelm users
Jisho
Simple interface with many search methods (handwriting, radicals, ...)
Disconnected user flow & non-interactive UI elements can cause confusion.
Japanese Pod 101
Excellent lesson hierarchy & a smart content discovery system.
Fragmented UI design & repetitive exercises can lead to user boredom.
Design audit
Integrating heatmap testing & usability heuristics to audit the current experience. Finding are organized into a 4-tier system to effectively prioritize design solutions.
Several usability & interface issues
Inconsistent UI elements & lack of system feedback leave users uncertain if their actions worked
Key features lack visibility while secondary elements occupy excessive space & focus
Lack of connection between features to guide users through a seamless experience
Redundant data & non-essential information distract users from their primary goals
Usability Testing
To address the lack of previous web user research, I observed users performing core tasks & followed up with interviews. This revealed the root causes of their behaviors & underlying needs.
5/6
Users found the UI cluttered & packed with unnecessary info
6/6
Users complained about poor sync between app & web, especially the missing notebook
By transforming previous research insights into How Might We (HMW) questions, we brainstormed & identified three core pillars for improvement.
Since usability tests confirmed the current flow works, I focused on optimizing information hierarchy & app-to-web feature integration. This refines the UI without forcing users to relearn, while ensuring technical feasibility.
I translated Todaii’s brand personality into a visual language using Aaker’s 5 Dimensions. This resulted in a blend of Minimalism, Material & Corporate design for a consistent web experience.
Minimalism
Simplifies text-heavy news layouts for better readability
Corporate design
Establishes a professional, trustworthy vibe for an educational platform
Material
Uses hierarchy & elevation to highlight key actions
A scalable foundation built to ensure consistency & efficient handoff before moving into high-fidelity design.
Foundation
A set of core elements (colors, typography, icons, grids, & elevations) that serve as the project's building blocks. These are aligned with the app version to ensure a consistent experience across all devices.
I structured color, number & typography tokens into a three-tier system: value, global & alias. This ensures a scalable & organized workflow, linking raw values to specific functional uses for easy maintenance.
Color
Mapped to surface, content & border for system-wide consistency
Number
Used for spacing, radius & sizing to maintain layout rhythm
Typography
Organized hierarchy linking font values to functional roles
I applied Atomic Design principles to build a modular library, organizing components into Atoms, Molecules, Organisms, and Templates. This ensures a scalable & consistent design system.
Each component has its own dedicated page. I used Figma properties to manage predefined states, ensuring both flexibility & system-wide consistency.
UI elements management
Components properties
Buttons
Used across the app for key triggers
Check boxes
Used for toggling specific options
Tabs
Navigate between content views
Card vocab
Displays vocab details & JLPT levels
Card notebook
Links to vocab list saved by users
AI button
Used for AI voice interaction
Side-by-side comparison between the old & new design. This section highlights the existing friction points & the design solutions applied to enhance the overall user experience.
Home
The redesign replaces the cluttered layout with a clean sidebar to make navigation much smoother. The new layout removes clutter & tidies up the feed so users can browse & find articles effortlessly.
Before
The horizontal header lacks space to add more features from the mobile app version.
The upgrade button is subtle & lacks visual hierarchy, leading to low user engagement.
Random image sizes create a messy & broken layout, making the platform look unpolished.
Bulky banner & irrelevant info crowd the layout, competing with articles for attention.
After
Switching to a side navigation to accommodate new features & ensure a more modern look.
Moved the CTA to both the main header & the sidebar with a discount tag to attract users.
Applied a consistent 16:9 ratio to all thumbnails for a cleaner & more organized grid.
Resize the banner & remove redundant information to minimize cognitive load.
Gradual Adaptation: Bridging Mental Model
To avoid mental model shock, I provided a shortcut to switch between the old & new versions. I also designed a tutorial page to help users easily adapt to the new interface & features.
Tutorial:
News detail
The redesign removes distractions to create a focused reading experience. With a cleaner layout & sticky controls, the new UI allows users to engage with articles effortlessly while keeping essential tools within reach.
Before
Suggested articles on the right creates visual noise, distracting users from their primary goal of reading.
The toggle is hidden at the top, forcing users to scroll all the way back up to switch it on or off.
The translation toggle is too subtle & easily overlooked, failing to catch users’ attention.
Long, dense articles can overwhelm users, making them feel lost while scrolling.
After
Moved related news to the bottom & allowed hiding both sidebars for 100% reading focus.
Sticky toggle allows users to toggle Furigana at any point during their reading process.
Increased size & color prominence, adding a checkbox to help users clearly visualize the on/off state.
Added a progress bar to help users track their position & stay in control of the content length.
User control: Collapsible lookup window
Source:
Lesson
The redesign organizes the diverse library into a goal-oriented structure with integrated search & filters. The new layout eliminates clutter, helping users find lessons easily & stay motivated to continue.
Before
Basic alphabet tables take up the most important space at the top, even though they are rarely used.
The library is diverse, but users lack tools to quickly find the right lessons for their needs.
The lesson list is too long & unorganized, overwhelming users with too many options at once.
The design lacks visual triggers & clear prompts, failing to motivate users to start a lesson.
After
Moved to the right sidebar to keep the main area clear while remaining easy to find when needed.
Added a search bar & filters for topics, levels & progress to help users find suitable lessons faster.
Grouped lessons into clear categories to reduce cognitive load & help users choose easily.
Added study statistics & a shortcut to ongoing lessons, motivating users to stay on track.
Premium
The redesign simplifies the upgrade process by removing clutter & improving visual hierarchy. Using selective visual accents, the new UI creates a premium feel that guides users toward key plans.
Before
Secondary content on the right takes up key space without influencing users’ purchase decision.
The monotone design feels unprofessional, failing to generate excitement or encourage users to upgrade.
The previous version lacked an option to purchase AI features, leading to missed sales.
After
Removed redundant content to highlight high-value details that drive purchase decisions.
Add visual accents to key areas for a premium look that can motivates users to buy.
Added a tab for the AI package, allowing users to view & purchase AI package on the web.
A data-driven look at how the redesign improved user experience through key UX metrics & user feedback.
+48.9%
+40.8%
Payment CR suggests the new web experience facilitate purchasing decision
+65.7%
DAU/WAU indicates that the new UI kept users more interested & active over time
+50.7%
Revenue contribution reflects the enhanced product value after the full redesign
+16.7%
D1 Retention reflects a positive first impression of the new website for new users
+4.27%
Monthly ARPU aligns with the goal of improving value for every paying user
User feedback
Most users love the cleaner interface, which helps them focus better on content. While most appreciate the improved clarity, some users reported occasional lag, particularly with the lookup feature.
A summary of the challenges faced during the redesign & the strategic lessons to improve future design workflows.
