Credit Suisse Digital 3.0
International Wealth Management
Client
Credit Suisse
My Role
Product Designer
Year
2020
Format
Web & Native Application
1. Discovery
Background
Credit Suisse, a Swiss financial powerhouse, was in dire need of a redesign for its CS Digital platform, the primary touchpoint for clients to manage their wealth. The existing platform, although functional, struggled to accommodate new features without compromising user experience. The Wealth Management team recognised the need for significant changes, and my role as a Senior UI Designer was crucial throughout the eight-month process in 2020.
Platform Transition
The client decided to migrate the application to the Backbase platform, with a focus on delivering a flawless user experience across all touchpoints. This involved a responsive web application and native iOS and Android apps, which also served security purposes. The central objective was to revamp the UI and put user experience at the forefront.
Usability Research
Prioritising research was pivotal. We initiated usability tests to gain insights from both quantitative and qualitative data. Our design team conducted a comprehensive analysis of the current product, market trends, and user preferences, catering to both clients and Relationship Managers. This allowed us to understand which features should take prominence and how to structure the new UI effectively.
I was tasked with reviewing the existing application's user interface, I identified key issues:
Inconsistent Grids: Multiple grid templates are used, causing visual inconsistency.
Missing Footer: Absence of a footer section across all screens, affecting completeness.
Alignment Issues: Some screens lack proper alignment to the grid, affecting overall coherence.
Unaligned Navigation: Primary navigation lacks alignment to any visible grid, impacting visual structure.
CTA Color Contrast: Inactive states of CTAs result in an invisible icon due to color mismatch.
Icon Relevance: Icons in the login form don’t correspond well with user actions.
Color Consistency (Login Error): Inconsistent color usage for inline icons and text in login errors.
User Flows
Following the UX research, I began constructing user flows, wireframes, and user stories in collaboration with the Product and Engineering teams. These efforts aimed at shaping the structural foundation for the new UI.
Sitemaps
2. Solution
User Interface Designs
My role as a Senior UI Designer came into full play during the UI design phase. We worked diligently to craft the final look of the application, aligning it with the latest Credit Suisse brand guidelines. The primary goal was to create a visually compelling and user-friendly interface.
2.1 Mobile screen designs
2.2 Desktop screen designs
User Interface Designs
Navigation: Native iOS and Responsive Design
User Interface Designs
UI Component Development
User Interface Designs
Product Landing Pages
Usability Testing
3. Iteration
After obtaining insights from the "UX Lab," we iteratively crafted product interfaces, frequently revisiting and testing final solutions. Amidst complex topics, multiple user testing rounds were common. Adhering to Credit Suisse brand and design guidelines, we maintained consistency. Screens were designed for various resolutions: 375, 768, 1024, and 1440px, ensuring adaptability and alignment with brand standards.
4. Conclusion
Our goal was to provide a simple, fluid, and magical user experience that extended across multiple platforms. We aimed to make banking applications smart, easy to use, and fluid while maintaining a touch of magic. The challenge was to cater to a wide range of users, from those with a single portfolio to those managing multiple accounts, ensuring that all their activities were easy to review, monitor, and manage.
The final product integrated a range of new features, from enhanced security measures and aggregated wealth views to detailed market data and contact options for Relationship Managers. A key aspect was the introduction of custom iconography, adding aesthetic value and offering guidance throughout the application.
In conclusion, my role as a Senior UI Designer in the CS Digital 3.0 project played a significant part in enhancing the user interface and delivering a visually compelling, user-centric design.