Designing Widget System for ING Mobile App

Context

I worked in a team of 4 Digital Design students, during my Masters program at the Amsterdam University of Applied Sciences (HvA). 

To create a widget system for the Start screen of the ING app. 

The goal is to improve the financial health of ING customers between 18-35 years old. 

Project Summary

ING tasked us with driving behavioral change to promote financial 

and environmental sustainability, helping users advance in the 

financial health pyramid through widget solutions. 


This initiative was critical for ING to address concerns about greenwashing while 

integrating sustainable concepts into their mobile app.


We began the design process with user research to understand how bank users in the 

Netherlands perceive ING. The findings revealed a lack of trust in the bank 

regarding sustainability but strong confidence in its financial advice. 

This key insight guided our recommendations and convinced ING's 

product team to focus on financial sustainability rather than environmental 

widgets (as they were fixated on this aspect), aligning with what users truly wanted.


Given this project's time constraints, prioritizing user needs over "nice-to-have" 

features was crucial. Usability Testing confirmed that our decision to emphasize 

financial sustainability was effective, delivering meaningful results that addressed the design challenge.


Design Guiding Principles

These are guiding principles we crafted to guide the design of the final outputs. 

These are based on user research and usability test insights gathered.

Ethical design considerations were also considered in these principles.


Final Outputs

This is the final version after carrying out two (2) design iterations, 

based on the insights gathered and feedback received from usability testing and expert reviews.


To interact with the prototype, Click here.

Our Design Value Proposition

Onboarding

This is based on the "Top User Benefits model".


Why was this feature made?

Users of the ING app should be kept informed about any interface changes, particularly since all the widgets are visible on the user's homescreen. 

Additionally, feedback from usability tests and experts suggests that users value being notified of app updates.

Widgets

Set Budget 

User is nudged to set up a budget, as soon as he/she gets paid (salary). 

A recommended budget is provided - Using user's financial situation and past transactions.


Why was this widget made?

Based on initial user research interviews conducted with users of banking apps in the Netherlands, (including ING). Users desire the ability to establish a feasible monthly budget for their expenses. While some users currently do so, others refrain due to concerns about the expenses associated with available budget planning apps.

Saving Goal 

User is nudged to set up a Saving goal, as soon as he/she gets paid (salary). 



Why was this widget made?

Users value savings and desire to set goals, that they can work towards, thereby fostering their commitment.

(Based on User Research Interview conducted)

Monthly Overview 

User is able to view his/her overall transaction for the month.

In 3 categories - Fixed Charges, Expenses; Savings.


Why was this widget made?

This widget was designed to enable users to monitor their expenses. Including the fixed charges incurred each month, and track their savings.

Budget reminder 

User gets this reminder when he/she overspends as a caution.

Based on the value proposition - "Prevent financial errors"


Why was this widget made?

Users appreciate reminders as they help prevent overspending and ensure they don't exceed their budget for each set category before the month is over. 

This design utilizes three color indicators to visually communicate to users whether they are staying on track or overspending.

Upcoming Payments 

This widget displays the most recent payments to be made for the user to be aware and prepare for it. 

The user can also view their overall upcoming payments for the month.


Why was this widget made?

The ING app currently includes an "insights" feature that allows users to track their spending and identify their primary expenses. 

However, this widget was designed to inform users about their weekly payments. With a focus on a category introduced in this design known as "Fixed charges," which includes expenses like gym memberships, energy bills, water bills, and other recurring subscriptions. 

With this information, users can effectively plan for upcoming expenses.

Project Impact - On the Business

Based on the design outcome and insights gathered 

from the usability test with ING users, the widgets 

were found to be useful and encouraged users to visit 

the app more frequently, boosting user engagement. 

As a result, ING's product development team invited the 

team to present our project at the ING Global Designers 

Meet-Up at the ING Cedar office in Amsterdam.

Taking a selfie with my colleagues

Myself and my team - for this project.

A group picture after the event

A random picture I took during the event - Of myself and my team on the slides

Some Pictures from the ING Global Designers Event at ING Headquarters 

Design Process

Project Timeline

Discover (Week 1-2)


Research Explorations 

