Complete redesign of City National Bank’s Business Banking App
Business clients use the CNB app for on-the-go tasks. However, the complicated interface and its frequent crashes led to clients leaving the bank. We decided to part from the vendor and take on the development of the app ourselves. Our team was given five months to completely revamp the design.
DESIGN TEAM
Lead UX Designer (myself)
Senior UX Designer
Senior UI Designer
Copywriter
MY ROLE
PROJECT
9 Feature Redesigns
5 Month Timeline
My Role
Team Management
Daily check-ins over team chat
Thursday Design Reviews
Monday team sync meetings and retrospective
Optional 1on1’s (Rule: others could cancel this but I could not)
Design
Designed the UX for Dashboard, Transfers, and Bill Pay features
Signed off on final designs
Created the team roadmap
Adjusted design strategy as the project progressed
Navigation Research
In addition to redesigning features, we recognized that the navigation was causing confusion for users. I collaborated with our UX Researcher to delve deeper into this problem.
Team Roadmap
Prior to each Program Increment, I met with our Product Manager and Design Manager to distribute the work according to our team's capabilities. This ensured that we were all on the same page and that the workload was manageable. In addition to guiding the team, I created the UX designs for three features. It was rewarding to not only lead the team but also to contribute directly to the design aspects of our projects.
Discovery
Feature Demo
We set up meetings with Subject Matter Experts who had a wealth of knowledge about the features. We used the opportunity to ask questions as s they walked us through their experience.
Design Audit
As a team, we carried out Heuristic Evaluations to identify areas that required improvement. We made use of Figjam to collect everyone's feedback and integrated those ideas into a workable design plan.
Ideation
Use Cases
Our UX Designer identified the use cases and determined the essential screens for each user flow. They created low-fidelity wireframes to outline the layout and components. After I reviewed and approved the designs, it was handed over to our UI Designer. I also contributed by filling this role for the Dashboard, Transfer, and Bill Pay features.
Hi-Fi Wireframes
Our UI Designer utilized the updated Roxbury Design System to develop detailed wireframes based on the current layout, ensuring the app maintains a cohesive visual identity and a sleek design that adheres to WCAG standards.
Content
After the UI designs were approved, our UX copywriter utilized the updated Copy Guidelines to revise the text, ensuring it aligns with the desired tone. These new guidelines were developed by the copy team.
Reiterate
Share Out
At first, we faced challenges in getting designs approved by our stakeholders. They were worried that changes to the original app might confuse users. Additionally, the engineering manager raised concerns about overloading the development teams.
Reiteration
In response to the feedback, we not only made design edits but also enhanced our strategy. We grouped design changes into ‘must haves’ that affected usability and ‘nice to haves’ that could be added after the launch. We also improved our share outs by adding video prototypes, tracking approved designs, and offering clear references for our design choices.
Dashboard
Consistent header patterns throughout the app.
Components changed to the new design system.
The colors changed to align with WCAG.
Link copy changed to actionable language.
Bill Pay
Filter improved for power users.
Changed the dropdown menu to tabs.
CTAs anchored for easy thumb access.
Created a template for the ‘receipt’ screens.
Headers changed to be more descriptive.
Quick Transfer
Created new layout templates.
Changed wayfinding to a hub and spoke pattern.
Updated components to the new design system.
Copy changed to the new content design system.
Design Process
Once we finished a feature, we enhanced our design process by applying insights from the last one. The final version addressed issues such as minimizing friction during handoffs, accommodating conflicting schedules, and enhancing design presentations.
Reflection
Our dedicated team, though small, successfully completed all feature designs ahead of schedule. This achievement is largely due to the exceptional professionalism and skill within our group, along with our daily meetings that fostered transparency and effective communication, keeping everything on track. I was most inspired by the way we handled the challenges along the way.
Challenge: Subject Matter Experts were not readily available to demo a feature for the design team.
Solution: Tracking our stories in an agile framework allowed us to work on other parts of the redesign without losing time waiting for SME availability.
Challenge: Team Design Audits were time consuming and took up a lot of design resources.
Solution: A pair of experienced designers were enough to perform a heuristic analysis and identify best design practices.
Challenge: There was some difficulty getting design approvals from our business stakeholders
Solution: We improved our stakeholder presentations by adding prototypes, identifying parity with approved designs, and supported decisions with references.