UX Challenge: Our new website build must incorporate 2 human translated languages (English and Spanish) along with a Google translation widget to accommodate other languages from our target personas.
Step 1: Research / Discovery
Because the client had previously been using the Google Translation widget, they wanted proceed with incorporating the same module. Our technical research on the widget was able to highlight:
Negatives (*cue tiny violin*)
- Minimal customization of widget appearance
- Elements you can customize: font, background, languages and dropdown icon
- Language drop down is non-responsive
- Language options are not all viewable unless the browser width is 1050px+, causing display issues on smaller devices and screens
Positives
- Free Free Free!
- Offers a multitude of languages
- In the interim of having professionally translated pages of content, the module gives customers the ability to get a general understanding
Step 2: Build & Test
Solution 1
My first proposed solution positioned the two language tools apart from each other. We feared positioning them together would correlate them as the same thing and we didn't want the un-perfect Google translations to be confused with a professional translation of content. With a minor hack work-around, the tired looking Google Translate widget was placed behind a prettier looking "Google Translate" button click. This gave us the flexibility to tie the visual style into our new brand look and feel. [Google does not offer that feature in its stand alone widget.]
After some initial testing, most users found the translations were the same "feature" and should be combined, regardless if they were imperfect.
SOLUTION 2
Refining my previous solution based on user feedback, I proposed we integrate all the languages into the utility bar. The "Google Translate" terminology was adjusted to "Other Languages" to feel more cohesive with the other options. With a more consistent and integrated approach, customers found this more intuitive and convenient. (See screens of the revised experience below.)
Based on our research and testing, the client approved our second solution approach. (This will be pushed live with the next code update on ConEd.com)
Because of the widget's technical limitations, there are still the some draw-backs, but conducting some lo-fi prototypes and talking to customers about them, helped us build an approach that fit the expectations and needs of the customers. #win