Side-by-Side Translation – intuitive multilingual editing in CMS
A feature that allows editors to compare original and translated content side by side.
A feature that allows editors to compare original and translated content side by side.
Role: UX/UI Designer
Timeline: September 2025 – completed within the assignment timeframe.
Project Type: Enhancing multilingual content management by introducing a side-by-side translation feature for editors and translators.
Scope: End-to-end user journeys, financial dashboards, real-time payments
Tools Used: Figma
Deliverables: High-fidelity mockups of the side-by-side translation feature, educational onboarding modal, and a scalable UI concept compliant with WCAG 2.1 & 2.2 standards
Project Overview
Creating a side-by-side translation feature for a CMS, enabling editors and content authors to view and edit source and target languages simultaneously. The goal was to streamline multilingual content management, reduce translation errors, and ensure a smooth, accessible editing experience.
Language: Conversational. Approachable. Even compliance feels... kinda okay?
Challenges
Through research and task requirements, several pain points emerged:
Translation accuracy and consistency: Editors often lost context when switching between separate views of source and target content.
Workflow inefficiency: Constantly navigating across tools slowed down the translation process.
Quality assurance: Missing translations and fallback content were hard to spot.
Scalability: Companies managing multiple languages needed a flexible, intuitive solution that could grow with them.
Process
I analyzed current CMS workflows and identified how translators interacted with multilingual content. The biggest issue was context switching: editors had to open multiple tabs or windows to compare content.
Together with the product team, we set core must-haves:
• A clear side-by-side layout (source on the left, target on the right).
• Support for a fallback language when a translation was missing.
• A maximum of three columns for clarity.
• Manual editing with a single “Save and Close” action updating both versions.
• Full compliance with WCAG 2.1 & 2.2, EN 301 549, RGAA, BITV, and ADA standards.
Design explorations
• I sketched multiple layouts, testing 2- and 3-column variations.
• Created a component library for translatable fields (text, media references, rich text).
• Prototyped a modal for the Product Tour, designed to introduce and encourage adoption of the feature.
Validation
Ran usability tests with translators and content authors using Maze.
Collected analytics insights with Hotjar and Google Analytics to confirm workflow bottlenecks.
Iterated on color contrast, focus indicators, and keyboard navigation to meet accessibility requirements.
Creating a side-by-side translation feature for a CMS, enabling editors and content authors to view and edit source and target languages simultaneously. The goal was to streamline multilingual content management, reduce translation errors, and ensure a smooth, accessible editing experience.
Language: Conversational. Approachable. Even compliance feels... kinda okay?
Challenges
Through research and task requirements, several pain points emerged:
Translation accuracy and consistency: Editors often lost context when switching between separate views of source and target content.
Workflow inefficiency: Constantly navigating across tools slowed down the translation process.
Quality assurance: Missing translations and fallback content were hard to spot.
Scalability: Companies managing multiple languages needed a flexible, intuitive solution that could grow with them.
Process
I analyzed current CMS workflows and identified how translators interacted with multilingual content. The biggest issue was context switching: editors had to open multiple tabs or windows to compare content.
Together with the product team, we set core must-haves:
• A clear side-by-side layout (source on the left, target on the right).
• Support for a fallback language when a translation was missing.
• A maximum of three columns for clarity.
• Manual editing with a single “Save and Close” action updating both versions.
• Full compliance with WCAG 2.1 & 2.2, EN 301 549, RGAA, BITV, and ADA standards.
Design explorations
• I sketched multiple layouts, testing 2- and 3-column variations.
• Created a component library for translatable fields (text, media references, rich text).
• Prototyped a modal for the Product Tour, designed to introduce and encourage adoption of the feature.
Validation
Ran usability tests with translators and content authors using Maze.
Collected analytics insights with Hotjar and Google Analytics to confirm workflow bottlenecks.
Iterated on color contrast, focus indicators, and keyboard navigation to meet accessibility requirements.
Creating a side-by-side translation feature for a CMS, enabling editors and content authors to view and edit source and target languages simultaneously. The goal was to streamline multilingual content management, reduce translation errors, and ensure a smooth, accessible editing experience.
Language: Conversational. Approachable. Even compliance feels... kinda okay?
Challenges
Through research and task requirements, several pain points emerged:
Translation accuracy and consistency: Editors often lost context when switching between separate views of source and target content.
Workflow inefficiency: Constantly navigating across tools slowed down the translation process.
Quality assurance: Missing translations and fallback content were hard to spot.
Scalability: Companies managing multiple languages needed a flexible, intuitive solution that could grow with them.
Process
I analyzed current CMS workflows and identified how translators interacted with multilingual content. The biggest issue was context switching: editors had to open multiple tabs or windows to compare content.
Together with the product team, we set core must-haves:
• A clear side-by-side layout (source on the left, target on the right).
• Support for a fallback language when a translation was missing.
• A maximum of three columns for clarity.
• Manual editing with a single “Save and Close” action updating both versions.
• Full compliance with WCAG 2.1 & 2.2, EN 301 549, RGAA, BITV, and ADA standards.
Design explorations
• I sketched multiple layouts, testing 2- and 3-column variations.
• Created a component library for translatable fields (text, media references, rich text).
• Prototyped a modal for the Product Tour, designed to introduce and encourage adoption of the feature.
Validation
Ran usability tests with translators and content authors using Maze.
Collected analytics insights with Hotjar and Google Analytics to confirm workflow bottlenecks.
Iterated on color contrast, focus indicators, and keyboard navigation to meet accessibility requirements.
Solution
The final design featured:
• Side-by-side translation view with clear distinction between source, target, and optional fallback.
• Manual editing and saving across versions, with transparent UI copy explaining what gets saved.
• Scalable 3-column layout, allowing editors to compare multiple languages without overwhelming the screen.
• Onboarding modal as part of the product tour, guiding users through the feature’s benefits.
• Accessible interaction patterns, ensuring compliance with international standards and inclusivity for all users.
Impact
The solution significantly improved the multilingual editing experience:
Faster translation workflows → less context switching meant shorter editing cycles.
Higher content accuracy → direct comparison reduced errors and improved alignment with source.
Better scalability → editors could manage multiple languages at once without losing clarity.
Accessible by design → ensured compliance across WCAG and EU accessibility standards.
Solution
The final design featured:
• Side-by-side translation view with clear distinction between source, target, and optional fallback.
• Manual editing and saving across versions, with transparent UI copy explaining what gets saved.
• Scalable 3-column layout, allowing editors to compare multiple languages without overwhelming the screen.
• Onboarding modal as part of the product tour, guiding users through the feature’s benefits.
• Accessible interaction patterns, ensuring compliance with international standards and inclusivity for all users.
Impact
The solution significantly improved the multilingual editing experience:
Faster translation workflows → less context switching meant shorter editing cycles.
Higher content accuracy → direct comparison reduced errors and improved alignment with source.
Better scalability → editors could manage multiple languages at once without losing clarity.
Accessible by design → ensured compliance across WCAG and EU accessibility standards.
Solution
The final design featured:
• Side-by-side translation view with clear distinction between source, target, and optional fallback.
• Manual editing and saving across versions, with transparent UI copy explaining what gets saved.
• Scalable 3-column layout, allowing editors to compare multiple languages without overwhelming the screen.
• Onboarding modal as part of the product tour, guiding users through the feature’s benefits.
• Accessible interaction patterns, ensuring compliance with international standards and inclusivity for all users.
Impact
The solution significantly improved the multilingual editing experience:
Faster translation workflows → less context switching meant shorter editing cycles.
Higher content accuracy → direct comparison reduced errors and improved alignment with source.
Better scalability → editors could manage multiple languages at once without losing clarity.
Accessible by design → ensured compliance across WCAG and EU accessibility standards.
Let's get to know each other.
Download CV
Let's get to know each other.
Download CV
Santander
Zen.com
BMW
Ferrero
Wedel
Sector 3.0
Samsung
WWF
The 3E System
Procter & Gamble
Credit Agricole
Santander
Zen.com
BMW
Ferrero
Wedel
Sector 3.0
Samsung
WWF
The 3E System
Procter & Gamble
Credit Agricole
Santander
Zen.com
BMW
Ferrero
Wedel
Sector 3.0
Samsung
WWF
The 3E System
Procter & Gamble
Credit Agricole
Let's get to
know each other.
Download CV
Let's get to
know each other.
Download CV
© 2025 Made with ❤️ by Katarzyna Bobrowska
© 2025 Made with ❤️ by Katarzyna Bobrowska
© 2025 Made with ❤️ by Katarzyna Bobrowska