Saar Lb

Fintech, Online Banking

Saar Lb

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

  • Web app
  • Web app
  • Web app
  • 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

  • Administrator role
  • Administrator role
  • Administrator role
  • Administrator role
  • Administrator role
  • Administrator role
  • 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

  • Customer role
  • Customer role
  • Customer role
  • Customer role
  • Customer role
  • Customer role
  • Customer role
  • Customer role
  • 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

  • Employee role
  • Employee role
  • Employee role
  • 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

  • Manager role
  • Manager role
  • 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

  • Mobile app concept for the bank customers
    Mobile app concept for the bank customers
    Mobile app concept for the bank customers
  • Mobile app concept for the bank customers
    Mobile app concept for the bank customers
    Mobile app concept for the bank customers
  • Mobile app concept for the bank customers
    Mobile app concept for the bank customers
    Mobile app concept for the bank customers
  • Mobile app concept for the bank customers
    Mobile app concept for the bank customers
    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.

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.


Deliveries

  • User flows
  • Journey mapping
  • Wireframes
  • High fidelity mockups
  • Interactive prototypes
  • Design system