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:
Translators
Providing translations for screens in the target application.
-
Authorisers
Reviewing submitted translations, and rejecting or authorising them for use in the live application.
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.
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)
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.
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.
Screenshots
Click to enlarge
