Translator application

Application wrapper for generating in-context translations

This was a short term project to take a previously developed prototype and transform it in to a production ready application.

The goal of the translator application is to allow international partners to easily provide native language translations for a small range of B2B products.

The translator application takes a ‘framed window’ approach, consisting of tools to create translations, and an iframed instance of the application to be translated.

The prototype application was largely complete for the core functionality, but I quickly identified a number of opportunities for improving the user experience.

Role types

The application was developed to be used by two distinct groups of actors:

The authorise role in the prototype presented a significant problem, in that it immediately published authorised translations to the target applications production environment. This resulted in partial and unfinished language packs going live to end users.

I designed an additional step in the authorise process allowing for collation of groups of authorised text that could be put into production collectively.

Partial view of the Authorisation process diagram
Authorisation workflow
The main publish screen allows groups of translations to be published en masse
Authorisation workflow

Visual style

I felt the translation application needed to be visually distinct from the application being translated. I created a dark theme that contrasts well with the applications to be translated.

I used a simple ‘traffic light’ colour scheme to, in conjunction with text labels, emphasise statuses throughout the application. (Fig. 3)

Status labels are reinforced through a simple colour scheme
Status filters colour scheming

Workload progress

I created an overview page with cards (Fig.4) summarising the current status of each application requiring translation, and providing clear signposting to appropriate actions (Translate, review, publish).

I introduced some subtle gamification by laying out the overall status of each application for each target languages in the form of a ‘league’ table.

Each application to be translated is featured on the overview page with a summary card.
Application card

Responsive layouts

During testing it became clear that problems caused by differing text and line length between languages could be hidden within the context of the translation application.

The main environment for translating is desktop computers with reasonably large screens. The applications to be translated are built responsively, but the view seen within the context of the translator is generally a large screen layout. Text overflow problems are sometimes only visible at smaller screens sizes.

I built a simple jQuery mechanism to allow the user to resize the host iframe, triggering layout variations to check for any text length issues.

A simple drag handle allows the user to resize the iframe to check for any text overflow problems.
Draggable window resizer


Click to enlarge