Research
From the previous researches we’ve already had a general idea about the top needs of our clients. Additionally together with UX researcher we conducted a crowd testing with questions regarding the mortgage details. It was also important to find out more about the new clients, that were about to join our bank after the merge, that’s why we decided to also include them in the research.
Brainstorming
With the information gathered from the research we organized workshops. With some input from our product owner, business analyst (with a client advisor experience) and UX writer, we came up with some main directions for the new design. The ideas were:
- 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 the task of showing amortization in a form of a graph wasn’t successfully accomplished. Due to the nature of the Swiss banking a property loan usually consists of many mortgages occurring one after another and in order to show the graph requested by the users we would need data for the overall remaining mortgage amount. It wasn’t possible to get this value from the back-end so for now we had to postpone this idea and put it into the backlog.
User testing, improvements and prototype
After selecting four designs we conducted another testing where we asked participants various questions about the designs and overall satisfaction. It turned out that the most successful idea was the one with the content distributed between the tabs. Users found this visual representation very clear. The content was helpful and important. They also stated that the top bar, together with the icons, is crucial for their understanding of the content.
Design still needed few adjustments before we could proceed with testing the prototype. From feedback received from the test participants we have decided to make some small changes to the information hierarchy. Thanks to our UX writer we’ve also fixed some of the written content that wasn’t fully understandable. After that the design went through the final check with legal team.
Mobile
At some point we’ve also started working on the mobile version of the updated panel. We were trying to keep the design consistent with desktop one, although in this case the tabs proved to be not as good as the scrollable content. Instead we added categories to make it more organized. We kept icons for most important details so it’s easier for the users to locate the information that they are looking for.
Final design
The final design contains all the information required by the users. Thanks to the tab design, the screens are light and not overloaded with information It also became easy for the users to access latest SARON interest rate by clicking on the “Details” button which opens a side menu (a solution that was already implemented before). The “next payment” tab contains all of the upcoming money transfers in a form of a table. By clicking on the “Belastungkonto” button it’s possible to access past payment transactions. Overall the design was pretty successful with CSAT score 4.4.
