Multinational Global Header
Summary
An executive from Ricoh Global, impressed by our usability testing on the Ricoh-USA header, engaged us to redesign the global header serving 61 countries and multiple languages.
Ricoh Global sought a design balancing cultural and language needs with consistent branding.
We conducted heuristic reviews of all sites, interviewed UX teams across six regions, and held workshops to address unique header challenges. Regular meetings between Japan and USA teams ensured alignment. After stakeholder approval of prototypes, we performed user testing, developed detailed wireframes, and created a standards document to guide consistent deviations.
Overview
Ricoh Company, Ltd. is a global leader in office automation equipment, including copiers, printers, and related supplies, and is the world’s top digital copier manufacturer.
With factories and sales affiliates across Asia, Europe, and the Americas, Ricoh earns about 40% of its revenue outside Japan—18% from Europe and 16% from the Americas.
Ricoh operates 61 country-specific websites. As the company grew without unified standards, countries independently designed their sites, resulting in 15 different header designs.
These variations stem from differences in widgets and elements like search, global location indicators, country and language selectors, and navigation tabs.
For example, headings ranged from this style:
To this style:
Customers often switched location between the global site and their country's site. New customers became frustrated when similar items worked differently between websites.
We asked,
"How can we develop a global header that can be applied to every sight?"
The search bar
After inspecting the 61 websites, many inconsistencies were discovered in the design, contents, and functionality of the headers.
There were differences between search bars:
Jakob Nielsen recommends a 27-character-wide search box, but this doesn’t account for wider logographs in other languages or common search terms.The analytics team identified the most frequent search terms on Ricoh.com and Ricoh-USA to establish a baseline.
We designed for average translation lengths, focusing on Japanese, which has the widest logographs among our site languages.
Optimal search box width was based on the longest translation’s pixel width, not character count.
Most searches on Ricoh.com and RUSA use English Latin characters:
- 1 Latin character = 8 pixels wide
- Average Ricoh.com searches: 13 characters × 8 pixels = 104 pixels
- Average RUSA searches: 10 characters × 8 pixels = 80 pixels
Considering Japanese logographs are wider:
- The English word “desktop” is 56 pixels wide
- The Japanese “デスクトップ” has fewer characters but takes more horizontal space
To accommodate wider Japanese characters, we doubled the average Ricoh.com search length to 26 characters (26 × 8 pixels = 208 pixels), rounded to 210 pixels for the search bar width. No labels or placeholder text were added, as user testing showed familiarity with the search bar’s function and appearance.
There were differences between placement of global location indicator and country selection:
Country locator and navigator
There were differences between placement and function of the country name and selector components
Customers needed to be able to understand which site they were on at a glance. They also needed a means to change to another Ricoh country website.
A country name, a globe icon, and the word "change" (or its equivalent in the language) solved this problem simply and elegantly.
Language selection
The site was configured to detect the user's location via IP address, however, it could not detect their web browser's default language. Users still need the option to choose the language they preferred.
There were many language selection methods, some of which are seen below.
A language menu appears only on sites with multiple languages. Previously, single-language sites showed the menu, misleading users who clicked expecting options but found none—causing frustration. This fix prevents wasted clicks and improves user experience.
Designing for languages that read right to left
A key challenge was adapting designs for right-to-left languages, requiring careful placement to meet their unique usability needs.
Designing the global navigation
The global navigation design needed to be streamlined as well. There were inconsistencies regarding order labeling, conjunction usage, and label order.
Designing for multiple languages required accommodating text expansion—e.g., “Search” in English becomes the nearly twice-long “Rechercher” in French—so navigation bars had to allow extra space. To reduce label width, we considered replacing “and” with ampersands. Research showed ampersands are widely recognized, though some languages use their own logograms (e.g., Greek ϗ, Irish ⁊). The final decision was to use ampersands or their local equivalents consistently across navigation labels, ensuring uniformity regardless of the conjunction style.
Interface styles
The header elements align to meet the needs of each global website and each language used. They look and feel similar but the design allows for each country's exceptions and nuances. Some sites may have a primary service site that needs to be placed in the header, while others have no need for a language selector. Each exception does not stray far from from the layout for a usable header for each country.
Conclusion
This functionality wasn’t built during my tenure. Since then, I’ve learned some of my suggestions were adopted, while others were missed. I see missed opportunities—like users wasting clicks trying to select nonexistent languages—which is frustrating. Without clear oversight on link vs. button use, inconsistencies risk growing across the current 61 websites and future expansions.