Transforming Google Translate

Three UX takeaways from redesigning the latest version of the Google Translate website

Pendar Yousefi
Google Design

--

Last month, after a long journey, we launched a new version of the Google Translate website with a responsive layout and a modern Material Design UI.

Google Translate’s responsive new website

Given the global popularity of Google Translate, we knew we had to prepare for change aversion. There are a lot of great articles written about the topic that provide strategies for minimizing the change aversion response. But as it is often the case with projects of this scale, there are some lessons that can only be learned through hindsight. Here are my top takeaways from redesigning the Google Translate website.

1. Your users are your crystal ball

If you’ve read about change aversion, you’ve likely come across a chart like this:

It shows the different possible outcomes after a change is introduced, but it doesn’t help you predict the outcomes for your change. This lack of clarity and control frustrated me initially. But with each iterative experiment, I realized our users were naturally guiding us through their actions and feedback toward the best possible outcome.

During our experimentation stage, Google Translate website users were submitting feedback submissions ranging from laudative to castigating. It wasn’t always an easy read, but my team and I spent hours reading as many of them as we could and responded by filing bugs or tweaking the design. For example, by reading through the comments we realized we had inadvertently changed the tab order for some elements, causing productivity headaches for our everyday users, so we changed it back. Similarly, we tightened up the information density of the page after we heard loudly that people preferred seeing more information on the screen.

It’s tempting to obsess over having the perfect design before showing it to real users. But it’s better to focus on designing a phased experimentation plan that allows you to collect and respond to user feedback at scale. As long as you have a mechanism for doing that, your users will help you figure it out.

2. Soliciting preference in usability studies can be a trap

Usability testing your new designs can help you catch its biggest issues and give you a broad assessment for your design direction. Typically these studies are done with low sample sizes– a dozen participants or fewer. While it’s tempting to ask usability study participants which design they prefer, the results are not statistically reliable and can mislead you into a false sense of security.

We did several rounds of qualitative user research studies for Google Translate’s new website, discovering and correcting usability issues early on. We also solicited participants’ design preferences, who overwhelmingly preferred the new version. But we were mindful not to draw strong conclusions from the preference data, and it was just as well — the actual spread of user preference after our initial roll out did not quite match what we had seen earlier in user testing.

3. Let A/B testing be your arbiter

With the new design, we wanted to bring more vibrance to Google Translate’s website. In our early iterations we used colorful illustrative icons (created by the talented Alexander Mostov), but early experiments with those assets in our mobile apps didn’t show good results. So we dropped them in favor of simpler Material icons.

Blue vs. gray backgrounds for translation results

Another way we introduced some personality was by making translations appear in white text over a blue background, just like how we always displayed them in our mobile apps. To make longer translations easy to read, we adaptively changed the text and background colors to black over gray after a user’s query reached a certain length.

But some of our teammates were still not convinced with the blue color. A/B testing came to the rescue. We ran two side by side experiments — one using the adaptive approach described above and the other always showing translations in dark text on a gray background. The results were convincing, users in the blue background experiment were translating less often, probably because they didn’t like it. I was sad to say goodbye to the blue, but we found other ways to brighten up the website, for example by using illustrations on promo cards and empty states.

Redesign projects can be hard. Not knowing how people will react can be scary. What I learned through redesigning Google Translate’s website was that instead of trying to prevent or control the people’s aversion to change, it’s more productive to embrace it as an important part of the design process. By designing a carefully planned rollout strategy that allows your users to submit feedback you can get valuable data at scale from those who matter most — helping you make better design decisions.

With contributions from Olivia Grace.

--

--