Overview
As part of Citi Group’s initiative to modernize its business-facing digital experience, I contributed to the redesign of the company’s Business Brand by supporting typography updates, refining the color theme, and rethinking the information architecture (IA). This effort aimed to align with strategic goals of improving usability, clarity, and engagement for both internal teams and external users.
Problem Statement:
Citi Group’s Business Brand was struggling to keep pace with user expectations. Internally, employees faced frustrating roadblocks due to a cluttered, inconsistent interface and a fragmented information hierarchy that made even simple tasks feel complex. Externally, business clients—ranging from small business owners to enterprise partners—encountered overwhelming pages, outdated visuals, and unclear navigation paths that eroded trust and usability.
The experience felt outdated, disjointed, and difficult to navigate—ultimately creating friction where there should be confidence.
Key challenges included:
- Inconsistent branding that disrupted continuity and user trust
- Outdated typography and color palette that hindered readability and accessibility
- Disorganized information architecture, making it hard to locate tools, services, and critical resources
This project posed a clear challenge: to modernize Citi’s business-facing digital experience with a unified brand system, intuitive structure, and language users could actually understand.
Solution Statement:
To address the disconnect between usability and brand perception, we delivered a modernized Citi Business Brand that brought clarity, cohesion, and purpose to both internal tools and client-facing experiences.
Through cross-functional collaboration, user research, and iterative design, I helped lead a strategic transformation of the brand’s digital presence. We overhauled the typography, color system, and information architecture to ensure the experience was not only visually aligned, but also functional, accessible, and intuitive for all users.
As a result, we achieved:
- Increased task efficiency for internal teams navigating complex workflows
- Higher user satisfaction and engagement across key business client journeys
- Consistent brand alignment across multiple digital platforms
- Enhanced accessibility and readability, supporting a wider range of users
This redesign didn’t just modernize the look—it elevated how users interacted with the Citi brand at every touchpoint.
Research & Discovery
To ground our design decisions in real user needs, I conducted in-depth user research across two key phases, targeting both internal staff and external business clients. Our goal was to uncover pain points, mental models, and opportunities for simplifying the experience across the Citi business platform.
Phase 1: Internal Stakeholder Interviews
- Participants: 12 employees from sales, client support, and operations
- Methods: Semi-structured interviews & contextual inquiry
- Key Insights:
- Teams relied heavily on workarounds like bookmarks and saved PDFs just to navigate daily tasks
- Navigation terminology was inconsistent across departments, leading to confusion and inefficiency
- Staff expressed a strong need for unified language and a centralized structure
Phase 2: External User Interviews
- Participants: 10 business clients from small to mid-sized companies
- Methods: Remote usability walkthroughs of the existing site and services
- Key Pain Points:
- Navigation felt dense, overly corporate, and hard to follow
- Pages were filled with jargon-heavy content that made it difficult to scan or take action
- Users wanted simpler language and clearer task flows for actions like applying for loans or accessing financial documents
What We Learned
Both internal and external users shared a common theme: clarity was missing. Whether navigating services or understanding content, users craved a cleaner structure, simpler language, and a more intuitive interface. These insights became the foundation for every design decision that followed.
Wireframes
Designs
Design Goals
Grounded in user research, I established clear design goals to guide the Citi Business Brand transformation. Each goal addressed specific user pain points while aligning with Citi’s broader business objectives and brand integrity.
- Unify and Modernize the Visual Brand
Create a cohesive, updated visual identity across all business-facing platforms to improve consistency and professionalism. - Simplify Language and Layout
Remove jargon, enhance readability, and design intuitive layouts that build clarity, trust, and ease of use for all audiences. - Redesign the Information Architecture
Reorganize content and navigation to support user goals, reduce cognitive load, and streamline access to key tools and services. - Enhance Accessibility and Compliance
Ensure the experience meets WCAG 2.1 standards, improving usability for a wider, more inclusive audience.
Design Process
Information Architecture Redesign
To create a more intuitive and efficient navigation system, I applied user-centered methods to restructure Citi’s business content:
- Conducted open and closed card sorting sessions with internal employees and external clients to uncover how users naturally group and label information
- Redefined the site structure into 5 clear, primary content categories, each supported by logical and consistent sub-navigation
- Validated the new IA through tree testing, where users achieved a 75% success rate on key tasks—demonstrating significantly improved content discoverability and navigation clarity
Typography & Language
To improve readability and establish a clearer visual hierarchy, I modernized the typographic system and simplified the platform’s language:
- Replaced the outdated serif-heavy font system with a clean, accessible sans-serif stack optimized for digital interfaces
- Created a scalable typography system with defined hierarchy for headings, body text, and utility content—ensuring consistency across pages and components
- Collaborated with content strategists to transform jargon-heavy language into concise, approachable messaging tailored to both internal users and business clients
Color & Visual Design
To create a more modern, accessible, and brand-consistent visual experience, I reimagined the Citi Business color palette with both usability and corporate identity in mind:
- Introduced a refreshed color palette anchored in Citi’s iconic blue, balanced with soft neutrals and vibrant accent colors for key actions and interactive elements
- Prioritized accessibility by ensuring high contrast ratios across text, backgrounds, and UI components, meeting WCAG 2.1 AA standards
- Partnered with brand designers to align the new aesthetic with Citi’s core brand guidelines while pushing toward a more modern, business-forward look and feel
Iterative Prototyping
To ensure our design decisions were grounded in real user needs, we followed a structured, iterative design process from wireframes to validation:
- Created low-fidelity wireframes to test and validate the new information architecture and layout logic early in the process
- Developed high-fidelity prototypes in Figma, integrating real content, updated typography, and the refreshed color system for realistic interaction flows
- Conducted two rounds of usability testing with 8 users per round, capturing feedback on navigation, clarity, and content comprehension—allowing us to refine the experience based on real-world behavior
Outcomes & Impact
The redesigned experience delivered significant improvements in usability, efficiency, and user satisfaction across Citi’s internal tools and external business platform:
- Task success rate increased from 62% to 81% in usability tests focused on the new information architecture
- Average time on task decreased by 30% for internal users locating key documents and tools
- User satisfaction scores improved by 40%, based on post-launch feedback from both employees and business clients
Key outcomes
- +46% Improvement in Task Success Users completed key actions faster and with higher confidence post-redesign.
- 30% Reduction in Time on Task Internal teams accessed tools and documents more efficiently due to streamlined IA.
- 40% Increase in User Satisfaction Post-launch surveys showed significantly improved perceptions of clarity, usability, and trust.
- WCAG 2.1 AA Compliance Achieved Ensured accessibility standards were met across all updated interfaces.
- User-Centered Prototyping & Testing Built and tested multiple prototype iterations with internal and external users to validate design improvements.
Key solutions
- Redesigned Information Architecture Reorganized content using card sorting and tree testing to improve navigation and content discoverability.
- Refreshed Typography System Implemented a modern, accessible type hierarchy for better readability and content clarity.
- Updated Color Palette Developed an inclusive color system that enhanced visual hierarchy and met accessibility standards.
- Simplified Language and Content Collaborated with content strategists to rewrite jargon-heavy content into user-friendly, task-oriented language.
- User-Centered Prototyping & Testing Built and tested multiple prototype iterations with internal and external users to validate design improvements.
