Platform
Duration
The challenge
The aim of the web learning pages is to provide financial literacy content for a Gen Z audience as part of a wider strategy to empower youth customers to better understand financial topics and make informed financial decisions.
The web learning pages form an MVP for future learning features both online and in-app as part of the TSB 16-18 Youth Bank Proposition with the aim of improving youth financial literacy.
The goal
Under 19 accounts are currently declining 5% year-on-year, although not an immediate risk due to the business, could have lasting repercussions. Data indicates that customers who open accounts before the age of 19 tend to be among our most active customers in adulthood, a trend supported by secondary research highlighting the loyalty of customers to accounts they opened in their youth. The web learning pages are an integral part of our broader objectives:
-
Increase the main banker/super active population among 16-18 year old.
-
Build on the strong desire among young customers to learn and understand banking literacy, a crucial step toward achieving money confidence.
Approach
I collaborated with the Responsible Business team, who were already conducting in-class financial literacy sessions in secondary schools throughout the UK, I transformed the existing content into easily accessible webpages. Our prior research within the broader 16-18 Youth Proposition had pinpointed crucial gaps in financial knowledge. This research guided the customisation of in-class content to cater to user needs. By utilising the existing materials, we efficiently developed a quick-win MVP, representing the initial phase of our youth proposition. This approach helped minimize both development time and costs.
Hypothesis
I went into this project believing that young people aged between 16 to 18 will value a youth account that helps them learn about practical financial tips and tricks to better manage their money. Several assumptions were made, including that these individuals would find value in:
-
Learning effective ways to organise their finances
-
Gaining knowledge about recognising and avoiding scams and fraud
-
Understanding borrowing and its implications- Receiving guidance on the role of insurance in safeguarding their budget from unexpected costs
-
Exploring financial topics not typically covered by their parents, such as investments and credit building.
Gathering insights
To validate my initial hypothesis, I conducted comprehensive research using both qualitative and quantitative data through various channels. This included gathering insights from secondary sources, research agencies, online surveys targeting both youth and parents, one-on-one video call interviews, and in-person co-creation sessions with our young users. This research was also used as part of a wider youth proposition project.
Deloitte - GenZ: Rewriting the rules of the future
Secondary research helped provide initial insights into youth's desire to learn.
.jpg)
LadNation - Accounting preferences for young adults
Research completed in conjunction with LadNation highlighted 16-17 year olds desire for their bank to help them improve their financial literacy. Ranking the topic as the number one most important feature from their bank account.


Manyone - U19 Banking Experience
Research completed in conjunction with design consultancy Manyone highlighted the unpreparedness of youth as they start to manage their money. The goal of the MVP would be the first step to tackling this challenge.

Parent survey - Parents view of their 16-18 year old's finances
This research highlighted the appetite for banks to help parents support their teens with a range of financial literacy topics. It also provided an understanding of the type of the content they felt they needed to know about.
.jpg)

Video call one-to-one interviews and in-person co-creation sessions
I also spent time understanding their financial literacy needs as part of qualitative online one-to-one interviews and in-person co-creation sessions. The research provided key insights into the areas youth lacked knowledge.

.png)
.png)
Findings
The research highlighted a demand from both young individuals and their parents for financial institutions to take an active role in enhancing financial literacy among youth. Interestingly, the findings revealed a disparity in perceived knowledge of financial topics, with budgeting standing out as a significant point of contention. While the youth expressed confidence in their budgeting skills, parents identified it as the top area where their children needed guidance.
Despite the youthful self-assurance in a few financial aspects, it was evident that, beyond budgeting and saving, they had limited confidence and a strong eagerness to expand their knowledge. A participant's statement encapsulated this sentiment perfectly: "We don't know what we don't know."
In response to these findings, I decided to prioritise the development of webpages focusing on the following financial topics:
-
Budgeting
-
Saving and Investing
-
Borrowing
-
Avoiding Fraud
-
Independent Living
These topics were chosen to address the needs of both the youth and their parents effectively.
Ideation, sketching and wireframing
When conceptualising the content layout and information structure, I explored two distinct approaches, which I termed 'modular' and 'scrolling.'
The 'modular' approach would break down the content into a glossary-like format, dividing it into multiple topics. This method involved a top-level contents page and numerous second-level pages for specific financial topics.
On the other hand, the 'scrolling' approach focused on grouping related information together, reducing the number of pages required. The top-level page still served as a contents page, directing users to broader topic themes rather than specific topics. Ultimately, I chose the 'scrolling' approach. It aligned well with existing classroom materials and accommodated the idea that youth might not always know what they're searching for. Presenting content by themes offered a holistic learning opportunity, enabling users to explore areas rather than specific topics.
However, as the content continues to expand, I recognise the potential value in incorporating a glossary-style menu in the future.
Modular

