E-Consumer App

Alles omtrent uw hypotheek, depots en declaraties

Client

Stater N.V.

Period

March - August 2024

Tools

Figma

Project type

Employed

Project Description

For Stater N.V., I designed a user-friendly, WCAG-compliant mortgage app that provides users with clear insights, tools, and self-service options. This app has than been adapted for six additional lenders with custom branding.

Introduction

Stater N.V. was looking for a reliable partner to design, develop, and maintain a new consumer-facing mortgage app. The goal was to provide users with real-time insight into their mortgage, offer accessible calculation tools, and allow for self-service changes within the app.

As the lead UX/UI designer, I was responsible for creating a user-friendly, intuitive, and WCAG-compliant design. I translated complex financial information into a clear and engaging user experience, supported by interactive prototypes that helped align stakeholders and guide development.

The project was a collaborative effort between multidisciplinary teams from both Stater and Yellowtail Conclusion, working closely together throughout the design and development process. In addition to the core app, the solution was extended to six affiliated lenders. While I did not design new visual variants, I ensured that each version adhered to the respective corporate brand guidelines, preserving a consistent experience while respecting each lender’s identity.

Briefing

"In collaboration with Stater N.V., a renewed app must be designed with which all information about mortgages is available. In addition, it must provide insight into possible deposits and offer the possibility to execute declarations. In this, WCAG guidelines must be taken into account. The app will eventually be released by various lenders under their name and corporate identity."

My responsibilities

User needs / Business goals

Identifying user needs and business goals for this project and integrating them effectively.

WCAG 2.2

Applying the WCAG 2.2 legislation in the development of the app.

Design System

Set up a custom made Design System with fonts, colors, button (states) and many other UI components.

Agile/Scrum method

A development methodology based on iterative and incremental processes within a multidisciplinary team.

Deliverables

Create wireframes, (hi-fi) designs and prototypes for stakeholders presentation.

Handover to dev

Ensure that all designs and components are delivered correctly to development and also be the first point of contact for questions and further development.

Project screens

Here you will find an overview of various screens that were covered during this project.

First time login

After the onboarding screens, the user is given the opportunity to customize the settings to their preference, taking into account WCAG 2.2 regulations.

Language Settings Screen: A clear and user-friendly interface for selecting preferred language. Emphasizes accessibility through adherence to WCAG guidelines, including sufficient color contrast, keyboard navigability, screen reader compatibility, and adequate touch target sizes.

Text Size Settings Screen: This screen provides a straightforward and intuitive way for users to personalize their reading experience by adjusting the app's text size. The clear "Lettergrootte" heading and descriptive text guide users to utilize the interactive slider. A real-time "Voorbeeld titel" dynamically reflects the chosen text size, offering immediate visual feedback and ensuring comfortable readability.

Notifications Settings Screen: This screen clearly prompts users to manage app notifications with a direct question and informative context explaining the types of notifications. A prominent primary button encourages enabling notifications, while a secondary "Skip" option provides flexibility. The design prioritizes a clear call to action and user understanding of the notification value.

Security Settings Screen: This screen offers a straightforward interface for configuring app security. It presents a clear list of familiar unlock methods (PIN code, Face ID, Touch ID) with visual cues (icons and chevrons). A guiding question helps users understand the purpose, and a "Continue" button facilitates the next step after selection. The design emphasizes ease of understanding and selection of security preferences.

Overview

The "Overview" screen serves as a central hub, presenting users with immediate access to critical financial information. The design employs a clean and organized card-based layout to display mortgage details (loan number, outstanding amount, upcoming payments), deposit balances (including availability dates for specific deposit types), and a direct pathway to relevant documents.

Key actions, such as submitting declarations, are emphasized through a prominent, visually distinct button. Navigation to other core app functionalities is facilitated by a consistently positioned bottom navigation bar. User experience is further enhanced by the integration of a simple emoji-based feedback mechanism. The screen prioritizes clarity and ease of access to essential financial data, aiming to provide users with a comprehensive yet digestible overview of their current financial standing within the application.

'Mijn Hypotheek'

The "Mijn Hypotheek" screen is designed to offer users a comprehensive yet digestible understanding of their mortgage.
At the top, a visually engaging donut chart provides an immediate snapshot of the mortgage's status, clearly illustrating the proportions of the loan that have been repaid, the amount accrued, and the current outstanding balance, with the precise outstanding figure prominently displayed at the chart's center.

