Redesign of a German Financial Website
Improvement that increased conversions by 22% and boosted user engagement by 18%
UX Design Case Study ∙ 8 min read
01
Overview
Finanzvergleich GmbH, based in Munich, is one of Germany’s leading platforms for comparing financial products like savings accounts, loans, and investment options.
When I joined the team, my first mission was clear: redesign the website to build trust, modernize the experience, and drive user action.
To get there, I combined a minimal, user-centered design approach with deep research - conducting interviews, surveys, and data analysis to guide every decision.
Location
Munich, Germany (on-site)
Goals
✔ Increase the sign-ups with banks by 15%.
Achieved a 22% conversion rate increase over 10 months through continuous design iterations and improvements. goal achieved
✔ Create a credible and reliable design.
User feedback confirmed the new design was more trustworthy and modern than before. goal achieved
✔ Improve engagement on key pages.
Achieved the goal of improving engagement, boosting scroll rates and interactions by 18% on key pages. goal achieved
Cross-Functional Team
1x Product Manager, 1x Business Developer, 1x Business Intelligence Specialist, 1x In-house UX/UI Designer, 1x Contract Graphic Designer, 4x Developers, 2x UX Writers
My Role - UX/UI Designer
Wireframing, Information Architecture, Redesign, Design Iteration, Usability Testing, A/B Testing, Surveys & Feedbacks, Conversion Optimization
Tools
Figma (Design), Proto.io (Prototyping), VWO (A/B Testing)
Mouseflow, Google Analytics, Jira (Cross-Functional Collaboration)
Period
2022-2023
02
Why Redesign
Part of the heatmap analysis I did of the previous homepage design
Design Process
Define: Conducted user interviews and surveys, created user persona, user stories, and journeys based on insights and data, then defined problem statements to address user needs.
Research: Aligning business goals with user needs through stakeholder meetings, user research, competitive analysis to ensure an effective design that drives success.
Narrowing Down Ideas: Developing low/high-fidelity designs, collaborated closely with developers and PMs during design sprints.
User Testing: Defined testing goals and recruited participants, then conducted moderated and unmoderated tests, identified main issues, then reported findings to refine the product.
Each project I work on has unique briefs and constraints, requiring a specific design process. For this particular redesign, I prioritized regular sessions with the PMs and stakeholders to ensure we stayed aligned and on track. We kicked off with the research phase, where we aligned business goals with user needs through interviews, surveys, and deep research on the relevant financial topic. During the narrowing down ideas phase, we created low-fidelity and Hi-Fi mockups, wireframes, prototypes, and user flows, again collaborating closely with developers, engineers, and PMs to refine the concepts. The user testing phase followed, where we gathered valuable feedback from target users and iterated on the design to address pain points and improve usability. Our focus remained on creating a design that balanced user needs and business objectives, delivering a seamless and engaging experience. For the phase of releasing new features, like a hosted signup for certain financial offers, we adopted the lean sprints strategy. This allowed us to quickly test ideas, gather user feedback, and make iterative improvements in short, focused cycles. By working in sprints, we could rapidly validate the feature's impact, make data-driven decisions, and ensure that the final release met both user needs and business goals efficiently.
Users struggled to compare financial products - Here's Why
To uncover what motivates users to visit financial comparison websites and, I surveyed 50 people who are familiar with www.finanzvergleich.com about their needs, expectations, and frustrations. The results revealed key issues around trust, transparency, and ease of use - summarized in the graphic below:
The survey revealed several other valuable insights - if you're curious in exploring more, feel free to view the full summary of key results.
Initial User Interviews
After reviewing quantitative data from various reports and analytical tools such as Hotjar, Google Analytics, and Mouseflow, I had the opportunity to gather more qualitative insights. Given the available time and budget, I decided to conduct interviews with targeted users to better understand their experiences with the current website.
Here's some selected key feedback from the interviews:
3/5 users failed the 5-second rule on the landing page, unable to quickly identify the business behind the site. "I wasn't sure what the site was offering at first glance."
4/5 users described the site as outdated, raising concerns about how frequently it’s updated and whether the banks information is current.
5/5 users felt the navigation could be improved, as the limited category selection didn’t offer a clear overview of all available options.
"I expected to see all categories upfront-it feels like something is missing."
Information Architecture
For this project, the brief required maintaining the existing information architecture, but the original site’s user flow had significant issues due to poor UX/UI design. While preserving the core structure, I identified and improved problematic areas in the user flow, enhancing usability and task efficiency.
03
Visual identity
Typography
Montserrat is a modern, geometric font with a touch of playful charm, making it perfect for achieving a clean yet approachable feeling.
The primary color palette represents trust and reliability, making it ideal for the business and finance industry.
A wider range of shades was developed to ensure flexibility, especially for use in illustrations.
Icons
I chose a clean and minimal icon set with simple, elegant designs. As a base, I used the wide range of Ionicons library and added the Icon Set from Fintory to increase the variety of icons for financial-related topics. This approach ensures a consistent and simple style while covering various use cases, especially for financial topics.
Logo
The redesign of the logo took one month and involved weekly meetings with stakeholders and collaboration with an external designer to refine the overall concept. During brainstorming and sketching, I discovered a flowing combination of the letters "F" for Finanz and "V" for Vergleich, which also represent a check mark. This became the foundation of the new logo. Incorporating the primary and secondary colors brought the design to life, creating a modern and trustworthy look that reflects the brand's values.
03
UI Design
From Overload to Orientation: Making More Options Instantly Understandable
The homepage, a key entry point for users, needed to establish trust and ensure transparency. To enhance the user journey, I tested variations of the above-the-fold category menu, ultimately adopting a card-like layout with small icons representing the main financial products.
I conducted an A/B test comparing the original above-the-fold design with the new category cards, proving that the updated user flow was significantly more efficient. The primary metric for evaluation—time taken to find the right category—showed a 25% reduction of the time, while the bounce rate decreased by 18%. These results confirmed that the design changes had a measurable positive impact on user behavior and overall site performance.
Additionally, I've conducted +10 user interviews, and participants shared positive impressions of the section, describing it as ''straightforward, minimal, and modern''.
Mobile view of the redesigned homepage
Mobile view of the redesigned product page
Product Page
After analyzing user behavior, I found that users often research on mobile but return to desktop to sign up and convert. This insight led me to focus on creating a seamless cross-platform experience. On mobile, I prioritized key features with minimal content, while on desktop, I offered deeper information to help users finalize their choices.
I designed over +10 product comparison pages, balancing clarity and functionality to help users find the best bank offers and drive conversions, all while keeping the design clean and intuitive.
Given the importance of these pages to the business, I've conducted +15 A/B Tests after implementation, integrating data-driven ideas to optimize the user experience. This resulted in a 22% increase in conversions, along with improvements in scroll rate, bounce rate, and user engagement.
Components designed for the website
Screens designed for the pillar pages, articles and signup
After: Product Page
Before: Product Page
"Think more, design less."- E. Lupton 💡
