Columbia Threadneedle

A Small Side Project That Sparked a Global Digital Transformation

Overview

What began as a small accessibility and design review evolved into a large-scale transformation of Columbia Threadneedle’s digital presence.

The team uncovered widespread inconsistencies, accessibility barriers, and inefficiencies, leading to the creation of a unified, WCAG-compliant design system.

With stakeholder support, the project improved usability, streamlined development, and set a new standard for digital accessibility and branding.

INDUSTRIES

Financial Services
Asset Management
Investment Management

ROLE

Product Designer

DISCIPLINES

Accessibility
UX / UI
Brand Identity

TIMELINE

2020

TOOLS

Sketch
InVision

The Side Project That Changed Everything

It started as a simple review, a small side project by a group of four. The goal was modest: to evaluate a legacy section of Columbia Threadneedle’s website for accessibility and design issues. But as we peeled back the layers, it became clear that this wasn’t just a single section in need of attention.

The issues ran deeper. The lack of a robust design system created inconsistencies that rippled across the entire site. Fonts, colors, and icons were a disjointed patchwork. Accessibility was a major pain point, with WCAG 2.1 noncompliance affecting usability for a significant segment of users.

What began as a small project quickly evolved into a global effort to transform the digital presence of this financial powerhouse.

The Problem: A Fragmented Experience

The challenges were clear:

  • Outdated Design System: The site lacked a unified design system, resulting in visual inconsistencies that undermined the user experience.

  • Accessibility Issues: Poor keyboard navigation, inadequate ARIA labeling, and a fragmented color palette excluded many users from fully interacting with the site.

  • Inefficiencies for Teams: Without clear standards, designers and developers wasted time navigating redundancies and fixing errors.

With a global client base and $564 billion in assets under management, Columbia Threadneedle couldn’t afford a subpar digital experience.

Discovery: The Power of an Audit

Our first step was to identify the scope of the problem. Through detailed audits, we uncovered key issues:

  • Color & Typography: Over 100 unique font and background colors were in use, many failing WCAG 2.1 AA compliance. Fonts varied wildly in size, weight, and alignment, creating a chaotic visual hierarchy.

  • Iconography: The site relied on an outdated and inconsistent icon library. Sizes and styles clashed, diminishing the site’s professional appearance.

  • Accessibility: Sticky navigation and poorly defined tab focus areas made keyboard navigation cumbersome. Developers found backward tabbing blocked in several areas, frustrating users relying on assistive technology.

Execution: Building the Foundation

We presented our findings to key stakeholders, gaining buy-in for a phased implementation plan. Our goal was to create a cohesive, accessible design system that supported the broader Ameriprise brand while meeting Columbia Threadneedle’s unique needs.

Color & Typography

  • Simplification: We consolidated colors and fonts, eliminating redundancies while maintaining brand integrity.

  • Compliance: Adjustments ensured WCAG 2.1 AA compliance across all text and background pairings.

  • Efficiency: A simplified codebase reduced errors, sped up development, and improved overall scalability.

Iconography

  • Consistency: We streamlined the icon library, aligning functional icons with Google Material Design standards.

  • Expansion: New icons were added to address gaps in the existing system, improving functionality and visual appeal.

Accessibility

  • Keyboard Navigation: We redefined focus states, cleaned up ARIA labels, and resolved issues with sticky navigation to ensure seamless keyboard use.

  • Efficiency: Consolidated code improved navigation performance across the site.

The Results: A Vision Realized

Though the work is ongoing, the initial phases have laid a strong foundation for the future:

  • A Unified Design System: The revamped color palette, typography, and icon library provide a consistent and polished experience for users.

  • WCAG 2.1 Compliance: Enhanced accessibility ensures Columbia Threadneedle’s digital products are inclusive and user-friendly.

  • Efficiency Gains: Streamlined design and code practices save time and resources for both design and development teams.

Lessons Learned: Small Steps, Big Changes

This project proved that even small beginnings can lead to transformative outcomes:

  • Collaboration is Everything: By leveraging the strengths of each team member, we turned a shared vision into reality in record time.

  • Empower Your Team: A flat structure and mutual trust gave us the freedom to focus on quality without cutting corners.

  • Focus on Impact: Addressing systemic issues rather than isolated problems delivered long-term value for both the business and its users.

What started as a small review is now reshaping the digital experience of a global financial leader, proof that even the smallest initiatives can create waves of change.

Previous
Previous

RiverSource

Next
Next

Ameriprise