The migration of the web banking solution to Angular Material encouraged a full product redesign to address user and client feedback and deliver an improved, more consistent user experience.
Our achievements on the web banking project extended far beyond the deliverables. Not only did we exceed project and client requirements and expectations, but we were able to ignite a design culture in Avaloq and demonstrate the value and importance of design practices beyond visual aesthetics.
As design lead, my responsibilities included:
We opted to follow an adapted, iterative design thinking process to deliver the best possible user experience, acknowledging the time and resource restrictions. The strategy's objective was to ensure that we did not lose sight of the essential components of a good design process while enabling flexibility where necessary.
We engaged with key business stakeholders to identify business goals.
We reviewed the current web banking solutions to identify areas of improvement and prioritize design goals.
Example: Heuristic review documentation
We reviewed and consolidated user and client feedback collected by various departments within Avaloq.
We reviewed and consolidated previously defined user personas.
We facilitated a workshop engagement with a prospective client to establish essential user journeys.
Example: Barclays design thinking workshop
Snapshot: A brainstorming session
Snapshot: User journey plotting session
Snapshot: Ideation session
Snapshot: Prototyping session
The consolidation and analysis of data collected in the "empathize" phase enabled us to define the design and user goals and prioritize essential user journeys.
Based on our findings in the empathize phase, we were able to identify and define the goals and pain points for the following user groups:
Example: User personas
As the pilot project for Avaloq’s new product vision – creating a consistent and excellent user experience across our product offering - we initiated efforts for the redesign of the web banking platform in parallel with establishing the new Avaloq design system, with the following goals in mind:
Mobile devices have become a central tool in our daily lives. As such, we needed to ensure we could meet the increasing demand for mobile services and functionalities and deliver a high-quality, scalable experience that enables users to complete their daily banking tasks on any device. To achieve this, we employed a mobile-first design approach.
With over 140 banks worldwide utilizing Avaloq’s core banking solutions, banks require the freedom to customize their solutions to accommodate their users’ needs and business objectives through a compliant and seamless experience.
The new generation of customers expects products and services which seamlessly integrate into their daily lives and offer consistent value. Clients of financial firms demand tailored digital solutions for managing their wealth and executing financial transactions.
Before designing solutions, we needed to address some key challenges and define a design strategy.
The first step in addressing the challenges was to select an existing design library as a foundation upon which we could build. We opted to utilize Material Design, which granted us access to a reliable set of design guidelines, behavior patterns, and components featured in many well-known applications that users interact with daily. Where Material Design solutions were not optimal, we would conduct further research and exploration to establish custom solutions.
This approach was also beneficial in our collaboration with the development team, as they could effortlessly implement design proposals using existing Angular Material components.
To address the time and resource constraints, we decided on an iterative design strategy. We would design an MVP solution while familiarizing ourselves with the functionality and developing the design patterns we would adopt, establishing the design system along the way. Once we delivered the MVP solution, we would review it, further optimizing design proposals and the design system based on our learnings. Reviews and iterations would be continuous.
Diagram: Design strategy
Ideation and exploration sessions were a regular engagement within the design team to discuss design challenges and brainstorm solutions.
Leveraging off the Material Design library, we began designing solutions in Figma in collaboration with an assigned product owner and development team for each functionality. Due to our time constraints, we initially opted for non-interactive, high-fidelity mock-ups.
User journey example: As a private wealth client, I want to analyze my latest investment proposal
Example: Design - Mobile-first
Example: Design - Desktop
Once we released the MVP solution to a limited client group, we collected feedback and prioritized improvements in our design strategy's iteration phase.
We adopted an iterative approach to encourage constant improvements and enhancements to achieve the best possible results. We further explored weaknesses identified in the testing phase to improve the user experience.
