Launching Chase UK
Chase UK | chase.co.uk
A brand new bank, Chase UK, launched in September 2021 and I was brought in to craft the complete web experience for this.
Platform: Web
Role: VP Product Designer
Date: 2020
-
At the start, there was nothing
Upon starting, there was no design system for web or app and the app was still evolving in terms of its base patterns. There was also no branding direction for the bank as a whole and some of the key USPs were still being developed.
​
Yet myself and the web visual designer needed to craft an experience for a website that needed to market the bank and its key features, an editorial section and a support area.
Goal defintion
We undertook some opening workshops with our senior stakeholders to understand what the goals of the website were and off the back created our goals that defined our work going forward.
Awareness & Consideration ​
Discover Chase UK and understand the proposition.
​
Acquisition
Sign up for more information and to download the app.
​
Content Discovery
Find and engage with thoughtful, editorial content available across our website.
​
Legal & Support
View all the necessary legal documents and easily find answers.
​
Media & Talent
For journalists, media and talent to find and visit all the necessary information and locate key points of contacts.
​
​
Once we had the overarching site goals, we began to explore what some of the goals, journeys and mindsets the customer and business may have of potential pages that we were exploring. Working very closely with the marketing teams discussing their online and offline strategies of advertising the new bank and its products, we created proxy journeys, mindsets and goals.
Competitor review
AÂ competitor analysis was put together in order to understand how competitors not only laid out this type of marketing information but also handle these different types of sections together.
User interviews
Further to the initial competitor review, we engaged with users via interviews to review these competitors and uncover qualitative information on the page layout, visual design & content. We specifically asked users about their expectations before viewing the material, and then their preference of the elements with the pages.
Highlights
Users had a clear preference for accessible vocabulary, with minimum to no financial jargon.
Simple paragraphs in a summary/ bullet point style that's gets to the point quickly.
Users preferred an informal tone, but should be careful not to appear too youthful.
Revolut and Monzo scored poorly finding their visual layout poor and content dull while Natwest's layout of information was preferred as well as the slick animations of Wealthsimple.
Showing actual screenshots of the app and what the debit card looks like; the actual type of image isn’t as important as whether it feels relevant to the consumer and the information it goes with.
Initial exploration
As there was no branding and design language currently in place, myself and the visual designer worked in tandem to craft wireframes and then on top of that layer on visual elements that would help define the visual direction.
-
IA research
After doing the necessary ground work in terms of early research, the next step was to begin sketching & wireframing and begin crafting the architecture of the site.
​
Sessions:
Tree test
First click test
Research aim
Determine if users can quickly (direct success) and easily find the most important and hidden info on the website.
Understand if navigation labels block users from finding info on the website or understanding where to go
Determine if the 3 different navigation styles used on the website are easy to understand and use by participants.
Results
The burger, sub nav and sub nav navigation styles were easy to understand and use overall.
Participants thought information that introduced the bank and highlighted the banks products and services was missing from the homepage.
The editorial label (‘The Room’) was a major point of confusion, as this was an unfamiliar phrase and there was no explanation on the website about it. Viewing the Home page content helped some participants guess that this was a ‘bloggy’ area.
Participants were confused about where to find articles in editorial section, based on the 3 sub headings given (Latest, Money, Life, Innovation).
The Accounts label was confusing to participants because they thought this is an area where they could see their own accounts with the bank or only see types of account that the bank offered, not general services e.g. rates.
​​
This analysis pivoted mainly our initial thinking around naming and we took that into subsequent user tests to analyse this. Below shows the final IA that was created from this.
-
App research Feedback
With the design language evolving with the maturity of the app, the designs began to take a simpler and cleaner approach. At this point we were able to start obtaining qualitative feedback on the designs and content via context setting sessions for the app moderated research.
​
Sessions:
10 context setting app testing sessions
Iterating & feedback
These context setting sessions were a way to quickly understand peoples perception to our key products and features, and was a method that allowed us to amend design, copy and imagery quickly to see responses to them.
Highlights
Users felt the website looked ‘professional’, ‘trustworthy’, ‘user-friendly’, ‘fresh’, ‘clear’ and gives ‘everything you need’.
Some mention of being alike to Monzo and Starling ‘I’ve seen these things before, but never in the same account’
Key USPs of cashback, roundups and multiple accounts were seen as highly desirable however a number of users found ti be confused by details as insufficient info to describe them on site.
Intrigue around numberless card, but users wanted to view visuals of it and the app for greater clarity.
-
Waitlist sign up
With the expected frenzy of excitement and anticipation, a waitlist mechanic was required in order to obtain user details and begin the onboarding process. This was the websites key conversion journey from launch thus we a long time perfecting this journey.
​
Sessions:
Unmoderated test#1
Unmoderated test#2
Version 1
The first version that was tested looked to inject a step by step sign up process within either the hero and outro of each page as well as a CTA in the header that would launch a modal that had all inputs on a single sheet.
Results:
All 3 CTA locations were found and the flow was mostly as expected, a strong indication that people would be able to sign up to the waitlist successfully.
'Get on the list' CTA label lacked context at the top of the page and caused general confusion.
Users indicated that key information about the waitlist was missing, misleading or confusing.
Users indicated a preference (satisfaction rating and comparison) for a single modal approach over the single input step.
Based on the info that was shown, a large percentage of users stated they had little motivation to join.
Version 2
The second iteration saw a more refined version of the sign up journey, with all CTAs opening a 2 step modal, that defined the requirements to sign up, displayed the inputs and then a final confirmation page. Imagery and copy were also chosen and re-written to be more aligned with brand tone.
Results:
All participants found a sign up CTA and successfully signed up to the waitlist.
All participants rated the site and the waitlist process clear and simple in self rating scales.
When given the option, users chose "Join the waitlist" vs "Get early access" as it is the most accurate description of the process and less likely to be misunderstood that they can open an account now.
Eligibility criteria of signing up to the waitlist and joining the bank was rated clear and concise and understood upon questioning.
Good comprehension of required vs optional inputs on form as well as users had no observed usability issues.
Users felt there was too little information and expected more around the next steps and timings for launch in the confirmation process appealing.
-
Editorial research
The Hub was the editorial section of the Chase website, its goal to be an unbiased and helpful financial resource. After going thorough a number of design iterations, an unmoderated test was undertaken to analyse these designs.
​
Session:
Unmoderated testing
Research aim
This research had a broad test of qualitative findings to understand users perception of this content as well as task based usability testing of the finding and reading articles.
Finally, I was also interested in viewing how users would interact with the different versions; Day 1 version of a slim down simple section, to a Day 365 version with a lot of content, additional sub navigation and sections within pages.
Research findings
Users had no difficulty in finding and navigating to the Hub, and minimal issues were observed with the overall design and layout.
​
Most feedback centered around the content and the concept of the Hub, which was overall somewhat balanced. This is something that we have continued to work on with the content team, looking at design elements within the articles as well as different types of templates to make sure users are engaged with the story.
-
Support research
The final section to look at was the support section. As you can see from below, a lot of research took place around this as this wasn't just to be shown on the website, but also would be the apps support section too.​
​
Sessions:
Competitor review via unmoderated testing
Open card sort
Expert review undertaken by researcher
Unmoderated testing
Competitor review
Users were given a single competitors/comparators and set 20 tasks to complete and rate the experience. They were asked to find solutions to common problems e.g How to order a replacement card? as well as compare with others they had personally used.
Results
Content
Use plain and simple language
Do not give too much information, straightforward answers are best
Step-by-step guides (vs. narrative answers)
Use language that caters for all
Provide direct links, if applicable
Be consistent - state all as Questions or all as Statements (e.g. How do I find...)
​
Visuals
No images unless they are relevant to the specific issues
Keep design clutter-free
Function is more important that ‘attractiveness’ of the Help page
​
Layout
Show common issues in Categories/Sections
Use summary-like format
Big, eye-catching fonts were preferred
IA – Help should be accessible via the bottom of the page, the Burger Bar and the top Tab menu
​
Open card sort
My UXR and I undertook an open card sort where users were given all the FAQs that we had planned to create and with a talk aloud protocol, was asked to group and create category names for these.
Key results
​
1. Easiest categories to create were Financial Help & Advice, Managing Your Account, Joining Chase and International because most participants thought the information in these categories were distinct and had few overlaps
​
2. Most difficult categories to create were Help with Issues, App Information and Security Information because participants thought there was a lot of overlap and there were a lot less cards in these categories compared to the accounts categories.
​
3. Most difficult cards to understand were Bereavement, round ups and accessibility because the terminology was often not understood or familiar to participants.
​
4. Framing some cards as questions and others as statements caused cognitive dissonance among some participants because their instinctive behavior was to put all the question cards into an ‘FAQ’ category, which some did and caused others to lack confidence in their groupings.
Expert review and unmoderated testing
I led the research for this phase with support from my UXR. The aim here was via task analysis, test 3 differing versions of the support section and understand which of these performed better across. FAQs were also tested specifically looking at the clarity of the information and users understanding.
​
3 support home variations:
Support home holding each category with a preview set and a "View all" link to another page.
Support home is a simple category list that goes to another page holding all the FAQs.
Support section is a set of accordions of each category with the FAQs underneath.
Key results
​
1. Only 2/16 users failed to find the support section from the home page.
​
2. Finding of first article: For options 2 & 3, most users rated finding the article 5/5 in terms of ease and observations were inline with this. For option 1, ratings were more varied, and observing, it was clearer to see that users spent more time reading all of the options, and while some liked this others found this difficult.
​
3. Finding of second article: For all options, almost all users scored finding of this second article 5/5 in terms of ease and observations support this. It was clear that learnability of the section was high and any prior issues disappeared.
​
3. Across 2 separate FAQs, users were able to demonstrate they clearly understood the instructions in them and for both 12/16 users rated these articles 5/5 for clarity.
-
Creating a design system & templates
With my visual designer, we needed to create a web design system from scratch. We had cues from the app side of things but we needed to create for larger viewports and a wider set of scenarios so lots of new components and rules around them needed to be created.
Creating of components
I was involved in creating new components for the web design system, making them responsive and speccing them for developers to build from. I was heavily involved in documentation for these components, creating the rules, guidelines &Â overall UX of all web components.
Documenting of templates
Multiple teams such as marketing and content needed to be able to understand and create pages by themselves, so I had to document the fundamental rules of how to put these pages together.
​
We tweaked some of the page goals and mindsets as we progressed through the project cycle so each template had these attached as well as a complete content inventory so each component within a page had a goal and purpose.
-
Solving the problem
Below shows the final designs that were built by the Chase team. These are just a few of the multitude of pages that were created for the web experience. All pages were designed to breakpoints of 375, 768, 1024 and 1440px.
Marketing pages
For all marketing based pages, emphasis was given on the headlines or iconography doing the heavy lifting, copy was short and styled for scanning, the page was designed in a Z-pattern for again easy scanning and process were broken down into key steps.
Finally the only primary CTA on the page was the "Join" button which was in the hero but as the user scrolled down the page, appears in the global nav. The blue promo at the bottom is the final kick to get users to join.
The Hub
The editorial section home made use of a tile layout that responded uniquely to each breakpoint (mobile, tablet, desktop) and time was taken to make sure that the pattern of articles was continually interesting for the user while exploring through.
​
The articles were designed with easy scanning in mind while being able and key article based tasks like sharing and exploring related articles. There was also a constant way to always navigate towards the marketing content via the blue promo at the end of the page.
Support
The support section was designed not only in a responsive manner but also with the context that users would also be visiting this via the app, as there was no native app section.
Simplicity of finding either FAQs, contact options or service status, was key here; with the ability to get to any of those sections from any page.
Outcome
It's no doubt that the launch of Chase was been a success, with 50k accounts being created in the first 2 months of the app going live.
​
Specifically around our targets for the website, our 10% waitlist signup conversion was hit over this period from a high of 44% to a low of 16%.
​
For the editorial side of things, target time spent on page was set at 10 seconds, yet we found users were spending closer to 50 seconds to a minute reading our articles. We also had a healthy click through rate into the marketing side from this editorial, which hit another goal of using this content as gateway to sign up.