FinTech

Online Banking

Web and mobile app for the largest credit and mortgage bond institute in Saarland, Germany

Project

Saar Lb
Client: Speednet
Oct 2018 - May 2019

Role

Product Designer
UX/UI Designer

Team

Front End Developers
Back End Developers
Business Analyst
Business Owners
Project Manager

Deliveries

UX Research
Wireframes
High-fidelity mockups
Prototypes
Design system
Components library

The Landesbank Saar (short SaarLB) is a public-law corporation established in Saarbrücken and the largest credit and mortgage bond institute in Saarland. In 2017, the balance sheet total was around €14 billion. SaarLB hired us to design and build applications helping bank customers to apply for a loan and watch the loan application progress, and the bank employees to manage the loan process.

My role

My role was to plan and design a web application for the bank employees and a web and mobile application for the customers. I was responsible for the User Experience Design and User Interface Design. I worked closely with a project manager, a business analyst, and a group of developers.

Challenges

Web app

We've built the app in German, French, and English because of The Landesbank Saar location, near the German-French border. The app operates fours user types - administrators, customers, employees, and managers. Users log in to the app with two-factor authentication (2FA). They have to use one of the 2FA apps - Authy, Google Authenticator, Microsoft Authenticator, or LastPass Authenticator.

Administrator role

Administrators can manage the bank employees, clients, and companies, including mother and daughter companies; they can filter each list by several parameters. They can also see the deal activities and the user log. We built this application in three languages so that the administrators can translate categorized words and phrases in the dictionary.

Customer role

A customer can see his list of deals and deal details after clicking on the list row. In the deal details screen, a customer can view his deal contact details; he can upload and download required documents, accept or reject a deal proposal or cancel a deal. Other features users can check the customer core data, financial status, and loan details.

Employee role

A bank employee can see the list of deals with filtering by various parameters. On the deal details page, he can see if the agreement was accepted or rejected by a customer, upload documents for the customer, and change the deal status on the top progress bar.

Manager role

Managers can see the dashboard with all plans and deals summaries shown by numbers and money amounts. They can see a total number of completed, closed, and canceled deals and deals in progress below with more details. Managers can also view deal activities, deals lists, and details like employees and administrators.

Mobile app concept for the bank customers

I designed an online banking mobile app concept. Just for fun or practice, to show the client that I can. This design concept includes a transactions list, a credit card details history, loan details with history, a special offer page, a loan application form, and a loan application status. The client liked it very much, but unfortunately, it was out of the scope.

Workflow

Analysis

First, I've read the brief and the project description, and all other documents prepared by our sales department. I've learned about clients' needs and requirements, and I've done the initial work estimation.

Proposal

I've prepared the wireframes based on the business analyst and my assumptions. The sales team with the business analyst have traveled to the client's office in Saarbrücken, Germany, where they presented the wireframes. The bank representatives were delighted, and our offer has won.

User interviews

The most exciting part of this project was the opportunity to test our hypotheses through live user interviews. FLIR provided access to five major customers, allowing us to gather valuable feedback. Each user performed three specific tasks, sharing their screens so the UX researcher could observe their actions in real-time. Users actively commented on their thoughts and interactions, offering critical insights.

I documented all feedback on a FigJam board, overlaying sticky notes on the tested screens. Each sticky note color corresponds to a different user, making it easy to track perspectives. After each interview, I updated the designs and prototypes to address user feedback. We conducted three rounds of interviews, refining the product iteratively, and ultimately presented our findings to stakeholders to ensure alignment and transparency.

Design system and component library

As a Product Designer, I recognize the importance of design systems in creating consistent, efficient, and scalable products. To ensure uniformity and flexibility, I utilized Figma variables for all foundational elements, including colors, text styles, screen sizes, and border radii. This approach streamlined updates and maintained consistency across the entire design.

I leveraged auto-layout in Figma to ensure that all components were scalable in both directions, making the designs adaptable to different content and layouts. I used Figma variants for components with states, such as form inputs and buttons or variations between desktop, tablet, and mobile screens. Thanks to this approach, I maintained a structured and efficient system, reducing design redundancy and ensuring a seamless handoff to developers. I optimized collaboration, minimized errors, and ensured a cohesive user experience across all platforms by establishing a robust design system.

Design

My first step was to work on the initial design, typography, and information architecture. Simultaneously I worked on the customers' app and the bank employees app because the whole loan application process had to be consistent from both sides. I designed it in Sketch, then I created clickable prototypes and tested user flows. I've done mobile app transitions and micro-animation in InVision Studio. I hand it off to the developers in the InVision app.

Previous project