Designing the next version of a 20M-user AI translation app and building a unified design system for Papago.
From 2020 to 2021, I led the mobile app design for Papago, Korea’s largest AI translation service with over 20M monthly users.
I proposed the next product vision for Papago and shaped the early concept and structure for its education-focused experience. I also built the mobile design system and designed Papago’s iOS widgets.
Papago Next: New Mobile Home Structure
Papago Next: New Mobile Home Structure
To unlock new growth opportunities for Papago, I proposed a card-based, expandable home structure that replacing the previous home screen that simply listed four translation modes.
The core translation actions remained immediately accessible, while the rest of the home became flexible. A refined bottom tab also improved access to valuable features such as History and Web Translate.
To unlock new growth opportunities for Papago, I proposed a card-based, expandable home structure that replacing the previous home screen that simply listed four translation modes.
The core translation actions remained immediately accessible, while the rest of the home became flexible. A refined bottom tab also improved access to valuable features such as History and Web Translate.
Papago Next: Personalized Content Feed
Papago Next: Personalized Content Feed
Below the translation card, the content feed became modular and customizable, and could be personalized
based on users’ usage patterns — surfacing shortcuts, content modules, and ads as a tailored feed.
This shifted Papago from a utility-only interface toward an education-oriented product with clearer monetization opportunities.
Below the translation card, the content feed became modular and customizable, and could be personalized
based on users’ usage patterns — surfacing shortcuts, content modules, and ads as a tailored feed.
This shifted Papago from a utility-only interface toward an education-oriented product with clearer monetization opportunities.
Papago Next: Translation Workflow
Papago Next: Translation Workflow
In the improved design, I proposed a unified translation experience where users could switch input methods at any time, regardless of how they entered the flow. This created a consistent, flexible translation experience across all input types.
In the improved design, I proposed a unified translation experience where users could switch input methods at any time, regardless of how they entered the flow. This created a consistent, flexible translation experience across all input types.
In the new translation screen, the layout stayed consistent even when switching input sources.
Papago’s signature brand color was applied only to key CTAs instead of the entire background. This preserved brand recognition while creating a clearer and more unified UI.
In the new translation screen, the layout stayed consistent even when switching input sources.
Papago’s signature brand color was applied only to key CTAs instead of the entire background. This preserved brand recognition while creating a clearer and more unified UI.
Papago Next: Enhance Feature Accessibility
Papago Next: Enhance Feature Accessibility
The Web Translate feature, previously buried inside the side menu, was promoted to its own tab and redesigned with stronger browser functionality.
Frequently used tools like History and Favorites were also surfaced into dedicated tabs, improving visibility and ease of access.
The Web Translate feature, previously buried inside the side menu, was promoted to its own tab and redesigned with stronger browser functionality.
Frequently used tools like History and Favorites were also surfaced into dedicated tabs, improving visibility and ease of access.
Papago Next: Result – Shift Toward Education
Papago Next: Result – Shift Toward Education
The proposed redesign influenced Papago’s long-term roadmap toward education and content expansion.
As part of Papago’s shift toward education and content expansion, I designed the early concept and flows for Papago Edu, Papago’s language-learning experience.
This work included the new home structure, vocabulary tools, and camera-based vocabulary creation,
which were later adopted into the final product.
The proposed redesign influenced Papago’s long-term roadmap toward education and content expansion.
As part of Papago’s shift toward education and content expansion, I designed the early concept and flows for Papago Edu, Papago’s language-learning experience.
This work included the new home structure, vocabulary tools, and camera-based vocabulary creation,
which were later adopted into the final product.
Papago Design System: Colors & Foundations
Papago Design System: Colors & Foundations
While leading the mobile app design, I initiated a system-wide cleanup of Papago’s fragmented foundations.
The app contained more than 10 different screen patterns, 100+ inconsistent colors, and over 200 components.
These inconsistencies slowed development, made dark-mode support difficult, and reduced overall design clarity.
While leading the mobile app design, I initiated a system-wide cleanup of Papago’s fragmented foundations.
The app contained more than 10 different screen patterns, 100+ inconsistent colors, and over 200 components.
These inconsistencies slowed development, made dark-mode support difficult, and reduced overall design clarity.
I consolidated Papago’s dispersed design assets into a unified system and applied full dark-mode support.
This improved visual consistency, reduced redundancy, and created a scalable foundation for future updates.
I consolidated Papago’s dispersed design assets into a unified system and applied full dark-mode support.
This improved visual consistency, reduced redundancy, and created a scalable foundation for future updates.
Papago Design System: UI Components
Papago Design System: UI Components
Along with color and asset optimization, I reorganized Papago’s UI elements into a structured component library.
This made the system lighter, more consistent, and significantly easier to reuse across the app.
Along with color and asset optimization, I reorganized Papago’s UI elements into a structured component library.
This made the system lighter, more consistent, and significantly easier to reuse across the app.
I consolidated Papago’s dispersed design assets into a unified system and applied full dark-mode support.
This improved visual consistency, reduced redundancy, and created a scalable foundation for future updates.
I consolidated Papago’s dispersed design assets into a unified system and applied full dark-mode support.
This improved visual consistency, reduced redundancy, and created a scalable foundation for future updates.
Papago Design System: Result
Papago Design System: Result
I reduced Papago’s fragmented color set from 105 colors to 22 and
built a scalable light/dark theme system that now supports 448 screens across the app.
This cleanup enabled faster development cycles, improved accessibility,
and provided a maintainable system for continuous product evolution.
I reduced Papago’s fragmented color set from 105 colors to 22 and
built a scalable light/dark theme system that now supports 448 screens across the app.
This cleanup enabled faster development cycles, improved accessibility,
and provided a maintainable system for continuous product evolution.
105 → 22
105 → 22
105 → 22
Number of colors simplified
in the design system
Number of colors simplified
in the design system
Click per
contents title
448
448
448
Screens impacted
by the optimized system
Screens impacted
by the optimized system
Click per
contents title
