Mid-Fi Prototype: Created in Axure, interactive version below
Deepak Pradeep
Product Designer
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
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
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
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.
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.
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
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: 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