(Benchmark Creations - Widgets on sustainability

Project Debriefing

Research on "Models of Behavioural change"

Research on Widget Design Best Practices

User Interviews


Define (Week 3-4)


Defining Target Group 

Defining Intricate Layers of the Target Group

Personas

User Journey Maps 


Develop (Week 5-6)


Ideation (Crazy 8 Sketches)

Wireframing

Prototyping

Drafting Research Test Plan

User Testing (Interviews via Team App) 


Deliver (Week 7-8)


Sorting of Test Insights 

Preparation of Project Presentation slides

MDD presentation

Empathy Map 

Prototype iteration 1

Experts Review

Prototype iteration 2

ING Global Presentation 

Recommendations for ING

Project Overview

ING Design Challenge

“How might we facilitate behavioural change to achieve financial 

and environmental sustainability amongst ING customers using 

various widgets and bring each ING user one level up in the 

sustainability pyramid?" 

ING Financial Health Pyramid  

Created by ING in collaboration with NIBUD and Deloitte.

The target group for this project are users in the ‘day-to-day’ 

and ‘resilience’ levels, on the financial health pyramid above.

What Users Think 

Interviews were conducted with 10 people (ages 17-57 years) 

who use any kind of banking app in the Netherlands.

To understand users financial situation and behaviour towards sustainability.  

How the design challenge was redefined based on the research findings

“How might we facilitate behavioural change to achieve 

financial sustainability amongst ING customers using 

various widgets and bring each ING user one level up 

in the sustainability pyramid?" 

Usability Test Insights 

To understand user's interactions and determine the IMPACT of these WIDGET DESIGNS, 

a usability test was carried out with 12 participants (6 workers and 6 students). 

Impact of the Designed Widgets (On Users)

Personas; User Journey Maps; Sketches 

To maintain conciseness 3 other personas, user journey maps, 

and sketches can be found in the Case Study File. Click Here to view.

4 User Personas

Here are the 4 user personas initially considered for this project, 

which were eventually narrowed down to one persona.

Narrowing Down the 4 Personas (User groups) into 1 User group

Due to time constraints during the execution of this design project, 

we narrowed the four personas down to one. We chose to continue 

with the 'Financially Unstable Worker' persona because our initial 

user research, which spanned across all four user groups, indicated 

potential for improving the financial health of this particular group.

User Persona

User Journey Map

Sketches

This is one, out of the Sketches, made during the Ideation phase of this project.

These are the sketches for the persona - Financially Unstable, Worker.

Hi-Fidelity Iterations (v1 & v2)

Below are the 1st iterations made to the designs. The 2nd iteration (V2) can be seen above the page - Final Outputs.

Models and Design Canvases explored/used 

The Assumption Finder canvas was used in the first stage of ideation 

to identify potential biases the team may have had regarding the design challenge, 

after reviewing the design brief and insights from the debriefing meeting with the ING team. 

The Behavioural Lenses canvas was used at the mid-stage of the project, 

before designing the high-fidelity wireframes, to review the designs 

and brainstorm ideas to address the five key areas identified in the 

five behavioural lenses - To improve the design outputs.

My reflection and what next - Possible Implementation

testing the accessibility of the designs to accommodate users 

with special needs, ensuring inclusivity for minority groups.


would reconsider their trust in the bank regarding environmental sustainability. 

To explore this, I would create low-fidelity designs of widgets specifically focused on 

this aspect and conduct tests to gather user insights.


rates for each feature following the initial launch of the widgets in the ING App. 

This approach ensures we stay attuned to user needs and address them effectively, 

recognizing their direct impact on user engagement metrics.

Recommendations to the Client (ING)

Recommendations given to ING Product Team, at the end of this design project: 


instead of selecting specific widgets for the user.

their interest in this feature during the Usability Testing (6 test participants).

Client

ING Bank

Project duration

8 Weeks

Impact of the project

Presentation of the project at the ING Global Designers Meet-Up at ING Cedar office, Amsterdam.

Case study

Click here for full details on this project and the documentation of my design process.

Click here.

Beyond the Project - Building the Design System

After the project ended, I further developed and organized the design system using Figma. 

In a bid to explore and implement the Atomic Design System model.

Click Here to view it.