Translations manager

Design Process

Scope

Problem
Solution
Competitor Analysis
Milestone Definition

Design

Product Team Jams
Design Round-ups
Demo Presentations

Testing

User-testing Feedback

Wrap-up

Hand-off
Prototype

01 Scope

Our response to adding support for new languages is inefficient...

1. We’re using a sledgehammer solution for every translation request...

‍At Persona, our roster of supported languages is continually expanding in response to customer demands for new language options. For every translation request, Persona developers work with a translation vendor—who cost money and are often not operating as quickly as we would like—to get all strings used in all Persona templates translated into the new language.

2. We’re doing the customer no favors to maintain translations of their custom copy

‍Clients frequently opt to tailor our default strings within their templates to convey their unique requirements and brand voice. Whenever a customized string is introduced, clients must provide us with their custom translations in every language. Our Solutions Engineers then manually input these translations into templates, one string at a time, using our current, labor-intensive translations interface. This process is both cumbersome and highly inefficient.

1. Add any language + bring-your-own translations

‍Customers can add any language to their flow and input their own translations—without Persona having to bend over backward to support them.

2. Edit and manage your translations

‍Make it easy to update and maintain custom copy in the flow without breaking translations.

I conducted an audit of translations tools and other applications for building workflows, examining how translations were handled and managed in those contexts. I discovered various patterns that served as inspiration for this project.

Lokalise: Automatically extract translations from a file

Flutterflow: Auto-translations per template / page

Flutterflow: Manage all translations in one view

Lokalise: Choose your translation source

After defining the problem auditing other translation services, Melissa (PM) and I engaged in a collaborative brainstorming session, categorizing features into P0, P1, and P2 priorities. P0 items, crucial for the minimum viable product, were distinguished from the P2 nice-to-haves. With these distinctions, I could approach the project holistically, maintaining a clear understanding of priorities to inform the most effective end-to-end flow designs.

02 Design

After scoping the project out, I spent the next few weeks on design explorations through researching competitors, delving into potential flows and information architecture, and iteratively sharing my evolving designs with the team. I actively sought feedback through multiple channels to ensure a well-rounded perspective.

Product Team Jams

To facilitate collaboration and discussion on design iterations, I hosted weekly design jams with our cross-functional product team. For these jams, I would prepare a pre-read that outlines key discussion topics and goals. With the cross-functional team, we would engage in discussions to achieve alignment and determine next steps. Following the discussions, I would iterate on the designs according to the feedback received and share my updates asynchronously. This process would be repeated on a weekly basis.

Design Team Roundups

I also shared my designs on a weekly basis to the design team. These sessions were more informal, often involving delving into my Figma files to share various design options I had been developing to elicit design feedback or to explore potential alignment with other product surfaces.

Stakeholder Presentations

After a few weeks of exploration, we decided to present our recent work to senior leadership within the company. The aim of this meeting was to share our progress, attain alignment on the project with higher-ups, and address any concerns related to the overall product.

03 Testing

Finally, I gathered additional feedback by conducting user testing interviews with four Solution Engineers who utilize Flow Editor to assist their supported clients. I started by creating a user testing script, defining the session's objectives, establishing context for the interviewees, and outlining the specific scenarios to be tested across various flows. Once the script was finalized and cross-verified with Melissa, I proceeded to translate these scenarios into a high-fidelity prototype. We conducted A/B testing on information architecture variations, documented instances of confusion, and gathered insights on the overall translation management experience.

Through the user testing sessions, we gained unexpected insights that proved invaluable. This experience highlighted the significance of testing, as it revealed instances where the product team and I had been overly focused on our ideas, overlooking crucial aspects of the user experience. Here are some pivotal takeaways:

The CSV import and export behavior lacked user intuitiveness, leading users to overlook critical details in the fine print.
Modifications to the primary copy may be necessary without intending to alter translations. In such cases, the preferred approach is to retain the existing translations while introducing a subtle indicator to signal any changes made to the main copy.

04 Wrap-up

After incorporating feedback in additional rounds of iteration based on insights gathered from the user interviews, our team successfully arrived at the final designs. To streamline the hand-off process, I created a concise hand-off design document within my Figma file, featuring the ultimate designs and notes detailing any necessary interactions. Walker, our developer, then took these finalized designs for implementation.

Adding languages

In the updated translations interface, users have the option to include any language supported by Google Translate's list or add custom languages for specific locales, providing more customization flexibility.

CSV Upload

Users can streamline their translation workflow by uploading all translations via CSV, maintaining their existing workflows if they use another CSV entry platform.

Auto-translations

Users can automatically translate batches of strings or fill in all missing translations in their template using Google Translate.

Next Steps

Third-party integrations

Integrating with translations vendors aside from Google Translate

Third-party integrations

We have in /admin the capability to configure local terms for gov ID—the US the national ID is called a “state ID”, and all translations should say “state ID”

Different fonts for different languages

We have received requests for using different fonts for different languages

Better language roll-out process

Maybe we as Persona do want to officially support more languages in the future—how do we make that process less burdensome for us and easier to roll out to customers?

Previewing screens

Allow users to preview translations on the screen without leaving the translations management interface.

Previewing translated screens