From days to minutes: Credit Card application redesign
No application in the 2020s should take 5 days to complete, right? With a brand refresh on the horizon, I was brought on board to help redesign Westpac's credit card application journey. Our goal? To create a simpler, smarter, and fully digital experience that cuts application time from 5 days to just 5 minutes, while boosting the overall approval rate.
Who, when, what
My role
I was brought in as the 1st designer in the project, I set up & led the design process in the project & was responsible for the UX & UI work that you will see in this case study
Designers
Emma - Senior XD, Margaux, Phong (1st rel)
Leo, Patricia - (2nd rel), Maureen - Content designer
Working with
6 Business analysts
1 PO & 1 PM
1 SD & 1 frontend dev lead
Duration
Design - May 2022 - May 2023
2 releases - 20/12/22 & 16/05/23
The chaotic start
How bad was it?
On my very first day, I was asked to produce the final UI for the income capture flow — without any prior context
And that's when I quickly realized there were 3 challenges with this project
Late designer engagement
Designers weren't involved from the start. Before I joined, BAs were using MIRO to create designs for developers, so by the time I came on board, there was heavy pressure from stakeholders to deliver UI quickly—without thinking holistically about the overall experience.
Lack of resources
The design team was severely understaffed—there was no content writer, no researcher, and just two designers (Me and Rosalie) brought in late to handle the entire credit card journey transformation. One of us left within the 1st weeks!Immature design culture
The project team had no customer-led design focus and little understanding of the design process. No time was set aside for research, testing, or proper design work, which made things extra challenging.
Before diving into form any kinda of plan or way forward, I felt it's best to take some time to review the current experience and assess the scope of the work ahead. I wanted to get a clear picture of what we were dealing with.
At a glance, I spotted issues with the current experience and knew right away this wasn’t a project for just one designer.
01 Limited features → Long and frustrating application for both customers and operations team
The application was missing essential features that modern applications offer—no pre-population, no auto-financial verification, no instant decisioning, and a broken document upload feature. On top of that, the form was painfully long in mobile view, with hidden steps along the way, making it a poor user experience. With the lack of automation and any smarts, the application would take on average 5 days to complete, as it relies heavily on credit assessment teams to verify a customer, assess customers serviceability (whether they can afford the credit card or not), customers risk profile
02 Wrongly positioned user steps > Poor user experience and security issue
One of the major challenges with the application forms was the positioning of key user steps. For instance, SMS authentication was tucked away at the very last step of the application, which not only posed potential security risks but also left users feeling uneasy about their data protection. Similarly, financial verification occurred after users had submitted their applications, making it difficult for us to provide instant decisions. This misalignment in the user flow hindered the overall experience, underscoring the need for a more intuitive and secured design.
03 A long overdue UI & brand refresh > off brand
The application forms were in desperate need of a UI and brand refresh. They felt outdated and didn’t align with the current brand identity, which created a disconnect for users. The visual elements lacked consistency, making it hard for users to feel a sense of trust and familiarity. A modern, cohesive design is essential for ensuring that the application experience reflects the brand’s values and resonates with customers. It was clear that updating the UI was crucial not only for aesthetics but also for creating a more engaging and on-brand experience.
Given the tight timeline, I knew we needed to strike a balance between delivery and quality. So, I developed a game plan with the following four steps:
Get started on the UI reskin first
To build trust and meet deadlines, I took an unconventional approach by starting with the UI reskin. This allowed us to make quick progress while setting the stage for deeper improvements later.
Take an iterative approach
We kicked off with a baseline version and then restarted the discovery process. By iterating based on user feedback, we were able to refine the design and ensure a better user experience.
Ask for more resources
Together with my manager, I prepared and presented a case to management, securing additional designers and time for the project, which was crucial to delivering a quality outcome.
Build awareness and trust
I facilitated workshops to help stakeholders understand the design process and its benefits. This helped establish trust and ensured alignment on the project’s vision and goals.
UI Reskin starts with defining style guide
I collaborated with the brand team and design system team to establish a comprehensive style guide for the project, covering everything from fonts and sizes to colors, image use, and button styles.
Color Palette: We chose a fresh and vibrant color palette to evoke a sense of adventure and excitement.
Typography: I selected modern, legible fonts to enhance readability and create a cohesive look throughout the application.
Form Design: To improve user experience, we divided the lengthy forms into digestible sections, grouping relevant information together to make the process feel more intuitive.
Main Color
Primary
#DA1710
Hero
#1F1C4F
Text
#181B25
Background
#F3F4F6
Typography
Brandfont 48/60px
Headline2
Brandfont 34/50px
Headline4
System font 18/22px
Body text
System font 14/24px
Spacing
40px
30px
18px
The reskin was driven by a combination of factors: the brand refresh, competitor analysis, business requirements, and, to a large extent, my intuition and experience.
Before
After
Before
After
Before
After
Before
After
The silver lining of NOT doing things conventionally
Though the reskin was not supposed to be the “ right way “ of doing things, but in hindsight, it’s a blessing in disguise as it helped me get a better understanding of the whole application journey in a super short amount of time. While doing the reskin, I had better idea and assumption around which parts of the journey are trickier to design, and the parts where less design effort is required. This gave me a good base to begin the next stage of the project.
Back on track
About 2 month into the project, we onboarded two designers from Deloitte as contractors, along with a part-time content designer from our internal team. With the expanded team, it was the perfect time to reassess and return to the basics. We wanted to ensure that everything we were designing truly addressed the real pain points our customers were facing, hence I developed this plan with the following steps with the team to help get back on track
Divide the work
With 3 ½ designers, we were able to divide the work into two streams: a delivery stream focused on execution and a discovery stream to support our iterative approach.
Insights gathering
We conducted research and collated data insights to create a shared understanding of pain points, focus areas, and opportunities.
Journey mapping
Creating an as-is journey map, we gathered all insights into one artefact, providing a single reference point for the entire team.
Establish focus
Based on the insights, we then focused on the most critical issues and created simple artefacts to guide design decisions.
Benchmarking
I studied competitor designs & decisions to leverage their strategies and learn from their approaches on the key focus areas
Future state user flows
We established future flows with the wider team, identifying key screens for the team to focus on, and established the right steps for design
Low-Fi Wireframes
We created & shared our designs with developers and POs, testing them to draw conclusions and refine our approach through wireframes
Hi-Fi Wireframes
We developed high-fidelity wireframes for user testing with real customers, validating our designs with real feedback
Hot take - we don't need personas for this particular project
A well-defined design persona should focus on goals, behaviors, skills, attributes, pain points, and environment. However, based on our research, we found that our customers share similar goals, skill levels, and pain/gain points. Because of this, breaking them into distinct personas wouldn’t add much value.
While Westpac already has a set of established personas, I didn’t find them particularly useful for this project, so I chose not to include them.
Journey map
Based on the insights gathered, I created a journey map to summarize how a customer typically navigates and feels throughout our application journey.
Establish key focus
With the above exercise, we identified key focus areas throughout the application journey and began deep diving into six critical areas where the most pain points were observed.
Call to get status update
Active updates post-submission
Ensure customers receive clear, digitised, and timely updates during the post-submission phase
Manual verification
Auto verification
Improve the auto-verification process to boost the straight-through processing (STP) rate.
Re-verification loops
Streamlined document upload
Create an upload system that helps customers avoid re-verification loops, making the process smoother
Ask a bunch of things
Relevant + accurate+ Simple application process
Ensure all fields are relevant, accurate, and eliminate unnecessary information to enhance user experience
Do it in branch
Save me a trip
Digitize flows and pre-populate information whenever possible to simplify the application process.
Guess your limit
Transparency on limit & balance
Provide customers with personalized balance transfer options and credit limits based on their financial profiles and needs.
Competitor analysis
I gathered screens from 15 credit card providers and 5 home loan providers. This competitive analysis provided valuable insights into how other companies approach the application journey and their strategies regarding the key focus areas we established.
Overview
Credit card providers generally have similar origination experiences, though most feature more modern user interfaces.
The key differentiators are auto financial verification, balance transfer capabilities, and document upload functionality.
While we couldn’t gather much information on the post-submission journey, we leveraged some mortgages flow to gain valuable insights.
Financial verification
Only 3 providers have incorporated auto financial verification into their flow before application submission. Notably, none of the Big Four banks have this feature embedded in their application journey yet.
Among the three providers, U-Bank has made it mandatory at the end of their process.
Nano requires auto financial verification as a mandatory step, placing it right after income capture and before assessing liabilities, assets, and expenses.
In contrast, Humm90 has made financial verification optional, allowing customers to upload their documents at the end of the application post-submission.
Doc upload
Only 2 providers have included document upload in their pre-submission journey.
Most document upload features are positioned at the tail end of the flow, primarily after application submission. Only two providers offer document upload before submission alongside an interim decision.
Additionally, no competitors have broken the document upload process into smaller, more manageable pieces, and most have combined ID upload with document upload into a single step.
Balance transfer/Credit limit
Most providers place the balance transfer option at the start or middle of the journey and none of the banks were able to give customers a definitive credit limit in the application journey itself.
Among the Big Four banks, only CBA offers the balance transfer feature pre-decision, providing customers with clear information about how much they are eligible to transfer.
The ideal user flow
We held several workshops with the project team to brainstorm, map out and align on a single user flow of the origination process. This collaborative effort helped us refine and finalise the optimal user flow.
Wireframes
Once we had a solid design direction, I began producing multiple variations of wireframes. Since we had already done a rapid UI reskin earlier, I focused on creating wireframes only for flows that needed a major revamp or were entirely new. For screens with minimal experience updates, we went straight to the final UI sketches to prepare for validation and testing.
I then presented the designs to stakeholders for feedback. This helped me narrow down the design, apply the final UI, and move the project into the testing phase.
Hi-FI & Prototype
User testing
Testing overview
Though In this case study I’ve included user testing after prototype section, reality is we’ve done user testing throughout the entire project as we are designing the different parts of the flow.
Since we followed an iterative design process, we conducted eight rounds of testing across different parts of the journey:
Guerrilla Testing (1 round): Focused on gathering quick feedback for the document upload experience.
Moderated Testing (5 rounds): Zoomed in on specific insights for various parts of the journey.
Unmoderated Testing (2 rounds): Collected general quantitative feedback on the entire flow, as well as targeted feedback on the post-submission journey and auto-verification.
A special shout-out to Margaux, who facilitated most of the sessions, while I assisted with a few rounds. Together, we created the synthesis packs for the first five rounds you’ll see here, with the last three packs being created by Patricia.
Testing insights
Prioritisation example
We adopted an insight led approach where we collates the insights from the rounds of testing and then use MoSCoW to get the Must-have and Should-have insights and then we use RICE score to calculate and discuss top priority items
How insights shaped our design (A few example)
In the 8 rounds of testing we did, we have over 100+ actions points/insight and I couldn’t list them all here, so I will give you a few example
Inform UI choices - In designing a step to choose credit limit, our initial assumption was that users would like to use sliders plus a input field so as it’s more visually engaging & interactive, however when we are testing the concept with users, we found out almost all users find an input field is sufficient as most had a idea of what credit limit they are after
Give us ammo to prove to business the value of certain features - We were trying to push/influence the business to go for features that weren’t originally in scope (e.g. post application dashboard to give clear status, transparency on credit limit in the application journey), However we received push backs from business due to budgeting concern. After testing the concepts out with customers, we found all customers think the features we are proposing is something they’ve never seen in other company and highly desirable, as a result we were able to then influence the team to have credit limit in application rather than post submission, as well as building the post-app hub.
Content choice - For any banking ppl in Australia, we are all pretty familiar with the term - conditionally approved. However in testing, customers find this to be a banking jargon hence we’ve updated it common folk language by saying ‘Almost here + customer name’
Personal details + IDV
Income capture
Financial details
Card config + outcome
Doc upload
Outcome + set up
UI Deep dive - Dashboard
Early concepts
Final UI
UI Deep dive - Financial verification
Before handing the project over to devs, we conducted a full round of accessibility review
While most of the GEL components in Westpac were already compliant with accessibility guidelines, we felt it was crucial to ensure the new flow fully met all accessibility requirements.
Together with Westpac’s accessibility SMEs, led by Michael, we tagged accessibility instructions for the majority of screens in the origination flow, ensuring an inclusive and compliant user experience.
Audit
Development rarely mirrors design perfectly, even with dev mode, so conducting a UI audit is essential. During our review, we identified several discrepancies between the design and development, ensuring that these were addressed to maintain consistency and quality in the final product.
Post release optimisation
We used Adobe Analytics to track where customers dropped off during their journey, helping us identify potential UX issues and areas for improvement.
My reflections
What I am proud of
Lead the design team
This was my first opportunity to lead a design team, set design directions, asign design tasks & working closely with multiple members to drive the project forward.
Healthy compromise
Although the priorities of the business and design teams sometimes differed, we found ways to make healthy compromises that balanced both needs.
Share early & sync
We held frequent syncing and sharing sessions with stakeholders early on, which helped prevent rework and kept everyone aligned.
Insights driven design
With multiple rounds of testing, we ensured that our design decisions were always grounded in real insights and data.
Advocate for a design led approach
When time is tight, design due diligence can be compromised. I’m proud of how we advocated for the time and resources needed to ensure we did things the right way, prioritizing a design-led approach despite the challenges.
What I wish I could do
Improve design handover to devs
While I spent a lot of time reviewing development work, and the tech team was still maturing, we could have streamlined the process with a more thorough design handover documentation earlier to avoid the QA issues
Didn't look at the back office journey
In our discovery process, we found out back-office system is outdated and it is a key reason to a lot of pain points and re-verification loops, I didn't get a chance to look into that closely as it's out of scope of the project
Stay on the project & fight for the descoped features
Soon after the 2nd release, I got pulled to a new design system project and management left only 1 junior to work on this project as it's deemed to not have as much work. As a result, certain desirable features that are in the backlog didn't make to build, e.g in-app dashboard as it's costly to build.