Embedded Files
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
Enable Self-Finance Management
Enable Personalized Actions
Prevent Financial Errors
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)
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)
Define (Week 3-4)
Defining Target Group
Defining Intricate Layers of the Target Group
Personas
User Journey Maps
Develop (Week 5-6)
Develop (Week 5-6)
Ideation (Crazy 8 Sketches)
Wireframing
Prototyping
Drafting Research Test Plan
User Testing (Interviews via Team App)
Deliver (Week 7-8)
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
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)
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
Models and Design Canvases explored/used
Behavioural Design Canvas
Riskiest Assumption finder
The Behavioural Lenses
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
My reflection and what next - Possible Implementation
If given additional time on this project, I would prioritize
testing the accessibility of the designs to accommodate users
with special needs, ensuring inclusivity for minority groups.
Furthermore, I'm interested in knowing whether users of ING app
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.
I would conduct additional usability tests and monitor user engagement
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 to the Client (ING)
Recommendations given to ING Product Team, at the end of this design project:
Allow personalization of the widgets of the start screen,
instead of selecting specific widgets for the user.
Further refine and develop monthly budgeting. Most users showed
their interest in this feature during the Usability Testing (6 test participants).
Client
Client
ING Bank
Project duration
Project duration
8 Weeks
Impact of the project
Impact of the project
Presentation of the project at the ING Global Designers Meet-Up at ING Cedar office, Amsterdam.
Case study
Case study
Click here for full details on this project and the documentation of my design process.
Beyond the Project - Building the Design System
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.
Page updated
Google Sites
Report abuse