Consorsbank's Dual-App Mobile Transformation

Consorsbank, a leading online bank in Germany, recognized the need to modernize its mobile banking experience to better serve two distinct customer segments: everyday banking customers and active traders. The bank embarked on a significant project to develop two separate mobile applications with the help of Ergomania: the Consorsbank app for general banking tasks and the Consorsbank Pro app for professional-level trading.

 

While Consorsbank offers daily banking services, investment and trading are central to their business. They realised early on that to replace their old banking app they needed two separate apps: one for everyday banking customers and one for their trading customers. The bank also has a desktop application called Active Trader which is very complex and has many features, so they wanted to make a mobile application that could at least partially replicate the features of the desktop app.

To address these issues, Consorsbank made the strategic decision to develop two separate mobile applications:

• Consorsbank: A user-friendly app designed for everyday banking tasks such as checking balances, making transfers, managing accounts, and performing basic trading functions.
• Consorsbank Pro: A powerful, data-rich app specifically designed for active traders, providing advanced charting, order management, and real-time market information.

Key Project Challenges

This ambitious endeavor came with a number of challenges:

• Divergent User Needs: Creating two distinct user experiences that catered to the vastly different needs and expectations of casual users and professional traders.
• Legacy System Integration: Integrating the new apps with Consorsbank's existing, complex back-end systems, which were not originally designed to support such a dual-app architecture.
• Maintaining Brand Consistency: Ensuring a consistent brand identity and user experience across two separate apps while allowing for necessary functional differences.
• "Hard Migration": Migrating users from the old app to the new system required a complete overhaul of the existing app, rather than a simple update, adding complexity to the user transition.
• Internal Coordination: Coordinating the efforts of multiple teams, including design teams, developers, business analysts, and stakeholders from different departments within the bank.
• Balancing Innovation and Platform Standards: Striking a balance between innovative design ideas and adhering to the native design guidelines of iOS (Human Interface Guidelines) and Android (Material Design).
• Scope Management: Dealing with evolving business requirements and shifting priorities throughout the project lifecycle.
• Brand and Marketing Gaps: Addressing inconsistencies and frequent changes in brand guidelines and marketing materials, which impacted the design and development process.

The Design and Development Approach

The project involved several teams:

• The Core Team was responsible for the overall design and user interface, including components and all non-banking/trading functions and screens. They also designed the dashboard, which served as the home screen and provided an overview of user accounts.
• The Design System Team created and maintained a library of reusable components, ensuring consistency across both applications and compliance with iOS and Android requirements. They also collaborated with designers from other teams on the creation of new components.
• The Banking Team focused on designing and developing the Consorsbank app for general users, working on features such as money transfer and card processing.
• The Trading Team was responsible for designing and developing the Consorsbank Pro app for professional traders. They built the app from scratch, developing features such as the order mask and a complex search function for derivatives and other trading related features.

A central element of the strategy was the implementation of a unified design system. This system was critical for achieving consistency, efficiency, and scalability across both applications.

The Design System Team was established to create and maintain a unified library of reusable components and styles. This library served as the single source of truth for both the Consorsbank and Consorsbank Pro apps. The team acted as "guardians," ensuring that all design teams adhered to the established guidelines and used components consistently. This involved reviewing designs, providing feedback, and resolving any inconsistencies.

The design system used tokens to manage visual styles, allowing for easy switching between the banking app and the trading app aesthetics while sharing the same underlying component structure. The system was designed to be platform agnostic to support web, iOS, and Android platforms, promoting cross-platform consistency.

A well-defined process was established for creating new components:

• Request: Designers submitted detailed proposals outlining the component's purpose, functionality, and all possible states.
• Review: The Design System Team reviewed proposals for adherence to guidelines, necessity, and potential overlap with existing components.
• Developer Consultation: Developers were consulted to ensure the technical feasibility of new components.
• Design & Development: The Design System Team designed and developed approved components.
• Documentation: Components were documented in ZeroHeight, specifying styles, interactions, and usage guidelines for both designers and developers.
• Release: New and updated components were released in two-week sprints.

Design and Development Workflow

The project followed an Agile methodology, using two-week sprints and story points to track progress and manage workloads.

