The challenge
The Oracle.com corporate site receives a high volume of non-US traffic from mainly non-SEO sources.
By directing this traffic to the country sites, we can improve customer experience and better use our translation and dynamic capabilities to provide more relevant content and engagement, proven to improve inbound and opportunities.
The Oracle.com international sites now have the critical mass, translation quality and localization investment to enable superior and complete customer journeys. There is an opportunity to achieve these improvements through the Oracle.com new code base project.
Project goals
- Direct more international traffic from Oracle.com homepage to country sites
- Improve customer journeys and experience
Date
November 2022 - January 2023
Role
UX/UI Designer
Tools
- Figma
UX Team
- UX manager: Ryan O'Neill
- Accessibility: Christopher Land
- Creative director: Vu Nguyen
Approvers: OCOM International Team
Existing design
- Compared to some competitors, Oracle does not redirect the user to the country site when accessing their corporate site.
- Uses an Active Country Selector banner that lets you make a decision to stay on the current site or go to a regional/country site
- ACS banner language is always English
- Uses a globe icon on the banner and footer
- If the user is on a subpage and changes the language, the user is always redirected to the homepage on the selected language.
Best practices
Manual preferences
- If auto-redirect is implemented we should allow users to override redirects with manual preferences.
- Automation is great to have, but we want visitors to have the option to tailor their experience
Label languages locally
- When users select a language it’s better to always use the name of the language in its local format.
- Avoid language shorthands or initials.
The country selector should appear in both the header and footer
Users expect the country/language selector to be located in the header or the footer of each page, and they often watch out for flags, “Globe” or “Translate” icons to find it.
Use flags for countries
- Avoid flags for languages
- If the content is specific to language and country, then individual flags are highly appropriate. But languages within countries should not be generalized.
The Solution
Better visibility of the country selector. Less clicks
- Icon in the global navigation bar
- Active Country Selector popover
Global navigation bar
- Circular flag is included between the search icon and buttons.
- When having a flag does not apply, a globe is there instead.For example in regional sites like https://www.oracle.com/middleeast/ or https://www.oracle.com/asiasouth/
Active Country Selector
Popover language translations messaging order:
- First is preferred browser language
- Second is based on the language site the user is on
- Primary CTA is browser language
- Secondary CTA is site you’re visiting
- Flag - based on the site the user is visiting
- Choose a different country/region text is based on the browser language
- Country list modal opens when user clicks on Choose a different country/region or in the flag (located in the nav bar)
- Countries are categorized by region and are listed in alphabetical order, leaving the non-latin at the end
- Regions don’t have flags, but the globe icon instead
Accessibility considerations
- Lang attribute to identify the language of the text and read it correctly by the screen reader.
- In the modal, countries should be nested lists
Sites with two language versions
Breakpoints
Dev handoff
