Transfluent

Redesigning a web translation application

 
 
 

RESPONSIBILITIES

Responsive Web Interaction design, Workshop Facilitation, Benchmarking, Usability Testing

THE COMPANY

Transfluent was founded with the belief that all companies should have an easy way to become global and communicate with their customers in their local language. Their company creates tools that solve translation and localization needs of their users.

CONTEXT & CHALLENGE

To help one-off translation needs for various customers, Transfluent created an online tool, the translation widget, to make their day to day needs easier and more efficient. However, the widget was designed from a technical perspective offering lots of flexibility but a cumbersome experience with poor usability. When approached for this problem, my team was asked to design an improved experience that kept different types of customer touch points and needs in consideration. I worked with a visual designer (Angela Oliveira) and front-end developer to re-create this tool.

 
 

Figure 1: Original translation widget, prior to re-design

 

Process

PHASE 1: IDENTIFY USE CASES

 
 

It’s important to understand who you’re designing for prior to starting a project, however you don’t always get the luxury to do full user research. In order to understand the types of people that used the translation widget, I ran a workshop with Transfluent employees to learn about the different types of users and the scenarios they may come across.

The workshop included:

  1. Brainstorm on users - Individually write out all potential users on post-its

  2. Affinity mapping - Work together to create meaningful groups from list of potential users

  3. Brainstorm use cases - Evaluate each group and brainstorm core tasks and scenarios

  4. Scenario creation - Use storytelling to understand context of why a user comes to the site

The output of this workshop helped me create 3 core personas to understand who to design for.

Figure 2: Personas

 
 
 
 

PHASE 2: UX EVALUATION & COMPETITOR ANALYSIS

Using the personas as a lens, UX expertise, and usability testing, to I evaluated the Transfluent widget to determine how the product was not meeting user needs, as well as to understand usability issues in the product. Additionally, I evaluated 3 other translation products to gauge how Transfluent performed against its competitors.

The output of this analysis was a report that outlined opportunity areas for the widget. A few of the insights discovered include:

  1. Users require different levels of translators, depending on their need, but it’s not clear which type a user should select.

  2. Users need to have a clear understanding of pricing, and time constraints when putting in an order.

  3. The process in translating text is not clear in terms of what tasks a user needs to complete, and when they will be finished.

Figure 3: Selection of pages from UX report

 
 
 

PHASE 3: DESIGN

Using insights from research, I went through an iterative process of creating mid-fidelity wireframes for the translation widget experience that addressed the need for a clearer process, better expectation setting around time constraints and pricing, and understanding what translation service best fits the user need. Throughout this process, I usability tested screens and flows to make sure the concepts were clear and easy to use, and also worked with our developer to make sure concepts were technically feasible. My work involved exploring designs for both web and responsive web experiences.

 
 

Figure 4: Selection of web wireframes

 
 

Figure 5: Selection of responsive wireframes

 
 

PHASE 4: PRODUCTION

After completing wireframes and user-flows, I worked closely with our visual designer to explain the intent of the designs so she could help make the design stunning. 

I then worked with our developer to make sure the finalized design fit into technical constraints. To help ensure a smooth handoff, I delivered a deck of specs explaining the design, interaction behavior and logic.  We had regular checkins to ensure the tool was developed with correct functionality and that the UI matched the visual designs. 

Figure 6: Examples of design documentation handed off to development

 

REFLECTION

I think this project was a good exercise in how to work fast within time constraints and pursue a user centered process without the ability to do actual user research before hand. While I found using workshops as a way to quickly download information from stakeholders, the process reminded me that talking to users directly is most useful, as stakeholders can sometimes be biassed. In the end, however, the work was helpful in guiding decisions throughout my design process. I was able to see this project through to development, and I had a wonderful team to work with that helped push this project to completion.