ENTERPRISE UX design
ENTERPRISE UX design
Member Online Platform
Member Online Platform
How I helped transform a fragmented enterprise platform into a cohesive white-label solution for over 1.3 million superannuation members across 5 major funds in Australia.
This case study showcases how we conducted a comprehensive UX audit and redesign that addressed critical usability gaps across MUFG's flagship member portal platform.
How I helped transform a fragmented enterprise platform into a cohesive white-label solution for over 1.3M superannuation members across 5 major funds in Australia.
This case study showcases how we conducted a comprehensive UX audit and redesign that addressed critical usability gaps across MUFG's flagship member portal platform.
Industry
Industry
Fintech
Fintech
Category
Category
SaaS, Enterprise
SaaS, Enterprise
Timeline
Timeline
52 weeks (in parallel with other projects)
52 weeks (in parallel with other projects)
My Role
My Role
UI/UX Designer (1 of 2 designers)
UI/UX Designer (1 of 2 designers)
My Team
My Team
2 UI/UX Designers (includes me), 1 Sr. UI/UX Designer, 1 Design Sys. Lead, 1 PM
2 UI/UX Designers (includes me), 1 Sr. UI/UX Designer, 1 Design Sys. Lead, 1 PM
40%
40%
Task Completion Improvement
Task Completion Improvement
30%
30%
Support Ticket Reduction
Support Ticket Reduction
1.3M+
1.3M+
Active Users
Active Users
The Challenge: When Enterprise Software Ships Without Design
The Challenge: When Enterprise Software Ships Without Design
Member Online, MUFG Retirement Solutions' flagship member portal, was built without any designer input or user research during its initial development.
As the platform grew to serve over 1.3 million enterprise users across multiple superannuation funds in Australia, critical UX gaps emerged that threatened both user experience and business scalability.
Despite managing $865 billion in assets globally, their new platform was a fragmented mess of inconsistent interfaces, confusing user flows, and mounting customer complaints.
Member Online, MUFG Retirement Solutions' flagship member portal, was built without any designer input or user research during its initial development.
As the platform grew to serve over 1.3 million enterprise users across multiple superannuation funds in Australia, critical UX gaps emerged that threatened both user experience and business scalability.
Despite managing $865 billion in assets globally, their new platform was a fragmented mess of inconsistent interfaces, confusing user flows, and mounting customer complaints.
The Problem: White-Label Complexity at Enterprise Scale
The Problem: White-Label Complexity at Enterprise Scale
Member Online serves multiple superannuation funds, each requiring unique branding while sharing core functionality, but the underlying UX was broken across the platform.
The Multi-Layered Problem:
Member Online serves multiple superannuation funds, each requiring unique branding while sharing core functionality, but the underlying UX was broken across the platform.
The Multi-Layered Problem:
Design Debt Crisis
Zero design documentation of existing features, no standardized patterns across white-label implementations, and 5 active client funds with inconsistent user experiences
Design Debt Crisis
Zero design documentation of existing features, no standardized patterns across white-label implementations, and 5 active client funds with inconsistent user experiences
Scaling Impossibility
New funds onboarded required custom solutions, adding new features without design standards was a nightmare, the technical team had no design reference for maintaining design consistency
Scaling Impossibility
New funds onboarded required custom solutions, adding new features without design standards was a nightmare, the technical team had no design reference for maintaining design consistency
UX Breakdown
The customer complaints dashboard showed critical usability issues affecting both user groups (Accumulation and Pension account holders) and no systematic approach to accessibility or inclusive design.
UX Breakdown
The customer complaints dashboard showed critical usability issues affecting both user groups (Accumulation and Pension account holders) and no systematic approach to accessibility or inclusive design.
Business Risk
4 additional funds planned to migrate from the legacy Member Center platform with no scalable design foundation, and reputational damage from poor UX
Business Risk
4 additional funds planned to migrate from the legacy Member Center platform with no scalable design foundation, and reputational damage from poor UX
Our Approach: A Systematic Design Transformation
Our Approach: A Systematic Design Transformation
Rather than rebuilding from scratch, we developed a strategic 3-phase approach to systematically transform the platform while maintaining business continuity.
Rather than rebuilding from scratch, we developed a strategic 3-phase approach to systematically transform the platform while maintaining business continuity.
Phase 1 : Design Audit & Documentation
Phase 1 : Design Audit & Documentation
Conducted a comprehensive heuristic evaluation of all features, analyzed the customer complaint dashboard for pain point patterns, created user journey maps for both user types, and built mid-fidelity prototypes to establish consistent design standards.
Key Insight: Used Miro AI to synthesize and refine findings from heuristic evaluations, identifying 15 critical usability issues affecting both user groups.
Conducted a comprehensive heuristic evaluation of all features, analyzed the customer complaint dashboard for pain point patterns, created user journey maps for both user types, and built mid-fidelity prototypes to establish consistent design standards.
Key Insight: Used Miro AI to synthesize and refine findings from heuristic evaluations, identifying 15 critical usability issues affecting both user groups.
Phase 2 : Strategic Feature Prioritization
Phase 2 : Strategic Feature Prioritization
I organized the extensive feature set into manageable phases based on user impact and technical dependencies:
Phase 1 Features: Investments, Projected Asset Allocation
Phase 2 Features: Manage Investments, Beneficiaries, Contributions, Retirement Estimator
Phase 3 Features: Insurance, Transactions, Employment, Contact flows
This phased approach allowed incremental value delivery while building stakeholder confidence in the design process.
I organized the extensive feature set into manageable phases based on user impact and technical dependencies:
Phase 1 Features: Investments, Projected Asset Allocation
Phase 2 Features: Manage Investments, Beneficiaries, Contributions, Retirement Estimator
Phase 3 Features: Insurance, Transactions, Employment, Contact flows
This phased approach allowed incremental value delivery while building stakeholder confidence in the design process.
Phase 3 : Scalable White-Label Design System Architecture
Phase 3 : Scalable White-Label Design System Architecture
Working closely with our Design System Lead, I focused on applying our core design system to create brand-specific implementations that maintained both consistency and flexibility.
When one of the new funds needed to migrate to the Member Online platform, I led the brand implementation project and built a brand-specific UI kit with WCAG 2.0 compliance, design tokens, and comprehensive documentation for developer handoff.
Working closely with our Design System Lead, I focused on applying our core design system to create brand-specific implementations that maintained both consistency and flexibility.
Our Research & Process
Our Research & Process
Fig: Heuristic evaluation to uncover usability gaps, followed by a detailed user journey map to visualise pain points and opportunities - laying the groundwork for impactful design decisions.
Fig: Heuristic evaluation to uncover usability gaps, followed by a detailed user journey map to visualise pain points and opportunities - laying the groundwork for impactful design decisions.
Heuristic Evaluation Framework
We conducted systematic usability assessments across all Member Online features using:
Nielsen's 10 Usability Heuristics as our evaluation criteria
Customer complaint dashboard analysis to identify pain points
Cross-platform consistency audits between Member Online and Member Center
Key Finding: Users frequently abandoned investment allocation tasks due to unclear navigation hierarchy and inconsistent interaction patterns.
AI-Enhanced Analysis
While we didn't use AI in the design process, we leveraged Miro AI to summarize and refine findings from our extensive heuristic evaluations, which helped identify patterns across more than 50 screens.
User Journey Mapping
Created detailed journey maps for each feature set, focusing on:
Accumulation account users (primary persona)
Pension account users (secondary persona)
Cross-feature task flows and dependencies
Heuristic Evaluation Framework
We conducted systematic usability assessments across all Member Online features using:
Nielsen's 10 Usability Heuristics as our evaluation criteria
Customer complaint dashboard analysis to identify pain points
Cross-platform consistency audits between Member Online and Member Center
Key Finding: Users frequently abandoned investment allocation tasks due to unclear navigation hierarchy and inconsistent interaction patterns.
AI-Enhanced Analysis
While we didn't use AI in the design process, we leveraged Miro AI to summarize and refine findings from our extensive heuristic evaluations, which helped identify patterns across more than 50 screens.
User Journey Mapping
Created detailed journey maps for each feature set, focusing on:
Accumulation account users (primary persona)
Pension account users (secondary persona)
Cross-feature task flows and dependencies
Key Design Decisions Taken
Key Design Decisions Taken
Decision 1 : Documentation-First Approach
Decision 1 : Documentation-First Approach
What: Prioritized thorough UX documentation before visual redesign
Why: Ensured systematic improvements rather than surface-level fixes
Impact: Created scalable foundation for future feature development
What: Prioritized thorough UX documentation before visual redesign
Why: Ensured systematic improvements rather than surface-level fixes
Impact: Created scalable foundation for future feature development
Decision 2 : Core Platform & Brand Layer Strategy
Decision 2 : Core Platform & Brand Layer Strategy
What: Separated UX patterns from brand customization
Why: Enabled efficient white-label implementations while maintaining design quality
Impact: Reduced client onboarding time and development complexity
What: Separated UX patterns from brand customization
Why: Enabled efficient white-label implementations while maintaining design quality
Impact: Reduced client onboarding time and development complexity
Decision 3 : Mid-Fidelity Prototype Standard
Decision 3: Mid-Fidelity Prototype Standard
What: Focused on interaction flows rather than high-fidelity visuals
Why: Balanced stakeholder communication with rapid iteration capability
Impact: Faster feedback cycles and clearer development handoffs
What: Focused on interaction flows rather than high-fidelity visuals
Why: Balanced stakeholder communication with rapid iteration capability
Impact: Faster feedback cycles and clearer development handoffs
Russell Salaam: White-Label Success Story
Russell Salaam: White-Label Success Story
To demonstrate the effectiveness of our systematic approach, I led the comprehensive brand implementation for Russell Salaam, a major superannuation fund, when they needed to migrate from their legacy Member Centre to Member Online. This project demonstrated how our design framework enables rapid and consistent customization while maintaining usability standards.
Implementation Deliverables:
To demonstrate the effectiveness of our systematic approach, I led the comprehensive brand implementation for Russell Salaam, a major superannuation fund, when they needed to migrate from the legacy Member Centre platform to Member Online.
This project demonstrated how our design framework enables rapid and consistent customization while maintaining usability standards.
Comprehensive UI Kit: Built a complete brand UI kit with a comprehensive brand-specific component library
Comprehensive UI Kit: Built a complete brand UI kit with a comprehensive brand-specific component library
Accessibility-First: Ensured WCAG 2.0 compliance across all components and interactions
Accessibility-First: Ensured WCAG 2.0 compliance across all components and interactions
Brand Consistency: Maintained Russell Salaam's unique identity while leveraging the core MOL structure and created high-fidelity branded mockups for core platform features
Brand Consistency: Maintained Russell Salaam's unique identity while leveraging the core MOL structure and created high-fidelity branded mockups for core platform features
Developer Handoff: Created design tokens and component documentation for seamless implementation
Developer Handoff: Created design tokens and component documentation for seamless implementation
Implementation Deliverables:
The Impact: Key Achievements & Measurable Results
The Impact: Key Achievements & Measurable Results
This project taught me that sometimes the biggest design impact comes not from creating something new, but from bringing systematic thinking to existing chaos. By focusing on scalable systems rather than quick fixes, we transformed a fragmented platform into a competitive advantage.
This project taught me that sometimes the biggest design impact comes not from creating something new, but from bringing systematic thinking to existing chaos.
By focusing on scalable systems rather than quick fixes, we transformed a fragmented platform into a competitive advantage.
Visual Examples: Dashboard interface, contributions management, investment tracking, beneficiaries management, and comprehensive design system components, including typography, buttons, form elements, iconography, and brand assets.
Visual Examples: Dashboard interface, contributions management, investment tracking, beneficiaries management, and comprehensive design system components, including typography, buttons, form elements, iconography, and brand assets.
Key Achievements:
Brand consistency maintained across 50+ screens while preserving core UX patterns
Brand consistency maintained across 50+ screens while preserving core UX patterns
WCAG 2.0 accessibility compliance validated across all components and interactions
WCAG 2.0 accessibility compliance validated across all components and interactions
Technical feasibility ensured within Sitecore CMS constraints
Technical feasibility ensured within Sitecore CMS constraints
A scalable framework has been established for future brand implementations
A scalable framework has been established for future brand implementations
Key Achievements:
User Experience Transformation:
Clear distinction between Accumulation and Pension user journeys
Complex financial data now presented in digestible, actionable formats
Accessible design patterns benefiting users with diverse needs
Streamlined flows reducing cognitive load for critical financial decisions
User Experience Transformation:
Clear distinction between Accumulation and Pension user journeys
Complex financial data now presented in digestible, actionable formats
Accessible design patterns benefiting users with diverse needs
Streamlined flows reducing cognitive load for critical financial decisions
Design System Success:
Design System Success:
New fund onboarding reduced from months to weeks
New fund onboarding reduced from months to weeks
Consistent user experience across all brand implementations
Sitecore CMS fully leveraged for rapid content customization
Design debt eliminated with comprehensive documentation
Consistent user experience across all brand implementations
Sitecore CMS fully leveraged for rapid content customization
Design debt eliminated with comprehensive documentation
Key Learnings & Reflections
Key Learnings & Reflections
Design Debt = Technical Debt
Launching without design input created exponential complexity that took 12 months to resolve. Early design involvement would have prevented years of user frustration
Design Debt = Technical Debt
Launching without design input created exponential complexity that took 12 months to resolve. Early design involvement would have prevented years of user frustration
White-Label Requires System Thinking
Success came from building a core design system that could flex across brand requirements while maintaining UX consistency
White-Label Requires System Thinking
Success came from building a core design system that could flex across brand requirements while maintaining UX consistency
Phased Delivery Builds Confidence
Breaking massive scope into phases allowed stakeholders to see value early and trust the design process
Phased Delivery Builds Confidence
Breaking massive scope into phases allowed stakeholders to see value early and trust the design process
AI Tools Enhance Analysis
Using Miro AI to synthesize heuristic findings saved weeks of manual analysis and revealed patterns I might have missed
AI Tools Enhance Analysis
Using Miro AI to synthesize heuristic findings saved weeks of manual analysis and revealed patterns I might have missed
What Next?
What Next?
The Member Online platform now serves as the foundation for MUFG's expansion across APAC markets. The design system and documentation I created enable rapid scaling to new regions and fund types.
The Member Online platform now serves as the foundation for MUFG's expansion across APAC markets. The design system and documentation I created enable rapid scaling to new regions and fund types.
Future Opportunities:
Future Opportunities:
Mobile-first redesign leveraging the established design system
Mobile-first redesign leveraging the established design system
User research integration could validate our heuristic findings with actual user data
Enhanced accessibility features for the aging population are needed
Personalization features using member data insights
Automated design documentation could streamline the white-label customization process
High-fidelity prototyping might improve stakeholder buy-in for complex interactions
Integration with emerging fintech tools and APIs
User research integration could validate our heuristic findings with actual user data
Enhanced accessibility features for the aging population are needed
Personalization features using member data insights
Automated design documentation could streamline the white-label customization process
High-fidelity prototyping might improve stakeholder buy-in for complex interactions
Integration with emerging fintech tools and APIs
This case study focuses on process, methodology, and learnings while respecting NDA constraints. All specific design implementations and internal details remain confidential. Member Online is part of MUFG Retirement Solutions, a global pension leader managing $865B in assets and serving 12.5M+ members worldwide.
This case study focuses on process, methodology, and learnings while respecting NDA constraints. All specific design implementations and internal details remain confidential. Member Online is part of MUFG Retirement Solutions, a global pension leader managing $865B in assets and serving 12.5M+ members worldwide.
Ready to build something amazing?
Ready to build something amazing?
I'd love to connect with you!
I'd love to connect with you!