Wordreference

User Experience Redesign

my role

UX Research, Visuals, UI Design

project lenght

42 days

tools

Figma, Illustrator, Google Docs

I spend most of my time online, reading, listening, and writing in a language that is not my native tongue. So I often use digital tools to get the most accurate translation I can find. But even though digital translators are getting better every year, they still suffer from some problems that slow down all my online activities, and perhaps those of many other users like me as well

Problem

Translation Tools are hard to navigate

Online word translators are full of accurate linguistic information, but the presentation of that information is cluttered and follows an old UX paradigm.
This makes extracting an accurate translation more difficult and time-consuming

Solution

Design a better Flow

I think modern user experience design can improve enormously the effectiveness of WORD TRANSLATORS so users who are looking for a specific meaning, can reach the precision they need faster and in a more engineered way.

how did I do this?

Research

Research Methodology

For this research I used
  • Moderated Interviews
  • Unmoderated online survey
Interviews have been made on PRO users of translating tools like professional translators and language teachers, to be able to understand their mental process in using such a tools and to discover patterns in their process.

The online survey has been made in a community of translators (online forum), as a quantitative proof (or disproof) of few assumptions I made

Participants

Participants have been carefully selected among PRO users of translating tools because I needed someone fully aware of translating problems which are proficient with translating tool, not casual users.

Participants to the moderated interview were
  • Professional translators (55%)
  • Language teachers (35%)
  • Expat Students (10%)
Expat students were interviewed because they need to express complex concepts for their writings and because young students usually feel more comfortable interacting with multiple digital tools

Time spent on research

The interviews and online survey took a lot of time because preparing questions with which I could extract valuable information from each interview was not trivial. It was also not easy to schedule a half-hour interview with a professional translator.

Analyzing the responses and synthesizing them into usable insights also took more time than I expected.

Research goals

My goal for this reseach was to find a pattern in the translation process of a word in order to design a User Experience that optimize such a process.

Who are users

Professional Translators. Half of the users I’ve interviewed were people who made their job out of translations. For the quality of the research it’s important to involve people who have a certain level of expertise with the dynamics of translation.
Language teachers. They are aware of how languages are taught and what’s the most effective way to deliver and fix information in memory. After the questions in my survey, I asked them if there is an effective path through which we can deliver translations

Expat students. Having their courses in another country, students use foreign languages to listen, read and write. So they spend quite some time using translating tools for their studies.
In addition, this kind of students are usually more comfortable with technological tools so they may have an interesting point of view on them

What users think

I did some interviews with end users to understand their typical behavior. The users were almost all professional users of translation tools. Some of them use CAT tools that divide a document into paragraphs and provide similar human translations of each block, but word translation tools are also used to give specific terms an accurate translation in a specific context.

Word translators respond to a single research with a huge amount of information that the user must digest and synthesize to extract the necessary meaning.

All of the people who agreed to be interviewed have their own style and approach to -meaning extraction-, but they all believe that the amount of information provided by online tools needs to be better organized.

Insights from the interviews

from all the questions asked to the interviewees, I managed to extract relevant insights that will be useful to have a clear idea at the beginning of the design phase

Insight 1

On average, users are not fully satisfied with the accuracy they achieve in their translations. They rarely exceed 70% satisfaction

Insight 2

The main reason why many users rely on online translation tools is the speed of finding information compared to the classic traditional dictionaries.

The second reason is the amount of information they are able to find.

Insight 3

The biggest problem that emerged from the interviews is that in order to find the meaning they want, they have to navigate back and forth through multiple tools on multiple platforms

Insight 4

Online translation tools respond with a huge amount of information that is usually displayed in a confusing way. This results from outdated, or no use, of user experience design.

A small Bias to remove

All questions for interviews and online survey were carefully prepared to avoid any kind of bias in the interviewees, but sometimes bias can hide within us. During the interviews, I realized that I had a bias.

I caught myself believing that people would answer a question about synonyms in a certain way, but they did not. Fortunately, I was able to identify this False-Consensus Bias in my mindset before it affected my conclusions.

After interviews and survey, I decided to look at the landscape of online translation tools to have a better idea on how most translators work

What others do

There are many products on the market that do automatic translations, but I selected only Multilingual Dictionaries

Other companies in the -word translation- field have different flexibility and different accuracy in the information they provide to the user for the translation of a word.

Wordreference is the tool that responds with the highest amount of linguistic information to a word search, but such a load of notions needs to be organized both visually and logically to provide a valuable service to the user.

Since Wordreference is the most comprehensive tool for word translation and, in my opinion, would benefit from a modern approach to its User Experience, I decided to redesign this app

User Flow

So far I acquired that all users rely on multiple online resources to get the accuracy they want for their translation.