Below the chart, key summary figures are presented, including the original loan amount and any associated bridging loan.

Further down, the screen provides essential payment information, detailing the total monthly payment, specifying any portion sourced from a user's deposit, and clearly stating the date of the next scheduled collection. An information icon next to the deposit detail suggests the availability of supplementary explanations or breakdowns.

The lower section of the screen transitions to a more granular view, breaking down the mortgage into its constituent loan parts. Each loan component, such as an annuity loan or a linear loan, is clearly labeled and identified with its specific loan number. For each component, the current outstanding amount and the total amount already repaid are displayed, alongside the original total loan amount. Crucially, a "Toon details" (Show details) button is provided for each loan component.

Expanding the "Annuity" loan details screen reveals a breakdown of the monthly payment (interest, repayment), interest rate details (percentage, discount, fixed period end date and remaining time), and overall loan term details (end date and remaining time). The design prioritizes key information upfront with an option to view more granular data.

Depot module

This module, designed exclusively for users with active depot accounts, provides an intuitive and efficient interface for managing and tracking financial declarations.

Depot Overview Screens (Screens 1/3 & 2/3):

Each depot overview screen prioritizes key information through clear visual hierarchy and relevant imagery. Users are immediately presented with the depot's current balance and its operational timeframe, visually reinforced by a progress indicator. A prominent "Declaratie indienen" (Submit Declaration) call-to-action button is strategically placed for easy initiation of the declaration process. The design allows for effortless swiping between different depot accounts within the carousel.

Declaration Tracking Screen (Screen 3/3):

This dedicated screen provides comprehensive insight into the status of submitted declarations. Tabbed navigation enables users to efficiently filter and view declarations specific to each depot type. Each entry includes essential details such as the submission date, claimed amount, a concise description, a masked reference number for security, and a clear visual status indicator. This detailed view ensures transparency and empowers users to monitor the progress of their financial claims.

Bouwdepot Overview Screen (1/4):

The initial screen offers a concise yet informative overview of the "Bouwdepot." A relevant visual establishes context, while key metrics such as the current balance and the depot's operational timeline (with a visual progress indicator of the remaining duration) are prominently displayed. Primary user actions, specifically "Declaratie indienen" (Submit Declaration) and "Bouwdepot verlengen" (Extend Construction Depot), are presented as clear and actionable buttons.

The design for 'bouwdepot' and 'duurzaamheidsdepot' are identical.

Declarations List Screen (2/4):

This screen provides a transparent and organized view of all submitted declarations for the "Bouwdepot." Utilizing a clear list format with defined columns for "Datum" (Date) and "Bedrag" (Amount), each declaration includes a brief, user-friendly description and a distinct, color-coded status label (e.g., "In behandeling," "Afgekeurd," "Goedgekeurd") for immediate feedback on processing progress. A partially masked reference number adds a layer of security, and a document icon indicates the availability of related documentation for each claim.

Transaction History Interface (3/4):

The transaction history screen offers a clear and filterable log of all financial movements within the user's "Bouwdepot." Employing a clean and chronological presentation, users can easily review both credits and debits. The intuitive filtering mechanism allows for focused analysis of specific transaction types. Expanding individual transactions reveals a detailed breakdown, providing crucial context such as recipient information, invoice details, and transaction descriptions. This level of detail ensures transparency and empowers users to track their funds effectively. The "Load more transactions" button, strategically placed above the FAQs, subtly indicates the potential for extensive transaction histories, ensuring scalability and performance are considered.

Frequently Asked Questions (FAQ) Section (4/4):

Recognizing the importance of proactive support, a dedicated "Veelgestelde vragen" (Frequently Asked Questions) section is integrated directly within the "Bouwdepot" module. Utilizing a user-friendly accordion interface, common queries are presented in a scannable format. This design allows users to quickly find answers to their questions without needing to navigate away from the module, enhancing efficiency and self-service capabilities.

Streamlined Extension Request:

The "Verlenging aanvragen" (Request Extension) screen employs a modal overlay to provide a focused and intuitive experience. The design clearly communicates the proposed extension duration and presents the initial and resulting new end dates in a straightforward manner. The prominent "Bevestigen" (Confirm) and "Annuleren" (Cancel) buttons offer clear pathways for the user to either proceed with the extension or dismiss the request, ensuring user control and preventing accidental actions. The modal context keeps the user within the "Bouwdepot" flow, minimizing disruption.

Clear Communication of Expired Status:

