Chase is one of the largest banks in the United States, and the main bank in New York. They asked Huge NYC to redesign their Credit Card marketplace
with a goal of generating awareness of their full suite of offerings and ultimately increasing conversion. They offer about 20 different credit cards but most customers only knew about three. There was an opportunity to help customers find a credit card that’s more suitable for their specific situation – whether it’s a Disney credit card with points and discounts for family Disney vacations, or a business credit card perfect for small businesses with bonus points for office supplies. The new Chase credit card site would help customers quickly and easily learn about and apply for the perfect Chase credit card for them.
For four months I designed wireframes, created prototypes, facilitated two rounds of user testing, supported the designers executing the wireframes, and worked with the developers to complete the front-end protoype. Four months later, the new Chase credit card marketplace launched (July 1st, 2016).
1. Sketches & wireframes. After a number of quick paper sketches I created wireframes in Sketch for all 5 areas of the site: the credit card home page, category page, card details page, compare page, and card finder tool.
2. Prototypes & testing. Using Axure I created prototypes for two rounds of user testing. Each round consisted of two days of testing, 6 subjects per day. The first day tested the site with subjects who would be general consumers, and the second day focused on small business owners. I observed our subjects interact with the site and try to achieve the goal we assigned them – to find the best credit card for their needs. Thanks to user testing I had a good idea of what was working and what needed improvement based on consistent patterns in user behavior. My team followed up with design changes to optimize the experience for our test subjects, and came out after the second round of testing with a solid, easy-to-use credit card marketplace.
3. Development and QA. A front-end developer produced a working prototype with the final designs and detailed interactions in place. I worked with the developer daily to define interactions and ensure the vision was followed through seamlessly.
If you look closely you’ll notice a difference between the location of the ‘compare’ button on a couple prototypes. In testing I found that people wouldn’t notice the ‘compare’ feature on day 1. If they were interested in a credit card they would ‘learn more’ immediately and miss the ‘compare’ button. For the second day of testing I altered the prototype by swapping the order of the two CTAs, placing ‘compare’ above/before ‘learn more’. Putting the primary CTA second allowed users to read both, generating awareness of the compare feature and vastly increasing its usage.
In August 2016 I visited my local Chase bank and applied for a new credit card. The banker, Barbara, was thrilled when I revealed that I designed the new credit card site!.. She remarked that it’s extremely easy to use and she sends all her clients to the site because it does such a great job of educating users about the different cards, and makes it easy to compare a few. Hooray! Barbara also insisted I deserve a bonus for the nice work. Very sweet 🙂
By the way, here’s how it looked before.
See my design live: