Carbon for IBM dotcom expressive components: redesigning the footer
Research insights: the footer as secondary navigation
For a large-scale website like IBM.com, with millions of pages and a vast global audience, user research revealed that the footer plays a critical role as a second navigation system. When visitors cannot immediately find what they’re searching for through the main navigation or on-page content, they often scroll to the footer as a last-resort discovery tool.
Multiple usability studies (including internal IBM research and industry-wide UX best practices) confirmed that users perceive the footer as a reliable place to locate:
- Essential links (contact, privacy, terms)
- Secondary but important navigation categories (products, solutions, company information)
- Trust signals (legal disclaimers, accessibility, cookies)
- Locale or language settings for global consistency
This insight guided the strategic redesign of the IBM.com footer into something more than just a collection of links: a structured, user-first navigation experience.
The concept: a page-like structure for the component
Research confirmed that the users are also viewing the footer as ↗ a last resort for hard-to-find content. So based on multiple steps of internal and external research, the IBM.com footer was reimagined as a mini-website. The new footer mimics the UX of a regular site with its own:
- Header:
- IBM logo on the left (acting as an anchor and brand reassurance)
- Locale or language selector on the right, giving users immediate control over their regional experience, just like in the big header of the ibm.com website
- Content, grouped by clear categories:
- Products & Solutions (products group)
- Learn about (learning group)
- About IBM (everything IBM)
- Follow IBM (social media)
- "Footer of the footer" - at the bottom, a persistent set of global essentials and legal links:
- Contact IBM, Terms of Use, Privacy, Accessibility, Cookies
- Adjunct Legal Links, which allow certain product or service pages to display additional, page-specific legal notices
The result is a footer that feels coherent, purposeful, and navigable, rather than a dumping ground of miscellaneous links.
Scalable variants needed for aprox. 14 million page visits per month
Another critical requirement was efficiency while maintaining consistency. IBM.com serves over 14 million pages per month, and the footer had to function seamlessly across all of them.
Research made it clear: no matter where a user lands, the footer must provide an efficient, reliable and consistent structure. IBM pages have different functions and purposes, from pure expressive forms like a general presentation page, to transactional pages, such as check out and registration experiences, but also for stand-alone experiences such as product demos or slide shows.
To meet this need, I designed three scalable footer variants:
- Default – full “mini-website” experience, with grouped navigation, IBM logo, locale selector, and the global footer/Adjunct Legal Links
- Short – Simplified version containing the header (IBM logo + locale selector) and the global footer with Adjunct Legal Links
- Micro – Minimal variant, showing only the locale selector and the global footer with Adjunct Legal Links
Execution
By standardizing these three variants, IBM achieved:
- Global consistency across millions of pages
- Flexibility to adapt the footer to different contexts
- Efficiency for design, development, and governance teams managing IBM.com at scale
Important
While the Default footer is suitable for most of the IBM.com pages (amongst notable examples we include the IBM.com US home page), the Short footer removes all the high-level corporate navigation and it is reserved for approved transactional pages, such as check out and registration experiences. Further more, the Micro footer variant is the most space-efficient variant and it only shows the required legal links and the optional locale selector to maximize the space for the page content. This special brandless variant is reserved for stand-alone experiences such as product demos or slide shows.
Note:
The Micro footer does not include the IBM 8-bar logo not only because it has to be the most space-efficient variant, but also due to the reseach results that have shown a major visual inconsistency that will take place at sm (mobile) breakpoint where the Short footer is fullfilling this branding necessity.
The process: from research to rollout
The redesign required deep collaboration and rigorous process to ensure global scalability:
- Research & benchmarking
- Conducted user research and analyzed analytics to understand how users interact with large-scale website footers
- Reviewed competitive benchmarks across major enterprise websites (Microsoft, Oracle, SAP) to identify strengths and gaps
- Content strategy & information architecture
- Partnered with IBM’s content teams to define clear navigation groupings
- Prioritized clarity, scannability, and reduction of link overload
- Wireframing & prototyping
- Built low-fidelity wireframes to test structure and hierarchy
- Developed high-fidelity prototypes in the Carbon for IBM dotcom components to validate visual and interaction consistency
- User testing & iteration
- Conducted usability sessions to confirm that users could quickly locate links in the new structure
- Iterated based on feedback, fine-tuning labels, grouping, and accessibility standards
- Stakeholder alignment through weekly reviews
- As part of IBM Brand team, worked with global stakeholders across IBM Design, Development and Content
- Presented multiple rounds of design reviews to secure alignment with business units and legal teams
- Global rollout & governance
- Ensured that the new footer system was fully responsive and accessible (AA/AAA compliance)
- Reviewed before deployment across the pages while allowing for localized variations and Adjunct Legal Links
Outcome
The redesigned IBM.com footer became a strategic navigation hub that supports users, strengthens brand trust, and unifies IBM’s vast digital ecosystem.
It balanced clarity and consistency with the flexibility required by one of the world’s largest websites in the world, proving that even the footer can be a powerful design tool for user engagement and brand experience.