CASE STUDY: PRODUCT DESIGN
Accenture Interactive for Citi Singapore — Reframing the Conversation from Selling to Serving
Timeline
August — November 2019 (~ 10 Weeks)
Team
Design Manager, Visual Designer, and me (Interaction Designer)
Contribution
Interaction design & logic, heuristic evaluation, competitive benchmarking, workshop facilitation.
SUMMARY
This is a proof-of-concept for Citibank Singapore, pitched by Accenture Interactive to win a larger engagement. The goal: reframe the bank's consumer banking site from product- and marketing-centric to human-centric. It was never built or shipped — the point was to demonstrate a different way of thinking.
CONTEXT
A non-responsive site pushing products and promotions with dense financial jargon and legal prose.
Citibank Singapore’s legacy web presence was characterised by promotional clutter, heavy financial jargon, and a rigid, non-scrollable interface that buried key features.
The existing website was a dated, non-responsive site that heavily pushed products and promotions, and asked nothing about what the visitor actually wanted in terms of their financial goals.
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.
THE CONSTRAINT
Banking privacy rules and the proof-of-concept timeline meant no direct access to real Citi customers, so the direction had to come from elsewhere.
We couldn't interview any real customers — banking privacy rules and the proof-of-concept timeline meant direct access to real Citi customers was restricted.
Thus, rather than designing from assumption, I turned to three things instead to navigate around this constraint:
• performing heuristic evaluation using Nielsen Norman Group's (NN/g's) 10 Usability Heuristics,
• benchmarking other industry players, and
• conducting an internal cross-functional workshop.
STRATEGIC APPROACHES TAKEN
Approach 1: Heuristic Evaluation
Heuristic Evaluation: I evaluated the legacy site against Nielsen Norman Group's 10 Usability Heuristics — a widely-used framework for surfacing exactly this kind of friction.
Two heuristics stood out as broken: Recognition rather than recall (features were buried under many layers and nested tabs, forcing users to hunt for them rather than simply seeing what was available) and Match between system and the real world (the copy spoke in jargon-heavy banking terms and legal parlance, not the customer's own language).
Approach 2: Benchmarking Other Industry Players
Benchmark Exercise: I looked across leading banks and adjacent fintech platforms — from CommBank Australia, Kabbage and On Deck to lenders and investment platforms — to see how they were approaching the customer relationship. Three patterns kept surfacing: calculators that made numbers concrete instead of abstract, portfolios and products framed around a goal rather than a feature list, and real customer stories used as social proofing instead of marketing copy.
Through this exercise, we learnt the industry had already shifted from product-first to customer-first — leading with what the customer was trying to achieve, not what the bank was trying to sell. Citi's site was still in the old paradigm.
Approach 3: Internal Workshop
Internal Workshop: Guided by my design manager, the visual designer and I facilitated design-thinking sessions with Sales, Marketing, Operations, and Customer Service. On the glass wall, empathy and How Might We responses were clustered by theme — color-coded sticky notes grouping recurring customer milestones like home refinancing and higher education savings. At the table, a separate card sort exercise to untangle the site's redundant, duplicated navigation into a more intuitive information architecture.
FIVE GUIDING PRINCIPLES
Secondary research and workshop insights were distilled into five principles — Guidance, Understanding, Comparison, Needs-based, Relatable — that guided our final design decision.
Pulling together the benchmarking and the workshop, we distilled five principles — a shared reference every later decision had to answer to:
Guidance — guide users to fulfilment of desired actions
Understanding — keep messaging jargon-free, complemented by relevant visuals
Comparison — allow comparison of products and services
Needs-based — align with users' goals and mental models, not just features
Relatable — share experiences and stories with a human touch
A PIVOTAL INSIGHT THAT CHANGED DIRECTION
A homepage and a life-stage template that leads with what someone is trying to achieve, guiding them to a recommended path based on their financial goals instead of a flat product catalogue.
How might we guide someone from "I want to save for my kid's education" to the right products, without making them learn our product names first?
The homepage. Instead of rotating marketing banners, the homepage opens by asking the person what they're trying to achieve — buying a home, planning for retirement, funding their kids' education. Once they declare that intent, they're guided to a recommended path rather than left to forage through a product catalogue.
Extending the pattern. The same logic carried into a separate template — "Banking for every stage," organised by life stage (saving for your little ones, moving or working abroad, travelling overseas, kickstarting a business) rather than one flat product list.
PROPOSED DESIGNS
Staff pushback revealed that not everyone thinks in goals, so the design became a blend: goal-based guidance, the existing product IA, and new comparison tooling, each serving a different way people actually arrive at the site.
When we brought this back to staff, the reaction was telling: they liked the reframe, but pushed back on replacing the product-based navigation entirely — and they had a point.
Not everyone arrives at a bank's site the same way.
Some know their goal but not the product (i.e. "I want to save for my kid's education.") whereas others already know the product and want to compare options (i.e. "which of Citi's credit cards is actually best for me?"). My assumption was that some visitors arrive already comparison-shopping via aggregator sites, having done their homework elsewhere — a purely goal-based site would fail exactly them, especially since the old site didn't even have comparison tooling for its own credit cards.
Thus, the final proposed design had three parts:
• a "what do you want to do today?" goal-based guide for people who think in goals;
• the existing product IA, kept intact, for people who already know what they want; and
• comparison tooling — letting people stack Citi's own cards or accounts side by side — for people who know the category but not which option fits.
Proposal 1— Guided Assembly for People Who Think in Goals
Replaced the static 4-rotator marketing wall with a longer, vertical-scrolling format with a Goals-based Recommender on the first fold (instead of the standard banking rotators that often suffer from banner blindness).
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, thereby prioritising user intent while maintaining business visibility.
While the team had initial concerns about the promotion banners being shifted to the second fold, we reasoned using NN/g's information foraging theory that users are accustomed to scrolling. This renders the second fold more valuable than the first.
Proposal 2 — Product Overview Page & Bundling Framework
Replaced the static 4-rotator marketing wall with a longer, vertical-scrolling format with a Goals-based Recommender on the first fold (instead of the standard banking rotators that often suffer from banner blindness).
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, thereby prioritising user intent while maintaining business visibility.
While the team had initial concerns about the promotion banners being shifted to the second fold, we reasoned using NN/g's information foraging theory that users are accustomed to scrolling. This renders the second fold more valuable than the first.
AND THE BASICS WE FIXED TOO
Beyond the reframe, we also modernised the fundamentals — responsive layout, decluttered navigation, a calculator, a comparison table, and lay-friendlier terms and conditions.
Alongside the reframe, we also addressed the fundamentals: a responsive layout across devices, a decluttered and flattened navigation, a calculator so people could see real numbers instead of parsing a formula, and terms and conditions rewritten in plain language under "Things you should know" — with the full legal terms still available a click away.
These weren't the interesting part of the project, but the Understanding principle is exactly why the T&Cs got rewritten — proof the five principles shaped real content decisions, not just slideware.
REFLECTIONS
Looking back, this project reminded me of intent-first approach back in my Product Marketing days. Start from what someone wants, not what you're selling.
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.
A personal note: This was my first project after transitioning from being a Product Marketer into the world of UX/UI, and I owe a real debt to my design manager who mentored me here. His belief that people don't want to master a product, they want to reach a goal is one I still carry.