I was a Product Designer at Capital One, an financial company specializing in credit cards and banking.

I designed and streamlined the Customer Acquisitions experience, increasing conversion by 50% and boosted online banking sign-in by 130%. I also developed Canada’s design system to define new brand visuals and UX guidelines.
Timeframe
2020 - 2021
Role
UI/UX, Research, Strategy, Documentation
Platforms
Desktop and Mobile Web

Elevating the welcome moment for new customers.

One of Capital One’s main goals is to build trust with not only current, but prospective customers. This is why we spent a lot of time designing a welcoming experience across all the digital touch points.

I worked closely with the PMs, Researchers, Content Strategists to define the hero moments in the journey to become a customer, and led the designs for the credit eligibility checker, card application process, and company blog.

Find out if you’re approved for a card, before you apply.

Quick Check is Capital One’s credit card eligibility checker so customers know exactly which cards they’ll be approved for before they even apply, without impacting their credit score.

However, it has yet to reach its full potential in the application funnel as we have been seeing high drop-off rates at different touch points.

So the team set out to understand the customer journey and why people are dropping off, and creating a more streamlined experience that gives users the confidence to become a customer.

Brainstorming through a pandemic
We started a design sprint to define the touch points in the acquisition experience we wanted to tackle. Unfortunately a pandemic hit us and we got sent home in the middle of the sprint, that meant we had to quickly pivot to running our first-ever remote design sprint.

After consolidating all the feedback that came out of the sprint, we decided to focus on:

Analyzing the current experience
I wanted to take the burden off of the user by simplifying the tasks and breaking the forms up. I also shortened the application by removing questions that was already asked in Quick Check to make it faster to complete the form.
Finding alternative input controls
In our current application form, dropdown menus are used for selection input. This is not ideal as the length of the list is hidden at first, and users have a harder time scanning and scrolling through long lists (especially on mobile).
With the form broken up into steps, I found opportunities to explore other input control options.
For shorter lists
Before
Dropdown is simple, however, the touch targets are small and not an ideal mobile experience
After
For a small number of mutually exclusive options, I suggested using buttons so that all available options are visible at once, without having to open the list. This also makes it easier to tap on an option on mobile.
For longer lists
Before
When we get to longer lists, not only do the small touch targets pose a problem for the mobile experience, users will also have to deal with scrolling to look for their selection.
After
I proposed a “start typing…” solution where the list of filtered options is displayed after the user types in the first few letters. Although the team was very excited about testing this idea, we had limited tech capabilities at the time and decided to put this on hold.
Testing with some real customers!
We tested our prototype with 12 users to understand comprehension and usability of the new integrated concept. We also wanted to identify any new points of friction and potential areas of improvement.

Setting expectations

“I put in ‘Earn Rewards’ for my goals so this is not the card I’d want to apply for.” - Brandy
Prospects liked the credit goals question, however, it led to expectations on their credit card recommendation, and disappointment when they didn’t get the card they wanted.

The experience is "too seamless"

“I think I need a reminder that it’s not going to hurt my credit here. I’m getting a little nervous.” -Sara
Most prospects liked the seamless experience, however, there was some confusion near the end about impacts to their credit score.

Straightforward and intuitive UX

“Design looked really clean especially on mobile which is pretty good.” - Bevin
“I feel like splitting it into two preceding forms is good, it’s not overwhelming.” - Marisa
Most participants felt the design of the integrated prototypes were done very well and it was easy to use.
Final solution
After usability testing, I addressed the feedback and adjusted the designs. Such as removing goals for now, and adding some friction between the eligibility check and the actual application.

Demystifying credit and gaining trust.

Among Canadians, we had a lot of work to do before the Capital One brand is associated with trust. We had a leaking conversion funnel with no opportunity for trust-building which causes us to lose prospective customers.

Working with the PM team and Content Strategists, we decided to solve that by adding an educational blog to help customers take control and succeed with credit, and at the same time, establish an approachable and trustworthy brand voice. As a result, the blog increased costumer conversion by 50%.

Home page
Article page

Customer support made easy.

You probably have tried calling your bank with a couple simple questions, but got put on hold and had to listen to that elevator music for way too long. That’s definitely not an ideal experience for our customers, neither was it for our colleagues at the call centre.

To help alleviate that stress for both parties, we worked on several solutions to provide answers online so users can self-serve before they resort to calling our support line.

COVID-19 Microsite.

When the pandemic hit, a lot of our customers were facing financial anxiety, and we want to help them when they need it most.

Working with extremely tight timelines, we redesigned and delivered a microsite that provides as much information as possible to our customers so they can find answers online. We also took this opportunity to promote online banking enrolment to drive engagement.

After the microsite launched, we reached >540k visits within the first month, and >130% increase in online banking sign-in.

Before
There was no clear hierarchy to show importance of information, the FAQ questions were also very generic and most were not related to COVID-19.
After
The hierarchy of UI elements was rearranged to ensure the page is easily skimmable. We rewrote the content and categorized them so they’re more discoverable. I also added a CTA button to the top of the page to drive online banking sign-in.

Support Centre.

The COVID-19 support page was just a temporary solution for the problems that arose from the pandemic, we still lacked a hassle-free way to allow users to find answers to their questions without calling. Additionally, we ensured to add action buttons to applicable articles, to help users quickly get to where they need to be to complete their tasks.

Home page
Article page

Palette - Design system.

When I started at Capital One, I noticed the design aesthetics, patterns and usability were extremely fragmented across 6 products, and I was constantly asking which button I should use. Although there was an existing design system, it wasn’t built for the Canadian market. As our brand went under a re-skin project, I took the opportunity to develop Capital One Canada’s design system, called Palette.

Component page - Interactive demo, usage do’s and don’ts, and more
Iconography principles
Content guidelines on each component page
Making sure accessibility is baked into our design system

Reflection...

I am very proud to be a part of a team that influenced the first impression customers have of our brand. Redesigning the entire acquisition experience was not easy and took many rounds of testing. Working at a bank also meant taking legality and customer privacy very seriously, which was a huge learning opportunity.

I am also very excited that I led the efforts to initialized and developed a design system at Capital One Canada. With zero past experience in design systems, I learned and built everything from scratch, and continued to update it regularly to build a work environment where everyone knows which button they should be using.

Previous: Microsoft TeamsUp next: Fyyne