Finanance APP Optimization

Optimizing Financial Self-Management: A UX-Driven Transformation

– Case Study –

AFIN is a financial management app for customers of MAPFRE Spain, one of the main players in the financial and insurance sector in the country. Although the application allows customers to take control of their investments, savings insurance and pension plans, it was difficult for them to navigate it, so it had to be redesigned.

Important notice

The project detailed in this case study was completed as part of my professional services at Flat 101. All information presented here is publicly available or has been approved for sharing by the client. The methodologies, processes, and systems discussed are standard practices in the field of design and development, adapted and applied to the specific requirements and constraints of this project. While I have made every effort to provide accurate and insightful information, some details may have been omitted or generalized to protect client confidentiality and comply with my non-disclosure agreement. This case study is intended for informational and educational purposes only. It should not be construed as an endorsement of any particular product, service, or company. If you have any questions regarding this disclaimer or the information presented in this case study, please don’t hesitate to contact me.

Introduction

Enhancing Financial Guidance with an In-App Advisor

Mapfre España, a leading player in Spain’s finance and insurance sector, sought to enhance the customer experience within its financial self-management app, AFIN (Autoservicio Financiero), by introducing a new Financial Advisor functionality. This feature aimed to empower customers to make informed decisions about their investments, savings insurance, and pension plans by offering personalized product recommendations based on individual risk profiles and financial goals.

As the project lead, I spearheaded a team of designers and collaborated closely with various departments within Mapfre España, including product management, development, and marketing. My role encompassed guiding the design process, ensuring alignment with user needs and business objectives, and facilitating seamless integration within the existing app ecosystem.

Client: MAPFRE España

Project Scope: The project focused on designing and integrating a comprehensive Financial Advisor feature within the existing AFIN app. This involved creating user flows, designing interactive screens, and implementing a risk assessment process to deliver tailored product recommendations.

Timeline: Dicember, 2022 - August, 2023

Role: Project Design Lead

Key Expertise Areas: Project leadership, UX design, customer journey mapping, wireframing, prototyping, user testing, cross-functional collaboration.

The Challenge

Integrating Personalized Financial Guidance

The introduction of the Financial Advisor feature within the existing AFIN app presented a unique set of challenges:

Seamless Integration:

The new functionality needed to be seamlessly integrated into the existing app architecture and user flows, maintaining a cohesive and intuitive user experience. This required careful consideration of the existing information architecture, navigation patterns, and design elements.

Data-Driven Personalization:

Delivering accurate and relevant financial product recommendations necessitated the collection and analysis of user data, including risk tolerance, financial goals, and investment preferences. Designing a user-friendly and trustworthy data collection process was paramount to ensure user engagement and data accuracy.

Balancing Guidance and Autonomy:

While the Financial Advisor aimed to provide personalized guidance, it was essential to strike a balance between offering recommendations and empowering users to make their own informed decisions. The design needed to facilitate user exploration and education while avoiding overwhelming or overly directive approaches.

Methodology

A Design Thinking Approach to Financial Guidance

To address the challenges and realize the vision of the Financial Advisor feature, we adopted a meticulous and design-driven methodology that prioritized user needs and aligned with Mapfre España’s business objectives:

1. Empathize: Discovery and Understanding

Customer Journey Mapping: We initiated the project by immersing ourselves in the user’s world through the creation of comprehensive customer journey maps.

These maps detailed the end-to-end experience of using the Financial Advisor feature, considering various entry points (logged-in users, new users, etc.) and mapping out the entire process, from initial interaction to final investment contracting.

This visualization exercise helped us understand the user’s perspective, anticipate potential pain points, and identify opportunities for improvement at each stage of the journey.

2. Define: Crafting the User Experience

Information Architecture: Armed with a deep understanding of the user journey and research insights, we defined a clear and intuitive information architecture for the Financial Advisor section. This involved organizing content, establishing navigation paths, and prioritizing key information to facilitate user comprehension and decision-making.

Wireframing and Prototyping: We translated the information architecture into low-fidelity wireframes and interactive prototypes. These initial prototypes focused on the core functionality and user flows, allowing us to test and validate the overall concept with users, gather feedback on navigation, information presentation, and the risk assessment process. We iterated on the designs based on user feedback, ensuring the solutions aligned with user needs and business goals.

3. Ideate and Test: Iterative Design and Refinement

Design, Prototyping & User Testing: We translated the wireframes into high-fidelity prototypes that closely resembled the final product, incorporating visual design elements and interactions. We conducted multiple rounds of user testing with these prototypes to validate the design, gather feedback, and refine the user experience.

