Credit Suisse Platform

Managing IWM 3.0 and the omnichannel framework

Credit Suisse Investment Platform

Project Introduction

As a Senior UX UI consultant, I worked intensively on the new suite of investment applications under the IWM 3.0 umbrella. IWM 3.0 involved a redesign of the current application, enhanced with some prognostic tools to calculate potential future returns.

With a team that grew to 6 designers within the first half of 2020, we worked on designing the best possible experience for the client channel as well as the Relationship Manager channel, as well as creating a unified style guide and component library that could cover all applications called “Omnichannel framework”.

🔍 Problem

Coming into the project midway, a lot of exploration was already done. As designers, we were expected to create, test, and design User Interfaces according to the project requirements. Eventually, the main problem was an overall discrepancy between the financial literacy and complexity of the design team and the solutions that were required.

Additional problems that originated from the topical literacy gap:

  • Motivational issues within the design team

  • Business analysts "designing the app" with instructions

  • Gaps in solution design due to the complexity

  • Poor as-is application analysis, leading to requirements gaps

Problems caused by a bad collaboration model and silos:

  • Poor dev quality and lots of UX Quality Assurance work

✨ Solution

As a designer, I worked on creating an easy-to-use portfolio section, I was personally involved in initial conceptual designs involving proactive investment advice and a better RM-Client dialogue through the online channel, which we tested with users. Eventually, I moved to design the portfolios and payment flows, as well as designing tools for hedging and leveraging, and tools for adjusting generated investment proposals.

As a designer, I had to take up a lot of the more complex design tasks to cover knowledge gaps.

Eventually, as a team lead, I activated the development and design teams with the global project managers to collaborate more closely to fix many of the release defects.
I created designs and prototypes, and presented solutions to stakeholders of the Credit Suisse Digital project across the globe. Over several weeks, we were able to fix the high-priority items and ensure the platform launch was saved, saving over 100'000 Swiss Francs in additional development costs.

Tools

  • Sketch

  • Invision

Team

  • 6 UX designer

  • 1 Design Lead

  • 3 Business Analysts

  • Independent User Research team

My Role

  • UX design

  • UI design

  • Design ops

  • Design lead

Timeline

  • Overall: 14+ months

  • Research: Continuously

  • Design: 11+ months

  • Testing: Continuously

  • QA and Fixes: 12 weeks

My UX Design Process
Credit Suisse Investment Platform

Not the final version of this process map, but it gives you an idea

Design Process Methodology

As a design lead, I created this process map to prevent mistakes from repeating in the design process. Especially requirement changes were a plague back then and this process helped guard our scope. I held designers responsible for following these steps with the goal of making them more actionable and protecting them from change requests that were not initially in the scope of our work.

Credit Suisse Investment Platform

Lots of process-related questions!

Research, User Journey and Information Architecture

The user Journey and research step involved an as-is analysis of the application and interviewing business analysts and process experts to index the user flows and screens needed. I also created several User Journeys and Application Architecture Maps to deal with the complexity of the project.

This is an exemplary process, that we repeated many times for all projects within the large investment platform design process.

Credit Suisse Investment Platform

Sketching with our experts would have looked a bit like this!

Sketches


We usually started out working on paper for capturing the original ideas of the business analysts and application experts. Unfortunately, I didn't keep the notepads.

Credit Suisse Investment Platform

This wireframe is scrollable, try it out!

Wireframing

Since we were using a design system that was very rigid and neutral, our wireframe screens often looked already quite like the eventual designs. These are usually the screens we create Invision prototypes from, and test with real end users with our User Research team.

Below you see the wireframe vs final result for Payments and Premium Mandate

Credit Suisse Investment Platform

The UX Labs were held on site and we could follow live on a screen in a separate room

User testing

The UX testing was done by our internal UX research team, who used our Invision Prototypes to test on real users and subsequently provide us with a research report after. The learnings in this report would then become the basis for our UI designs and might inspire us to make changes to our flows and screens. The testing sessions were usually done over the course of 2 days with 5 users coming into the office for a physical test per day.

Credit Suisse Investment Platform

Portfolio home, Market Data and Position list

UI Design

With the results of the "UX Lab" we designed the interfaces of the products and often went back to test our final solutions again. Considering the complexity of some of the topics it wasn't uncommon to have several rounds of user testing.

We followed the Credit Suisse brand guidelines, and stuck to the strict design guidelines of the brand management team.

We designed most screens in 375, 768, 1024, and 1440px.

Credit Suisse Investment Platform

The current Credit Suisse greys are actually all over the spectrum

Color analysis

While I was designing the Credit Suisse investment platform I did an extensive study of the dashboard styles we could use (not featured). As a result, I also dug into the colors being used, as we were struggling with not-very-usable heavy greys and inconsistencies in color use.

Credit Suisse Investment Platform

Grey 0 added, all greys are now aligned

I proposed a new set of greys who all lived on the same spectrum, and also added a "Grey 0" which would add a very usable tint to be used as a background color.

🚀 Go-live and Hyper care

During and after the go-live period I often sat side by side with developers to answer their questions for hotfixes, in case certain data points in the designs weren't aligned with the data points they extracted from the back end. I've found it very helpful to be aware of the database and the front-end framework the devs are using since it matters a lot in terms of feasibility and development time.

Credit Suisse Investment Platform
Learnings

01

Throughout this project, I had many learnings, but the most prominent would be that designers need to be topically interested and knowledgeable about the things they design to stay engaged. If the gap is too big, business analysts will take over for the worse.

02

Additionally, if it's a redesign (like for like) it's vital that there is a decent platform analysis and a requirements-gathering phase where the designer is the main executor or is involved very closely.

03

Thirdly, developers and designers need to communicate in several stages of the design process to check feasibility, timeline, and quality. Silos proved to not work at all and it is typical of Credit Suisse's corporate culture.

04

Lastly, this project showed me the value of prototypes and the benefits of presenting solutions to stakeholders early and often to stay on track for deadlines and delivery.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
...or just say hello on my social media.