.jpg)
Scrolling

Userflow
The decision to adopt the 'scrolling' approach significantly influences the user flow. By grouping complementary information and presenting it under thematic content categories, I streamlined the user's journey through the webpages. Users start at the top-level contents page, offering them a gateway to explore overarching financial themes, rather than navigating numerous individual topics. This approach not only simplifies navigation but also caters to the users' potential uncertainty about specific financial terminology, ensuring they can access relevant knowledge without prior in-depth understanding. As users delve into a specific theme, they can seamlessly scroll through related content, reducing the need for constant page navigation.
The sitemap for the web learning pages was defined based on initial content research insights and subsequently evaluated through UserZoom with potential users. To enhance content discoverability, I strategically integrated it within our existing Money Confidence pages and established direct links from the Under 19 account pages.

Design and illustration system
I designed the webpages by incorporating our existing company design and illustration system, making the process smooth and straightforward. This allowed for a consistent look and feel, ensuring a user-friendly experience without any major overhauls.

Prototype
Everything was finally sewn together! The webpages aren't live yet so take a look at the prototype in Invision.






User testing
To quantitatively review the usability assumptions, I conducted a series of recorded usability tests in which participants were tasked with navigating the webpages and completing designated assignments while vocalizing their decision-making processes and thoughts. I organised the usability tests through UserZoom for a streamlined and structured evaluation process.

.jpg)
Usability findings
Insight #1
Enhancing engagement through interactive features
In my original plan, I considered the inclusion of games and quizzes on multiple pages to enhance user engagement. However, in the prototype this was restricted to just the pages on fraud, utilising an existing quiz to save time. While our participants couldn't actively participate in the interactive element during usability testing, they expressed a positive inclination towards the idea and were draw to and tried to click on the quiz to take part. Their feedback suggests that incorporating such features could potentially elevate user engagement, offering an exciting avenue for further exploration.
Insight #2
More demand for credit score information
Our prior research highlighted a keen interest in understanding credit scores. In user testing, participants found the provided credit score information beneficial, yet they expressed a desire for more in-depth details. The possibility of linking to existing credit score webpages could have addressed this need effectively. Alternatively, expanding this information onto a dedicated page presents another avenue to provide users with comprehensive insights into credit scores.

Insight #3
Navigation suggestions for tax information
During testing, participants encountered some difficulty in locating tax information as it was not readily accessible in the main summary navigation, but rather within the independent living pages. Almost everyone managed to find it (with the exception of one), though some suggested that placing it under "What are my expenses" might provide a more intuitive solution, potentially resolving this navigational challenge.
Insight #4
More educational content on fraud
Some participants noted that the fraud page seemed to offer less educational content compared to the other pages, resulting in the lowest usefulness score at 64%. Their feedback indicated a desire for more comprehensive information on avoiding various types of fraud and the inclusion of relevant statistics. These insights highlight an opportunity for future iterations to enrich the content and address this user preference for more in-depth coverage of fraud prevention.
Insight #5
Tiny the mascot illustration doesn't feel grown-up
The illustration of Tiny (TSB's current brand mascot) received mixed feedback during testing, with some perceiving it as childish, while others appreciated it. It may be worthwhile to reconsider the illustration to explore how it could be adapted to convey a more mature and grown-up aesthetic, or reducing the amount it is used across these pages.
Insight #6
Users didn't like the photography used
Certain photos in the content raised concerns regarding their appropriateness. A simple solution would involve procuring more suitable images to ensure alignment with the intended tone and messaging.
Output
Moving forward, my primary focus is to optimize the webpages for the best possible user experience while considering the business demands and the current capabilities of this MVP iteration. Based on usability testing feedback, I plan to enhance our content related to credit scores, tax information, and fraud prevention, ensuring a more informative and valuable experience for users. Furthermore, I'll update the illustration of "Tiny" to present a more mature appearance.
In terms of navigation, I'm exploring the option of relocating tax information to the "What are my expenses" section. While more significant changes like gamification are on the horizon, they'll wait for the next iteration, aligning with what truly adds value to the business. To maintain visual appropriateness, I'll curate more suitable images. These combined efforts aim to create an even more user-friendly and engaging experience, aligning with my goal to equip our audience with essential financial literacy skills. Overall, these webpages fulfil the project brief, marking a firs step within the broader youth proposition.