Language switcher
A way by which a user can switch languages on Scroll
Scroll is currently available in 2 versions - English and hindi. We needed something to let our readers know that we are available in different editions/languages. To Solve this we moved through a couple of iterations trying to figure the possible methods.
Minor research.
Discussion with the team.
Design Iterations.
Finalising the design by discussing with the team
Testing the design on multiple instances (Mobile, Tablets, Desktops & Large Desktops).
HTML prototype.
Testing the design to check if it is pixel perfect.
For small mobile devices, put search inside kebab menu
Push it to beta with the help of Tech
Language Switcher gets no breathing room if, in the logged-in state, Subscriber name is long. Also, in this scenario, the navigation bar breaks if you resize the window.
Live.
During the product cycle we've gone through multiple iterations to provide the best experience for the readers that's easy and quick.
The first thought was to put the language switcher in the kabab menu which appears when a reader click on the right menu on the top right corner
By using the accordion functionality we can easily open and close. Also the space can be easily managed.
The was a bit complex for the regular readers as they might skip this feature. We then decided to show language feature on the homepage itself so that the user can easily notice the changes on the site.
Putting the language switcher next to scroll logo was a cleaner solution but this might affect the branding and for the desktops it might take the space of the date and time. So we decided to come up with something else.
That's also a simple solution that one could thought of. Creating a seperate section for the language section before anything starts. It can all sopport multiple languages support along with the dark land light mode support for the readers.
Redesigning the whole menu. This might work as most of the people are doing it now a days by creating a botton navigation along with the top navigation. With the amount of bandwidth we had this option might not work for now but for future when we are completely redesigning the menu. We can then think of it.
The final thought was to use a custom made icon that might change the languages with just one click. The reason behind this is - we are currently available in 2 editions so a single icon might work for now. We can change this completely whenever we are redesiging the full navigation. For the small devices (320px) we pushed the search option into the kabab menu as there is no breating space for 5 icons at the top menu.
Hindi and English alphabets changes as we switch editions.
Thanks for reading. All Projects