Client
Citibank Singapore
Agency
Accenture Interactive
Role
Interaction Designer
Team
1 x Design Manager
1 x Visual Designer
Duration
10 Weeks
Contribution
Heuristic Analysis
Experience Benchmarking
Interaction Design
Stakeholder Workshops
Impact
Established the strategic UX blueprint and secured executive buy-in for Citibank’s transition from a product-selling interface to a life goal-oriented digital experience.
Redesigning Citibank: Personal, Intuitive, and Goal-Based
Redesigning Citibank Singapore’s web experience to shift from a jargon- and product-heavy site to an intuitive one that aligns with its customers' financial journeys and goals.
Context
Citibank Singapore’s legacy web presence was characterised by promotional clutter, heavy financial jargon, and a rigid, non-scrollable interface that buried key features.
As part of the Accenture Interactive (now Accenture Song) design team, I led the interaction design for a transformative pilot to evolve the bank's web presence. We shifted the experience from a promotion-heavy landing page to a strategic 'growth enabler,' guiding users through financial milestones rather than just selling products.
By benchmarking best-in-class CX (such as CommBank) and facilitating cross-departmental empathy workshops, we streamlined redundant architectures and replaced marketing-heavy rotators with an intuitive, needs-based interface designed to reduce user cognitive load.
Problem
Discovery
Information Architecture Complexity: Deep, redundant navigation that increased friction for both prospects and existing customers.
Technological Debt: A rigid, single-viewport design that was neither responsive nor optimised for mobile storytelling.
Product-Centric Jargon: A tone of voice focused on "selling" rather than addressing personal financial aspirations like home ownership or retirement.
Key
Constraints
Due to strict banking privacy regulations and project timelines, direct access to external customers for primary interviews and validation was restricted. To maintain a rigorous, evidence-based approach, I adapted our methodology using two strategic approaches as follows.
Methodology & Strategic Approach
Heuristic Evaluation & Benchmarking: Evaluated the legacy site against NNG’s 10 Usability Heuristics and benchmarked against global leaders (e.g. CommBank) to identify friction in the "single-viewport" design and jargon-heavy navigation.
Cross-Functional Alignment Workshops: Facilitated design thinking sessions with Sales, Marketing, Operations, and Customer Service to bridge organisational silos and redefine product offerings through the lens of user milestones, such as home refinancing and higher education savings.
Evidence-Based Information Architecture: Leveraged card-sorting and secondary research on banner blindness to justify the transition from static marketing rotators to a vertically scrollable, goal-based narrative that encourages information foraging.
Synthesis of Guiding Principles: Distilled research insights into five core principles that serve as a strategic roadmap for all subsequent design decisions.
Guidance: Guide users to fulfilment of desired actions
Understanding: Keep messaging jargon-free and complemented by relevant visuals/tools
Comparison: Allow comparison of products/services
Alignment: Adopt an approach that aligns closely with users' goals and mental models
Relatability: Share experiences and stories with a human touch
Design Transformations & Rationale
01
Homepage Experience
Design Rationale
Prioritising Intent over Promotion Awareness: Based on the information foraging theory, we hypothesised that the second fold is more valuable than the first, given that users are accustomed to scrolling. Thus, by having a needs-based recommender right at the top, we allow users to declare their intent immediately. This follows the 'Guidance' principle, which reduces the cognitive effort required for a user to find a suite of products that fits their life stage.
02
Product Overview Page & Bundling Framework
Instead of a standard list of seemingly disconnected financial products, I introduced a life-stage bundling framework that organise Citi's offerings into curated bundles or solution sets tailored to specific user personas and their long-term milestones (be it saving for their children's further education, or looking to migrate or work abroad).
Design Rationale
Reducing Choice Overload and Aligning Product Architecture with Users' Mental Models: This framework effectively shifts the interface from a transactional catalog to a needs-based advisory tool, one that simplifies the decision-making and does the strategic thinking for customers. This reduces cognitive friction by doing the "heavy lifting" for the user — pairing complementary products (like savings and insurance) into a single, cohesive mental model that mirrors how people actually plan their lives.
03
Product Details Page
I moved away from the "nested" tab architecture that concealed critical information behind multiple clicks. In its place, I developed an integrated, long-form scrolling experience that surfaces the "How It Works" logic with supporting information immediately. I also introduced an interactive calculator and social proofing whenever relevant to transition the page from a technical spec sheet into a persuasive, human-centred tool.
Design Rationale
Optimising Information Architecture: The original 'nested' tabs resulted in high interaction cost, forcing users to hunt for essential data like interest rates and FAQs. By flattening this hierarchy and utilising a linear storytelling structure, we could better guide the user through the product’s value proposition.
Translating Abstract Data into Utility: The introduction of the interactive calculator serves a dual purpose: it provides immediate utility and translates abstract financial data into tangible personal gains.
Bridging the Trust Gap: Furthermore, by rephrasing the fine print and adding social proof, we addressed the trust gap issue — transitioning the brand from a traditional, jargon-heavy institution to a transparent partner that empowers users through clarity.
Impact & Reflections
This project was more than a UI update; it was a shift in service culture. By encouraging stakeholders to view banking through the lens of a user's life goals, we moved the needle from 'selling' to 'serving'.
Beyond the philosophy, this shift required navigating the technical and organisational constraints of a global financial institution. It taught me that design advocacy is just as much about stakeholder alignment as it is about user empathy.
As this marks my first project after transitioning from Product Marketing into the world of UX/UI, I would like to thank my Design Manager, Will L., for his mentorship. His guidance was instrumental in helping me navigate the complexities of institutional banking and in sharpening my ability to bridge the gap between business requirements and user-centric design.
