Deepak Pradeep
Product Designer

Visual Editor

Mid-Fi Prototype: Created in Axure, interactive version below

Visual Editor

Visual Editor is a web plugin that allows translators to directly manipulate text on websites for translation, and site owners to review and submit text phrases for professional translation.

As UI/UX Designer at Translate.com, I led research and design of the Visual Editor plugin.

Role: UI/UX Designer
Company: Translate.com (Emerge Media)
Type: Web Plugin
Project Length: 3 months (Jul - Sep 2017)
Methodology: Water-Scrum-Fall
Design Team: I was the sole designer
Tools: Sketch, Axure, GoToMeeting, Confluence, JIRA

Visual Editor

Design Sprint Tasks: I proposed a user-centered approach to this problem

Problem Summary

Translate.com offers paid professional human translations from a pool of verified translators for complex jobs such as document and website translations.

The Customer Relationship Management (CRM) team got feedback from customers that their website translations were inaccurate. After investigating, we found that translators inaccurately translated phrases due to lack of business and website context. The Product team decided to build a Visual Editor plugin to address this issue, and I, as lead designer, recommended a user-centered design approach.

User Groups

  • Professional translators

  • On-site translators

  • Site owners

Goals

  • Allow translators to directly manipulate text on websites so they have business and website context

  • Streamline site owner workflow to order new translations on-demand and review completed translations

Approach
Visual Editor

Existing Workflow: Website Localizer dashboard (top) and Translator job board (bottom)

Contextual Inquiries

The existing offering was a Website Localizer plugin that customers installed on their website, which crawled and captured text from pages and fed them into a translator job board for translation. I performed contextual inquiries to learn more about this workflow.

Participants

  • 3 translators (2 copy editors, 1 post-machine editor)

  • 3 customers (2 site owners, 1 on-site translator)

Key Findings

  • Translators could only see the webpage URL of where a phrase was from, and not the exact location of it

  • Translators copied text to external editors to assist in translation, because the job portal had usability issues with long text

  • Translators wanted to know the domain of the job before starting it (arts, food, etc.) since they were unfamiliar with certain domains

  • Site owners wanted better ways to identify commonly occurring words on their site and professionally translate them first to improve their translation percentage

  • Site owners cannot judge translation quality until there is a customer complaint

Visual Editor

Persona: Hybrid persona with flows, comments, and action items created in Sketch

Personas

I created 4 personas based on findings from my contextual inquiries:

  • Amelie: Translation Pro

  • José: Translation Newbie

  • Jenny: In-house Translator

  • Robert: Business Localizer

The personas were a hybrid of user profile, journey map, actual user comments, and insights/action items. I organized a meeting and presented my findings, including printout  personas, to align stakeholders on user needs.

This process really helped set the direction and get backing for the project and methodology. I later converted the insights and action items into JIRA user stories.

Visual Editor

Competitive Analysis: I analyzed 6 competitors, compared features to our current and planned product

Competitive Analysis

After receiving feedback through contextual inquiries and aligning on user needs with personas, I conducted a competitive analysis to understand how other companies solved the problem of providing business context in translations.

I also documented other basic feature offerings and compared it with our current offering, and where we'd ideally want to be in order to be competitive in the market.

Visual Editor

Sketch: Site Owner view in Visual Editor

Sketches

I sketched early low-fidelity concepts for the Visual Editor plugin keeping in mind the 4 personas. The sketches were used for discussions on feasibility with engineers, and providing stakeholders a design direction.

I proposed there needed to be two interfaces for Visual Editor - one for Translators, and another for Site Owners. Each user group had different goals, and different interfaces based on user account type would be the best way to address these goals. Stakeholders agreed on the direction.

Mid-Fi Prototypes

Realizing the complex functionality of the plugin, I decided to create mid-fi prototypes before moving into final UI designs so I could get user feedback focused on functionality without getting distracted by visuals. I created two separate prototypes in Axure:

Translator Prototype

  • Tap directly on phrases, or select jobs from the Phrases tab

  • See if another translator is currently working on a phrase

  • Access reference material (e.g. dictionary) right next to current translation task

  • Ask site owner questions to get additional context on translation requirement

  • Track changes in translation, word count, and URL in Phrase Info tab

Interact below, or open in a new tab - https://hs6kv2.axshare.com/#g=1&p=visual_editor_-_translator&c=1

Site Owner Prototype

  • Preview web page in original language and translated languages

  • Dashboard view in Phrases tab with human translation progress and scope

  • Preview web page in responsive views to test if translated text break any web styles

  • Edit CSS directly in Visual Editor view

  • Submit all machine translated phrases for human translation with one click

Open in a new tab to interact - https://hs6kv2.axshare.com/#g=1&p=visual_editor_-_customer&c=1

Visual Editor for Translator: Mid-Fi Prototype created in Axure, click to interact

Visual Editor

Usability Tests: I tested the Translator (top) and Site Owner (bottom) prototypes

Usability Tests

I facilitated remote moderated usability tests using the mid-fi prototypes, and was able to recruit the same participants from the contextual inquiries. This way I was able to follow-up with them on earlier concerns and make sure those were addressed in the prototypes.

Participants

  • 3 translators (2 copy editors, 1 post-machine editor)

  • 2 customers (1 site owner, 1 on-site translator)

Key Findings

  • Translators did not understand the name tooltip with blinking cursor over a phrase. It was supposed to indicate that another translator is currently working on it

  • Translators preferred viewing the Phrases tab in vertical side-by-side mode than horizontal, but liked having the option to switch

  • Translators did not easily understand hovering over the clock icon to view remaining time on task

  • Site Owners liked the Quick Order feature in the Phrases tab and said it would help them address specific high priority areas of their web pages

Visual Design

After analyzing findings from usability tests, I started creating high fidelity UI designs in Sketch. At the same time, I was collaborating with a peer designer to create a new style guide. I applied that style guide to this project.

I also addressed feedback brought up during usability tests in the final designs. For e.g. the name tooltip issue was addressed with the use of color highlights, and I defaulted the Phrases tab view to vertical side-by-side mode. Designs were documented on Confluence and Zeplin.

Translator
Site Owner
Visual Editor

Visual Editor: For Translators and Site Owners

Conclusion

The Visual Editor project was a challenging initiative that I was able to tackle by applying user-centered design methods. The final design was a result of iteration and feedback from everyday users of the service.

This was, however, my final project at the company and I was not able to see it through to development to analyze results.

6
Contextual Interviews
5
Usability Tests
3
Design Iterations
17k+
Translator Community