Case Study
Young Banker's Club
I created a large game-ified eLearning product and custom LMS to teach children financial literacy. Our client, Fifth Third Bank, created the Young Banker's Club, a non-profit program to help empower young investors and help shape the future financial health of the next generation through education. This was an interesting project because I led it end to end, from the Art Direction and Graphic Design, to the UX/UI and product strategy. I also did a large part of the development as well as the animation. We originally had a larger team, but we lost resources due to COVID. I took on multiple hats because this project aligned with my personal values and it was an amazing challenge. This was a multi-launch, 4 year long project creating a brand new product, resulting in 3 awards and wide-spread distribution across the United States.
Client: Fifth Third Bank
My Role: Product Designer, Product Strategy, UI Designer,
Art Director, Graphic Designer, Animator, Developer
​
Team: Steven Barker, Adam Crawford, Shawna Mascarelli,
Ben Carthel, Barry Krusch
​
Tools: Figma, Adobe CC, Moodle, Various IDE's
Context
Fifth Third Bank wanted to create an educational program to teach inner city children in the Midwest financial literacy and applicable math skills. This was to be an in-person, non-profit program where representatives would teach a unit on finance and the kids would take an online test. Originally, this was just supposed to be a basic LMS with an online testing platform.
Problem
There were two problems in this project. The first problem being that COVID forced us to completely change the product strategy surrounding this project. The second problem was that k-8 children didn’t find math and finance interesting. We had a hypothesis that this might be the case, but we confirmed it through classroom interviews with the children.
Solution
We changed the program from an in-person experience to a full online eLearning product. The product included a custom LMS plus 15 game-ified modules covering different types of finance learning. By making these modules more fun and adding achievements in the LMS, we were able to keep the kid’s attention and actually create excitement for math and finance where there was none before.
Impact
I changed the product strategy to be accessible to all k-8 learners across the country. The Young Banker’s Club program is now available to all school districts in the entire United States and is widely used as a part of core curriculum, spreading the Fifth Third Bank name and creating new customers. To this day, I still get mail from the children telling me how much this program has helped them.
This product also won the following awards:
-
Silver winner of a Telly award in the education & training, immersive, interactive, and mixed category.
-
Platinum winner of a Hermes Creative Award in the electronic media/interactive media/web-based training category.
-
Gold winner of an AVA Digital award in Web-based production: training/e-learning.
Product Overview
This project will make more sense if I outline how it works. The students log on to the LMS, which contains all of their grades for the course, assignments, teacher communications, and achievements. From the LMS, they launch the game-ified learning modules.
​
The modules take the users through an animated lecture portion where they are taught the main content of the module. They are then taken to an in-game location that is financially significant and taught about the history and purpose (such as the US Mint, the NY Stock Exchange, or Fort Knox). The game works a lot like Blue's Clues. The user is taken "inside" the financially significant location to look for "Clues", which highlight and make noise when the user hovers over them. Upon clicking the "Clue", the user is taken to a graded exercise. If they pass the exercise, they earn a clue in their tablet interface, where they can also view a glossary of terms that were covered in the lecture portion.
​
If the student passes all of the exercises, they earn a badge for their LMS profile and new avatar options for the next module.
​
There are different user flows and features for each module, but the general flow is the same for all of them. Below is a video recording of the first module to give full context to the functionality.
Step 1 - Requirements Gathering
Once we changed the product strategy and direction, we had to decide what we could do within our limited, non-profit budget. I led a workshop with the client, key stakeholders, product manager, and engineer to determine what we could and couldn't do for our MVP launch. We were unsure if we would have funding after the MVP launch, so we designed the product to be modular and scalable. After our requirements gathering workshop, we left with the following key takeaways.
Key Takeaways
These requirements were established for the MVP launch with the intention of scaling if we were granted more funding. The MVP launch was very high pressure and low budget. The success of the MVP launch would determine whether we got funding for more modules. The MVP launch ended up being a huge success, resulting in 4 years of funding for additional modules and improvements.
LMS needs to be a custom solution using the Moodle framework as a base.
Modules need to be built using Javascript API along with HTML 5 animations.
Needs to be accessible not only for physical disabilities but for neurodivergent students as well.
Needs to have a custom design system for both the modules and the LMS, needs consistent branding
Product manager wants this to be very graphically expressive and engaging for the kids.
Step 2 - User Research
I started with a Competitive analysis, analyzing the FDIC's Money Smart for Young People program. It is a very similar program with lecture, exercises, and an eLearning platform, however, I discovered that they were encountering a lot of similar issues we were encountering. The Young Banker's Club originally launched as an in-person program where representatives would go to classrooms, teach a lecture, then have the children complete a test. I interviewed teachers participating in both programs and found that the students were heavily struggling to remain engaged in the material.
​
I was able to conduct interviews in 4 classrooms participating in the in-person Young Banker's Club program. I interviewed both students and teachers. I was able to launch blind surveys to a few other classes participating in the program. I was given some of the following insights based on that user research.
Zoom interview with 5th grade class
"This is boring."
2nd Grade Student participating in the in-person Young Banker's Club Program
Kids found the material boring and a chore. There were multiple variations of this comment from a large majority of the children.
"This program can feel more like a distruption than a lesson. The kids don't seem to engage with the material."
Participating 2nd Grade Teacher
Teachers didn’t find much value in the program as it disrupted their curriculum and the kids didn’t seem to engage with the material.
"I don't care [about finance.]"
3rd Grade Student comment from classroom survey.
It was hard to get the children to understand why the material was important and how it could affect their lives in a positive way.
With these insights from our users, we came up with a plan to address these pain points. We created the following design goals.
The LMS needs to include incentives to encourage the kids to finish the coursework.
The module UI should be very straight forward and easy to use and understand for young kids.
Modules need to use game-ification to keep the kids engaged and interested in the material.
The LMS needs to be simple and easy for the teacher to understand, but engaging enough for the kids.
Step 3 - Personas
Child Learner
Motivation
Doesn’t want to do math or finance but does want a good grade and to connect with peers.
​
Behavior
Likely gets distracted or discouraged easily.
​
Pain Points
Doesn’t have very developed math skills yet. Needs motivation to learn.
​
Design Consideration
Needs a fun, engaging experience that is appropriate for their age group that is effective in teaching math and finance skills in a natural way.
Teacher
Motivation
Wants to teach the students math and finance skills.
Behavior
Helps the kids with questions and learning. Does not want to deal with a complex grading system.
​
Pain Points
Does not have access to a lot of time or resources. Needs a way to teach the material outside of class and discuss in class.
​
Design Consideration
Needs easy access to the kids’ scores, their questions, and their progress.
Parent
Motivation
Wants their child to learn financial literacy and get good grades. Doesn’t want it to be a struggle.
​
Behavior
Likely helps child problem solve and explains real world finance problems to their child in context of their learning.
​
Pain Points
Does not have a lot of time to invest in learning new software.
​
Design Consideration
Needs an easy way to communicate with the teacher, see their child’s grades, and track their child’s progress.
Step 4 - Process
Design System
I created two design systems. One for the LMS and another for the learning modules. We needed both design systems to be scalable so we could use them for future iterations and new content over time.
Wireframes
I created wireframes of every interactive interface. At this point, normally I would collaborate with the engineer to verify my designs are doable, but I was acting as the engineer so I designed based on what I knew I could finish within our development timeframe. I confirmed the interactions with the client and our product manager before moving on to visual designs.
User Flows
I created user journeys aligning with stakeholders during a live workshop. Once we decided on what lessons we wanted, and features to include, I created user flow charts for the first 3 modules. These outlined the different branching options, functionalities, and exercises the students would go through as they worked their way through the game.
Step 5 - User Testing
I did virtual classroom trials of the first module and LMS prototype with 5 different classes. I had the kids fill out a survey after they completed the module as well as give me any of their general comments or suggestions. I had teachers document where they and the students struggled in both the LMS and the first module. I had parents and teachers complete tasks and navigate through the LMS while I shadowed, taking notes along the way.
Example of exercise before user testing.
Exercise with iterations made based on user feedback.
After collecting the user testing feedback, I decided to make some iterations to address the major concerns. I found that a lot of the children became discouraged and frustrated when they couldn’t figure out an exercise. We created a hint system to help empower the students. If the student idled on the screen for 10 minutes, a hint icon would pop up and give them the opportunity to get a clue to solve the exercise. I also added voiceover on all screens for students who struggled with sight or neurodivergence. If students struggled to find a clue on the clue screen, we made the clue flash and make a noise to help them find it. I also took this opportunity to add the avatar system. Students could now choose an avatar at the beginning of a module that would track their progress throughout the lesson so they could get a better idea of how much they have completed and how much there is left of the module. I added the avatar progress bar to the screen to help motivate the kids and added the ability to unlock newer, cooler avatars at the end of each module.
Step 6 - Final Design
I successfully concluded the visual design engagement by collaborating closely with both the client and our product manager throughout the process, ensuring alignment at every stage and driving the work toward final approval. Over the course of four years, we maintained a consistent, iterative design workflow, partnering across disciplines to deliver a total of 15 fully developed modules. The screenshots below showcase select highlights from the final product. Due to the scope and depth of the work, a comprehensive view of all 15 modules would exceed the constraints of this case study.
LMS Designs
Module Designs
Learnings
I had to do a lot of learning along the way during this project. I had to learn everything from the development hurdles, to the animation errors, to the edge cases within our UX journey. Some things were done backwards, some steps were done retroactively, there were a ton of iterations, and it wasn't perfect, but in the end, we created an award winning program loved by children across the entire United States.
​
Overall, I learned that reality isn't pretty and perfect like a case study on a portfolio might portray. There are bumps along the way. There are stakeholders that need convincing, there are budgets that dry up, there are disagreements, and iterations, and sometimes there are hilarious and smart young users who need a little extra empathy. This project made me learn to loosen up and grow with the punches. In the end, I made something I am incredibly proud of.