Depending on the complexity of the translation and the expertise of the user, this process of browsing multiple sources seems to be confusing, time-consuming, and quite random.

The user flow of most of the users I interviewed can be summarized as a series of random iterations over multiple online tools in order to be able to make sense of the cloud of information they found.

In this research, User Flow is the tool that more than any other can synthesize and visualize effectively the final goal of this project.

Shorten the User Flow and simplify it is the ultimate goal of this redesign

Before redesign

User flow is unnecessary long and unstructured

What we want instead is to design an optimized process that gives users a path to their precise meaning that is few clicks long and can be reached in few seconds instead of few minutes. This can be achieved
  • by finding the most efficient way to go through the information
  • by finding the most efficient order to learn such information
  • by applying the modern design principles and the latest UX Design practices

After redesign

The goal of this redesign is to shorten the user flow and eliminate unnecessary random iterations on different tools

So I can finally summarize few points on which I can start design solutions to the problem

Pain points

After all the synthesis and reasoning about the data collected, we can finally summarize into 2 clear points to focus our design on. Most of the interviewed users’ pain points have two common roots: there is no optimal process to get to our accurate translation and the information is displayed poorly. All this generates a high cognitive load and increases the time required to reach the desired meaning.

1. no standard process

There is no standard process to go through all the notions you get from translation tools

Different tools give different type of information about a word and the user have to synthesize all the knowledge and extract the meaning

2. no design principles

Translation tools provide information in confusing way because they use poor or outdated design principles
Almost all the word translation tools available online respond with too little care for design principles. This result in a confusing experience due to the amount of information to display

Actionable challenges

Define and design an optimized process that will improve speed and effectiveness in learning a new translation
Design a UI that uses the latest design principles like Gestalt, color theory, typography, and visual hierarchy

Wireframe

After some trial and error, I came out with this design that divide all the content in multiple sections that users can scroll on the VERTICAL dimension.
  • Primary meaning
  • Secondary meaning
  • Compound forms
  • Collocations
Phrasal verbs are some of the sections of information that WR provide to every search. Each section will be visually well separated from the other to emphasize the different nature of the content in it.

The user can also browse the content HORIZONTALLY by opening the row of each meaning with a tap on it.

The core idea

All the information for a single word can be accessed through blocks of linguistic types on the vertical dimension (scrolling) and groups of meanings on the horizontal dimension (tapping).

In this way the cloud of information for the translation of a single word is not anymore a unorganized cloud of which the user must make sense, but in a 2 dimensional organized plane on which the user can move rationally to find the precise meaning s/he’s looking for.

First digital prototype

When the design of the main concept was satisfying, I quickly translated the paper sketches on a Figma digital wireframe to be able to create a small prototype and see if people would have responded as I expected.

vertical learning dimension

horizontal learning dimension

The order can improve comprehension

One of the interviewees was an expert linguist that suggested to place the blocks of information that Wordreference return on each search, in specific order because it improve the effectiveness of the comprehension of the meaning for that word

Low fidelity prototype and A/B Testing

This phase of the design was done to test some design ideas on the users and whether those ideas would solve the problem I was trying to solve.

The happy path was walked most of the time by the users who agreed to test my prototype. All of the tech-savvy users understood the dynamics of the design and were able to navigate information in both dimensions quite easily, while the less tech-aware users needed a little help to see the two-dimensional plane on which they were looking for the translation they needed.
After testing, I decided to improve the UI with some visual clues that were meant to help you move around the app. I put a small orange bar, well contrasted with other colors, on the rows that contain additional information for that word. The bar indicates that you can tap forward to open the row and eventually tap back to the previous step and close the row again.

After a round of A/B Testing on a small online community, the version with the horizontally placed orange bar seemed to be more intuitive, so I decided to move forward with it, on my design

Hi Fidelity mockup

before

current Wordreference UX

after

reengineered wordreference UX

the design result more polished and more contrasted for accessibility.
Colors and negative space play an important role in providing a better experience for users.

learning a new meaning will happen browsing all the information in an organized 2-dimensional plane with two components, one vertical and one horizontal

vertical learning

Every word have a different amount of information to be displayed and the vertical dimension can potentially scale to infinity to accommodate how much content is needed

horizontal learning

when you find the context you’re looking for, you can move horizzontally to go deeper on that road and find more information relevant to the precise meaning you’re seeking

Takeaways

Working on this project I’ve learned how important is the process of selection of people to interview and how crucial is to thoroughly craft the questions to extract the most out of users experience.

Besides I’ve learned that among all the tools and techniques a UX designer have at his/her disposal, it’s important to understand which ones are more effective for every project.

Thanks to all the participants, in presence and online, thanks to all the users from the Wordreference forum and to you for reading also the credits like I do at the end of a movie at the theater