The "Bouwdepot" expired state screen prioritizes immediate and unambiguous communication. A prominent, visually distinct banner at the top of the screen directly informs the user that their depot has ended. The display of the final balance (€0,00 in this instance) and the clear indication of the depot's active duration, including the end date, reinforces the expired status. Despite the depot's inactivity, navigation to other relevant sections, such as other depot accounts, remains accessible, ensuring a consistent and user-friendly experience within the application.

Declarations

This feature allows users with active depots to submit declarations through the app.

"Choose Upload Method"

This screen initiates the declaration process by offering three clear ways to provide the invoice: capturing a new photo, uploading an existing image from the device's gallery, or selecting a document file. Key guidelines regarding acceptable file formats (JPG, PNG, TIFF, PDF) and the maximum file size (20MB) are prominently displayed to ensure user compliance. A direct link to the complete declaration terms and conditions is also provided for users seeking more detailed information.

"Select Files"

The subsequent screen focuses on the actual file selection. It presents visual placeholders for adding files and a primary "Add file" button to trigger the device's file browser. The previously stated file requirements are reiterated for clarity. Navigation is facilitated by a "Next" button to advance in the process and a "Cancel declaration" button to exit the submission flow. Pagination indicators suggest the possibility of managing multiple file selections or steps within the overall declaration submission process.

"Enter Beneficiary Details"

This initial step in the declaration process requires the user to verify or input beneficiary information. It clarifies that payments are directed to the main applicant's registered account, which is pre-populated for convenience. Fields for the invoice number and term number are provided for the user to complete. Clear calls to action are presented as "Volgende" (Next) to advance and "Declaratie annuleren" (Cancel declaration) to exit.

"Allocate Funds per Depot"

This screen focuses on the allocation of the declared expense across the user's different depots, specifically "Duurzaamheidsdepot" and "Bouwdepot." For each depot, the user can specify the corresponding amount and select a relevant category from a dropdown menu (e.g., "Dakisolatie," "Keuken"). The "Totaalbedrag" (Total amount) dynamically reflects the sum of the allocated amounts. Informational text at the top guides the user on how to correctly allocate the declared amount.

"Declaration summary"

This screen presents a comprehensive summary of the declaration before final submission. The title "Samenvatting" (Summary) clearly indicates its purpose. A checklist format guides the user through the steps: "Orderbevestiging" (Order confirmation), "Onduidelijke omschrijving" (Unclear description), and "Afwijkende declaratie" (Deviating declaration), with visual indicators for each. Below this, a detailed breakdown of the declaration is provided, including the beneficiary account, invoice number, term number, allocated amounts and categories for both "Duurzaamheidsdepot" and "Bouwdepot," and the "Totaalbedrag" (Total amount). A checkbox allows the user to confirm the correctness of the declaration. The primary action is the prominent "Declaratie indienen" (Submit declaration) button, with a secondary "Declaratie annuleren" (Cancel declaration) option below.

"Success message"

This screen confirms the successful submission of the declaration. The heading "Declaratie succesvol ingediend" (Declaration successfully submitted) is clearly displayed alongside a prominent green checkmark icon. A thank you message informs the user that the declaration will be processed within three working days. Further information advises the user that the status of their declaration can be tracked on the overview page. Two clear call-to-action buttons are presented: a primary purple "Afronden" (Finish) button to complete the flow and a secondary "Nog een declaratie indienen" (Submit another declaration) button for users who wish to submit additional claims.

'Collateral' module

"Uw woning" (Your Home) Overview

Presents key information about the user's registered home. Displays the address, energy label status, mortgage registration details (original and current amounts), market value with valuation date, and the WOZ value (publicly assessed property value).

"De opbouw van uw hypotheekrente" (The Composition of Your Mortgage Interest)

Visualizes the user's current loan-to-value ratio (Huidige schuld t.o.v. marktwaarde) with a prominent bar chart indicating 81%. Explains the risk classification's dependency on this ratio and its impact on the applicable interest rate. Displays the user's risk class (Risicoklasse) and corresponding interest percentage (Rentepercentage).

'Documents' and 'more' menu

"Documenten" (Documents)

Central hub for mortgage-related documents. Features a search bar and sorting options for easy retrieval. Lists documents with titles, dates (if available), and file type icons (likely PDF), enabling quick identification and access.

"More menu"

The 'more' menu offers the user the possibility to view and change other matters concerning the property. This is combined both in the app and to external applications.