UXJosh ShiauUX

Lingua Franca

UXJosh ShiauUX
Lingua Franca

designed by Josh Shiau and implemented by Alex Hadik – 2016

 

Background

During my time at IBM designing everything from datacenter dashboards to chatbots there was one constant, which was that our tools would be used by people around the world. After all, IBM stands for International Business Machines, and part of that reach means we have a responsibility to design for a range of cultures and languages.

Currently in the localization process, design mockups are built into code, tested, then translated into the product's supported languages. If the translated copy exceeds the button size, its sent back to design to fix. By giving designers the ability to quickly check text length you save time and money downstream.

 

Translation for Scale  

Lingua Franca is a tool to evaluate wording choices and make better design decisions that scale across languages.

Translate

Lingua Franca lets you translate any text input into the 103 most popular languages. The source language will be automatically detected, but if you like you can select the source language yourself. By default, Lingua Franca translates your text into every available language, but you can narrow down the languages to just those that your product is supporting.

Rank

Lingua Franca displays all translations ranked by rendered length. That means that translations are ranked based on the number of pixels they take up based on a generic typeface (Open Sans) instead of counting characters, meaning you can easily compare languages by their actual length on screen. Your source language is highlighted for easy comparison.

 

Desktop Web Application

 

Mobile Application

 

Interaction Guidelines

States.png
 

Formatting Guides

Final Motion Prototype

Final Motion Prototype

Zeplin Formatting Guide

Zeplin Formatting Guide