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.
Design Guiding Principles
Here are the guiding principles for the final outputs. Based on user research and usability test insights gathered.
Ethical considerations are also included in these principles.
Final Outputs
Here are the high-fidelity wireframes of the product delivered to the client at the end of this project.
It 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 on the "Prototype" header at the end of this page.
ONBOARDING SCREENS
User interacts with these screens upon first login into the app after these designs have been implemented.
This is based on the "Top User Benefits model".
Why was this widget 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.
BUDGET WIDGET
User is nudged to set up a budget, as soon as he/she gets paid (salary).
A recommended budget is provided based on the financial situation and past transactions of the user.
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 WIDGET
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 WIDGET
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 WIDGET
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 PAYMENT WIDGET
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.
Design Process
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
(ING in collaboration with NIBUD and Deloitte)
The target group for this project are those in the ‘day-to-day’ and ‘resilience’ levels in this financial health pyramid.
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 users interactions and get their perspective on the "usefulness" of these widgets.
A usability test was carried out with 12 participants (6 workers and 6 students).
User Journey Maps; Sketches; Hi-Fi Iterations (v1 & v2)
To maintain conciseness, these can be found in the Case Study File. Click Here to view.
Models and Design Canvases explored/used
Behavioural Design Canvas
Riskiest Assumption finder
The Behavioural Lenses
What I would have loved to implement/explore
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 the 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.
Recommendations to the Client (ING)
Here are the recommendations given to ING 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. Interest from a decent number of users (6 test participants).
Some Pictures from the ING Global Designers Event at ING Headquarters
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
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.
Prototype
Interact with the full prototype here.