Teams used t-shirt sizing and poker planning to estimate the effort required for tasks. Releases occurred every two weeks, allowing for iterative development and frequent updates. Resources were allocated based on man-days, requiring careful planning and prioritization of features.

Close collaboration was essential between the design teams, developers, business analysts, and stakeholders from the bank. Weekly sync meetings were held to facilitate communication and address any issues.

Addressing Specific Design Challenges

The dashboard for the Consorsbank app was designed as a customizable, widget-based system, providing users with a clear overview of their finances:

• Improved Money Transfer: The old app had a long form for money transfers. The new app uses a three-step approach for money transfers, which is designed to be easier for the customer.
• Card Management: The app has a new card management section.
• Account Swiping: The banking landing page features a swiping function that allows users to easily switch between accounts.
• New Dashboard: The new app has a dashboard that gives an overview of all accounts. It includes quick actions and widgets. The plans also include a dashboard with a system of customisable widgets that allow users to view information such as weekly and monthly issues, stock watchlists and quick action buttons, which is expected to be available in a future version.
• Unified Navigation: The app has a unified navigation that allows users to easily navigate between the banking, investing, and dashboard areas.

The Consorsbank Pro app, being a dedicated application for professional traders, called for many specialized functions:

• Data-Rich Interface: The app features a data-heavy interface designed to display a large amount of information at once. The team removed icons and logos to display more text-based data. This was based on user research that showed that heavy traders prefer to see the code of the instrument instead of logos, because it allows them to see more information on the interface and also they work with different derivatives where logos can be confusing.

• Rebuilt Order Mask: The order mask, a core feature for placing trades, was completely rebuilt. It offers a wide range of order types and customization options and has access to real-time trading data, allowing users to monitor market trends and bid/ask prices. Users can select specific trading houses, taking into account even small price differences. The order mask facilitates „iceberg orders“ as well, enabling users to trade large volumes of shares divided in smaller quantities without significantly impacting market prices.

• Complex Derivatives Search: The app includes a complex search feature for derivatives. This allows users to filter by various parameters to find specific financial instruments.

• Focus on Speed: The app is designed to be as fast and efficient as possible, allowing traders to make quick trades.
• Standalone and Companion Functionality: Can be operated as a standalone trading app, but also integrated with Consorsbank's desktop trading platform.

User Research and Iterative Design

User research and feedback played a crucial role throughout the design and development process. Usability tests were conducted approximately monthly, alternating between the Consorsbank and Consorsbank Pro apps.

Consorsbank recruited participants for testing, also existing customers and users from other banks, focusing on individuals with diverse account types and trading activity to ensure comprehensive feedback. User feedback was actively incorporated into the design process, leading to iterative improvements in both apps. For example, feedback on the complexity of certain trading features resulted in design simplifications. The testing process was collaborative, with users feeling that their input directly impacted the final product.

The team focused on several key areas including the dashboard, the order mask and filtering feature for the trading app, three-step approach for money transfers, swiping functionality between accounts on the banking landing page, and navigation between banking, trading, and dashboard areas. Each area was tested multiple times to identify issues and validate design choices.

 

Conclusion

By developing separate apps for everyday banking users and professional traders, Consorsbank was able to deliver tailored experiences that catered to the specific needs and expectations of both user groups.

The implementation of a unified design system across both apps was a key factor. This approach ensured consistency in the user interface and experience, while also promoting efficiency and scalability in the development process. The design system provides a solid foundation for future updates and iterations.

The underlying architecture of the new app platform was designed with white-labeling in mind, allowing it to be easily adapted and deployed by other business lines of its banking group.

The project provided valuable lessons as well, underscored the critical importance of clear and consistent communication between all stakeholders, including designers, developers and business analysts. Regular meetings and open communication channels were essential for addressing issues and ensuring alignment.

Consorsbank's successful transformation of its mobile banking experience demonstrates the value of a well-planned, user-centered, and strategically executed dual-app approach. By prioritizing user needs, embracing a unified design system, and fostering a collaborative environment, Consorsbank and Ergomania were able to overcome significant challenges and deliver two distinct yet cohesive mobile applications. The project serves as a compelling example for other organizations seeking to modernize their digital offerings.