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.