Research
Previous research had already given us a general understanding of our clients’ top needs. Together with a UX researcher, we also conducted crowdtesting focused on mortgage details. We wanted to learn more about the new clients joining the bank after the merger, so we included them in the research as well.
Brainstorming
Using the research insights, we organized workshops. With input from our product owner, UX writer, and business analyst, who had experience as a client advisor, we identified several promising directions for the new design:
- design with a timeline
- displaying an overall summary on top of the page (and not per property)
- design with a visual representation of the next payment
- design with content separated between tabs
The concepts prepared in Figma:
Amortization as a visual representation - exploration
Unfortunately, we were unable to represent amortization successfully as a graph. Swiss property loans often consist of several consecutive mortgage tranches. To create the graph users requested, we needed data for the total remaining mortgage amount, but this value was unavailable from the back end. We therefore postponed the concept and added it to the backlog.
User testing, improvements and prototype
After selecting four concepts, we conducted another round of testing, asking participants questions about clarity and overall satisfaction. The concept that organized content across tabs performed best. Users found the structure clear and considered the content helpful and relevant. They also said the top bar and icons were crucial to understanding the information.
The design still needed a few adjustments before we could test the prototype. Based on participant feedback, we made small changes to the information hierarchy. With support from our UX writer, we also clarified content that users had found difficult to understand. The design then went through a final review with the legal team.
Mobile
We also began adapting the updated panel for mobile. We aimed to keep it consistent with the desktop design, but tabs proved less effective than scrollable content on smaller screens. We added categories to improve organization and retained icons for the most important details, making information easier to find.
Final design
The final design contains all the information users need. Thanks to the tabbed layout, the screens feel light and are not overloaded. Users can access the latest SARON interest rate through the “Details” button, which opens an existing side-panel pattern. The “Next payment” tab displays upcoming transfers in a table, while the “Belastungskonto” button provides access to past transactions. Overall, the design performed well, achieving a CSAT score of 4.4.
