Credit where credit is due: redesigning City National Bank’s online credit card accounts.
CNB has been the relationship bank of the entertainment industry for decades. Now, it was time to give one of their biggest lines of business a starring lead role.
CHALLENGE
• Redesign the Credit Card experience to meet modern design standards and user expectations
• Overhaul the mobile web version for a seamless experience between screens
CONSIDERATIONS
• Leverage past research, eye-tracking studies, desirability studies and UX best practices
• Eliminate cognitive overload with a “less is more” mindset
CONSTRAINTS
• An ambitious roadmap condensed 3 months of work into 1.5
• Content audit was limited due to a rigid legacy tech stack with spotty documentation
• “Core” features like Account Summary and Alerts were out of scope due to conflicting priorities
Before:
After:
Stage 1/5
Dueling Discovery
The project kicked off with our Designer and Architect pursuing different directions from the same starting material.
This included user stories, a clear How Might We, the aforementioned desirability and eye-tracking studies, and heaps of competitive benchmarking. The purpose of this dual-track approach was to double the exploration within our tightened timeline. While they iterated, I jumped between them to keep the linguistic nuts and bolts tight.
Lo-Fi Prototype A:
Lo-Fi Prototype B:
Stage 2/5
First Round of User Testing
TL;DR – Version A ultimately tested better, but key areas were updated and parts of Version B were added.
Stage 3/5
The Merge
With clear direction in hand, we rapidly iterated, sometimes overlapping to beneficial effect.
My designers wrote some solid copy; I crafted some razor-sharp designs; our PM ran interim user tests; our A11y SME coordinated with engineering; all the while, I connected with squads far and wide to collect and audit existing content.
UI was layered on first, then the two were merged. Further iteration followed.
Various contextual content states and iterations
Select findings from my content audit
Stage 4/5
Second Round of User Testing
The new round of updates tested favorably. We still had work to do, but we were on the right track.
Stage 5/5
Refinement and Review
By now, the heavy lifting fell on me, the PM, and our Accessibility SME.
We worked seamlessly to complete the content audit and make updates across the experience. From CTAs and alerts to nomenclature, body copy and beyond, everything aligned to UX Writing best practices, user feedback, and accessibility standards.
Left: transaction table with search and filters
Middle: Intuitive icons and labels for locking cards, verb-action driven nomenclature for the right-hand actions panel
Right: Finely tuned microcopy, how alert banners would appear
Impact and Outcomes
The new Credit Card experience received widespread praise. Relationship Managers at branches across the country reported a swell of compliments from clients, who found the new designs to be consistent with CNB’s image and reputation. Tap or click below to see the results:
Operational Impact
A systemized way of working: this lift became a template for subsequent sprints due to the use of elements found in every other account type.
Content as design: content was a core design partner from the start, which enabled me solve problems before they could happen.
Design System evolution: the design system team worked in parallel with the redesign to streamline how components get added, modified and implemented.