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
The five principles pointed toward one specific question:
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?
That question became the seed for everything that followed — starting with the homepage itself.
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 decision-support tools, each serving different roles for how various segments of users 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.
Indeed, not everyone arrives at a bank's site the same way. Some know their goal but not the product — "I want to save for my kid's education." Others already know exactly what they want and just need to find it quickly. And some know the product category but not which option fits — "which of Citi's credit cards is actually best for me?"
My assumption was that this last group often arrives already comparison-shopping via aggregator sites, having done their homework elsewhere — a purely goal-based site would fail them, especially since the old site didn't even have comparison tooling for its own credit cards.
So the final design became three things:
a "what do you want to do today?" guide for the first group,
the existing product-based IA — cleaned up via the card sort — for the second,
and decision-support tools for the third: comparison tables to stack Citi's own cards or accounts side by side, and calculators to show exactly what a given option would earn or cost.
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). We also proposed it to be built responsive across devices from the start — the original site wasn't.
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 — Bundling Framework for the Product Overview Page
Instead of a standard list of seemingly disconnected financial products, I introduced a life-stage bundling framework that organises the bank's offerings into curated bundles or solution sets tailored to specific life stages and long-term milestones (be it saving for their children's further education, or looking to migrate or work abroad).
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.
This framework effectively shifts the interface from a transactional catalogue to a needs-based advisory tool, one that simplifies the decision-making and does the strategic thinking for customers
Proposal 3 — Product Details Page
The original page hid critical information behind nested tabs — interest rates and FAQs sat multiple clicks away.
Here's what replaced it:
• Flattened the Information Architecture: One linear scroll instead of tab-hunting for rates and FAQs.
• Translated Abstract Data into Utility: The calculator does double duty — real utility, and a concrete translation of abstract rates into a relatable number.
• Bridged the Trust Gap: Plain-language fine print and social proof reframe Citi from a jargon-heavy institution into a transparent partner.
The proposed design reworks the page from a technical spec sheet into a guided, human-centred experience — the calculator and social proof do the translating the old fine print left to the reader.
Proposal 4 — Cleaner Information Architecture (IA)
The dropdown navigation kept its product-based structure, but the individual menu items were relabelled and regrouped for clarity — informed by patterns from the card sort exercise during the internal workshop.
Broken and duplicate links were removed, and the overall depth was flattened too — from as many as four or five levels deep down to a maximum of three, so nothing required more than a couple of clicks to reach.
IMPACT
This was a proof-of-concept — it never shipped, so there are no usage metrics to report. What I can point to is what the work delivered.
A validated internal process: cross-functional staff, initially skeptical, came around to the reframe once they saw it applied to their own products.
A reframed strategic direction: shifted the pitch from a product-selling site to one organised around customer intent — a genuinely different lens for the client to consider.
Hygiene fixed: alongside the reframe, we also fixed the basics — made it responsive, flattened and cleaned up the IA, and introduced decision-support tools like interactive comparison tables and a calculator, so people could compare across products and see real numbers instead of abstract rates.
Looking at Citi's site today, the direction feels familiar — a "wealth journey designed around you" framing that echoes what we pitched back in 2019. I can't take credit for that; it's most likely the same industry-wide shift we were reacting to, not a result of this specific project. But it's a quiet, satisfying reminder that the thinking held up.
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.