Designing a Language Selector for Boost Mobile
A new initiative was created to design a “Language Selector” or “Language Switcher” for Boost. Boost Mobile mainly operates in the US, Canada, and Mexico. Though, it does support many international services and the company has international customers as well.
Auto Redirects
Boost was currently relying on redirects based on a user’s location (IP) or browser’s language. However, if a person is located in the US, it doesn’t necessarily imply that they fluently read English. And if their preferred language is Portuguese, it doesn’t necessarily mean that they currently reside in Brazil.
The Problem
We can’t always be confident in a user’s language preference, which is why we need to give the user the option to pick their preferred.
Direction from business
We need to accommodate for Spanish speaking user’s
We may expand further for more languages in the future, but for now we will only focus on English and Spanish
The language selector will be implemented in Boost Mobile, Boost Infinite ( Boost’s new pre-paid service brand ), and the Sales Portal ( An application that sales agents use to help customers in store )
Beginning of Research
When given the task of designing for a new feature, I always scour the internet for popular design patterns that users may already be accustomed to. I also like to see if there are any UX case studies surrounding the topic to leverage what research others have already done, and to get an understanding of what works and what doesn’t.
First findings:
The most popular design pattern for a language selector is a dropdown in the header
Large companies that accommodate for many different languages ( 10+ ) tend to opt for a right side bar nav with an overlay
Another design style I came across which wasn’t quite as popular but still seemed effective was a large modal with an overlay
Flag icons can add nice visual interest and may be nice for the user to skim as opposed to a wall of text filled with different languages
First Attempt
First attempt at designing and prototyping the interactions.
Matching our current design system
In the long run I can see Boost implementing more languages, but for the time being we are starting out with only Spanish and English. Because of this, I have decided to opt for a dropdown in the header. If we were to get to a point where we had more than 10 languages I would suggest using a side nav. The dropdown I am using respects Boost’s design system with Boost colors and follows the same interaction pattens as the rest of the site during states like hover and click for consistency.
Providing a clear way of changing languages
Providing a clear way for users to change languages is crucial. The header (most popular) and footer are common places for users to find language selectors. When automatic detection fails to work or users want to manually change the site language, it’s crucial that the language switcher be easy to find.
According to Nielson Norman Group “Across time and cultures, we found that users looked to the upper right hand corner to change a country or language setting. If they couldn’t find it there, they would turn to the top left corner. We observed that in our previous round of US studies and in our most recent study with Chinese users. This behavior makes sense, because utility features in sites are often located in that page area.”
(Utility navigation consists of secondary actions and tools, such as contact, search, subscribe, save, sign in, and share.)
The bottom line, put utilities which in this case is the language selector in places where people can expect to find them. Following conventions improve website visitor satisfaction, user experience, and conversion rates.
Local format
In my initial design I didn’t think of this, but with further research I realized how important this point is. You should always use the name of the language in its local format. AKA always write the other languages in the native spelling, not how I would write it out in English.
If you’re linking to pages in German and Chinese, label them as ‘Deutsch’ and ‘中文’ — not ‘German’ and ‘Chinese’.
Changing Spanish to Español, giving the Spanish speaking user the ability to read Spanish the way they are used to seeing it written out.
Flags are not languages
This is another key point that I missed with my original design.
Why flags do not represent languages
Flags are symbols that represent countries or nations.
Languages represent a shared method of communication between people.
Flags are unique to a country or nation: but languages are often spoken across borders. By using a flag for a language, you may confuse or even offend users. When showcasing my design to another coworker when I still was using the flag icon this was a big concern of his and the business that I was not originally aware of.
The Spanish flag is often used to represent the Spanish language. However, in Mexico alone there are more Spanish speakers than Spain.
Spanish is also spoken in numerous other countries including Argentina, Colombia, Peru and Venezuela. There are also a large number of Spanish speakers in the United States. Is a Spanish flag the best choice for users outside of Spain?
Since we are designing for language preference not country preference, I swapped out the flags for a globe icon. The globe icon is a common design pattern that users associate with switching languages.
Designing for Mobile Web / App
With limited real estate English is abbreviated to ‘EN’ and Español is seen as ‘ES’. Choosing to place the language selector in the header has also helped on mobile. Because of this, it is above the fold and easy for users to find. A lot of times in mobile, features can be hidden and tucked away in hamburger menu’s or are at the bottom of the page with a long scroll.
Final Designs
Final designs showcasing different design styles between different brands as well as the full interaction between switching languages.