We also integrated the feature into the existing AFIN app design system and ensured a mobile-first approach for optimal display across various devices. Throughout this process, we collaborated closely with the development team, sharing insights from user research and testing to ensure a seamless and technically feasible implementation.

Execution

Bringing the Financial Advisor to Life

With a solid understanding of user needs and a refined design direction, we moved into the execution phase, focused on transforming our concepts into a tangible and user-friendly experience within the AFIN app:

Visual Design and High-Fidelity Prototyping:

Visual Design: Leveraging the insights from user testing and adhering to Mapfre España’s design system, we meticulously crafted the visual design of the Financial Advisor feature. This involved selecting appropriate color palettes, typography, iconography, and visual elements that aligned with the brand identity and created a visually appealing and engaging interface.

High-Fidelity Prototyping: We developed high-fidelity prototypes that closely mirrored the final product, incorporating the detailed visual design elements, interactions, and micro-interactions. These prototypes allowed us to simulate the user experience with a high degree of accuracy, facilitating further user testing and validation.

User Testing and Refinement:

Usability Testing with High-Fidelity Prototypes: We conducted additional rounds of user testing with the high-fidelity prototypes, focusing on evaluating the visual design, interactions, and overall user experience. This iterative feedback loop enabled us to identify and address any remaining usability issues, refine the information architecture, and optimize the overall user flow.

Collaboration and Implementation:

Collaboration with Developers: We collaborated closely with the development team, providing detailed design specifications, assets, and interactive prototypes. We actively participated in discussions and brainstorming sessions to address technical challenges, ensuring that the final implementation aligned with the design vision and met the highest standards of quality and usability.

Adaptation to Multiple Platforms: We adapted the design to ensure seamless functionality and optimal display across various devices and screen sizes, including desktop, tablet, and mobile. This involved creating responsive layouts and optimizing the user interface for different platforms, ensuring a consistent and enjoyable experience for all users.

Throughout the execution phase, we maintained open communication and collaboration with all stakeholders, incorporating feedback and iterating on the design to ensure that the Financial Advisor feature not only met the needs of Mapfre España’s customers but also exceeded their expectations, ultimately delivering a valuable and empowering financial guidance tool within the AFIN app.

Key Takeaways

Actionable Insights For Integrating Advanced Financial Features

The successful design and integration of the Financial Advisor feature within the AFIN app yielded valuable insights and lessons applicable to similar projects:

1. User-Centric Design as the North Star:

The paramount importance of understanding user needs, preferences, and behaviors cannot be overstated. By centering the design process around the user, we ensured that the Financial Advisor feature resonated with its target audience, ultimately driving higher engagement and adoption rates.

2. Iterative Design and Prototyping:

Embracing an iterative approach, where we continuously tested and refined our designs based on user feedback, proved invaluable. This approach allowed us to identify and address usability issues early in the development process, leading to a more intuitive and user-friendly final product.

3. Collaboration and Communication:

Close collaboration between designers, developers, product managers, and business stakeholders was essential for success. Regular communication, feedback loops, and a shared understanding of project goals ensured that the final product met both user needs and business objectives.

4. Seamless Integration within Existing Systems:

Integrating new features into existing apps requires meticulous attention to detail. By adhering to established design systems, maintaining consistency in the user interface, and collaborating closely with developers, we ensured that the Financial Advisor feature felt like a natural and cohesive extension of the AFIN app.

5. Balancing Guidance and Autonomy:

In the context of financial advice, it’s crucial to strike a balance between providing personalized guidance and empowering users to make their own informed decisions. By offering clear explanations, transparent risk assessments, and the ability to explore different options, we empowered users to take control of their financial future while leveraging the insights provided by the Financial Advisor.

Other Projects

Keep learning about design with other Use Cases

Dian Rene Music: Elevating a Salsa Star’s Online Presence

Transforming a talented salsa singer’s online presence. Discover how I designed a website that embodies the energy of Dian Rene’s music, attracting new clients and showcasing his unique services.

Driving Ongoing CRO Success for IQOS Club: Quitting Ordinary, Elevating Conversions

Learn how to turn constraints into opportunities. Explore our proven CRO strategies for navigating short turnaround times, shared resources, and evolving priorities – all while maintaining a data-driven approach.

From Insights to Growth: Applied CRO in the Financial Sector

Optimizing complex, multi-country banking websites comes with unique challenges. Learn how we used a combination of data analysis, design expertise, and rigorous experimentation to improve the user experience and drive business results.