City National Bank

There’s more to success than what’s on a balance sheet.

Challenge
  • How Might We... create a website that grows awareness, increases engagement, generates leads, and drives conversations?
Approach
  • Co-creation workshop w/ marketing, digital and sales colleagues. Map user flows . Group sketching exercises. Output: Low fidelity wireframes (page designs).
Solution
  • Design UX/UI prototypes. Run usability tests with advisory board community. Output: 8 high fidelity wireframes (page designs).
Outcome
  • Key Benefits of the New CNB.com: Scalability, Sales Enablement and Brand Alignment. New CNB.com loads 230% faster than old cnb.com.
My Role
  • Principal UX Designer
  • UX Research
  • Lead UI Designer
  • Brand Ambassador
  • Iconography Designer
Tools Used
  • Adobe XD
  • Adobe Creative Suite
  • UserTesting.com
    Qualitative research
  • Optimal Workshop
    Card sorting and tree testing
  • HotJar
    Website Heatmaps & Behavior Analytics Tools
The Team
  • Principle UX/UI Designer
  • Project Lead
  • Client Insights & Strategy
  • Brand, Marketing & Creative
  • MarTech/Dev
  • Content
  • Head of Segment Marketing
  • Commercial & Speciality
  • Personal & Business Banking
  • Affilliates
  • City National Rochdale
My Key Contrubutions
  • Design Thinking
  • Workshop Facilitation
  • Research & Discovery
  • Site Map Workshop
  • Site Map Testing
  • UX/UI Workshop
  • UX/UI Testing
  • Delivery & Implementation
Process
  • Intake
    Gather core inputs of requirements, business strategy, KPIs, and OKRs from Product, Research, and Design.
  • Empathize & Frame
    Immerse the team in a user-centric mindset with Design Thinking tool, plus consider the problem we're solving, aimed at meeting a user's needs.
  • Co-Ideate
    Reveal how DT exercises help identify targeted solutions.
Process (cont)
  • Test
    Gather feedback from users in order to validate and refine concepts.
  • Iteration
    Refine our solution based on findings; share learnings and insights.
  • Design QA
    Collaboration between Design and Dev to ensure visuals, copy & potentially new UX scenarios are on point.

The mission

Let’s create a website that grows awareness, increases engagement, generated leads, and drives conversations.

As more and more interactions shift online, there was and is a tremendous opportunity for us to engage, captivate and convert new audiences. 

City National is relatively unknown outside of Los Angeles. We need our website to support digital advertising efforts and increase search rankings as we enter new markets. KPIs: Visits, Unique Visitors, Page Views.

Our clients and prospects are online, and we’re not. We need to be there when they are, researching financial products and looking for advice. By leveraging Adobe Target and personalization strategies, we can ensure that we’re talking to the right people at the right time, increasing our touchpoints as they move down funnel. KPIs: Page Views Per Visit, Bounce Rate, Return Visits, Clicks.

Referrals will not get us to $100 billion. We can reach exponentially larger audiences by leveraging our digital storefront to create qualified leads for our sales teams. KPIs: Form Submissions, Marketing Qualified Leads.

Our clients, like all consumers, are used to buying things online. Why should their financial experience be any different? Applications should be made available online to remove friction from the purchasing process. KPIs: Clicks, Application submissions, Application Abandonment.

Previous Checking Account Page
Previous Credit Cards Page
Previous Preferred Banking Page

Building the concept

Insights & opportunities

90% of CNB.com visitors are nonclients. There’s a vast opportunity to engage and convert prospects on our website.

Prospects are looking for validation that CNB has the right products/services and expertise they need. Tell CNB’s story and represent the full scope of what CNB has to offer.

CTAs are often buried and nonspecific. Allow clients to take the next step by providing more relevant and prominent CTAs; introduce intermediary next steps if user isn’t ready to convert.

We seem to have a landing page for everything, sometimes with minimal content. Consolidate content and navigation; leverage design elements to declutter the browsing experience.

