Translation App

Microsoft
translator Redesign

Translation App

Microsoft
translator Redesign

Introduction

Microsoft Translator is a multilingual translation app. This redesign is a complete rework of its design and aesthetics, adopting Microsoft’s Fluent design system. It introduces new communication features, including live chat, while creating an intuitive interface.

Year

2023

2023

2023

Timeline

3 Months

3 Months

3 Months

Scope

Complete Redesign

Complete Redesign

Scope

Complete Redesign

Problem Space

The Microsoft Translator app is missing essential features like the ability to share or copy translations, which users expect. Many functions are hidden or poorly explained, making them difficult to access. The design is outdated, with inconsistencies across the interface, and it doesn’t reflect Microsoft’s current branding. Dark mode is also absent, adding to the app’s lack of modern usability.

Problem Space

The Microsoft Translator app is missing essential features like the ability to share or copy translations, which users expect. Many functions are hidden or poorly explained, making them difficult to access. The design is outdated, with inconsistencies across the interface, and it doesn’t reflect Microsoft’s current branding. Dark mode is also absent, adding to the app’s lack of modern usability.

Secondary Research of TRanslation Apps

Google Translate processes 146 billion words daily, surpassing combined output of all professional translators in a month.

poeditor.com

poeditor.com

poeditor.com

Industry-Specific Market Potential

The global machine translation market reached over $1.1 billion in 2022, up from $650 million in 2020, with expectations to grow to $3 billion by 2027

Redokun

Accuracy & Competence

Students utilising translation apps like Reverso made fewer lexical, cohesion, omission, and text-type errors compared to those not using such tools, emphasising the role of design in enhancing translation accuracy.

ResearchGate

Unmet Needs

Studies indicate that current mobile translation apps often fail to meet the diverse needs of international student users, suggesting significant opportunities for design improvements to better serve these populations.

arxiv

USER Reviews

User reviews from the App Store and Play Store revealed key insights from real user experiences, highlighting opportunities to refine the Sony Headphones Connect app for a more seamless and tailored experience.

“The Imploding App!!!”

It’s not as easy to use now and I can’t copy and paste the translation like I used to. I used to be able to communicate with my friends by copying translated messages and texting them, amazing, but apparently that was too convenient and made way too much sense

El d'maré - App Store

“Almost unreadable”

The translations are fine and some of the features are nice, but the visuals are horrible. The font is lightweight and hard to read, the blurry photo background is distracting.

Karen Peterson - Play Store

“The service is good but this app needs work”

Firstly, with my iPad in dark mode it is extremely hard to see the text I type. Next, the app has not been written to function side-by-side with another app on an iPad. That feature was introduced years ago.

DrScottWatkins - App Store

“The update killed it”

The most recent update took away all the best features, like being able to copy/paste and especially, especially the split screen!!!!!!!!!!!!!! WTH?!? I also noticed the font size on the translations, especially for language like Hindi or Korean, is smaller makes the translation very hard to users to read.

Himalayan Hiker - App Store

“Features removed”

Presenter mode no longer working/translating and unable to download languages for offline use.

William Habeck - Play Store

Designing for diverse users

Creating distinct persona groups helps understand user challenges and goals. By analysing characteristics, needs, and commonly used apps, tailored needs can be effectively addressed.

How might the redesign of Microsoft Translator improve usability, cater to diverse user needs, and ensure the app remains competitive with other translation tools?

How might the redesign of Microsoft Translator improve usability, cater to diverse user needs, and ensure the app remains competitive with other translation tools?

How might the redesign of Microsoft Translator improve usability, cater to diverse user needs, and ensure the app remains competitive with other translation tools?

Experience Mapping

This user journey maps the typical experience of using a translation app, detailing key actions, thoughts, emotions, and opportunities at each stage. It also highlights overarching goals and frustrations, that provide insights into areas where design enhancements can improve the user experience.

Update the app’s design to reflect modern aesthetics and usability standards, including a new consistent layout, an improved navigation structure, and long-requested features like dark mode. This resolves outdated visuals and inconsistencies, providing a cleaner, more engaging user experience.

Update the app’s design to reflect modern aesthetics and usability standards, including a new consistent layout, an improved navigation structure, and long-requested features like dark mode. This resolves outdated visuals and inconsistencies, providing a cleaner, more engaging user experience.

Update the app’s design to reflect modern aesthetics and usability standards, including a new consistent layout, an improved navigation structure, and long-requested features like dark mode. This resolves outdated visuals and inconsistencies, providing a cleaner, more engaging user experience.

Site Map

The site map illustrates the user flow of the core functions within the app, including camera, text, and voice translation, along with the live chat feature. It also highlights how users can access and manage saved or previous translations.

Wireframes

Design System

As a Microsoft product, the redesign exclusively utilised the Microsoft Fluent Design System. Both the newer Microsoft Fluent 2 iOS (Community) and the older Microsoft Fluent Android (Community) were used in Figma. The Android version had not been updated on Figma for over two years at the time of redesigning, while the iOS version was regularly updated. The product centred around the Android version due to personal access to devices at the time for prototype testing.

Microsoft Teams
Intergration

After the original design phase, new ideas emerged to integrate Translator with both the mobile and desktop Teams applications. This concept was inspired by insights identified during the earlier persona discovery stage.

Microsoft Teams
Intergration

After the original design phase, new ideas emerged to integrate Translator with both the mobile and desktop Teams applications. This concept was inspired by insights identified during the earlier persona discovery stage.

1. Teams Integration in Mobile Apps

Translator is embedded in the Teams mobile app, enabling real-time multilingual conversations without switching apps.


2. Chat with Teams Integration

The chat feature now allows sharing and migrating conversations to Teams for multilingual within channels or personal chats.

Project Thoughts

By introducing advanced, industry-standard features, the update addressed critical shortcomings, ensuring the app remains competitive in a crowded market. It also paved the way for integration into Microsoft’s broader product portfolio and ecosystem, helping strengthen its relevance in the current tech landscape.

Building on the foundation of the TRAC Mobility projects, the challenge lay in balancing a familiar design system with the unique requirements of a vastly different product. Working independently helped refine my skills in combining functional UX design with aesthetics, solving complex design problems, and addressing diverse user needs.