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 by completely redesigning their flagship online credit card experience.
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:
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:
First Round of User Testing
Version A ultimately tested better, with specific updates and parts of Version B added.
The Merge
With 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
Second Round of User Testing
The new round of updates tested favorably. We knew we were on the right track.
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
Outcomes
The new Credit Card experience received widespread praise. Relationship Managers at branches across the country reported compliments from clients, who found the new designs to be consistent with CNB’s reputation. Tap or click below to see the results:
Our efforts also led to some deeper operational impacts.
A systemized way of working: this became a template for subsequent sprints due to the use of elements found in other account types.
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 new components got added.