CNB only ranks for branded categories. Take advantage of content groups of opportunity: Business/Commercial Banking & Finance, Finance Planning & Security, Loans & Lending, Banking & Finance Research, Private & Personal, Fiscal Self-Orientation.

We’re lacking mid-funnel content. Create and promote content for different stages in the customer journey like thought leadership, testimonials, calculators and timely insights.

Site content is 65% text; stock photography keeps us feeling opaque, clinical and devoid of personality. Incorporate custom photography and new content types throughout site.

Building the concept

Workshop

A full day co-creation workshop where marketing, digital and sales colleagues broke into personal and business groups and participated in rapid problem immersion and card sorting exercises.

We reviewed research insights and business priorities to group content into three high level site maps.

Card sorting

We asked clients and prospects to organize topics from our site map into categories that make sense to them, and to help us label those groups.

Tree testing

We asked clients/prospects how they would complete key tasks using the site maps from our workshop and the site maps from our card sorting results.

Participants were confused between the various investment terminology; more than half of users’ first click was “Wealth Management” rather than “Investment & Retirement”.

Between “Investment Management” and “Brokerage Services,” some participants were confused on which was self-directed versus which was managed.

Design workshop

This Design Workshop is based on Google’s Design Sprint approach – a proven co-creation process for solving critical business problems through rapidly designing, prototyping, and testing ideas.

  • Shortcut the endless-debate cycle and compress months of time into a much shorter timeframe
  • Gets clear data from a realistic prototype testing
  • Fast-forward the design process with great ideas from key stakeholders and team members

Impressive results

Key Benefits of the New CNB.com

Scalability:

  • Reduce website implementation costs by 80% ($450k savings)
  • Reduce complex component development by 66% ($32k savings)
  • Increase speed to market by 65%
  • 100 redesigned product and services pages
  • New site wide information architecture rewrite (1,300 pages to 600)

Sales Enablement:

  • More than 50+ new ways for prospective clients to engage with us and log their contact details, generating leads that will be vetted and assigned to Relationship Managers through Salesforce
  • All leads vetted and assigned to Relationship Managers
  • New and improved pages for our lines of business
  • Increased search visibility

Brand Alignment:

  • A revamped “About Us” section that showcases our stance on diversity, equity and inclusion and corporate social responsibility
  • Next Level graphic photography style in combination with bold all caps headline for the hero
  • Bold use of primary color palettes to anchor and counterbalance the boldness of the imagery
  • Use of simplified iconography for ease of scannability
  • Utilizing existing H1 headline styles to visually connect to the existing lower level page pages
  • Color photography infused into secondary content but will be muted with less color saturation
  • Consistent, cross-channel brand experiences
  • Increased awareness and trust & positive brand associations

CNB.com Design System

Performance measurements

CNB.com Performance Measurement compared to top banks in United States

  • New CNB.com loads 230% faster than old cnb.com
  • The new cnb.com is on the same hardware infrastructure as old, the increase in performance is a direct result of new codebase
  • GTmetrix® Grade is an industry standard in web performance. It blends how fast your webpage performs with how well it’s built for optimal performance
  • City National Bank’s Net Promoter Score (NPS) is a 57 with 68% Promoters, 21% Passives, and 11% Detractors. Net Promoter Score tracks whether City National Bank’s customers would recommend using the product based on a scale of -100 to 100.
This redesign takes advantage of existing capabilities to help us move faster and serve clients and prospective clients even better. It offers an interactive experience to help us better engage with visitors in order to create new relationships, and it is already boosting our visibility ranking in online searches.

Kelly Coffee, CEO, City National Bank

Additional Samples

  • Share:
Copyright & all rights reserved.
All other copyrights and trademarks are the property of their respective owners.
Contact

Let's work together!

Contact me for more information about any of my UX work or services.

Let’s Talk About Your Project

Let’s Talk About Your Idea

Let’s Talk About Your Content

Contact